/* ============================================================
   Conviu CRM v2 — UI structure (a replica of the Capsule CRM look)
   Components per docs/UI-ZASADY.md. NO COLOURS ARE HARD-CODED HERE —
   they come from the tokens defined by the active skin (public/skins/*.css).
   See src/web/skins.ts.
   ============================================================ */

/* Web fonts: Inter (UI/body), Poppins (headings/brand), JetBrains Mono (code/IDs).
   SELF-HOSTED (offline operation, no render-blocking external @import): @font-face lives in
   public/fonts.css (latin + latin-ext, font-display: swap), which the page loads with a <link>
   in <head> (see src/web/head.tsx); the files are public/fonts/*.woff2. */

:root {
  /* Colours on a solid colour (buttons, badges, the user-switch banner) — defaults for all skins; a skin may
       override them (UI-ZASADY §2). The solid backgrounds themselves (`--accent-solid`, `--teal-solid`, … with their
       hover shades) come from the skin: each keeps at least 4.5:1 with `--on-solid` (scripts/check-contrast.mjs). */
  --on-solid: #fff;
  --on-solid-line: rgba(255, 255, 255, .4);
  --on-solid-border: rgba(255, 255, 255, .6);
  /* a button on a solid banner is a darker shade of it — a white tint took the white text below 4.5:1 */
  --on-solid-fill: rgba(0, 0, 0, .15);
  --on-solid-fill-hover: rgba(0, 0, 0, .28);
  --radius: 12px;
  --radius-sm: 8px;
  font-size: 16px;
  /* Fonts — a single source of truth (change them only here) */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Poppins", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
  /* Content spacing below the unified toolbar (listing, board) — one rhythm for all agendas (KOMPONENTY §53) */
  --lista-odstup: 1rem;

  /* ---------- Scales (UI-ZASADY §3b, ADR 0059) ----------
     Two tiers: SCALE tokens (`--space-*`, `--text-*`, `--radius-*`, `--shadow-*`, `--icon-*`) hold the steps every size
     is chosen from; ROLE tokens (`--font-size-*`, `--control-*`, `--focus-*`) name a place in the UI and point at a
     step. A component never writes a new number — `scripts/check-scale.mjs` refuses it (the numbers written before
     stage 1 are counted in `scripts/scale-baseline.json` and may only go down). Stage 3b (Petr approved the preview
     16 Oct 2026: „nové styly jsou OK“) points the roles at the Untitled UI steps: every type role has a line-height
     twin (`--line-height-*`), the pills and the count badge have their heights (`--chip-*`, `--badge`). */

  /* Spacing — a 4 px grid with 2 px half-steps (decision O1 = A); the number = multiples of 4 px */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Type — the Untitled UI scale (decision O2 = B), each size paired with its line height */
  --text-xs: 12px;     --leading-xs: 18px;
  --text-sm: 14px;     --leading-sm: 20px;
  --text-md: 16px;     --leading-md: 24px;
  --text-lg: 18px;     --leading-lg: 28px;
  --text-xl: 20px;     --leading-xl: 30px;
  --display-xs: 24px;  --leading-display-xs: 32px;
  --display-sm: 30px;  --leading-display-sm: 38px;
  /* Type roles (UI-ZASADY §3) — each size with the line height of its pair (a rule that sets `font-size: var(--font-size-x)`
     sets `line-height: var(--line-height-x)` too) */
  --font-size-page-title: var(--display-xs);    --line-height-page-title: var(--leading-display-xs);   /* h1 of a page (24) */
  --font-size-record-title: var(--display-xs);  --line-height-record-title: var(--leading-display-xs); /* name of a record */
  --font-size-modal-title: var(--text-lg);      --line-height-modal-title: var(--leading-lg);         /* `.modal-card h3` */
  --font-size-card-title: var(--text-md);       --line-height-card-title: var(--leading-md);          /* `.card-head h3` */
  --font-size-subtitle: var(--text-sm);         --line-height-subtitle: var(--leading-sm);            /* `.section-title` */
  --font-size-body: var(--text-sm);             --line-height-body: var(--leading-sm);                /* text of a row and of the body */
  --font-size-secondary: var(--text-sm);        --line-height-secondary: var(--leading-sm);           /* the grey second line `.sub` (14) */
  --font-size-meta: var(--text-xs);             --line-height-meta: var(--leading-xs);                /* small details on a kanban card (12) */
  --font-size-control: var(--text-sm);          --line-height-control: var(--leading-sm);             /* `.btn-sm`, `.input`, the bar controls */
  --font-size-label: var(--text-xs);            --line-height-label: var(--leading-xs);               /* `.field-label`, `.meta-lbl` */
  --font-size-chip: var(--text-xs);             --line-height-chip: var(--leading-xs);                /* `.chip` */
  --font-size-chip-sm: var(--text-xs);          --line-height-chip-sm: var(--leading-xs);             /* `.cat`, the small pills */

  /* Corners — `--radius` (12) and `--radius-sm` (8) above stay as they are */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 999px;

  /* Shadows — the five steps of the research (§3.4); `--shadow-color` comes from the skin. The window and the toast use
     `--shadow-lg` (stage 3b); the remaining own shadows move onto the steps in stage 2. */
  --shadow-xs: 0 1px 2px rgba(var(--shadow-color), .05);
  --shadow-sm: 0 2px 8px rgba(var(--shadow-color), .15);
  --shadow-md: 0 10px 30px rgba(var(--shadow-color), .12);
  --shadow-lg: 0 14px 40px rgba(var(--shadow-color), .16);
  --shadow-xl: 0 24px 64px rgba(var(--shadow-color), .20);

  /* Heights of the controls (roles, decision O3): a field and a button of one size are equally tall; a class never
     changes its height by its place */
  --control-icon: 26px;   /* `.icon-btn` in rows (touch area `--touch-target`) */
  --control-sm: 32px;     /* `.btn-sm`, `.input-sm`, pills above a listing, the view switch */
  --control-md: 36px;     /* `.btn`, `.input`, the bar controls (filters, timer, Share), the search */
  --control-lg: 40px;     /* module icon in the bar, the task name field */
  --touch-target: 44px;
  /* Pills (decision O4 = A): one way of building — `inline-flex`, centred, the height from the token, type 12 / 18 */
  --chip-sm: 20px;        /* `.cat`, the record type, `+N`, counts, subtasks, „waits“, roles in the team */
  --chip-md: 24px;        /* `.chip`, `.chip-x` */
  --chip-lg: 28px;        /* the toggle label `.chip-toggle` */
  --badge: 18px;          /* the count badge (`.notif-badge`, `.fbtn .pocet`, the cross of `.chip-x`) */

  /* Icons — six sizes; the stroke follows the size so a line is about 1.5 px (10 → 3.6, 12 → 3, 14 → 2.5, 16 → 2.25,
     18 and 20 → 2; `Svg` in src/web/icons.tsx and every `svg { width }` here). `--icon-2xs` only for a small icon beside
     12 px text (the task card's footer — ADR 0059 addendum, spec karta-ukolu-v2 §15.9 point 7) */
  --icon-2xs: 10px;
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 18px;
  --icon-xl: 20px;

  /* Keyboard focus — one ring; a skin may override the colour (high contrast) */
  --focus-ring: var(--accent);
  --focus-width: 2px;
  --focus-offset: 2px;
  /* the double ring of a checkbox and a radio (catalogue §16c, §81): a soft ring and the accent ring outside it */
  --focus-ring-double: 0 0 0 var(--space-0-5) var(--accent-soft), 0 0 0 var(--space-1) var(--accent);

  /* The underline of a text link `.odkaz` (catalogue §80) and of a link inside a sentence */
  --underline-width: 1px;
  --underline-width-hover: 2px;
  --underline-offset: 3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--font-size-body);            /* 14px body */
  line-height: var(--line-height-body);        /* 20px — the pair of 14 */
}
/* Headings/brand = Poppins; code/IDs = JetBrains Mono */
h1, h2, h3, .record-name, .field-strong { font-family: var(--font-head); }
code, kbd, samp, pre, .mono { font-family: var(--font-mono); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 0 var(--space-5); height: 60px;
  position: sticky; top: 0; z-index: 50;
}
/* Two "rows" of the bar (`.tb-row--nav` = modules + bell + avatar, `.tb-row--tools` = search
   and Add). On a wide window they **dissolve**: `display: contents` turns their content into direct
   items of the bar and `order` below keeps the visual order — one row as before. Only on a phone
   (≤ 560 px) do they become two real bars. Thanks to this nothing is in the DOM twice. */
.tb-row { display: contents; }
.nav-icons { display: flex; gap: var(--space-1); order: 1; }
.nico {
  display: grid; place-items: center;
  width: var(--control-lg); height: var(--control-lg); border-radius: var(--radius-10);
  color: var(--muted);
}
.nico:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
.nico.active { background: var(--surface-2); color: var(--ink); }
/* a module that is not built yet: only a faded icon (no text; its name is in the tooltip and aria-label) */
.nico-pripravujeme { opacity: .4; cursor: default; }
.search {
  /* `min-width: 0` is required: a `type=search` field has its own intrinsic minimum width and without
       this it would not shrink at 320 px and would push the Add button off the screen. */
  flex: 1; min-width: 0; max-width: 560px; margin: 0 auto; order: 2;
  display: flex; align-items: center; gap: .6rem;
  background: var(--surface-2); border-radius: var(--radius-10);
  padding: 0 .9rem; height: var(--control-md); color: var(--muted);
}
.search-input {
  flex: 1; min-width: 0; background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
}
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-input:disabled { cursor: default; }

/* ---------- Search in the top bar (KOMPONENTY §65, spec `vyhledavani-v1.md` §2) ----------
   The wrapper takes the place of the former `.search` in the bar (order 2, at most 560 px in the middle); the field and
   its menu are **one element** on a desktop and on a phone, only laid out differently (below 720 px the open search
   covers the whole screen). The menu has **no inner scrollbar** — the server sends only as many items as fit. */
.hledani { position: relative; flex: 1; min-width: 0; max-width: 560px; margin: 0 auto; order: 2; }
.hledani-hlava { display: flex; align-items: center; gap: .4rem; }
.hledani .search { flex: 1; max-width: none; margin: 0; }
.hledani.open .search, .hledani .search:focus-within { box-shadow: 0 0 0 2px var(--accent); background: var(--card); }
.hledani .search-input { color: var(--ink); }
.hledani .search-input:focus { outline: none; }
.hledani .search-input::-webkit-search-cancel-button { display: none; }
/* `.icon-btn` is drawn later in the file — the wrapper makes these two win: only the phone layer shows them */
.hledani .hledani-zpet, .hledani .hledani-smazat { display: none; }
/* the visible shortcut inside the field and in the line of shortcuts */
.hledani kbd, .hledani-napoveda kbd {
  font-size: var(--text-xs); line-height: 1; color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: .18rem .38rem; white-space: nowrap;
}
.hledani-zkratka { flex: none; }
.hledani.open .hledani-zkratka, .hledani .search:focus-within .hledani-zkratka { display: none; }
.hledani-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 480px; z-index: 60;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-12); padding: .4rem;
  box-shadow: var(--shadow-lg);
}
.hledani.open .hledani-panel:not(:empty) { display: block; }
/* a narrow bar (721–1100 px, the module icons take the room) keeps the field for typing — the shortcut works without
   the hint */
@media (min-width: 721px) and (max-width: 1100px) {
  .hledani-zkratka { display: none; }
  /* the field is narrow here and need not stand in the middle — the menu stands under the bar in the middle of the
     window, as wide as fits (it must not run off the screen) */
  .hledani-panel {
    position: fixed; top: 64px; left: 50%; right: auto; transform: translateX(-50%);
    min-width: 0; width: min(560px, calc(100vw - 2rem));
  }
}
.hledani-skupina {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: var(--space-2) .6rem .2rem;
  font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.hledani-skupina .pocet { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 500; text-transform: none; letter-spacing: 0; }
.hledani-skupina .btn-ghost {
  height: auto; padding: .1rem .2rem; font-size: var(--text-xs); line-height: var(--leading-xs); text-transform: none; letter-spacing: 0; font-weight: 600;
}
/* a row of the menu: the icon 32 px (circle or square, catalogue §3), 2 px less between the rows than with the former
   26 px icon, so the menu keeps about its height (Petr 9 Oct 2026: „nepatrně zmenšit mezeru mezi výsledky (třeba -2px)“) */
.hledani-opt {
  display: flex; align-items: center; gap: .65rem; min-height: 40px; padding: calc(.35rem - 1px) .6rem; border-radius: var(--radius-8);
  color: var(--ink); text-decoration: none;
}
button.hledani-opt { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.hledani-opt:hover { background: var(--hover); text-decoration: none; }
.hledani-opt[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.hledani-opt:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
.hledani-ico {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--muted);
}
.hledani-ico svg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 2; }
.hledani-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.hledani-nm { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hledani-txt .sub { font-size: var(--text-xs); line-height: var(--leading-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the match is **bold** — never only a colour (spec §2.3) */
.shoda { font-weight: 750; color: var(--ink); }
/* in the name of a listing row (a semibold link) bold alone would not show and an underline would look like the link —
   the match there gets a soft background (spec hledani-v-agendach-v1 §2.2, catalogue §53 bod 10) */
.nm .shoda, .nazev-zaznamu .shoda, .kcard-title .shoda { background: var(--accent-soft); border-radius: 3px; padding: 0 1px; }
/* a match on a coloured chip (a task label, a tag) keeps the chip's own text colour; the chip is semibold already, so
   the match is underlined too (a chip is no link) */
.cat .shoda, .chip .shoda { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* „why“ on a Kanban card: a line of its own under the meta, it may wrap (spec hledani-v-agendach-v1 §2.6) */
.kcard-proc { margin-top: .3rem; font-size: var(--text-xs); line-height: var(--leading-xs); overflow-wrap: anywhere; }
/* the buttons of „nothing found“ in an agenda (spec hledani-v-agendach-v1 §6) — they wrap, centred */
.hledani-agenda-akce { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.hledani-druh { flex: none; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
.hledani-opt .chip { flex: none; }
.hledani-vse {
  justify-content: space-between; margin-top: .3rem; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-8) var(--radius-8);
  color: var(--accent); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600;
}
.hledani-vse .pocet { color: var(--muted); font-weight: 500; }
.hledani-priklady { margin: var(--space-2) .6rem var(--space-1); font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-sm); }
.hledani-prazdne { margin: var(--space-2) .6rem 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
.hledani-nic { padding: .6rem .6rem .35rem; }
.hledani-nic p { margin: 0 0 .2rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
.hledani-nic .rada { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.hledani-zalozit { color: var(--accent); font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-sm); }
.hledani-zalozit .hledani-ico { background: var(--accent-soft); color: var(--accent); }
.hledani-napoveda {
  display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .35rem; padding: var(--space-2) .6rem .2rem;
  border-top: 1px solid var(--line); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted);
}
.hledani-ohlas {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* ended (done, cancelled…): toned down as §62 (the band + grey text), the status chip in words */
.hledani-opt.je-neaktivni { color: var(--muted); box-shadow: none; }
.hledani-opt.je-neaktivni[aria-selected="true"] { background: var(--inactive-bg); box-shadow: inset 3px 0 0 var(--accent); }

/* the page of all results (spec §2.5) */
.vysledky-hlava { margin: 0 0 .2rem; }
.vysledky-sub { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); margin: var(--space-1) 0 .6rem; }
.vysledky-vic { padding: .7rem var(--space-5) .9rem; font-size: var(--text-sm); line-height: var(--leading-sm); border-top: 1px solid var(--line); margin: 0; }
.tbl .r-hlavni .sub { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); }
.vysledek-nm { font-weight: 500; }
/* §65 point 10: one grid for every table of the page — the same widths for all kinds (fixed layout above 560 px) */
.vysledky-mrizka .m-nazev { width: 34%; }
.vysledky-mrizka .m-patri { width: 22%; }
.vysledky-mrizka .m-stav { width: 14%; }
.vysledky-mrizka .m-kdo { width: 14%; }
.vysledky-mrizka .m-udaj { width: 16%; }
.vysledky-mrizka td { overflow-wrap: anywhere; }

/* the phone: search over the whole screen (spec §2.4) — the same element, laid out differently */
@media (max-width: 720px) {
  .hledani { order: 0; margin: 0; max-width: none; }
  .hledani-zkratka { display: none; }
  .hledani.open {
    position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: var(--card);
    padding: .55rem .7rem var(--space-4); overflow-y: auto;
  }
  .hledani.open .hledani-zpet { display: inline-grid; flex: none; }
  .hledani.open .hledani-smazat:not([hidden]) { display: inline-grid; width: 28px; height: 28px; }
  .hledani.open .search { height: 44px; }
  .hledani.open .hledani-panel {
    position: static; min-width: 0; border: 0; box-shadow: none; padding: .35rem 0 0; margin-top: .45rem; background: none;
  }
  .hledani-opt { min-height: 48px; }
  .hledani-napoveda { display: none; }
  /* the page under the layer does not scroll */
  body.hledani-otevreno { overflow: hidden; }
  /* the second bar is its own layer (z-index 40) — while the search covers the screen it must lie above the sticky
     first bar too, or the bar would paint over the field */
  body.hledani-otevreno .tb-row--tools { z-index: 210; }
}
/* "Přidat" (Add) comes after the avatar in the DOM (it belongs to the second row) but visually before the
   bell — hence `order`. `margin-left: auto` on it (and not on `.top-right`) keeps Add + bell + avatar
   together at the right edge; if `.top-right` took the free space, Add would come loose. */
#addMenu { order: 3; margin-left: auto; }
.top-right { display: flex; align-items: center; gap: var(--space-4); order: 4; }
.user { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.uname { display: flex; flex-direction: column; line-height: var(--leading-sm); font-weight: 600; font-size: var(--text-sm); }
.uname small { font-weight: 400; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); }

/* ---------- Page ---------- */
.page { max-width: 1400px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-16); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
h1 { font-size: var(--font-size-page-title); line-height: var(--line-height-page-title); font-weight: 650; margin: 0; letter-spacing: -.01em; }
.page-actions { display: flex; gap: .6rem; align-items: center; }
.date-line { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); margin-bottom: .35rem; }

.record-name { display: block; font-size: var(--font-size-record-title); font-weight: 650; margin: .45rem 0 .15rem; letter-spacing: -.01em; line-height: var(--line-height-record-title); }
/* a sub-heading inside a card (catalogue §6) — always smaller than the card heading `.card-head h3` (UI-ZASADY §3) */
.section-title { font-size: var(--font-size-subtitle); line-height: var(--line-height-subtitle); font-weight: 650; margin: var(--space-7) 0 var(--space-3); }
.sub { color: var(--muted); font-size: var(--font-size-secondary); line-height: var(--line-height-secondary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-10);
  height: var(--control-md); padding: 0 .95rem;
  font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500; cursor: pointer;
}
.btn:hover { background: var(--hover); text-decoration: none; }
/* Keyboard focus in three forms (UI-ZASADY §3b): a control — a ring off its edge; a field — its border thickened to
   2 px (below at `.input`); an item of a list or a menu — the ring inside, where outside it would be clipped */
.btn:focus-visible, .fpill:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* solid buttons: white text on the skin's `--*-solid` shade (at least 4.5:1); `--accent`, `--red`, `--teal` are for text */
.btn-primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-solid); }
.btn-primary:hover { background: var(--accent-solid-hover); }
.btn-sm { height: var(--control-sm); padding: 0 .7rem; font-size: var(--font-size-control); line-height: var(--line-height-control); border-radius: var(--radius-8); }
.btn-ghost { border: none; background: none; color: var(--accent); padding: 0 .3rem; }
/* the action of an empty state (catalogue §1 and §13, approved 15 Oct 2026 — Petr: „tlačítka pro prázdný stav beru jako
   komponentu“): one step weaker than a real action (`btn-primary`), stronger than the plain `.btn`. Text in the accent
   on its soft background (the pair --accent on --accent-soft is measured by check-contrast in all 7 skins, ≥ 4.5 : 1) */
.btn-soft { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }
.btn-soft:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-danger { color: var(--red); border-color: var(--btn-danger-border); }
.btn-danger:hover { background: var(--red-soft); }
.btn-danger-solid { background: var(--red-solid); border-color: var(--red-solid); color: var(--on-solid); }
.btn-danger-solid:hover { background: var(--red-solid-hover); }
.btn-success-solid { background: var(--teal-solid); border-color: var(--teal-solid); color: var(--on-solid); }
.btn-success-solid:hover { background: var(--teal-solid-hover); }
.btn-split { display: inline-flex; align-items: center; border-left: 1px solid var(--line); margin-left: .55rem; padding-left: .55rem; color: var(--muted); }
.btn-primary .btn-split { border-color: var(--on-solid-line); color: var(--on-solid); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin: var(--space-4) 0 var(--space-5); }
.tab {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--muted); font-weight: 500; padding: .55rem 0; margin-bottom: -1px;
  border-bottom: 3px solid transparent;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.tab .cnt { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
/* The view switch sends a POST (a preference is stored only by a writing action — audit N2), so
   the tab bar contains a <button> inside a <form>. This strips the button look from it; the colour of
   the active one is still handled by .tab.active. */
.tabs form { display: contents; }
button.tab { background: none; border: 0 none; border-bottom: 3px solid transparent; font: inherit; font-weight: 500; cursor: pointer; }

/* ---------- Filter pills ---------- */
.frow { display: flex; gap: .6rem; flex-wrap: wrap; margin: var(--space-1) 0 var(--space-5); }
.fpill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-full);
  height: var(--control-md); padding: 0 .9rem; font-size: var(--font-size-control); line-height: var(--line-height-control); cursor: pointer;
}
.fpill b { font-weight: 600; }
.fpill .chev { display: inline-flex; align-items: center; color: var(--muted); }
a.fpill { text-decoration: none; color: var(--ink); }
.fpill.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* a row of filter pills above the listing (work-record status, performer, task label) */
.fpill-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .9rem; }
.fpill-row .fpill { height: var(--control-sm); padding: 0 .8rem; font-size: var(--text-sm); line-height: var(--leading-sm); }

/* ---------- Cards ---------- */
/* the card of a decision (catalogue §76, approved with the mockup of the services' rights 15 Oct 2026): a white card on
   top of the main column — the text and the buttons of what waits for the viewer's decision */
.karta-vyzvy p { margin: 0 0 var(--space-1-5); }
.karta-vyzvy .form-actions { margin-top: var(--space-3-5); }
/* the table of a customer's services (catalogue §38, spec `rozpocet-sluzby-v1.md` §6.4): Služba · Účtování · Cena ·
   Odpovědná osoba · Rozpočet služby a čerpání · ⋯; on a phone a card (§8b). The usage cell has a bar of at most 12 rem,
   red over the budget. */
.tbl-sluzby td { vertical-align: top; }
.tbl-sluzby th:first-child { width: 28%; }
.tbl-sluzby th:nth-child(5) { width: 24%; }
.tbl-sluzby .person-row { padding: 0; }
.sluzba-cerpani > .progress { display: block; max-width: 12rem; margin-top: var(--space-1); }
.sluzba-cerpani > .progress.je-precerpano i { background: var(--red); }
/* the bullets of the „Rozpočet hodin“ card (spec §6.1, UI-ZASADY §6a rule 4): the sentences and the composition as lists */
.karta-odrazky { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.karta-odrazky + .karta-odrazky { margin-top: var(--space-1); }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem var(--space-5);
}
.card + .card { margin-top: var(--space-4); }
/* a card of settings in Administration (Moduly, Organizace): one width for all of them, also with a table (catalogue §6) */
.card.card-nastaveni { max-width: 560px; }
/* the same rhythm when the next card stands in a wrapper (a live zone such as „Dosavadní importy“, catalogue §6) */
.card + :has(> .card:first-child) { margin-top: var(--space-4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: .9rem; }
/* the action of a card heading keeps one line on a phone — the heading wraps instead (catalogue §6) */
.card-head > .btn, .card-head > form { flex: none; }
.card-head > .btn, .card-head > form > .btn { white-space: nowrap; }
/* the heading of a card or section: h3 in a record, h2 where the page outline needs it (Administration → Plán) —
   one look either way (UI-ZASADY §3) */
.card-head h2, .card-head h3 { font-size: var(--font-size-card-title); line-height: var(--line-height-card-title); font-weight: 650; margin: 0; }
/* A table card with a heading (catalogue §6/§8): the heading has the card's own padding and a line separates it from
   the table; the toolbar and its chip row inside such a card get the same side padding. */
.card.card-table > .card-head { margin: 0; padding: 1.1rem var(--space-5) .9rem; border-bottom: 1px solid var(--line); }
.card-table > .lista, .card-table > .aktivni { padding: 0 var(--space-5); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center;
  background: var(--chip-bg); color: var(--ink);
  height: var(--chip-md); border-radius: var(--radius-full); padding: 0 .66rem;
  font-size: var(--font-size-chip); line-height: var(--line-height-chip); font-weight: 500; white-space: nowrap;
}
.chip-soft-teal { background: var(--teal-soft); color: var(--teal-ink); }
.chip-soft-gray { background: var(--chip-bg); color: var(--muted); }
/* „odstraněno“ after the remembered name of a removed record (§2, `RemovedChip`): its sentence for a screen reader is a hidden
   text (`.sr-only`, absolute) — it stays inside the chip, never widens the page */
.chip-odstraneno { position: relative; }
/* the list of a task in its row (§11, queue no. 33): a long name of a list wraps (§2, a pill with a long name) instead of
   widening the row on a phone */
.chip-seznam { height: auto; min-height: var(--chip-md); white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.chip-soft-orange { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.chip-soft-yellow { background: var(--chip-yellow-bg); color: var(--chip-yellow-ink); } /* due today or tomorrow (§11b) */
.chip-soft-red { background: var(--red-soft); color: var(--red); }
.chip-soft-dark { background: var(--chip-dark-bg); color: var(--chip-dark-ink); }
.chip-soft-pink { background: var(--av-p-bg); color: var(--av-p-ink); }
.chip-soft-indigo { background: var(--accent-soft); color: var(--accent); }
.cat {
  display: inline-flex; align-items: center;
  height: var(--chip-sm); border-radius: var(--radius-6); padding: 0 var(--space-2);
  font-size: var(--font-size-chip-sm); line-height: var(--line-height-chip-sm); font-weight: 600; color: var(--on-solid); white-space: nowrap;
}
/* each colour carries its own text colour, so a chip that is not `.cat` (the toggle below) gets it too */
.cat-teal { background: var(--teal-solid); color: var(--on-solid); }
.cat-pink { background: var(--pink-solid); color: var(--on-solid); }
.cat-red { background: var(--red-solid); color: var(--on-solid); }
.cat-orange { background: var(--orange-solid); color: var(--on-solid); }
.cat-indigo { background: var(--accent-solid); color: var(--on-solid); }
/* dark and grey are not solid colours (on a dark skin they would vanish under white text) — a subtle chip */
.cat-dark { background: var(--chip-dark-bg); color: var(--chip-dark-ink); }
.cat-gray { background: var(--chip-bg); color: var(--muted); }
/* A colour of the palette (spec paleta-barev-v2 §5, catalogue §2): a label `.cat`, a state `.chip` or a toggle chip in a
   colour the user chose. Fill and text come with the colour (`--barva`, `--barva-text` in `style`, set only by
   `paletteStyle`) — the same in every skin; `scripts/check-contrast.mjs` measures all 36 pairs. After `.chip`/`.cat`. */
.barva-palety { background: var(--barva); color: var(--barva-text); }
/* The colour picker (spec paleta-barev-v2 §4, catalogue §11b, §32): 36 circles of 26 px in a grid of 6 columns, two
   blocks of three rows — a hue is a column of its pastel, vivid and dark level. The chosen one: an accent outline and
   a ✓ drawn in the colour's own text colour; „Bez barvy“ (a List item) under the grid. */
.barvy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-1) .6rem .45rem; }
.barvy-blok { display: grid; grid-template-columns: repeat(6, 26px); gap: var(--space-1-5); }
.barva-volba {
  display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--barva); cursor: pointer;
}
.barva-volba input, .barva-bez input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.barva-volba.sel, .barva-volba:has(input:checked), .barva-bez.sel, .barva-bez:has(input:checked) {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.barva-volba.sel::after, .barva-volba:has(input:checked)::after {
  content: ""; width: 5px; height: 10px; margin-top: -2px;
  border: solid var(--barva-text); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.barva-volba:focus-visible, .barva-volba:has(input:focus-visible),
.barva-bez:focus-visible, .barva-bez:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: var(--focus-offset); }
.barva-bez {
  display: inline-flex; align-items: center; gap: .45rem; padding: .1rem .45rem .1rem .1rem; border: 0; border-radius: var(--radius-full);
  background: none; color: var(--ink); font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); cursor: pointer;
}
.barva-bez::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--muted); }
.chips { display: flex; gap: .35rem; flex-wrap: wrap; }
/* Multi-select of labels (task modal): chip = a toggle with a hidden checkbox.
   On → solid colour (.cat-<colour>); off → outline (higher specificity beats .cat-*). */
.label-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-toggle {
  display: inline-flex; align-items: center; cursor: pointer; user-select: none;
  height: var(--chip-lg); padding: 0 .65rem; border-radius: var(--radius-full); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 600; border: 1px solid transparent;
}
.chip-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* The look follows the checkbox itself, so a click shows at once — keyed on `.is-on` alone, a chip ticked in the modal
   stayed grey (nothing toggles the class). `.is-on` from the server only marks the state of the first paint. */
.label-picker .chip-toggle:not(:has(input:checked)) { background: var(--card); color: var(--muted); border-color: var(--line); }
.label-picker .chip-toggle:not(:has(input:checked)):hover { border-color: var(--accent); color: var(--ink); }
.chip-toggle:focus-within { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }

/* ---------- Avatars ---------- */
.av {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: .8rem; font-weight: 650; flex: none;
}
.av-sm { width: 26px; height: 26px; font-size: .65rem; }
.av-lg { width: 72px; height: 72px; font-size: var(--display-xs); line-height: var(--leading-display-xs); }
.av-g { background: var(--av-g-bg); color: var(--av-g-ink); }
.av-p { background: var(--av-p-bg); color: var(--av-p-ink); }
.av-b { background: var(--av-b-bg); color: var(--av-b-ink); }
.av-y { background: var(--av-y-bg); color: var(--av-y-ink); }
.av-i { background: var(--accent-soft); color: var(--accent); }
/* A company's circle carries three letters or digits (`companyInitials`, catalogue §3; spec firma-panel-lide-v1 §7): a
   smaller, slightly tighter font per size, so the widest „WWW“ takes at most 80 % of the circle in every size and keeps
   a margin to its edge (measured in Inter: 26 px .43rem, 32 px .54rem, 36 px .6rem, 40 px .66rem, 48 px .8rem, 72 px
   1.2rem). The bigger sizes are set where their size is set. */
.av.av-3 { font-size: .6rem; font-weight: 600; letter-spacing: -.05em; }
.av-sm.av-3 { font-size: .43rem; }
.av-lg.av-3 { font-size: 1.2rem; }
/* 32 px — the icon at the start of a row of the search menu (the same size as the square `.hledani-ico` of the other
   kinds) and of the breadcrumb (Petr 9 Oct 2026: „kolečka by šla zvětšit na 32px“, „současné je fakt malé“). Two
   initials of a person in the proportion of the 36 px circle, three letters of a company as big as „WWW“ allows. The
   same in a linked row of a modal (`.pripoj-radek`: companies in the person modal, the fixed company at „Nová osoba“,
   people in the company modal) — its Role field is 34 px, so the row does not grow. */
.hledani-opt .av, .drobek .av, .pripoj-radek .av { width: 32px; height: 32px; font-size: .72rem; }
.hledani-opt .av.av-3, .drobek .av.av-3, .pripoj-radek .av.av-3 { font-size: .54rem; }

/* ---------- Table ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650;
  padding: .8rem var(--space-4); border-bottom: 1px solid var(--line);
}
.tbl td { padding: .85rem var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--hover); }
.cell-name { display: flex; align-items: center; gap: var(--space-3); }
.cell-name .nm { font-weight: 600; }
/* the record name in a table row without an avatar (Plán, Import) — the same weight as a name with one */
.tbl td > .nm { font-weight: 600; }
.cell-name .sub { display: block; }
.meta-lbl { color: var(--muted); font-size: var(--font-size-label); line-height: var(--line-height-label); margin-left: .4rem; }
.tbl .check { width: 34px; }
.tbl input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
/* the group's tick in a table header above the rows' ticks (catalogue §8c point 9, Vyčistit zkušební data): the native box
   draws all, none and some (`indeterminate`); its words show only on a phone, where the header folds into one row */
.tbl-vyber th.r-vyber { width: 48px; }
.vyber-skupiny { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.vyber-skupiny-text { display: none; }
/* the tick of the locked work records, next to their rows inside the fold */
.vyber-zamcene { padding: 0 var(--space-4) var(--space-2); }
/* the sentence above the confirmation when the selection holds locked work records */
.vyber-zamcene-veta { margin: 0 0 var(--space-3); color: var(--chip-orange-ink); font-weight: 600; }
/* a number column of any table (catalogue §8f): right-aligned, digits of equal width, never wrapped; the Total row
   last in `tbody` as in the billing statement (700, a 2px line above) — a row that does not belong to the total
   (a re-billed fee) stands under it */
.tbl th.cislo, .tbl td.cislo { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.radek-celkem td { font-weight: 700; border-top: 2px solid var(--line); }
/* the footer of a table card (catalogue §8f): the card's padding, a grid of facts (`.fact` side by side, under each
   other on a narrow screen) and sentences of where the numbers come from, one per line */
.karta-pata { padding: var(--space-3) var(--space-5) var(--space-4); }
.karta-pata .sub { display: block; margin: 0 0 var(--space-1); }
.platby-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 var(--space-6); margin-bottom: var(--space-3); }
/* a wide table between the phone shape (≤ 560 px, `.tbl-radky`) and a wide window scrolls sideways inside its card
   instead of being clipped (UI-ZASADY §6); menus inside pin themselves to their trigger (app.js `clippingAncestor`) */
.card-table { padding: 0; overflow-x: auto; }
.list-meta { display: flex; align-items: center; justify-content: space-between; margin: var(--space-1) 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.list-meta .bulk { display: flex; gap: var(--space-2); }

/* ---------- Stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; }
.stats-3 { grid-template-columns: repeat(3, 1fr); }
.stats-4 { grid-template-columns: repeat(4, 1fr); }
/* tiles between cards have the same spacing as card to card */
.stats + .card, .card + .stats { margin-top: var(--space-4); }
/* the sentence under tiles of numbers from another app (catalogue §8f point 5, „Stav v aplikaci Conviu k …“): grey,
   between the tiles and the first card, in the rhythm of the cards */
.stav-k { margin: var(--space-2) 0 var(--space-4); }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; }
.stat b { display: block; font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 700; letter-spacing: -.01em; }
.stat span { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.stat .info-pop { color: var(--ink); } /* a bubble ⓘ in a tile (§7): a sentence to read, not the muted label */
a.stat { color: inherit; text-decoration: none; transition: border-color .12s; }
a.stat:hover { border-color: var(--accent); }

/* ---------- Facts (left column of a detail) ---------- */
.fact { padding: .22rem 0; }
.fact .val { font-weight: 500; }
.fact .lbl { display: block; color: var(--muted); font-size: var(--font-size-label); line-height: var(--line-height-label); margin-top: .05rem; }
.side-section { border-top: 1px solid var(--line); margin-top: .7rem; padding-top: .6rem; }
.side-section h4 { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 650; margin: 0 0 .4rem; display: flex; justify-content: space-between; align-items: center; }
.person-row { display: flex; align-items: center; gap: .7rem; padding: var(--space-1) 0; }
/* the client team in the left panel (catalogue §9, spec `prava-sluzeb-u-zakaznika-v1.md` §3.4 point 5): the rows of
   `OwnerBox` one under the other in one edited field; in its mini panel a colleague with the avatar */
.tym-radky { display: flex; flex-direction: column; }
.tym-cteni { padding: var(--space-1) var(--space-1-5); }
.opt-osoba { display: flex; align-items: center; gap: var(--space-2); }
.tym-plny { margin: var(--space-1) var(--space-2); }
.person-row .nm { font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-sm); }
.person-row .sub { display: block; }
/* Responsible person — avatar as large as in the People block (40 px / 1rem) */
.person-row .av { width: 40px; height: 40px; font-size: var(--text-md); line-height: var(--leading-md); }
/* nobody in the row (`PersonFact` without a person, catalogue §47): an empty grey circle and the words in grey */
.av.av-nikdo { background: var(--surface-2); border: 1px dashed var(--line); }
.person-row.je-nikdo .nm { color: var(--muted); font-weight: 400; }

/* ---------- Detail: 3 columns ---------- */
.detail-grid {
  display: grid; grid-template-columns: 320px minmax(0, 1fr) 320px;
  gap: var(--space-5); align-items: start; margin-top: var(--space-5);
}
/* ---------- Record header (spec zaznam-v2 §2, catalogue §51) ---------- */
/* Type label + name + chips + ⋯ above ONE set of tabs. The same for a company, person,
   project, deal and service — the secondary panel and sub-tabs (pills) are gone. */
.zaznam-hlava { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .35rem; }
.zaznam-hlava h1 { margin: 0; font-size: var(--font-size-record-title); letter-spacing: -.01em; line-height: var(--line-height-record-title); }
/* type label next to the name — "what this actually is" (research on orientation and the way back) */
.typ-chip {
  display: inline-flex; align-items: center; align-self: center; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  background: var(--surface-2); border-radius: var(--radius-full); height: var(--chip-sm); padding: 0 .55rem;
}

/* The line below the record header (catalogue §51b) — quick orientation "where the record belongs" (person: "Majitelka · Acme s.r.o.").
   At most 2 items + "+N"; an item does not wrap inside, a long name is truncated with an ellipsis (no overflow on a phone).
   `contain: inline-size`: otherwise an unbreakable item stretches the grid column (`1fr` = min content width) and the page
   overflows sideways on a phone — the line must adapt to the column, not the column to the line. */
.hlava-pod { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem var(--space-4); margin: -.15rem 0 .45rem;
  font-size: var(--text-md); line-height: var(--leading-md); color: var(--muted); min-width: 0; contain: inline-size; }
.hlava-pod .clen { white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hlava-pod .role { color: var(--ink); font-weight: 600; }
.hlava-pod a { color: var(--accent); text-decoration: none; font-weight: 600; }
.hlava-pod a:hover { text-decoration: underline; }
.hlava-pod a:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 3px; }
.hlava-pod .dalsi { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 0 .45rem; cursor: default; }

/* the right column is not permanent (spec zaznam-v2 §7): a tab without a widget widens the middle */
.detail-grid--no-right { grid-template-columns: 320px minmax(0, 1fr); }
/* The top of the centre (header + tabs, `.zaznam-top`) spans over the right column too, the right column starts level
   with the content (`.zaznam-obsah`) — Petr 1 Oct 2026: more room for the tabs, the centre no longer feels squeezed.
   `#stred` (the live zone) dissolves (`display: contents`), so its two parts can take their grid areas; the left
   column spans both rows. Only on a wide window — below 1150 px everything is one column as before. Only the record
   page (`RecordPage` adds `detail-grid--hlava`) — older hand-made mockups lay `.detail-grid` out differently. */
@media (min-width: 1151px) {
  .detail-grid--hlava { grid-template-areas: "left top top" "left main right"; grid-template-rows: auto 1fr; row-gap: 0; }
  .detail-grid--hlava.detail-grid--no-right { grid-template-areas: "left top" "left main"; }
  .detail-grid--hlava > .panel-primary-col { grid-area: left; }
  .detail-grid--hlava > #stred { display: contents; }
  .detail-grid--hlava .zaznam-top { grid-area: top; min-width: 0; }
  .detail-grid--hlava .zaznam-obsah { grid-area: main; min-width: 0; }
  .detail-grid--hlava > aside:not(.panel-primary) { grid-area: right; }
}

/* ---------- Timeline ---------- */
.actions-row { display: flex; gap: .6rem; align-items: center; margin: 1.1rem 0; flex-wrap: wrap; }
.actions-row .grow { flex: 1; }
.input {
  height: var(--control-md); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0 .8rem; font: inherit; font-size: var(--font-size-control); line-height: var(--line-height-control); background: var(--card);
  color: var(--ink); min-width: 200px;
}
.input::placeholder { color: var(--muted); }
.input:focus-visible { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 1px var(--focus-ring); }
/* a small field next to `.btn-sm` (a form row inside a card): the height of the small button, the same text size */
.input-sm { height: var(--control-sm); padding: 0 .6rem; font-size: var(--font-size-control); line-height: var(--line-height-control); }
.tl-item { display: flex; gap: .85rem; padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.tl-ico {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius-8);
  display: grid; place-items: center; background: var(--surface-2); font-size: var(--text-md); line-height: var(--leading-md);
}
.tl-head { font-size: var(--text-sm); line-height: var(--leading-sm); }
.tl-head b { font-size: var(--text-sm); line-height: var(--leading-sm); }
.tl-head .when { color: var(--muted); }
.tl-body { margin-top: var(--space-1); }
.file-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .4rem .7rem; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 500;
}
.file-chip span { color: var(--muted); font-weight: 400; }

/* ---------- Notes: editor (rich text, no libraries) + content rendering ---------- */
/* Editor = a contenteditable area + a button bar (formatting through document.execCommand).
   The same typography for the area (.note-area) and the rendered content (.note-content). */
.note-editor { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.note-editor:focus-within { border-color: var(--accent); }
.note-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; padding: .3rem .35rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.note-toolbar button {
  height: 28px; min-width: 30px; padding: 0 .45rem; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); font: inherit; font-size: var(--text-sm); line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.note-toolbar button:hover { background: var(--accent-soft); }
.note-toolbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
/* out of the Tab order, reached by Alt+F10 from the text (KOMPONENTY §24) — the focus must be clearly visible */
.note-toolbar button:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }
.note-toolbar .sep { width: 1px; align-self: stretch; margin: .15rem var(--space-1); background: var(--line); }
.note-toolbar svg { display: block; }
/* Group = the main button (action) + a dropdown with variants; revealed on hover/focus. */
.note-tb-group { position: relative; display: inline-flex; }
.note-tb-group > button::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 0; height: 0; border: 3px solid transparent; border-bottom-color: currentColor; border-right-color: currentColor; opacity: .45; }
.note-tb-pop {
  position: absolute; top: 100%; left: 0; z-index: 6; margin-top: 3px; display: none;
  flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: .15rem; gap: .1rem;
}
/* An invisible "bridge" over the gap between the button and the dropdown (so moving the mouse does not close the menu). */
.note-tb-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px; }
.note-tb-group:hover > .note-tb-pop, .note-tb-group:focus-within > .note-tb-pop { display: flex; }
.note-area {
  min-height: 7rem; max-height: 22rem; overflow-y: auto; padding: .6rem var(--space-3); outline: none;
  font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); position: relative;
}
.note-area.is-empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; position: absolute; top: .6rem; left: .75rem; }
.note-content { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
.note-area > :first-child, .note-content > :first-child { margin-top: 0; }
.note-area > :last-child, .note-content > :last-child { margin-bottom: 0; }
.note-area h1, .note-content h1 { font-size: var(--display-xs); line-height: var(--leading-display-xs); font-weight: 650; margin: .85rem 0 .3rem; }
.note-area h2, .note-content h2 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 650; margin: .85rem 0 .3rem; }
.note-area h3, .note-content h3 { font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; margin: .85rem 0 .3rem; }
.note-area p, .note-content p { margin: .35rem 0; }
.note-area ul, .note-area ol, .note-content ul, .note-content ol { margin: .35rem 0; padding-left: 1.3rem; }
.note-area a, .note-content a { color: var(--accent); }
.note-area blockquote, .note-content blockquote { margin: .4rem 0; padding-left: .7rem; border-left: 3px solid var(--line); color: var(--muted); }

/* ---------- Tasks (right column / dashboard) ---------- */
.task-group { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; text-transform: none; margin: .9rem 0 .35rem; display: flex; align-items: center; gap: .4rem; }
.task-group.overdue { color: var(--red); }
/* One listing row (catalogue §8, UI-ZASADY §3): the same spacing, line and text size in every listing — work records,
   services, history, the activity log, tasks. `.task-item` and `.act-row` are its variants with a layout of their own. */
.radek-vypisu, .task-item, .act-row { padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); line-height: var(--leading-sm); }
.radek-vypisu:last-child, .task-item:last-child, .act-row:last-child { border-bottom: none; }
.task-item { display: flex; gap: .6rem; align-items: flex-start; }
.task-item input[type="checkbox"] { margin-top: .2rem; width: 16px; height: 16px; border-radius: 50%; accent-color: var(--teal); }
.task-txt { font-size: var(--text-sm); line-height: var(--leading-sm); }
/* the task title: the same weight in the list and on the kanban card (`.kcard-title`) */
.task-titulek { font-weight: 500; }
.task-txt .when { display: block; color: var(--muted); font-size: var(--font-size-secondary); line-height: var(--line-height-secondary); margin-top: .1rem; }

/* ---------- Recently viewed ---------- */
.recent { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.recent-chip {
  display: flex; align-items: center; gap: .6rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-full);
  padding: .4rem .9rem .4rem .45rem; cursor: pointer;
}
.recent-chip:hover { background: var(--hover); text-decoration: none; }
.recent-chip .nm { font-weight: 600; font-size: var(--text-sm); color: var(--ink); line-height: var(--leading-sm); }
.recent-chip .sub { display: block; font-weight: 400; }

/* ---------- Dashboard layout ---------- */
/* the Nástěnka's live zone below its heading; the cards inside keep their rhythm by `.card + .card` */
#dashlive { margin-top: var(--space-5); }
.dash-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--space-6); align-items: start; margin-top: var(--space-2); }

/* ---------- Empty state ---------- */
.empty { text-align: center; color: var(--muted); padding: 1.4rem var(--space-2); }
.empty .big { display: flex; justify-content: center; margin-bottom: .4rem; color: var(--teal); }
.empty-neutralni .big { color: var(--muted); }
.empty .hint { font-size: var(--text-xs); line-height: var(--leading-xs); }
/* a longer sentence of an empty state keeps a readable width on the centre of a wide card (the Přílohy tab) */
.empty .hint > p { max-width: 64ch; margin-inline: auto; }
/* a line under a price (`bez DPH`, `vlastní cena`, what an estimate rests on), each on its own line */
.sub.cena-pod { display: block; }

/* ---------- Progress ---------- */
.progress { height: 6px; background: var(--track); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--teal); border-radius: 99px; }

/* ---------- "Way back" breadcrumb (spec zaznam-v2 §4, KOMPONENTY §49) ----------
   A card as wide as the left panel, one line, accent only in the arrow. No tinting of the panel below it. */
.panel-primary-col { min-width: 0; }
.drobek-obal { margin-bottom: .7rem; }
.drobek {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-12);
  /* .4rem (was .5rem): the 32 px circle (catalogue §3) keeps the card about as high — 46.8 px instead of 44 */
  padding: .4rem .7rem; font: inherit; color: var(--ink); text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.drobek:hover { background: var(--hover); border-color: var(--accent); text-decoration: none; }
.drobek:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.drobek .sipka { font-size: var(--text-xl); line-height: 1; color: var(--accent); flex: none; }
.drobek .txt { min-width: 0; display: flex; align-items: baseline; gap: .4rem; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.drobek .nm { font-weight: 650; font-size: var(--text-sm); line-height: var(--leading-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drobek .kde { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); white-space: nowrap; }

/* ---------- Collapsible "Údaje" in the left panel (spec zaznam-v2 §9 stage 4, KOMPONENTY §52) ----------
   The primary panel lives in `<details class="udaje">`. The server ALWAYS sends it open (`open`) —
   so without JavaScript and on a wide window it looks exactly as before and nothing is hidden. Only
   `app.js` closes it at narrow widths, so that on a phone one does not have to scroll through the whole panel
   to get to work (mockup `zaznam-v2.html`, scene 9). That is why the summary is **hidden** on a wide window. */
.udaje > summary { display: none; }
@media (max-width: 1150px) {
  .udaje {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
    margin: 0 0 .2rem;
  }
  .udaje > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    list-style: none; cursor: pointer; padding: .6rem .8rem; font-weight: 650; font-size: var(--text-sm); line-height: var(--leading-sm);
  }
  .udaje > summary::-webkit-details-marker { display: none; }
  .udaje > summary:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius); }
  .udaje > summary .sipka-dolu { color: var(--muted); transition: transform .15s ease; }
  .udaje[open] > summary { border-bottom: 1px solid var(--line); }
  .udaje[open] > summary .sipka-dolu { transform: rotate(180deg); }
  /* the panel card is already inside — no frame within a frame */
  .udaje > .panel-primary { border: none; box-shadow: none; background: none; }
  /* NO NAME TWICE: the panel header (large avatar, name, status chip) repeats what stands
       right below "Údaje" in the record header (`RecordHeader`). On a phone it looked like a bug and took
       half the screen, so it is not drawn here. **"Upravit ▾" stays** — the second of the two ways to edit
       (§6 rule 3) is the ⋯ at the name, but relying on just one of them is not enough.
       `dup-hlava` carries only what is really duplicated: labels (not in the header) and the editable
       company status stay visible. */
  .udaje .idblock .id-top > .av,
  .udaje .idblock .dup-hlava { display: none; }
  .udaje .idblock .id-top { justify-content: flex-end; }
  .udaje .idblock { padding-bottom: 0; }
  /* an empty chip row (deal, service) would otherwise leave a gap behind */
  .udaje .idblock .id-chips:empty, .udaje .idblock .id-chips.dup-hlava { margin-top: 0; }
}

/* ---------- Transition between records (spec zaznam-v2 §5, R5/R19; KOMPONENTY §52) ----------
   Built-in **cross-page transitions** (View Transitions). No library, no state in the browser:
   records are real pages, so the effect also applies to the Back button. Text can be selected and
   copied the whole time (which is why Petr rejected overlay B2).

   The direction is set by `data-prechod` on <html> (boot script in `src/web/skins.ts`): `dovnitr` = I am
   opening a record (the panel being left shrinks and flies UP into the breadcrumb, the new one comes in from
   below), `zpet` = I am going back (the breadcrumb "unfolds" back into the panel). Where the direction is unclear
   (agenda, tab, sign-in), the transition is skipped — the effect belongs only between records.

   RESPECT FOR THE USER: `@view-transition` is **only** inside `prefers-reduced-motion: no-preference`,
   so with animations switched off nothing moves. A browser that cannot do transitions (Firefox 2026)
   simply navigates without the effect — nothing breaks, neither the HTML nor the behaviour changes. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.panel-primary-col { view-transition-name: zaznam-panel; }
/* the centre animates as one piece; on a wide window `#stred` has no box of its own (display: contents), so its two
   parts carry the names instead */
.detail-grid > #stred { view-transition-name: zaznam-stred; }
@media (min-width: 1151px) {
  .detail-grid--hlava > #stred { view-transition-name: none; }
  .detail-grid--hlava .zaznam-top { view-transition-name: zaznam-hlava; }
  .detail-grid--hlava .zaznam-obsah { view-transition-name: zaznam-stred; }
}
/* An open menu must paint over the neighbouring record areas: each area has a view-transition-name, so each is its
   own stacking context painted in DOM order — without this the centre covers a panel from the left column/header. */
.panel-primary-col:has(.menu.open),
.zaznam-top:has(.menu.open) { position: relative; z-index: 3; }
::view-transition-group(zaznam-panel),
::view-transition-group(zaznam-stred),
::view-transition-group(zaznam-hlava),
::view-transition-group(root) { animation-duration: .35s; }
/* opening a record: away upwards to the breadcrumb, the new one from below */
html[data-prechod="dovnitr"]::view-transition-old(zaznam-panel) { animation: .35s ease both prechod-do-drobku; transform-origin: left top; }
html[data-prechod="dovnitr"]::view-transition-new(zaznam-panel) { animation: .35s ease both prechod-zdola; }
html[data-prechod="dovnitr"]::view-transition-old(zaznam-stred),
html[data-prechod="dovnitr"]::view-transition-old(zaznam-hlava) { animation: .35s ease both prechod-vzhuru-pryc; }
html[data-prechod="dovnitr"]::view-transition-new(zaznam-stred),
html[data-prechod="dovnitr"]::view-transition-new(zaznam-hlava) { animation: .35s ease both prechod-zdola; }
/* going back: the breadcrumb unfolds back into the panel, the one being left slides down */
html[data-prechod="zpet"]::view-transition-old(zaznam-panel) { animation: .35s ease both prechod-dolu; }
html[data-prechod="zpet"]::view-transition-new(zaznam-panel) { animation: .35s ease both prechod-z-drobku; transform-origin: left top; }
html[data-prechod="zpet"]::view-transition-old(zaznam-stred),
html[data-prechod="zpet"]::view-transition-old(zaznam-hlava) { animation: .35s ease both prechod-dolu; }
html[data-prechod="zpet"]::view-transition-new(zaznam-stred),
html[data-prechod="zpet"]::view-transition-new(zaznam-hlava) { animation: .35s ease both prechod-shora; }
@keyframes prechod-do-drobku { to { opacity: 0; transform: translateY(-64px) scale(.34); } }
@keyframes prechod-z-drobku { from { opacity: 0; transform: translateY(-64px) scale(.34); } }
@keyframes prechod-zdola { from { opacity: 0; transform: translateY(40px); } }
@keyframes prechod-dolu { to { opacity: 0; transform: translateY(40px); } }
@keyframes prechod-shora { from { opacity: 0; transform: translateY(-24px); } }
@keyframes prechod-vzhuru-pryc { to { opacity: 0; transform: translateY(-24px); } }

/* ---------- Mentioned record + preview (spec zaznam-v2 §2 point 4, P3; KOMPONENTY §50) ----------
   A click on a mentioned record opens the preview at the click point; on hover the text is only underlined. */
.zmineny { color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; text-underline-offset: 3px; }
.zmineny:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); }
.zmineny:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-4); }
/* The record name in a listing row (catalogue §8: project, deal, service): ink and 600 like a name next to an avatar,
   the accent only on hover — the same look as a mentioned record, only the click opens the record's page. */
.nazev-zaznamu { color: var(--ink); font-weight: 600; text-decoration: none; text-underline-offset: 3px; }
.nazev-zaznamu:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent); }
.nazev-zaznamu:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-4); }
/* The preview lives in the "portal" #nahled directly in <body> and is `fixed` — inside the page it would be
   clipped by a table (`.card-table { overflow:hidden }`) and a kanban column (`.kcol-body { overflow-y:auto }`).
   `public/app.js` computes the coordinates and the arrow offset (`--sipka-x`) from the trigger. */
.nahled {
  position: fixed; top: 0; left: 0; z-index: 60; width: 286px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem var(--space-4) var(--space-4); box-shadow: 0 18px 45px rgba(var(--shadow-color), .38);
}
.nahled::before, .nahled::after { content: ''; position: absolute; width: 0; height: 0; border: 8px solid transparent; }
/* default: the popup BELOW the trigger, arrow up (never covers what was clicked) */
.nahled::before { bottom: 100%; left: var(--sipka-x, 22px); margin-left: -8px; border-bottom-color: var(--line); }
.nahled::after { bottom: calc(100% - 1px); left: var(--sipka-x, 22px); margin-left: -8px; border-bottom-color: var(--card); }
/* if it does not fit below, it flips above and the arrow points down */
.nahled-nahore::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--line); }
.nahled-nahore::after { bottom: auto; top: calc(100% - 1px); border-bottom-color: transparent; border-top-color: var(--card); }
.nahled-hlava { display: flex; align-items: flex-start; gap: .7rem; }
.nahled-hlava .av-lg { width: 48px; height: 48px; font-size: var(--text-md); line-height: var(--leading-md); }
.nahled-hlava .av-lg.av-3 { font-size: .8rem; }
.nahled-hlava .icon-btn { margin-left: auto; }
.nahled-jm { display: block; font-weight: 650; font-size: var(--text-md); line-height: var(--leading-md); }
.nahled-role { display: block; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); margin-top: .1rem; }
.nahled .fact { padding: .22rem 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.nahled .chips { margin-top: var(--space-2); }
.nahled-akce { display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--line);
  margin-top: var(--space-3); padding-top: .65rem; }
.nahled-akce .otevrit { font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-sm); } /* a text link `.odkaz` (§80) */
/* „Trvale odstranit…“ of the imprint of a closed period's task (§55, `GET /ukoly/otisk/:id/nahled`): at the right end of the row */
.nahled-akce-konec { margin-left: auto; }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--space-4); }
.field > label {
  display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted);
  font-weight: 500; margin-bottom: .35rem;
}
.field .req { color: var(--red); }
.field .input, .field select.input, .field textarea.input { width: 100%; min-width: 0; }
select.input { appearance: auto; }
textarea.input { height: auto; min-height: 76px; padding: .55rem .8rem; resize: vertical; }
.field .help { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); margin-top: .3rem; }
/* help outside `.field` (a sentence below a group of fields in a modal) — the same small grey text as for a field (catalogue §16) */
p.help { font-size: var(--text-xs); color: var(--muted); line-height: var(--leading-xs); }
/* a help that lists what a field does (catalogue §16 „Nápověda pole“ — a list, not a long sentence) */
.field ul.help-odrazky { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.field .side-link { float: right; font-size: var(--text-xs); line-height: var(--leading-xs); }

/* Two values side by side (IČO/DIČ, Street/No.). The default is half and half; another ratio has its own
   class (`--ulice`). On a phone both fields go one below the other (walkthrough A18). */
.field-row2 { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
.field-row2 > .field { margin-bottom: 0; }
/* street + house number: a narrower second column */
.field-row2--ulice { grid-template-columns: 3fr 1fr; }
@media (max-width: 560px) { .field-row2, .field-row2--ulice { grid-template-columns: 1fr; } }

/* An error returned from the server into an open modal (catalogue §21b, walkthrough A14) */
.modal-chyba {
  margin: 0 0 .8rem; padding: .55rem .7rem; border-radius: var(--radius-8);
  background: var(--red-soft); border: 1px solid var(--red); color: var(--red);
  font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600;
}
/* „Doplnit z ARES" in the company modal: the button under IČO, its help and the answer under the row (spec ares-v1.md, KOMPONENTY §48) */
.ares-nacist { margin-top: .4rem; }
#aresNahled > .help { margin: 0 0 .6rem; }
/* Catalogue §91: a button waiting for an answer: a spinning icon, blocked against a second click, the text muted */
.btn[aria-busy="true"] { cursor: progress; color: var(--muted); }
.btn .tocici { display: inline-flex; color: var(--accent); }
.btn .tocici svg { width: var(--icon-sm); height: var(--icon-sm); animation: tocit-se .9s linear infinite; }
@keyframes tocit-se { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn .tocici svg { animation-duration: 2.4s; } }
/* Catalogue §92: the window over a window, a layer of its own over the edit window; its width is the existing .modal-siroky */
.modal-overlay.okno-nad { z-index: 110; }
.okno-nad .okno-uvod { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
/* Catalogue §8b, the comparison variant: Údaj · V ARES · Ve formuláři · Přenést */
.tbl-porovnani { table-layout: fixed; }
.tbl-porovnani td { vertical-align: top; overflow-wrap: anywhere; }
.tbl-porovnani th.k-pole { width: 24%; }
.tbl-porovnani th.k-prenest { width: 6.5rem; text-align: center; }
.tbl-porovnani td.k-prenest { text-align: center; }
.tbl-porovnani td.r-hlavni { font-weight: 600; }
/* position: its hidden name (`.sr-only`, absolute) stays inside the card, or the page behind grows on a phone */
.tbl-porovnani .k-prenest .check { display: inline-flex; margin: 0; padding: 0; position: relative; }
.tbl-porovnani .hodnota-prazdna, .tbl-porovnani .stav-porovnani { color: var(--muted); }
.tbl-porovnani .stav-porovnani { font-size: var(--text-xs); line-height: var(--leading-xs); }
.tbl-porovnani tr.je-rozdil td.k-ares { font-weight: 600; }
@media (max-width: 560px) {
  .tbl-porovnani { table-layout: auto; }
  .tbl-porovnani.tbl-radky td.k-ares, .tbl-porovnani.tbl-radky td.k-nase { flex: 1 1 100%; }
  .tbl-porovnani.tbl-radky td.r-hlavni { flex: 1 1 0; }
  .tbl-porovnani.tbl-radky td.k-prenest { order: -1; margin-left: auto; white-space: nowrap; }
}

.input.is-error, .is-error > .input { border-color: var(--red); }
.input.is-error:focus-visible { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

/* Tighter spacing and more readable section headings in a large modal */
.modal-card .field, .modal-card .field-row2 { margin-bottom: .6rem; }
.modal-card .field > label { margin-bottom: .2rem; }
.modal-card .opt-group {
  font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink); font-weight: 700; letter-spacing: .03em;
  padding: 0; margin: .7rem 0 .3rem;
}
.modal-card .form-actions { margin-top: var(--space-4); }
.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }
/* the only button of a form closed by the cross (Board settings) — bottom right (catalogue §16) */
.form-actions.vpravo { justify-content: flex-end; }

/* ---------- Edit modal v2 (catalogue §21c, spec modaly-ux-v1 §2): heading rule, sections, „+ Přidat …“ ----------
   `.modal-v2` sits on the element whose CHILDREN are the blocks of the modal (the <form>, or the <fieldset>
   that locks the fields of a work record). Heading rule (Petr 9 Oct
   2026): a field standing on its own directly in the modal IS a section — its caption has the size of a section
   heading and the same air above it as between sections; a field inside a named section (`.oddil`, `.oddil-sbal`)
   keeps a small caption. Checkboxes and switches inside a field keep their own look.
   NO LINES between sections that cannot be collapsed (Petr 22 Oct 2026: „nedávej tam čáry mezi sekcemi, pokud nejsou
   sekce rozbalovací; stačí zachovat whitespace pro oddělení ‚řádků‘“, only for modals): whitespace alone parts them
   (`margin-top: var(--space-8)`). A line stays only above a collapsible section (`.oddil-sbal`, a `<details>`). */
.modal-v2 .field > label:not(.check):not(.switch-row), .modal-v2 .field > .popisek-radek > label,
.modal-v2 fieldset.volby > legend {
  font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--ink); margin-bottom: .3rem;
}
.modal-v2 .field { margin-bottom: .85rem; }
.modal-v2 .field-row2 { gap: .9rem; margin-bottom: .85rem; }
.modal-v2 .field-row2 > .field { margin-bottom: 0; }
.modal-v2 > .field > label:not(.check):not(.switch-row),
.modal-v2 > .field-row2 > .field > label:not(.check):not(.switch-row),
.modal-v2 > .field > .popisek-radek > label, .modal-v2 > .field-row2 > .field > .popisek-radek > label,
.modal-v2 > fieldset.volby > legend { font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; }
/* a label with an action at its right end (the „＋“ of a new contact person) — the caption keeps the rule above */
.modal-v2 .field > .popisek-radek {
  display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .3rem;
}
.modal-v2 .field > .popisek-radek > label { margin: 0; }
.modal-v2 .field > .popisek-radek > .menu { margin-block: -.4rem; }

/* karta Rozpočet hodin se dvěma sloupci (spec rozpocet-sluzby-d §5.8, KOMPONENTY §90; Petr 22. 10. 2026: „na desktopu
   je v levé části toho bloku dostatek místa na infobox, na mobilu to bude asi jinak“). Od 1000 px vlevo údaje o rozpočtu,
   vpravo rámeček „Jak pracovat s rozpočty a službami u zákazníka“; užší obrazovka má rámeček pod údaji. */
.karta-rozpocet { display: grid; gap: var(--space-4); }
.karta-rozpocet > .ramecek-info { margin: 0; }
.karta-rozpocet .ramecek-info p { margin: var(--space-1) 0 var(--space-2); }
@media (min-width: 1000px) { .karta-rozpocet { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; } }

/* obsah okna „Jak pracovat s rozpočty a službami u zákazníka“ (spec rozpocet-sluzby-d §5.8, KOMPONENTY §90): běžné
   okno ModalShell jen ke čtení, oddíly s nadpisem a patička se „Zavřít“ vpravo přilepená dole (na telefonu vždy vidět). */
.vysvetleni-obsah h4 { margin: var(--space-4) 0 var(--space-1); }
.vysvetleni-obsah h4 + p { margin: 0; }
.vysvetleni-obsah .form-actions { position: sticky; bottom: 0; background: var(--card); margin: var(--space-4) 0 0; padding: var(--space-3) 0; border-top: 1px solid var(--line); }

/* bublina ⓘ hned za popiskem pole (spec rozpocet-sluzby-d §5.1, KOMPONENTY §90; Petr 22. 10. 2026: „dej za položku
   Rozpočet služby nějaký (i)“). Řádek popisku `.popisek-radek` jinak rozhazuje obsah ke krajům. */
.modal-v2 .field > .popisek-radek.s-bublinou { justify-content: flex-start; }
.modal-v2 .field > .popisek-radek.s-bublinou > .info-tip { margin-left: 0; }

/* a standalone legend floats, so it lays out as an ordinary heading line of the block, not as a fieldset caption */
.modal-v2 > fieldset.volby > legend { float: left; width: 100%; }
.modal-v2 > fieldset.volby > legend + * { clear: both; }
.modal-v2 > :is(.field, .field-row2, fieldset.volby) ~ :is(.field, .field-row2, fieldset.volby) {
  margin-top: var(--space-8);
}
/* a section = a block with a heading and air above it, no line (`ModalSection`; the line belongs to `.oddil-sbal`) */
.oddil { margin-top: var(--space-8); }
.modal-v2 .oddil-hlava { margin: 0 0 .55rem; }
.modal-v2 .oddil-hlava h4 { font-size: var(--text-md); line-height: var(--leading-md); }
.modal-v2 .oddil-hlava .pocet { font-size: var(--text-sm); line-height: var(--leading-sm); }
/* a section holding only a „+ Přidat …“ link (an empty optional field) — less air */
.oddil.pridat-blok { margin-top: var(--space-4); }
/* a collapsible section = built-in <details> (`CollapsibleSection`); the summary says what is set inside — nothing is
   hidden without a hint. The server sends it closed; open when an error is inside or it is the way to fill the form. */
.oddil-sbal { border-top: 1px solid var(--line); margin-top: 1.1rem; }
.oddil-sbal > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: .1rem .6rem; padding: .85rem var(--space-2) var(--space-3); margin: 0 -.5rem; border-radius: var(--radius-8);
}
.oddil-sbal > summary::-webkit-details-marker { display: none; }
.oddil-sbal > summary:hover { background: var(--hover); }
.oddil-sbal > summary:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
.oddil-sbal > summary h4 { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; grid-column: 1; }
.oddil-souhrn {
  grid-column: 1; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oddil-sbal > summary .sipka-dolu {
  grid-column: 2; grid-row: 1 / span 2; display: inline-flex; color: var(--muted); transition: transform .15s ease;
}
.oddil-sbal[open] > summary .sipka-dolu { transform: rotate(180deg); }
/* the collapsed summary of the service window may be longer than a line (a separate budget adds a clause): it wraps, it is never cut (spec rozpocet-sluzby-d §5.1) */
#clientServiceBilling > summary .oddil-souhrn { white-space: normal; overflow: visible; text-overflow: clip; }
.oddil-sbal[open] > summary .oddil-souhrn { display: none; }
.oddil-sbal > .oddil-obsah { padding: .2rem 0 .3rem; }
/* „Přidat popis“, an empty optional text field is not drawn, only this link (`AddFieldLink`, a `.odkaz` on its own line) */
.odkaz.pridat-pole { display: inline-block; margin: 0 0 var(--space-3); }
.oddil .odkaz.pridat-pole, .oddil-obsah .odkaz.pridat-pole { margin: var(--space-0-5) 0 0; }
/* a number with its unit right of the field („80 %“) */
.s-jednotkou { display: flex; align-items: center; gap: .4rem; }
.s-jednotkou .input { min-width: 0; max-width: 6rem; }
.s-jednotkou > span { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
/* a grey sentence under a row of fields that explains them („Účtuje se …“) */
.modal-v2 p.help.vysvetleni { margin: -.3rem 0 .85rem; }
/* the sentence about the billing at the end of the work record window (spec ucetovani-vykazu-podle-sluzby-v1 §4.6, catalogue
   §21c): under the details, with air above instead of the pull-up of an explanation under a row */
.modal-v2 p.help.veta-uctovani { margin: var(--space-3) 0 0; }
/* a window split into several fieldsets (parts greyed out separately, e.g. the approver's Účtování in a review window):
   the first block of the next fieldset keeps the air between blocks */
fieldset.modal-v2 + fieldset.modal-v2 > :is(.field, .field-row2, fieldset.volby):first-child { margin-top: var(--space-8); }
/* THE CONTEXT OF A WINDOW (catalogue §82, spec ucetovani-vykazu-podle-sluzby-v1 §4.6; Petr 21. 10. 2026: „název zákazníka a
   služby, které jsou předvybrané, … jsou malé a ztrácí se v dialogovém okně“): the given customer, service, project or the
   author of a work record as a strong row under the title, before the first field; a small grey caption, the value at text
   size and bold, a quiet background. The values wrap on a phone. */
.okno-kontext { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-8); }
.okno-kontext > dl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-6); margin: 0; }
.okno-kontext dt { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.okno-kontext dd { margin: 0; color: var(--ink); font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; }
.okno-kontext-akce { margin-left: auto; }
/* THE ZONE OF STATUS BARS of the work record window (catalogue §82, spec §4.6): one place under the title, above the
   context, by severity — a closed month or the lock, the approval (return, rejection), the billing. An empty slot takes
   no place; the zone keeps air under itself only when a bar is in it. */
.pruhy-okna { display: flex; flex-direction: column; gap: var(--space-3); }
.pruhy-okna > :empty { display: none; }
.pruhy-okna:has(> :not(:empty)) { margin-bottom: var(--space-4); }
.pruhy-okna .ramecek-info, .pruhy-okna .modal-chyba { margin: 0; }
.pruhy-okna [id] > * + * { margin-top: var(--space-2); }
/* a state of the work record that matters for its money (the return, the billing other than the rule's): the orange bar
   with the state bold on the first line; the rejection in red */
.pruh-stav { padding: var(--space-2-5) var(--space-3); border: 1px solid var(--chip-orange-ink); border-radius: var(--radius-8);
  background: var(--chip-orange-bg); color: var(--ink); }
.pruh-stav-h { margin: 0; font-weight: 600; color: var(--chip-orange-ink); }
.pruh-stav-txt { margin: var(--space-1-5) 0 0; }
.pruh-stav.je-zamitnuty { border-color: var(--red); background: var(--red-soft); }
.pruh-stav.je-zamitnuty .pruh-stav-h { color: var(--red); }
/* the approval waiting for the person looking: the information colour of the prompt in the listing, its buttons under it */
.pruh-schvaleni { padding: var(--space-2-5) var(--space-3); border: 1px solid var(--accent); border-radius: var(--radius-8);
  background: var(--accent-soft); }
.pruh-schvaleni-h { margin: 0 0 var(--space-2); font-weight: 600; color: var(--accent); }
.pruh-akce { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.pruh-schvaleni-h + .pruh-akce { margin-top: 0; }
.pruh-rozhodnuti { margin-top: var(--space-2-5); }
.pruh-rozhodnuti > label { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); }
/* a value shown but not changed here (the catalogue item of an assigned service) — reads as locked */
.modal-v2 .input:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
/* the error of one field right under it (the bar at the top says the same — catalogue §21b) */
.field .help.chyba-pole { color: var(--red); font-weight: 600; }

/* ---------- The wide modal of the task window (catalogue §21d, spec modaly-ux-v1 §3, §5) ----------
   max 960 px; from a window of 1000 px two columns — the left 552 px (~70 characters, Petr 9 Oct 2026), a gap of 24 px,
   „Komentáře a aktivita“ 336 px on a soft `--surface-2` panel; below 1000 px one column (600 px) and the stream last.
   Only the body of the window scrolls, both columns with one scrollbar (`.modal-skrol`, catalogue §21; no scrollbar
   inside a column). */
.modal-overlay .modal-card.modal-siroky { max-width: 960px; }
.modal-siroky .modal-telo { display: block; }
.modal-siroky .modal-bok { margin-top: 1.4rem; background: var(--surface-2); border-radius: var(--radius-12); padding: .9rem; min-width: 0; }
@media (min-width: 1000px) {
  .modal-siroky .modal-telo { display: grid; grid-template-columns: minmax(0, 1fr) 336px; column-gap: var(--space-6); align-items: start; }
  .modal-siroky .modal-bok { margin-top: 0; }
}
@media (max-width: 999px) {
  .modal-overlay .modal-card.modal-siroky { max-width: 600px; }
}
/* the blocks of the left column: one level of headings, the same air between every two, no line (Petr 9 Oct 2026,
   22 Oct 2026; a collapsible `.oddil-sbal` keeps its line) */
.modal-hlavni .blok { margin-top: var(--space-8); }
.modal-hlavni .blok.blok-prvni { margin-top: 0; }
.modal-hlavni .blok > .field { margin-bottom: 0; }
/* a field standing on its own is a section itself (§21c) — its caption has the size of a section heading */
.modal-v2 :is(.field, .blok, .blok-hlava) > :is(label, .label-like).blok-nadpis:not(.check) {
  font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; color: var(--ink); margin-bottom: .3rem;
}
/* the name is the most important thing in the window */
.input.nazev-ukolu { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 600; height: var(--control-lg); }
.modal-meta { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); margin: .4rem 0 0; }
/* one row: Termín · Řešitel · Štítky — the labels wrap in a narrow window */
.radek-nahore { display: flex; flex-wrap: wrap; gap: .6rem var(--space-4); align-items: flex-start; }
.radek-nahore > .field { margin-bottom: 0; min-width: 0; }
.radek-nahore > .pole-termin { flex: 0 0 9.5rem; }
.radek-nahore > .pole-resitel { flex: 0 1 11rem; }
.radek-nahore > .pole-stitky { flex: 1 1 11rem; }
.modal-v2 > .radek-nahore { margin-bottom: .85rem; }
.modal-v2 > :is(.field, .field-row2) ~ .radek-nahore, .modal-v2 > .radek-nahore ~ :is(.field, .field-row2) {
  margin-top: var(--space-8);
}
@media (max-width: 560px) {
  .radek-nahore > :is(.pole-termin, .pole-resitel) { flex: 1 1 8.5rem; }
  .radek-nahore > .pole-stitky { flex-basis: 100%; }
}
/* the labels compactly: the chosen chips and a round „＋“ with the panel of ticks (§19) */
.stitky-radek { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-height: 34px; }
.stitky-vybrane { display: contents; }
.stitky-zadne { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.stitky-radek .cat.chip-neaktivni { background: none; color: var(--muted); border: 1px dashed var(--muted); }
.stitky-menu { display: inline-block; }
.stitky-menu .stitek-plus { width: 28px; height: 28px; border: 1px dashed var(--muted); border-radius: var(--radius-full); color: var(--ink); }
.stitky-menu .stitek-plus:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.stitky-menu .menu-list { min-width: 15rem; }
.stitky-menu .opt.check { gap: .55rem; }
/* „✓ Uloženo“ under a field that saved itself — quiet, gone after a moment (`app.js`); empty = no height */
.ulozeno { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
.ulozeno:not(:empty) { margin-top: .2rem; }
/* Popis: framed like the field Název, a click opens the editor with Uložit / Zrušit (Petr 9 Oct 2026) */
.popis-ramec { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm); padding: .55rem var(--space-3);
  font-size: var(--text-sm); line-height: var(--leading-sm); }
.popis-ramec .note-content > :first-child { margin-top: 0; }
.popis-ramec .note-content > :last-child { margin-bottom: 0; }
/* the heading of a block with its action on the right („Upravit“ by Popis) */
.blok-hlava { display: flex; align-items: baseline; gap: .6rem; }
.blok-hlava .popis-upravit { margin: 0 0 0 auto; }
.popis-klik { cursor: text; }
.popis-klik:hover { border-color: var(--muted); }
.popis-prazdny { color: var(--muted); }
.popis-uprava .popis-akce { margin-top: .6rem; }
/* the subtasks between the two zones — the section of the card keeps its own heading, the block gives the line */
.blok-podukoly > .karta-oddil { margin: 0; }
.blok-podukoly:not(:has(.pod-oddil, .pod-pridat-obal)) { display: none; }
/* the work records of the task inside „Výkazy práce“ */
.vykazy-ukolu .vykaz-radek { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; padding: .3rem var(--space-1);
  font-size: var(--text-sm); line-height: var(--leading-sm); border-radius: var(--radius-8); }
.vykazy-ukolu .vykaz-radek + .vykaz-radek { border-top: 1px solid var(--line); }
.vykazy-ukolu .vykaz-co { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.vykazy-ukolu :is(.vykaz-kdy, .vykaz-kdo, .vykaz-cas) { white-space: nowrap; }
.vykazy-akce { margin-top: var(--space-2); }
/* „Komentáře a aktivita“: one stream, newest first — a comment in a bubble on the card, a History entry a grey line */
.modal-bok .proud { gap: .55rem; }
.modal-bok .proud .oddil-hlava { margin: 0; }
.modal-bok .proud .oddil-hlava h4 { font-size: var(--text-md); line-height: var(--leading-md); }
.modal-bok textarea.input { background: var(--card); }
.komentar-novy .form-actions { flex-wrap: wrap; row-gap: .3rem; }
.komentar-novy:has(textarea:placeholder-shown):not(:has(.prilohy-koncept > li)) .komentar-zrusit { display: none; }
.proud-polozky { display: flex; flex-direction: column; }
.modal-bok .proud .comment { padding: .35rem 0; }
.modal-bok .proud .comment + .comment { border-top: 0; }
.modal-bok .proud .comment-body { background: var(--card); border-radius: var(--radius-8); padding: .35rem .55rem; margin-top: .2rem; }
.aktivita { display: flex; gap: var(--space-2); align-items: flex-start; padding: .3rem 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted);
  overflow-wrap: anywhere; }
.aktivita b { color: var(--ink); font-weight: 600; }
.aktivita .kdy { white-space: nowrap; }
.aktivita > .row-actions { margin-left: auto; flex: none; }
.proud-starsi { align-self: flex-start; margin: var(--space-0-5) 0 0; }
.odznak-slot { display: inline-flex; }

/* ---------- Form error ---------- */
.form-error {
  background: var(--red-soft); color: var(--red);
  border-radius: var(--radius-sm); padding: .55rem .8rem;
  font-size: var(--text-sm); line-height: var(--leading-sm); margin-bottom: var(--space-4);
}

/* ---------- Dropdown menu ---------- */
.menu { position: relative; }
/* a dropdown inline in text or a row (`Picker`) — the class instead of an inline style */
.menu-inline { display: inline-block; }
/* Alignment: by default the top left corner at the action (left/middle panel);
   .menu.align-right aligns by the right corner (actions in the right panel / top bar). */
.menu-list {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); min-width: 180px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(var(--shadow-color), .10); padding: .35rem; z-index: 60;
  font-weight: 400; /* the panel does not inherit the trigger's boldness (actions in h4/headings) */
  /* a panel that app.js caps to the room it has scrolls itself, and the end of its list does not drag the page along */
  overscroll-behavior: contain;
}
/* direct child, so that nested panels (submenus) are not affected */
.menu.align-right > .menu-list { left: auto; right: 0; }
.menu.open > .menu-list { display: block; }
.menu-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); cursor: pointer;
  padding: var(--space-2) .7rem; border-radius: var(--radius-6);
}
.menu-item:hover { background: var(--bg); text-decoration: none; }
.menu-item:focus-visible, .opt:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(var(--focus-width) * -1); }
/* `.menu-txt` grows, so a possible submenu arrow stays on the right. The icon itself: the one rule below `.opt`. */
.menu-item .menu-txt { flex: 1; min-width: 0; }
.menu-item[aria-current="page"] { background: var(--bg); }

/* Submenu (flying out to the side) — a dropdown item with a submenu,
   e.g. "Vzhledy". Opens on hover or on click (app.js → .open). */
.submenu { position: relative; }
.menu-item.has-sub { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.menu-item.has-sub .sub-arrow { display: inline-flex; align-items: center; color: var(--muted); }
.submenu-list { left: auto; right: 100%; top: -.4rem; margin-right: .4rem; min-width: 210px; }
/* An invisible "bridge" over the gap between the item and the flyout — so the menu does not close while moving the mouse. */
.submenu-list::after { content: ""; position: absolute; top: 0; right: -.55rem; width: .55rem; height: 100%; }
.submenu.open > .submenu-list { display: block; }
@media (hover: hover) {
  .submenu:hover > .submenu-list { display: block; }
}

/* Dropdown panel (Capsule style): a larger floating panel with search, items and actions */
.menu-list.panel {
  min-width: 250px; padding: .7rem; border-radius: var(--radius-12);
  box-shadow: 0 14px 40px rgba(var(--shadow-color), .14);
}
/* section separator in a dropdown menu (e.g. Skin | Sign out) */
.menu-sep { border-top: 1px solid var(--line); margin: .35rem 0; }
.menu-list.panel .input { width: 100%; margin-bottom: var(--space-2); }
.opt {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; text-align: left; border: none; background: none; font: inherit;
  font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); cursor: pointer;
  padding: .45rem .6rem; border-radius: var(--radius-6);
}
.opt:hover { background: var(--bg); text-decoration: none; }
/* THE ONE RULE of a menu item with an icon, main menu and every other menu alike (catalogue §16d, spec `tasks-unified-toolbar-v1.md`
   §8, component `IconMenuItem`): a muted 16 px icon on the left, the text right after it, both aligned left. */
.menu-item.has-ico, .opt.opt-s-ikonou { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-2-5); }
.menu-item .menu-ico, .opt .opt-ico { flex: none; display: inline-flex; align-items: center; color: var(--muted); }
.menu-item .menu-ico svg, .opt .opt-ico svg { width: var(--icon-md); height: var(--icon-md); stroke-width: 2.25; }
.menu-item:hover .menu-ico, .opt:hover .opt-ico { color: var(--ink); }
.menu-item[aria-current="page"] .menu-ico { color: var(--accent); }
.opt.opt-cervena .opt-ico, .opt.opt-cervena:hover .opt-ico { color: var(--red); }
/* The icon takes part of the width, and a dropdown takes only the width of its trigger: a menu with icons is as wide as its longest
   item, on one line; on a phone it stops at the screen and the item wraps. The list picker has its own width. */
.menu-list:where(:has(.opt-s-ikonou):not(.lista-panel), :has(.menu-item.has-ico)) { width: max-content; max-width: calc(100vw - var(--space-8)); }
/* a switch as a menu item: label on the left, switch on the right, space between them */
.opt-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.opt-switch .switch { flex: none; width: 30px; height: 18px; border-radius: var(--radius-full); background: var(--line); position: relative; transition: background .15s ease; }
.opt-switch .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(var(--shadow-color), .35); transition: transform .15s ease; }
.opt-switch[aria-checked="true"] .switch { background: var(--accent); }
.opt-switch[aria-checked="true"] .switch::after { transform: translateX(12px); }
/* a switch with an explanation below the label (e.g. "Sloupec hotových úkolů") */
.opt-switch-txt { display: flex; flex-direction: column; gap: .15rem; text-align: left; min-width: 0; }
.opt-help { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); white-space: normal; min-width: 14rem; max-width: 16rem; }
/* group heading in a panel (`.opt-group`) and in the mention picker (`.menu-group`) — one look */
.opt-group, .menu-group { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: .45rem .6rem .15rem; }
.panel-actions { display: flex; justify-content: flex-end; gap: .9rem; align-items: center; padding-top: .55rem; margin-top: .35rem; border-top: 1px solid var(--line); }

/* Icon button + actions shown only on row hover.
   A unified icon system: one SVG source (icons.tsx), one size (18) inside .icon-btn,
   colour through a semantic class (not inline), a ≥44px hit area on touch. See docs/KOMPONENTY.md. */
.icon-btn {
  display: inline-grid; place-items: center; width: var(--control-icon); height: var(--control-icon);
  border: none; background: none; border-radius: var(--radius-6); cursor: pointer;
  color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); padding: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 2; }
/* semantic variants of the icon button (colour = action state, not hard-coded inline) */
.icon-btn--ok { color: var(--teal); }
.icon-btn--ok:hover { background: var(--teal-soft); color: var(--teal-ink); }
.icon-btn--danger { color: var(--red); }
.icon-btn--danger:hover { background: var(--red-soft); color: var(--red); }
.icon-btn--accent { color: var(--accent); }
.icon-btn--accent:hover { background: var(--accent-soft); color: var(--accent); }
/* touch: a comfortable tap target even for a small icon (WCAG 2.5.x).
   `--tap` is the variant for card corners (kanban): 44 px would push ⋯ from the corner into the card area
   (walkthrough A19), so the area grows by an invisible overhang, not by the button size. */
@media (pointer: coarse) {
  .icon-btn:not(.icon-btn--tap) { min-width: 44px; min-height: 44px; }
  .icon-btn--tap { position: relative; }
  /* The area grows OUT of the card (to the right and up/down), not to the left into the title: a centred
       overhang reached ~9 px into the card title and a tap next to ⋯ fell into the menu (reviewer finding 4).
       So on the left it is flush with the button; to the right it overflows into the card edge and beyond. */
  .icon-btn--tap::after {
    content: ''; position: absolute; top: 50%; left: 0; right: auto;
    width: 44px; height: 44px; transform: translateY(-50%);
  }
}

/* ---------- Notifications (bell + badge + panel) — KOMPONENTY §30 ---------- */
.notif-trigger { position: relative; }
/* badge with the unread count; an empty one (count 0) is hidden */
.notif-badge {
  position: absolute; top: -3px; right: -3px; min-width: var(--badge); height: var(--badge); padding: 0 var(--space-1);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-solid); color: var(--on-solid); border: 2px solid var(--card);
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; line-height: 1; box-sizing: border-box;
}
.notif-badge:empty { display: none; }
/* panel */
.notif-panel { min-width: 340px; max-width: calc(100vw - 24px); padding: 0; border-radius: var(--radius-12); box-shadow: var(--shadow-lg); }
/* phone: a panel aligned to the right edge of the bell overflowed off the screen on the left (the bell is not at the edge) —
   so on a narrow screen it sticks to the window edges (found in the stage 1B screenshots, 390 px) */
@media (max-width: 560px) { .notif-panel { position: fixed; left: 12px; right: 12px; top: 58px; min-width: 0; max-width: none; } }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
.notif-head strong { font-size: var(--text-md); line-height: var(--leading-md); }
.notif-markall { border: none; background: none; font: inherit; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--accent); cursor: pointer; padding: .15rem var(--space-1); border-radius: var(--radius-6); }
.notif-markall:hover { background: var(--accent-soft); }
.notif-scroll { max-height: min(60vh, 420px); overflow-y: auto; padding: var(--space-1); }
.notif-empty { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); text-align: center; padding: 1.4rem .8rem; }
/* notification row (click = mark as read + go to the thing) */
/* `--nc` = the colour of the kind (dot, icon), `--nc-solid` = its shade under the white count */
.notif-item {
  --nc: var(--accent); --nc-solid: var(--accent-solid);
  display: flex; align-items: flex-start; gap: .6rem; width: 100%; text-align: left;
  border: none; background: none; font: inherit; cursor: pointer; color: var(--ink);
  padding: .6rem .7rem; border-radius: var(--radius-8);
}
.notif-item:hover { background: var(--bg); }
.notif-item--approved { --nc: var(--teal); --nc-solid: var(--teal-solid); }
.notif-item--returned { --nc: var(--orange); --nc-solid: var(--orange-solid); }
.notif-item--rejected { --nc: var(--red); --nc-solid: var(--red-solid); }
.notif-item--pending { --nc: var(--accent); --nc-solid: var(--accent-solid); }
.notif-item--task { --nc: var(--accent); --nc-solid: var(--accent-solid); }
.notif-item--comment { --nc: var(--accent); --nc-solid: var(--accent-solid); }
.notif-item--mention { --nc: var(--accent); --nc-solid: var(--accent-solid); }
.notif-dot { flex: none; width: 8px; height: 8px; margin-top: .4rem; border-radius: 50%; background: var(--nc); opacity: .3; }
/* a comment notification has a speech bubble instead of the dot — a conversation is recognisable at first glance */
.notif-ico { flex: none; display: inline-flex; margin-top: .18rem; color: var(--nc); opacity: .45; }
.notif-item.is-unread { background: var(--accent-soft); }
/* hover of an unread row = an accent ring, not a filter: `brightness(.98)` darkened the text too (grey 4.45:1 in oled-dark) */
.notif-item.is-unread:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.notif-item.is-unread .notif-dot { opacity: 1; }
.notif-item.is-unread .notif-ico { opacity: 1; }
.notif-item.is-unread .notif-title { font-weight: 600; }
.notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.notif-title { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-sm); }
.notif-sub { font-size: var(--font-size-secondary); line-height: var(--line-height-secondary); color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-time { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); margin-top: .1rem; }
.notif-count {
  flex: none; align-self: center; min-width: 22px; height: 20px; padding: 0 var(--space-1-5);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nc-solid); color: var(--on-solid); border-radius: var(--radius-10); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700;
}
.notif-foot { display: block; text-align: center; padding: .6rem; border-top: 1px solid var(--line); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--accent); }
.notif-foot:hover { background: var(--bg); }
/* the full notifications page — rows one below another with a separator */
.notif-page-list { padding: .4rem; }
.notif-page-list .notif-item + .notif-item { border-top: 1px solid var(--line); border-radius: 0; }

/* ---------- Impersonation (admin "Zobrazit jako…") — banner + picker ---------- */
.imp-banner {
  position: sticky; top: 60px; z-index: 49;
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  background: var(--accent-solid); color: var(--on-solid); padding: var(--space-2) var(--space-4); font-size: var(--text-md); line-height: var(--leading-md); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.imp-banner-btn {
  border: 1px solid var(--on-solid-border); background: var(--on-solid-fill); color: var(--on-solid);
  font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; cursor: pointer; padding: var(--space-1) .7rem; border-radius: 7px;
}
.imp-banner-btn:hover { background: var(--on-solid-fill-hover); }
.imp-list { display: flex; flex-direction: column; gap: .35rem; }
.imp-row { display: flex; align-items: center; gap: .7rem; padding: var(--space-2) .6rem; border-radius: var(--radius-10); }
.imp-row:hover { background: var(--bg); }
.imp-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.imp-row-name { font-weight: 600; }

/* ---------- Sign-in / title page (a centred card on a branded background) ---------- */
.login-body { min-height: 100vh; margin: 0; background: linear-gradient(160deg, var(--accent-soft) 0%, var(--bg) 62%); }
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); }
.login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-16); padding: var(--space-8) 1.8rem; box-shadow: var(--shadow-xl); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-bottom: var(--space-1); }
.login-logo { width: 30px; height: 30px; color: var(--accent); }
.login-wm { font-size: var(--display-xs); line-height: var(--leading-display-xs); font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.login-wm small { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--muted); margin-left: .15rem; }
.login-sub { text-align: center; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); margin: 0 0 1.3rem; }
.login-foot { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); } /* dimmed by colour, not opacity (UI-ZASADY §2) */
/* help below the sign-in form (forgotten password — KOMPONENTY §37) */
.login-hint { text-align: center; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); margin: var(--space-4) 0 0; }

/* Messages / toasts — a bubble after an action (a coloured stripe on the left by type). Rendered by app.js. */
/* Message (toast) — centred at the top, a little below the top bar (.topbar = 60px). Prominent: a thick
   coloured stripe + a subtle tint by type + larger text and a stronger shadow. Animation from the top down. */
#toast-root { position: fixed; left: 50%; top: calc(60px + .9rem); transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: .6rem; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; min-width: min(20rem, 92vw); max-width: 92vw; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: var(--radius-12); box-shadow: var(--shadow-lg); padding: var(--space-4) 1.3rem; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 600; opacity: 0; transform: translateY(-12px); transition: opacity .22s ease, transform .22s ease; }
.toast.in { opacity: 1; transform: translateY(0); }
.toast--success { border-left-color: var(--teal); background: var(--teal-soft); }
.toast--error { border-left-color: var(--red); background: var(--red-soft); }
.toast--info { border-left-color: var(--accent); background: var(--accent-soft); }
/* An action in the message (today "Zpět" after unticking a task) — always right of the text, underlined like a link. */
.toast { display: flex; align-items: baseline; gap: .8rem; }
.toast-action { flex: 0 0 auto; margin-left: auto; background: none; border: 0; padding: .1rem .2rem; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; border-radius: var(--radius-6); }
.toast-action:hover { color: var(--ink); }
.toast-action:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* phone: a long message keeps the full width, the action (link / Zpět) wraps below it instead of squeezing it */
@media (max-width: 560px) { .toast { flex-wrap: wrap; } .toast-action { margin-left: 0; } }

/* A "working" indicator — a thin stripe at the top while an htmx action runs (app.js controls the class). */
body.htmx-active::after { content: ''; position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--accent); z-index: 9999; animation: htmx-bar 1s linear infinite; }
@keyframes htmx-bar { 0% { opacity: .35; } 50% { opacity: 1; } 100% { opacity: .35; } }
/* the "expand/collapse all" toggle above merged activities — the arrow rotates when expanded */
.act-toggle svg { transition: transform .15s ease; }
.act-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.hover-row .row-actions { opacity: 0; transition: opacity .12s ease; }
.hover-row:hover .row-actions, .hover-row:focus-within .row-actions { opacity: 1; }
/* section variant (hidden adding; the context link of the left panel, catalogue §80): applies to the whole section
   including nested wrappers, hidden by transparency, so it keeps its place, a screen reader reads it and Tab reaches it */
.hover-area .area-actions { opacity: 0; transition: opacity .12s ease; }
.hover-area:hover .area-actions, .hover-area:focus-within .area-actions { opacity: 1; }
/* an open panel inside the actions keeps the actions visible; a trigger that is itself the link stays while its panel is open */
.row-actions:has(.menu.open), .area-actions:has(.menu.open), .menu.open > .area-actions, .menu.open > .editable .area-actions { opacity: 1 !important; }
/* the tags of the record heading are their own area: they take the rest of the row after the status, so pointing next
   to the status shows „Přidat štítek“ and pointing at the status does not */
.id-chips > .hover-area { flex: 1 1 auto; }
/* touch devices without hover: actions always visible */
@media (hover: none) {
  .hover-row .row-actions, .hover-area .area-actions { opacity: 1; }
}

/* Text link `.odkaz` (catalogue §80, spec kontextove-odkazy-v1 §3.1, variant A): ONE look for every link that is an action
   or a way on and does not stand in a row of a list, always underlined, in the accent colour; pointing makes it the
   stronger `--accent-hover` (darker in the light skins, lighter in the dark ones) with a thicker line. For `<a>` and
   `<button>` (a panel trigger) alike; the size of the type comes from around it. */
.odkaz {
  display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; text-align: left;
  text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: var(--underline-width);
  text-underline-offset: var(--underline-offset);
}
.odkaz:hover { color: var(--accent-hover); text-decoration-line: underline; text-decoration-thickness: var(--underline-width-hover); }
.odkaz:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-4); }
/* details/summary as a link, without the disclosure arrow */
summary.odkaz { list-style: none; }
summary.odkaz::-webkit-details-marker { display: none; }
summary.odkaz::marker { content: ''; }
/* a link after the sentence of an empty value breaks as a whole (hidden, it would not leave „Přiřadit“ on one line and
   „osobu.“ on the next) */
.empty-inline .odkaz { white-space: nowrap; }

/* ---------- Modal card ---------- */
.modal-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-16);
  padding: var(--space-6); max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.modal-card h3 { margin: 0 0 1.1rem; font-size: var(--font-size-modal-title); line-height: var(--line-height-modal-title); font-weight: 650; }

/* ---------- Large modal (overlay centred on the screen) ---------- */
/* The card is vertically centred (align-items:center) and grows symmetrically up and down.
   `max-height` keeps it within the screen, so it never overflows the overlay (no clipping of the top edge);
   when the content is taller, it scrolls inside the card (a scrollbar as before). */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh var(--space-4); overflow-y: auto;
}
/* positioned: an absolutely positioned hidden element (`.chip-toggle input`, `.sr-only`) stays inside the window;
   without it it reached the overlay, which got a scroll of its own and the whole window scrolled away (queue no. 27) */
.modal-overlay .modal-card { position: relative; width: 100%; max-width: 600px; max-height: 92vh; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.modal-head h3 { margin: 0; }

/* ---------- The header and the scrolling of a window (catalogue §21, queue no. 27, approved by Petr 4 Nov 2026,
   mockup sticky-window-header.html) ----------
   ModalShell / OverModalShell: the header `.modal-head` stays, the body `.modal-skrol` is the only thing that scrolls,
   the buttons (the last `.form-actions` of the form) stick to the bottom. The window is at most as tall as the screen
   (dvh); no other scrollbar inside. */
.modal-overlay .modal-card:has(> .modal-skrol) {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  max-height: calc(100dvh - 8vh);
}
.modal-card:has(> .modal-skrol) > .modal-head { flex: none; margin: 0; gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-2); }
.modal-card:has(> .modal-skrol) > .modal-head > h3 { flex: 1 1 auto; min-width: 0; }
/* the only scrollbar of the window; the line under the header shows only once the content runs under it (the covering
   strip is `local`, it scrolls away with the content). The air between the title and the content is split: half under
   the header, half at the top of the body (as on a phone). The top edge of the body clips what is above it, and a lead-in
   pulled up to the title by a negative margin (`.sdilet-co`, `p.sub`, `.uzaverka-uvod`: written for the old margin under
   the title) lay half under the header with no air above it in the body (Petr 5 Nov 2026). */
.modal-skrol {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-2) var(--space-6) var(--space-6);
  background:
    linear-gradient(var(--card), var(--card)) top / 100% var(--space-2) no-repeat local,
    linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat scroll;
}
/* the window name · the record name on one line; the record ends with an ellipsis, the whole name is in `title` and in
   the content of the window. The separator „ · “ is drawn here and not read (alternative text ""); a screen reader
   reads the hidden comma of the heading instead. The first `content` is for a browser without the alternative text. */
.okno-titul { display: flex; align-items: baseline; white-space: nowrap; }
.okno-titul .okno-nazev { flex: none; }
.okno-titul:has(.okno-zaznam) .okno-nazev { color: var(--muted); font-weight: 600; }
.okno-titul .okno-zaznam::before { content: "\00a0·\00a0"; content: "\00a0·\00a0" / ""; color: var(--muted); font-weight: 600; }
.okno-titul .okno-zaznam { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the buttons of the window (the last `.form-actions` of its form, or of the body itself: „Proč nelze smazat“, „Jak
   pracovat s rozpočty“) stick to the bottom across its whole width; at rest they look as before (the same air above and
   below). The line above them only while content is left under them: a scroll timeline (Chrome, Edge, Safari 26); a
   browser without it shows no line and nothing else changes. `scroll-padding-bottom` (the buttons with their line)
   keeps a field reached by Tab from hiding under them. */
.modal-skrol:has(> form:last-child > .form-actions:last-child, > .form-actions:last-child) { padding-bottom: 0; }
.modal-skrol:has(> form > .form-actions:last-child, > .form-actions:last-child) {
  scroll-padding-bottom: calc(var(--control-md) + var(--space-3) + var(--space-6) + 1px);
}
.modal-skrol > form > .form-actions:last-child, .modal-skrol > .form-actions:last-child {
  position: sticky; bottom: 0; z-index: 1;
  margin: var(--space-1) calc(-1 * var(--space-6)) 0; padding: var(--space-3) var(--space-6) var(--space-6);
  background: var(--card); border-top: 1px solid transparent;
}
@supports (animation-timeline: scroll()) {
  .modal-skrol > form > .form-actions:last-child, .modal-skrol > .form-actions:last-child { animation: okno-pata-cara linear both; animation-timeline: scroll(nearest block); }
}
@keyframes okno-pata-cara { from, 97% { border-top-color: var(--line); } to { border-top-color: transparent; } }
/* phone: a record window (`.modal-zaznamu`) fills the screen; a confirmation, another small window and the window over
   a window keep their margins. In the header the window name small above the record name, that on two lines at most. */
@media (max-width: 560px) {
  .modal-overlay:has(> .modal-card.modal-zaznamu > .modal-skrol) { padding: 0; }
  .modal-overlay .modal-card.modal-zaznamu:has(> .modal-skrol) { max-width: none; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .modal-card.modal-zaznamu > .modal-head { padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
  .modal-card.modal-zaznamu > .modal-skrol { padding: var(--space-2) var(--space-4) var(--space-6); }
  .modal-card.modal-zaznamu > .modal-skrol > form > .form-actions:last-child, .modal-card.modal-zaznamu > .modal-skrol > .form-actions:last-child {
    margin-inline: calc(-1 * var(--space-4)); padding: var(--space-3) var(--space-4) var(--space-4);
  }
  .modal-card.modal-zaznamu > .modal-skrol:has(> form > .form-actions:last-child, > .form-actions:last-child) {
    scroll-padding-bottom: calc(var(--control-md) + var(--space-3) + var(--space-4) + 1px);
  }
  /* a short record window keeps its buttons at the bottom of the screen, not under the last field with the screen
     empty below: the form fills the body and `top` (a share of the body) pushes the buttons down to its bottom edge;
     with a long form `bottom: 0` holds them there. `top` is exactly the height of the buttons with their line — less
     would push them partly out of sight. */
  .modal-card.modal-zaznamu > .modal-skrol > form:last-child:has(> .form-actions:last-child) { min-height: 100%; }
  .modal-card.modal-zaznamu > .modal-skrol > form:last-child > .form-actions:last-child {
    top: calc(100% - (var(--control-md) + var(--space-3) + var(--space-4) + 1px));
  }
  .okno-titul:has(.okno-zaznam) { flex-direction: column; align-items: stretch; }
  .okno-titul:has(.okno-zaznam) .okno-nazev { font-size: var(--text-xs); line-height: var(--leading-xs); }
  .okno-titul .okno-zaznam::before { content: none; }
  .okno-titul .okno-zaznam {
    font-size: var(--text-md); line-height: var(--leading-md); white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
}

/* ---------- Editing a field = click on the PENCIL (KOMPONENTY §18) ---------- */
/* The edit trigger is EXCLUSIVELY the pencil ✎ (a rounded square, styled like the menu icons).
   On hover the value/row gets only a subtle tint (context indication); the text stays
   freely selectable (no unwanted editing when selecting/copying). */
.editable {
  position: relative; border-radius: var(--radius-6);
  padding: .15rem 1.9rem .15rem .4rem; margin: 0 -.4rem;
  transition: background-color .12s ease;
}
.editable:hover { background: rgba(var(--shadow-color), .05); }
/* the pencil = the ONLY trigger; it follows the main menu icons (.nico): a rounded square,
   appears on row hover, and gets an accent tint when hovered itself */
.pen-ind {
  position: absolute; top: .18rem; right: .22rem; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: var(--radius-8); color: var(--muted); cursor: pointer;
  border: none; background: none; padding: 0; font: inherit;
  opacity: 0; transition: opacity .12s, background-color .12s, color .12s;
}
.pen-ind svg { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; }
.editable:hover .pen-ind, .pen-ind:focus-visible { opacity: 1; }
.pen-ind:hover { background: var(--accent-soft); color: var(--accent); }
.pen-ind:focus-visible { opacity: 1; background: var(--accent-soft); color: var(--accent); outline: var(--focus-width) solid var(--focus-ring); }
@media (hover: none) { .pen-ind { opacity: 1; } }
/* an instant tooltip ONLY on the pencil (not on the whole row) */
.pen-ind[data-tip]:hover::after, .pen-ind[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0;
  background: var(--ink); color: var(--bg); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 500;
  padding: .2rem var(--space-2); border-radius: var(--radius-6); white-space: nowrap; z-index: 250; pointer-events: none;
}
/* an empty value = a prompt to fill it in */
.editable .placeholder { color: var(--muted); font-style: italic; }
/* empty state in a panel (left, default indentation): "Žádná poznámka. Přidat poznámku.", the sentence always
   visible, the link after it a context link `.odkaz.area-actions` (catalogue §80)
   (CAUTION: the global .empty is centred with padding for dashboards — do not use it here) */
.empty-inline { color: var(--muted); font-weight: 400; font-style: normal; }
/* Contact row (style from example-zakaznik): type icon + value + label.
   The user recognises the type from the icon/value → no "Telefon/E-mail" text label. */
.contact-row { display: flex; align-items: center; gap: var(--space-2); padding: .18rem 0; }
.contact-row .val { font-weight: 400; }
.cico { display: inline-flex; flex: none; color: var(--muted); }
.cico svg { width: var(--icon-md); height: var(--icon-md); stroke-width: 2.25; }
/* The label of a contact („Web firmy“, „Pracovní“) is not a pill (catalogue §9, spec kontextove-odkazy-v1 §3.3): it is in
   the tooltip above the row (or the table cell) together with the whole value, and in `aria-describedby` for a screen
   reader; a contact without a label has none. The tooltip comes after 0.3 s (no flashing while the pointer passes),
   the pointer can move onto it (the transparent bottom border bridges the gap) and Esc closes it (`.tip-zavreno` from
   `app.js`, until the pointer leaves or the focus goes), WCAG 1.4.13. A touch device has no tooltip. */
:is(.contact-row, .kontakt-bunka)[data-tip] { position: relative; }
.kontakt-bunka { display: inline-block; max-width: 100%; }
:is(.contact-row, .kontakt-bunka)[data-tip]::after {
  content: attr(data-tip); position: absolute; bottom: 100%; left: 0; z-index: 250;
  width: max-content; max-width: min(18rem, 100%); white-space: normal; overflow-wrap: anywhere; text-align: left;
  background: var(--ink); color: var(--bg); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 500;
  padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-6); visibility: hidden;
  border-bottom: var(--space-1-5) solid transparent; background-clip: padding-box;
}
.kontakt-bunka[data-tip]::after { max-width: 18rem; }
:is(.contact-row, .kontakt-bunka)[data-tip]:hover::after, :is(.contact-row, .kontakt-bunka)[data-tip]:has(:focus-visible)::after { visibility: visible; transition: visibility 0s .3s; }
:is(.contact-row, .kontakt-bunka)[data-tip].tip-zavreno::after { visibility: hidden; transition: none; }
@media (hover: none) { :is(.contact-row, .kontakt-bunka)[data-tip]::after { display: none; } }
/* contact rows are NOT separated by a line — the line belongs between sections (Petr, 16 Sep 2026) */
/* a contact or person row is a value like any other (catalogue §18): hover greys it, the pencil vertically centred in the row */
#contacts .editable > .pen-ind { top: 50%; transform: translateY(-50%); }
/* a long address (LinkedIn profile) must not spill out of the panel — it is shortened with an ellipsis, the full one is in the title */
.contact-row { min-width: 0; }
.contact-row .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Left panel sections (style from example-zakaznik) ---------- */
.idblock { padding-bottom: .1rem; }
.id-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.idname { font-size: var(--display-xs); font-weight: 650; letter-spacing: -.01em; line-height: var(--leading-display-xs); }
/* record name with the pencil (`NameBox`) — sizes by a class, not an inline style (that would override hiding on a phone) */
.namebox { display: block; margin-top: .45rem; }
.id-badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
/* left panel sections are separated by a thin line (like the task rows on the right); the section heading is one step bolder */
.group { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.group-h { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink); margin: 0 0 .35rem; display: flex; align-items: center; gap: .4rem; min-height: 28px; }
/* status + labels below the name in one row */
.id-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) .35rem; margin-top: .35rem; }
.id-chips .editable { padding-right: 1.65rem; }
.id-chips > .menu + .menu .editable { margin-left: -.3rem; }
.group-h .ha { margin-left: auto; display: inline-flex; gap: .05rem; align-items: center; }
/* ---------- Opening row × value edited in place (spec `zaznam-v2.md` §6, R21) ----------
   It must be clear at first glance what a click will do:
   •  A ROW WITH AN ARROW › leads to the own page of a bigger record (person, project, deal).
      On hover it gets an ACCENT tint, the arrow lightens to the accent, the cursor is a hand. It has NO
      pencil — a bigger record is edited in its own record, not from here.
   •  A VALUE EDITED IN PLACE (`.editable`) has a neutral background and a pencil at the right edge.
   (+) in the section heading, the arrow › and the pencil ✎ have the same 26 px wide square, so they sit
   on one vertical axis at the right edge of the panel. */
.row-open {
  display: flex; align-items: center; gap: .6rem; padding: .3rem .4rem; margin: 0 -.4rem;
  border-radius: var(--radius-8); color: var(--ink); text-decoration: none; cursor: pointer;
  transition: background-color .12s ease;
}
.row-open:hover { background: var(--accent-soft); text-decoration: none; }
.row-open:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }
.row-open .av { width: 40px; height: 40px; font-size: var(--text-md); line-height: var(--leading-md); flex: none; }
.row-open-txt { min-width: 0; position: relative; } /* holds its hidden name text (`.sr-only`) */
.row-open .nm { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-open .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-open .sipka { display: inline-grid; place-items: center; width: 26px; flex: none; margin-left: auto; color: var(--muted); }
/* a chip below the label (client status at the Company row in the deal panel) — its own line, so it is
   not cut by the ellipsis of `.sub` (Petr, 18 Sep 2026) */
.row-open .chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: .15rem; }
.row-open:hover .sipka { color: var(--accent); }
/* a company's circle in an opening row (40 px) — three letters (catalogue §3) */
.row-open .av.av-3 { font-size: .66rem; }
/* People of a company: three lines — name, position, phone or e-mail (catalogue §47 addendum `.row-open--3r`; spec
   firma-panel-lide-v1 §3.1, Petr 9 Oct 2026: the 2nd and 3rd line 12 px). Name .875rem/600, the lines .75rem muted,
   line height 1.25 → about 47 px, just over the 40 px circle. */
.row-open--3r { padding: .4rem; }
.row-open--3r .av { font-size: .95rem; }
.row-open--3r .row-open-txt { line-height: 1.25; }
.row-open--3r .nm { font-size: var(--text-sm); line-height: var(--leading-sm); }
.row-open--3r .sub { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
/* „+ N dalších“ under the fifth person: a built-in <details> (pattern §52B) — no JS, the state is not remembered; open,
   the rest stands above the summary and it reads „Méně“ with the chevron turned up */
.lide-dalsi { display: flex; flex-direction: column; }
.lide-dalsi > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start;
  font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--accent); padding: .35rem .4rem; margin: .1rem -.4rem 0; border-radius: var(--radius-8);
}
.lide-dalsi > summary::-webkit-details-marker { display: none; }
.lide-dalsi > summary:hover { background: var(--accent-soft); }
.lide-dalsi > summary:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }
.lide-dalsi .sipka-dolu { display: inline-flex; transition: transform .15s ease; }
.lide-dalsi[open] > summary .sipka-dolu { transform: rotate(180deg); }
.lide-dalsi .mene { display: none; }
.lide-dalsi[open] .mene { display: inline; }
.lide-dalsi[open] .vice { display: none; }
.lide-dalsi[open] > summary { order: 2; }
/* the same axis as the arrow: the pencil and the (+) icons in the section heading */
.editable > .pen-ind { width: 26px; height: 26px; right: .12rem; }
.group-h .ha .icon-btn { width: 26px; height: 26px; }

/* an attached record in the complete modal (R15): only the name (a link to its page), the role on the link and
   "Odpojit". The row adding another link (`.pripoj-pridat`) has the same columns — the search over the circle and the
   name, the role under the roles above, an empty place of "Odpojit" (`.pripoj-misto`, as wide as "Odpojit"), so the
   two role fields stand one under the other (Petr 15 Oct 2026) */
.pripoj-radek { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.pripoj-nazev { font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.field, .oddil) .input.pripoj-role { width: 8.5rem; flex: none; margin-left: auto; }
:is(.field, .oddil) .input.pripoj-hledat { width: auto; flex: 1 1 auto; min-width: 0; }
.pripoj-odpojit, .pripoj-misto { width: 4.5rem; flex: none; }
.pripoj-odpojit { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); white-space: nowrap; cursor: pointer; }
.pripoj-odpojit input { margin: 0; }

/* people = navigation rows (no separator — the line is only between sections) */
.prow { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; text-decoration: none; color: var(--ink); border-radius: var(--radius-6); }
.prow:hover { background: rgba(var(--shadow-color), .04); }
.editable .prow:hover { background: none; }
.prow .nm { font-weight: 600; }
/* The avatar of an assigned person/company in the People block is more prominent than the small av-sm */
.prow .av { width: 40px; height: 40px; font-size: var(--text-md); line-height: var(--leading-md); }
/* IČO/DIČ pair in the company details */
.minirow { display: flex; gap: 1.8rem; margin-top: .45rem; }
/* a contact row in the complete company/person modal and at a team member (no horizontal scrollbar) */
.crow { display: flex; gap: .4rem; align-items: flex-start; margin-bottom: var(--space-2); }
/* width:auto beats .field .input{width:100%} — otherwise a field stretches the row out of the modal */
.crow .input, .crow select.input { min-width: 0; width: auto; }
/* the type must fit "LinkedIn" (the longest option), the label "LinkedIn" too — otherwise they get clipped */
/* the type is a picker without search (catalogue §19): wide enough for „LinkedIn“ and its arrow */
.crow > .pick-one { width: 7.5rem; flex: none; }
.crow .clab { width: 100px; flex: none; }
/* on a phone the row wraps: the value across the full width at the top, the type and label below it —
   otherwise the value gets 50 px and one cannot read what is in it */
@media (max-width: 560px) {
  .crow { flex-wrap: wrap; }
  .crow .cval { order: -1; flex: 1 1 100%; }
  .crow .clab { flex: 1 1 auto; width: auto; }
  /* a linked row on a phone: the circle and the name on the first line, the role and "Odpojit" under the name; the row
     adding another: the search over the whole first line, the role under the roles above */
  .pripoj-radek { flex-wrap: wrap; row-gap: .35rem; }
  .pripoj-nazev { flex: 1 1 calc(100% - 32px - .5rem); }
  :is(.field, .oddil) .input.pripoj-role { width: auto; min-width: 0; flex: 1 1 0; margin-left: calc(32px + .5rem); }
  :is(.field, .oddil) .input.pripoj-hledat { flex-basis: 100%; }
}
.crow .cval { flex: 1 1 auto; min-width: 0; }

/* ---------- Kanban (Tasks v2) ---------- */
/* the board breaks out of the .page max-width → the columns themselves use the full screen width
   (the header, switch and toolbar keep the standard width) */
.kanban { display: flex; gap: .8rem; align-items: flex-start; overflow-x: auto;
  width: 100vw; margin-left: calc(50% - 50vw); padding: 0 var(--space-6) var(--space-2); box-sizing: border-box;
  /* few columns = the board in the middle of the screen (Petr, 17 Sep 2026); `safe` = when they do not fit, they start
       on the left and can be scrolled (without it the first columns would escape past the left edge, out of scrollbar reach) */
  justify-content: safe center; }
.kcol { flex: 0 0 270px; width: 270px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-12); display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.kcol-head { display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
/* a fine --line ring keeps a pastel column colour visible on a light surface (spec paleta-barev-sloupcu-v1 §4.6) */
.kcol-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--line); }
.kcol-name { font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-sm); }
.kcol-count { display: inline-flex; align-items: center; height: var(--chip-sm); color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); background: var(--accent-soft); border-radius: var(--radius-full); padding: 0 .45rem; }
.kcol-head .icon-btn { margin-left: auto; }
.kcol-body { padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; min-height: 44px; flex: 1; }
.kcol-archive { display: block; padding: var(--space-2) .7rem; border-top: 1px solid var(--line); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); text-decoration: none; }
.kcol-archive:hover { color: var(--accent); }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-10); padding: var(--space-2) .6rem; box-shadow: var(--shadow-xs); cursor: grab; }
.kcard.dragging { opacity: .45; }
/* The trace of a done card (variant A): the task was planned for this month but completed in another one.
   It does not disappear — it stays dimmed and the chip "Hotovo 3. 9. ›" leads to the month of completion. */
.kcard-trace .kcard-title { text-decoration: line-through; text-decoration-color: var(--muted); }
/* ---------- Dimmed record — BY COLOUR, never by opacity (KOMPONENTY §62, UI-ZASADY §2) ----------
   `.je-neaktivni` = an inactive record that stays in a listing: deleted (shown by „Zobrazit smazané"), a switched-off
   List item or catalogue service, a deactivated team member, an ended service. A done kanban card (`.kcard-hotova`,
   in any column, not struck through — SUMMARY) and its trace (§11b) are dimmed the same way. Clearly set apart, yet
   every text keeps 4.5:1 (opacity took it to 2.1–4.3:1): a band of its own (`--inactive-bg`, a clearly different
   surface in every skin), grey text and links, a grey avatar, labels with their soft text colour. Chips, labels and the
   avatar stand on the card surface, so they do not melt into the band. Its status chip („Smazáno", „Vypnuto",
   „Deaktivován", „Ukončená") says why in words — the colour is never the only cue. Actions keep their normal look. */
.je-neaktivni { background: var(--inactive-bg); color: var(--muted); }
/* a hovered dimmed table row keeps its band (a live row's hover must not light it up) */
.tbl tr.je-neaktivni:hover td { background: var(--inactive-bg); }
/* a card on a board column (the column itself is `--surface-2`, often the band's colour): the band and a dashed
   `--muted` outline (≥ 3:1 against the column), no shadow — never a filled card like a live one */
.kcard.je-neaktivni, .kcard-hotova, .kcard-trace {
  background: var(--inactive-bg); color: var(--muted); border: 1px dashed var(--muted); box-shadow: none;
}
/* a row with no side padding of its own (comments, service and work-record rows): the band reaches past the text */
.je-neaktivni:not(tr, .card, .kcard) { box-shadow: -.6rem 0 0 var(--inactive-bg), .6rem 0 0 var(--inactive-bg); }
/* the record name in a dimmed table row is grey like the rest of the row — still a link (underlined on hover) */
:is(.je-neaktivni, .kcard-hotova, .kcard-trace) :is(.zmineny, .kcard-title, .nazev-zaznamu):not(:hover),
tr.je-neaktivni a:not([class]),
.je-neaktivni .note-content { color: inherit; }
/* a link in the running text of a dimmed record stays a link: its colour (`--accent`, ≥ 4.5:1 on the band), underlined */
.je-neaktivni :is(.note-content, .comment-body) a { color: var(--accent); text-decoration: underline; }
.je-neaktivni .chip, .je-neaktivni .cat, .je-neaktivni .av, .je-neaktivni .mention,
.kcard-hotova .chip, .kcard-hotova .cat, .kcard-trace .chip, .kcard-trace .cat, .kcard-otisk .cat { background: var(--card); }
.je-neaktivni .chip:not([class*="chip-soft-"]), .je-neaktivni .av, .je-neaktivni .mention { color: var(--muted); }
:is(.je-neaktivni, .kcard-hotova, .kcard-trace, .kcard-otisk) .cat-teal { color: var(--teal-ink); }
:is(.je-neaktivni, .kcard-hotova, .kcard-trace, .kcard-otisk) .cat-pink { color: var(--av-p-ink); }
:is(.je-neaktivni, .kcard-hotova, .kcard-trace, .kcard-otisk) .cat-red { color: var(--red); }
:is(.je-neaktivni, .kcard-hotova, .kcard-trace, .kcard-otisk) .cat-orange { color: var(--chip-orange-ink); }
:is(.je-neaktivni, .kcard-hotova, .kcard-trace, .kcard-otisk) .cat-indigo { color: var(--accent); }
/* a palette colour in a dimmed record: the card's surface, grey text and a thin outline in the colour (the hue stays
   recognisable; a coloured text would fail on the dark skins) — spec paleta-barev-v2 §5 */
:is(.je-neaktivni, .kcard-hotova, .kcard-trace, .kcard-otisk) .barva-palety { color: var(--muted); box-shadow: inset 0 0 0 1px var(--barva); }
/* an inline reference to an inactive record (a chip): no fill, a dashed outline, grey text — a switched-off label kept
   on a task, the task of a work record that was deleted */
.chip.chip-neaktivni { background: none; color: var(--muted); border: 1px dashed var(--muted); cursor: default; }
.label-picker .chip-toggle.chip-neaktivni:not(:has(input:checked)) { border: 1px dashed var(--muted); cursor: default; }
.kcard-top { display: flex; align-items: flex-start; gap: .45rem; }
.kcard-title { flex: 1; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500; }
.kcard-top input[type="checkbox"] { margin-top: .15rem; width: 15px; height: 15px; border-radius: 50%; accent-color: var(--teal); flex: none; }
.kcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .35rem; font-size: var(--font-size-meta); line-height: var(--line-height-meta); color: var(--muted); }
/* ⋯ belongs in the top right corner of the card — on touch too (walkthrough A19) */
.kcard-top .row-actions { margin: -.2rem -.25rem 0 0; }
.kcard-top .row-actions .icon-btn { width: 26px; height: 26px; }
/* ---------- The task card's fixed zones (catalogue §11b, spec `karta-ukolu-v2.md` §15; Petr 16 Oct 2026: „Na kartě by
   jeden údaj měl mít stejnou pozici“) — one component `CardZones` (`src/web/tasks/cardZones.tsx`) for the task card, the
   template card, the imprint and the preview in the Recipe window. Zones from the top, each left out when empty:
   labels and state chips (top left, like Trello) · the head (☐ ✨ title) · company · service · worked hours with the bar
   · „why“ of a search · a thin line · the footer (counts left, due date and the assignee's place right). A detail lives
   in its zone only and never wraps behind another one. */
.kcard-zony { position: relative; }
.kcard-zona { margin-top: var(--space-1-5); }
.kcard-chipy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
/* the company muted with a building icon (O1 = A): still the link to the company's preview, only not bold */
.kcard-kontext { display: flex; align-items: flex-start; gap: var(--space-1-5); font-size: var(--font-size-meta); line-height: var(--line-height-meta); color: var(--muted); overflow-wrap: anywhere; }
.kcard-kontext .zmineny, .kcard-kontext a { color: var(--muted); font-weight: 500; }
.kcard-kontext .zmineny:hover, .kcard-kontext a:hover { color: var(--accent); text-decoration: underline; }
.kcard-firma-ico { display: inline-flex; flex: none; padding-top: var(--space-0-5); }
.kcard-oddelovac { margin: 0 var(--space-1); }
.kcard-cerpani { font-size: var(--font-size-meta); line-height: var(--line-height-meta); color: var(--muted); }
.kcard-cerpani .progress { display: block; margin: var(--space-1) 0 0; }
.kcard-cerpani .chip { margin-top: var(--space-1); }
.kcard-zony .kcard-proc { margin-top: var(--space-1-5); }
/* the footer under a thin line (Petr: „lehce oddělit tenkou linkou“): counts left in a fixed order 💬 ☑ 📎 ≡ (a missing
   one is left out; a second row would grow ABOVE the first), the due date and the assignee's place right */
.kcard-pata { display: flex; align-items: flex-end; gap: var(--space-1); margin-top: var(--space-2); padding-top: var(--space-1-5); border-top: 1px solid var(--line);
  font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
.kcard-pocty { flex: 1 1 auto; display: flex; flex-wrap: wrap-reverse; align-items: center; align-content: center; column-gap: var(--space-2-5); row-gap: var(--space-1); min-width: 0; min-height: var(--control-icon); }
.kcard-vpravo { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: var(--control-icon); }
/* the assignee's place (26 px): a list that shows assignees keeps it on every card with a footer, so the due date never
   jumps; „Moje úkoly“ and the imprints have none — the due date stands at the right edge */
.kcard-resitel { flex: none; display: inline-grid; place-items: center; width: var(--control-icon); height: var(--control-icon); }
/* every item of the footer looks the same (Petr: „stejné stylování pro všechny ikonky a texty v patičce“): icon + text,
   12 px, weight 500, muted, no invisible padding — only the three badges below have a fill and inner padding */
.kcard-pata :is(.comment-count, .chip-pod, .chip-priloha, .ikona-popis, .kcard-termin) {
  display: inline-flex; align-items: center; gap: var(--space-1); height: auto; padding: 0;
  border-radius: var(--radius-full); background: none; color: var(--muted);
  font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the footer icons: the step `--icon-2xs` (10 px — at 12 px the drawing was taller than the digits; ADR 0059 addendum),
   the stroke from `iconStroke(10)` so the line stays as strong as the other icons of the card */
/* (`.kcard-zony` for weight: `.ikona-popis svg, .chip-pod svg` below would otherwise win with 14 px) */
.kcard-zony .kcard-pata svg { width: var(--icon-2xs); height: var(--icon-2xs); flex: none; }
/* the badges — the soft state chip (§2): all subtasks done = green, the due date passed = red, today or tomorrow = yellow
   (`--chip-yellow-*`); a done card has no due-date badge (the code draws none) */
.kcard-pata :is(.chip-pod.vse-hotove, .kcard-termin.je-po-terminu, .kcard-termin.je-brzy) { padding: var(--space-0-5) var(--space-1-5); }
/* green subtasks at the start of the row put their fill into the card's margin — the icon stays under the company's */
.kcard-pocty > .chip-pod.vse-hotove:first-child { margin-left: calc(-1 * var(--space-1-5)); }
.kcard-pata .chip-pod.vse-hotove { background: var(--teal-soft); color: var(--teal-ink); }
.kcard-pata .kcard-termin.je-po-terminu { background: var(--red-soft); color: var(--red); }
.kcard-pata .kcard-termin.je-brzy { background: var(--chip-yellow-bg); color: var(--chip-yellow-ink); }
.kcard-zony:is(.kcard-hotova, .kcard-trace, .kcard-snimek) .kcard-pata .chip-pod.vse-hotove { background: var(--card); }
/* ⋯ always in the card's top right corner (Petr: „ikonka menu "..." se bude na desktopu vždy zobrazovat vpravo nahoře“),
   with the card's fill, so a title sliding under it does not show through; labels and the title leave it its width */
.kcard-zony > .kcard-akce { position: absolute; top: var(--space-1); right: var(--space-1); z-index: 1; display: flex; margin: 0; background: inherit; border-radius: var(--radius-6); }
.kcard-zony > .kcard-akce .icon-btn { width: var(--control-icon); height: var(--control-icon); }
.kcard-zony:has(> .kcard-akce) :is(.kcard-chipy, .kcard-top) { padding-right: var(--control-icon); }
.kcard-zony .kcard-top { position: relative; }
/* The done checkbox appears in context (Petr: „po vzoru trello nezobrazuj na desktopu checkbox … chci to mít čisté“):
   hidden and not clickable like `.hover-row .row-actions` (§20), it keeps no place — the title takes the full width up to
   ⋯. It shows on hovering the card, on keyboard focus inside the card (`:has(:focus-visible)` — a mouse click does not
   keep it) and always on touch. On hover the title SLIDES by the checkbox's width (`transform`): its width and wrapping
   stay, the card keeps its height, the first line may slide under ⋯. Where the checkbox is always seen (a done card,
   touch), the title has its place by padding and nothing moves. */
.kcard-zony .kcard-hotovo { position: absolute; left: 0; top: 0; margin-top: var(--space-0-5); opacity: 0; pointer-events: none; }
.kcard-zony:is(:hover, :has(:focus-visible)) .kcard-hotovo, .kcard-zony .kcard-hotovo:checked { opacity: 1; pointer-events: auto; }
.kcard-zony:is(:hover, :has(:focus-visible)) .kcard-hotovo:not(:checked),
.kcard-zony:is(:hover, :has(:focus-visible)) .kcard-top:has(.kcard-hotovo:not(:checked)) .kcard-title { transition: opacity .12s ease, transform .12s ease; }
.kcard-zony:is(:hover, :has(:focus-visible)) .kcard-top:has(.kcard-hotovo:not(:checked)) .kcard-title { transform: translateX(calc(var(--icon-md) + var(--space-1-5))); }
.kcard-zony .kcard-top:has(.kcard-hotovo:checked) .kcard-title { padding-left: calc(var(--icon-md) + var(--space-1-5)); }
@media (hover: none) {
  .kcard-zony .kcard-hotovo { opacity: 1; pointer-events: auto; }
  .kcard-zony .kcard-top:has(.kcard-hotovo) .kcard-title { padding-left: calc(var(--icon-md) + var(--space-1-5)); }
  .kcard-zony:is(:hover, :has(:focus-visible)) .kcard-top:has(.kcard-hotovo:not(:checked)) .kcard-title { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kcard-zony:is(:hover, :has(:focus-visible)) .kcard-hotovo:not(:checked),
  .kcard-zony:is(:hover, :has(:focus-visible)) .kcard-top:has(.kcard-hotovo:not(:checked)) .kcard-title { transition: none; }
}
/* column management on the board */
.kcol-grip { cursor: grab; color: var(--muted); font-size: var(--text-md); line-height: var(--leading-md); flex: none; user-select: none; }
.kcol-pin { flex: none; font-size: var(--text-sm); line-height: var(--leading-sm); }
.kcol-name.kcol-rename { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; font: inherit; font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-sm); padding: .1rem var(--space-1); border-radius: var(--radius-6); color: var(--ink); }
.kcol-name.kcol-rename:hover { border-color: var(--line); }
.kcol-name.kcol-rename:focus { border-color: var(--accent); background: var(--card); outline: none; }
.kcol-name.kcol-drag { cursor: grab; }
/* "Přesunout do sloupce…" (catalogue §54): a modal with the board columns — row = column, choice = move;
   the column the card lies in is visible but cannot be chosen */
.presun-sloupce { display: flex; flex-direction: column; gap: .15rem; margin: 0 0 .4rem; }
.presun-sloupce .opt-txt { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.presun-sloupce .opt:disabled { cursor: default; color: var(--muted); background: none; }
/* Board period (catalogue §55, stage 1B) — set in Board settings: length · unit · start in one
   row (on a phone one below another), below it a preview of the three nearest boundaries as concrete dates */
.obdobi-delka { display: grid; gap: .6rem; grid-template-columns: 5.5rem 1fr 1fr; }
.obdobi-delka > .field { margin-bottom: .6rem; }
@media (max-width: 560px) { .obdobi-delka { grid-template-columns: 1fr 1fr; } .obdobi-delka > .field:last-child { grid-column: 1 / -1; } }
/* boundary preview: a frame on the modal background (`--card`), not a tint — grey help and a red error on `--chip-bg`
   did not meet WCAG AA in all skins (4.15–4.49 : 1); on `--card` ≥ 4.73 : 1 in all 7 (measured 18 Sep 2026) */
.obdobi-nahled { padding: .45rem .6rem; border-radius: var(--radius-8); border: 1px solid var(--line); background: var(--card); margin: 0 0 .2rem; }
.obdobi-nahled .help + .help { margin-top: var(--space-1); }
.obdobi-nahled-chyba { color: var(--red); }
.obdobi-form { margin: 0 0 .8rem; }
/* A quiet banner above the board: an ended and unclosed period (§4.5 point 4) — blocks nothing, just stays in place */
.obdobi-pruh { margin: 0 0 var(--space-2); padding: .45rem .7rem; border-radius: var(--radius-8); font-size: var(--text-sm); line-height: var(--leading-sm); background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.obdobi-pruh a { color: inherit; font-weight: 600; }
/* Closed period (catalogue §55, stage E0 — spec `sablony-seznamu-ukolu-v1.md` §4a.4): a strip „jen ke čtení“ with a
   lock above the board and in the task modal, the lock chip in the frame, a state mark instead of the card checkbox */
.obdobi-pruh--zamceno { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.obdobi-pruh--zamceno .pruh-ico { display: inline-flex; margin-top: .15rem; color: var(--muted); }
.obdobi-pruh--zamceno .pruh-text { flex: 1 1 16rem; min-width: 0; }
.obdobi-pruh--zamceno form { margin: 0; }
.lista-mesic .chip { display: inline-flex; align-items: center; gap: var(--space-1); }
.kcard-zamcena { cursor: default; }
.kcard-stav { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-top: .15rem; border-radius: 50%; border: 1px solid var(--muted); background: var(--card); color: var(--teal-ink); }
/* The snapshot of a closed period and imprints (catalogue §55, stage E0d — spec `sablony-seznamu-ukolu-v1.md` §4a.4b,
   mockup `mockupy/otisk-prenesenych.html`). A closed period is drawn from its snapshot: the imprint of a done or kept
   card looks like a locked card (`.kcard-zamcena` + `.kcard-stav`). The imprint of a CARRIED task is a „ghost“
   (`.kcard-otisk`) — „a task card that is no task any more“ (Petr 2 Oct 2026): no fill, no column colour edge and no
   shadow, a dashed `--muted` outline (≥ 3:1 against the column, like a muted card §62), a grey title without strike-through
   (struck through is the trace of a done card §11b), a dashed ring with an arrow instead of the checkbox and the chip link
   „Přeneseno do října 2026 ›“. A click on an imprint's title opens its preview (§50). */
.kcard.kcard-otisk { background: none; color: var(--muted); border: 1px dashed var(--muted); box-shadow: none; cursor: default; }
.kcard-otisk .kcard-title, .task-otisk .task-titulek { color: var(--muted); }
:is(.kcard-otisk, .kcard-snimek, .task-snimek) :is(.kcard-title, .task-titulek)[role="button"] { cursor: pointer; text-underline-offset: 3px; }
:is(.kcard-otisk, .kcard-snimek, .task-snimek) :is(.kcard-title, .task-titulek)[role="button"]:hover { color: var(--accent); text-decoration: underline; }
.kcard-snimek { cursor: default; }
.kcard-otisk-ico { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-top: .15rem; border-radius: 50%; border: 1px dashed var(--muted); color: var(--muted); }
.kcard-otisk-ico svg { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 3; }
/* The List of a list with periods: blocks by columns (the block head = the dot, the column name, the count); an
   imprint's row has the status mark instead of the checkbox */
.task-group .kcol-dot { width: 8px; height: 8px; }
.task-item :is(.kcard-stav, .kcard-otisk-ico) { margin-top: .2rem; }
/* the imprint's preview (§50): its mark at the size of a preview's avatar slot */
.nahled-hlava :is(.kcard-otisk-ico, .kcard-stav) { width: 30px; height: 30px; margin: 0; }
.nahled-hlava :is(.kcard-otisk-ico, .kcard-stav) svg { width: var(--icon-md); height: var(--icon-md); stroke-width: 2.25; }
.nahled .fact .val .chip { margin-left: .2rem; }
/* The closing modal (M8): a short text, counts of open tasks by state, one checkbox, one sentence under it */
.uzaverka-uvod { margin: -.4rem 0 .8rem; font-size: var(--text-sm); line-height: var(--leading-sm); }
/* a link inside the text ("Zobrazit ›" — E0g) is underlined: colour alone does not tell it apart (WCAG 1.4.1, axe link-in-text-block) */
.uzaverka-uvod a { text-decoration: underline; text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); }
.uzaverka-pocty { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: var(--text-sm); line-height: var(--leading-sm); }
.uzaverka-pocty li { display: flex; align-items: center; gap: var(--space-2); }
.uzaverka-dusledek { margin: -.4rem 0 .4rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
/* `.check` sets its own margin later in the file — the checkbox of the closing modal is a framed row of its own */
.check.prenos-check { margin: -.3rem 0 .8rem; padding: var(--space-2) .7rem; border: 1px solid var(--line); border-radius: var(--radius-10); }
/* Share (catalogue §64, UI-ZASADY §6c): the „Sdílet“ button with the avatars of the people who have access, and the
   modal „Sdílet seznam úkolů“ — who has access with a role, who follows, one „Uložit“ */
.sdilet-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-3) 0 .45rem; }
.sdilet-btn .avs { display: inline-flex; }
.sdilet-btn .avs .av { width: 24px; height: 24px; font-size: .62rem; box-shadow: 0 0 0 2px var(--card); }
.sdilet-btn .avs .av + .av { margin-left: -3px; }
.sdilet-co { margin: -.35rem 0 var(--space-4); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
/* Dependent block under a checkbox (catalogue §67 — „Kopírovat seznam úkolů“: „Zachovat karty“ → Které · S čím · Do
   období): indented with a line on the left, shown by `data-depends-on` (§22). */
.zavisla { border-left: 2px solid var(--line); padding: .2rem 0 .1rem var(--space-4); margin: .1rem 0 .8rem var(--space-1); }
.zavisla fieldset.checks { margin-bottom: var(--space-2); }
/* A quiet information box in a window (catalogue §67): what is always / never carried over. */
.ramecek-info { margin: 0 0 .9rem; padding: .55rem .7rem; border-radius: var(--radius-8); background: var(--surface-2); color: var(--ink); font-size: var(--text-sm); line-height: var(--leading-sm); }

/* Catalogue §74 — confirming a large action by typing a word (`TypedConfirm`, spec smazani-seznamu-ukolu-v1 §2 B):
   a short intro, the sentences that matter in `.ramecek-info` boxes, the field for the word. */
.smazat-uvod { margin: 0 0 .8rem; font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); }
.smazat-vycet { margin: 0 0 .7rem; }
.smazat-vycet h4 { margin: 0 0 var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.smazat-vycet p { margin: 0; }
.smazat-pole .input { max-width: 14rem; font-weight: 600; letter-spacing: .06em; }
@media (max-width: 560px) {
  .smazat-pole .input { max-width: none; }
}
.sdilet-radek { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
/* the adding row: the colleague picker grows, the access picker is as wide as the small ones in the rows of people */
.sdilet-radek > .pick-one { flex: 1 1 11rem; min-width: 0; }
.sdilet-radek > .pick-one + .pick-one { flex: 0 0 11rem; }
.sdilet-lide { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: flex; flex-direction: column; }
.sdilet-lide li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sdilet-lide li:first-child { border-top: 0; }
.sdilet-lide .nm { flex: 1 1 9rem; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-sm); overflow-wrap: anywhere; }
.sdilet-lide .nm .sub { font-size: var(--text-sm); line-height: var(--leading-sm); }
/* the name of the row (`.nm`, flex 1 1 9rem) must not stretch the names of the options in an access picker */
.sdilet-lide .pick-one .nm { flex: 1 1 auto; }
.sdilet-lide .sdilet-role { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.sdilet-lide .sdilet-pozn { flex-basis: 100%; margin: -.1rem 0 0 2.2rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--accent); }
.sdilet-sekce { margin: 1.1rem 0 .4rem; }
.sdilet-ctenar { margin: .2rem 0 .8rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
/* ---------- Record header: badge with people and the bell + „Upravit ▾“ (catalogue §36, §18; spec
   `ucastnici-a-sledujici-v2.md` §5) — always this pair, always in this order, both 34 px high ---------- */
.zaznam-akce { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }
.zaznam-akce .btn, .okno-akce .btn { height: var(--control-md); }
/* One round outline like .btn, two places to click like a split button: people on the left (at most 3 avatars, then
   „+N“; nobody = „add a person“), the bell about me on the right behind a thin line. Both at least 34 px wide (touch). */
.odznak { display: inline-flex; align-items: stretch; height: var(--control-md); flex: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-full); }
.odznak > button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px;
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; }
.odznak > button:hover { background: var(--hover); }
/* its name is a hidden text (`.sr-only`, absolute) — it stays inside the button */
.odznak > button.lide { position: relative; }
.odznak > button:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
.odznak .lide { padding: 0 .45rem 0 .3rem; border-radius: var(--radius-full) 0 0 var(--radius-full); }
.odznak .lide .avs { display: inline-flex; }
.odznak .lide .av { width: 24px; height: 24px; font-size: .62rem; box-shadow: 0 0 0 2px var(--card); }
.odznak .lide .av + .av { margin-left: -3px; }
.odznak .lide .av-vic { background: var(--surface-2); color: var(--ink); }
.odznak .lide .pridat { display: inline-flex; color: var(--muted); }
.odznak .lide .pridat svg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 2; }
.odznak .lide.bez-lidi { padding: 0 .3rem 0 .45rem; }
.odznak .zvonek { width: 38px; border-left: 1px solid var(--line); border-radius: 0 var(--radius-full) var(--radius-full) 0; padding-right: var(--space-0-5); }
.odznak .zvonek svg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 2; }
.odznak .zvonek[aria-pressed="true"] { color: var(--accent); }
.odznak .zvonek[aria-pressed="false"] { color: var(--muted); }
.odznak .zvonek[aria-pressed="false"]:hover { color: var(--ink); }
/* „Upravit ▾“ = a real split button: the left part opens the complete edit, the arrow the menu with the other actions */
.split { display: inline-flex; align-items: stretch; flex: none; }
.split > .btn { position: relative; }
.split > .split-hlavni { border-radius: var(--radius-8) 0 0 var(--radius-8); padding: 0 .8rem; }
.split > .split-sipka { border-radius: 0 var(--radius-8) var(--radius-8) 0; margin-left: -1px; padding: 0 .45rem; color: var(--muted); }
.split > .split-sipka:first-child { border-radius: var(--radius-8); margin-left: 0; padding: 0 .55rem 0 .8rem; gap: .35rem; color: var(--ink); }
.split > .split-sipka svg { width: var(--icon-md); height: var(--icon-md); stroke-width: 2.25; }
.split > .btn:hover { z-index: 1; }
.split.open > .split-sipka { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); z-index: 2; }
.split > .menu-list { min-width: 13.5rem; }
.opt.opt-cervena { color: var(--red); }
.opt.opt-cervena:hover { background: var(--red-soft); }
/* the badge in the header of the task window: right before ✕ */
.okno-akce { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }
.modal-head:has(.okno-akce) { gap: .6rem; }
.modal-head:has(.okno-akce) h3 { min-width: 0; }
/* the window „Kdo dostává upozornění“ — rows of people from §64 (a role chip in the place of the access) */
.sdilet-lide .chip { flex: none; }
.sdilet-vysv { flex-basis: 100%; margin: -.15rem 0 0 2.2rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.vypnuto { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); flex: none; }
.vypnuto svg { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; }
/* the bell in a person's row (spec pojmenovani-pristupu-v1 §3, catalogue §64): a switch (button.icon-btn) or a sign (span) —
   filled = gets notifications, crossed out = does not; the shape carries the meaning, the accent only adds to it */
.sdilet-zvonek { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; color: var(--muted); }
.sdilet-zvonek svg { width: var(--icon-md); height: var(--icon-md); stroke-width: 2.25; }
.sdilet-zvonek.zap, button.sdilet-zvonek.zap:hover { color: var(--accent); }
/* the bells stay one column: a row without ✕ in a list where other rows have it keeps the room of the ✕ */
.sdilet-lide:has(li > button.icon-btn:not(.sdilet-zvonek)) li:not(:has(> button.icon-btn:not(.sdilet-zvonek))) > :is(.sdilet-zvonek, .vypnuto) { margin-right: calc(26px + .6rem); }
.sdilet-prazdne { margin: .1rem 0 .6rem; font-size: var(--text-sm); line-height: var(--leading-sm); }
@media (max-width: 560px) {
  /* a participant's role, the bell and „upozornění vypnutá“ under the name, indented under it (not under the avatar) */
  .sdilet-lide .ucastnik .nm { flex-basis: calc(100% - 2.6rem); }
  .sdilet-lide .ucastnik .chip { margin-left: 2.2rem; }
  .sdilet-lide .ucastnik .sdilet-vysv { margin-top: 0; }
}
/* Banner of a disabled module (KOMPONENTY §57) — quiet information in Administration, blocks nothing */
.modul-pruh { margin: .2rem 0 .7rem; padding: .45rem .7rem; border-radius: var(--radius-8); font-size: var(--text-sm); line-height: var(--leading-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }

/* Conditions before a one-off action (KOMPONENTY §63): a state chip + a sentence per line, the button below */
.podminky { list-style: none; margin: var(--space-2) 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.podminky li { display: flex; align-items: baseline; gap: .55rem; font-size: var(--text-sm); line-height: var(--leading-sm); }
.podminky .chip { flex: none; }

/* Administration → Conviu: the sentence about the last check of the list keeps its width and „Označit jako zkontrolovaný“
   goes whole under it on a phone (the text does not wrap, MODUL-CONVIU §6.6a) */
.form-actions:has(> .conviu-zkontrolovano) { flex-wrap: wrap; }
.form-actions > .sub.conviu-zkontrolovano { flex: 1 1 14rem; }
.form-actions > .btn.conviu-zkontrolovat { white-space: nowrap; }
/* Lidé z Conviu (MODUL-CONVIU §6.9; Petr 6 Oct 2026: „stylistika … je špatná"). Decisions in a row = small secondary
   buttons of one height side by side (wrapping on a phone); „Kolegové z Conviu" = a framed block per colleague from the
   Team (KOMPONENTY §8c, a group inside a card) with the Conviu accounts indented under the colleague's name. */
.conviu-volby { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.conviu-volby .btn { white-space: nowrap; }
/* side by side on a wide display; from the narrow window down they wrap (the phone stacks them) */
@media (min-width: 1000px) { .conviu-volby { flex-wrap: nowrap; } }
.btn .btn-sipka { display: inline-flex; align-items: center; margin-right: -.2rem; color: var(--muted); }
.conviu-skupiny { margin-bottom: var(--space-1); }
.conviu-kolega { --conviu-odsazeni: calc(1rem + 26px + .75rem); }
.conviu-kolega-hlava { padding: .8rem var(--space-4) .3rem; }
.conviu-kolega-veta { margin: 0; padding: 0 var(--space-4) .3rem var(--conviu-odsazeni); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.conviu-ucty { list-style: none; margin: 0 0 .3rem; padding: 0; }
/* the line between accounts starts at the indent (not across the block): a margin, not a padding */
.conviu-ucty > .radek-vypisu { margin-left: var(--conviu-odsazeni); padding-right: var(--space-4); }
.conviu-ucet { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem var(--space-3); min-height: 30px; }
.conviu-ucet-txt { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.conviu-ucet-jmeno { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem var(--space-2); }
.conviu-ucet-jmeno > .nm { font-weight: 500; }
.conviu-ucet-txt > .sub { display: block; }
.conviu-byvali { list-style: none; margin: 0; padding: 0; }
.conviu-byvali > .radek-vypisu { padding-top: .7rem; padding-bottom: .7rem; }
.cell-name .cell-txt { min-width: 0; }
@media (max-width: 560px) {
  .tbl-radky td.r-volby { flex: 1 1 100%; }
  /* a former colleague's button wraps under the name, not under the avatar (as the accounts above) */
  .conviu-byvali .conviu-ucet > form, .conviu-byvali .conviu-ucet > .sub { margin-left: calc(26px + .75rem); }
  /* the explanation of the choices: a long sentence under its chip, not squeezed beside it */
  .podminky.podminky-volby li { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}
.kcol.col-dragging { opacity: .5; }
.kcol-inbox { border-style: dashed; }
.kcol-add { flex: 0 0 210px; width: 210px; background: transparent; border: 1px dashed var(--line); padding: var(--space-2); }
.kcol-add .input { background: var(--card); }

/* The target column under a dragged card (app.js, mouse and touch; catalogue §11b) */
.kcol.is-cil { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* The deal closing modal (§5.3): "Jak obchod skončil?" — three ends as toggle pills */
.uzavrit-typ { display: flex; flex-wrap: wrap; gap: .45rem; margin: .2rem 0 0; }
.uzavrit-typ .loc-radio { border: 1px solid var(--line); border-radius: var(--radius-full); padding: .3rem .7rem; min-width: 0; cursor: pointer; background: var(--card); }
.uzavrit-typ .loc-radio.is-on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* a value inside text (several values in one line): a dashed underline (always visible) */
.editable-inline {
  cursor: pointer; border-bottom: 1px dashed var(--muted);
  border-radius: var(--radius-4) var(--radius-4) 0 0; padding: 0 .12rem 1px; margin: 0 -.12rem;
}
.editable-inline:hover { background: var(--surface-2); border-bottom-color: var(--accent); }

/* a field as a ROW: the label ABOVE the value */
.field-row { border-top: 1px solid var(--line); }
.field-row:first-child { border-top: none; }
.menu.field-row { display: block; }
.menu.field-row > .editable { display: block; padding-top: .42rem; padding-bottom: .42rem; }
.field-label { display: block; color: var(--muted); font-size: var(--font-size-label); line-height: var(--line-height-label); margin-bottom: .04rem; }
.field-strong { font-weight: 650; font-size: var(--text-lg); line-height: var(--leading-lg); }
.field-plain { padding: .42rem 0; }

/* edit mini-panel: flips above the field (app.js); narrower for single-line inputs, medium for a textarea */
.menu.up > .menu-list { top: auto; bottom: calc(100% + 6px); }
.menu-list.panel.wide { width: 300px; max-width: calc(100vw - 24px); }
.menu-list.panel.area { width: 380px; max-width: calc(100vw - 24px); }
.menu-list.panel.wide .input, .menu-list.panel.area .input { width: 100%; }
textarea.input[data-autogrow] { resize: none; overflow-y: hidden; min-height: 0; }

/* ---------- Utility ---------- */
.m0 { margin: 0; }
.hidden { display: none !important; }

/* ---------- Responsiveness ---------- */
@media (max-width: 1150px) {
  /* minmax(0, …): a wide row inside must not stretch the single column (and the page) sideways */
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  /* phone/narrow window: the left panel with record details, then the content; right-column widgets only below the content */
  .detail-grid > .panel-primary, .detail-grid > .panel-primary-col { order: 0; }
  .detail-grid > #stred { order: 2; }
  .detail-grid > aside:not(.panel-primary) { order: 3; }
  .dash-grid { grid-template-columns: 1fr; }
  .uname { display: none; }
}
@media (max-width: 720px) {
  .page { padding: var(--space-4) .9rem var(--space-12); }
  /* Preview on a phone = a full-width bottom sheet (spec zaznam-v2 §7) — a popup at the click
       would not fit at 390 px and would cover what was clicked. */
  .nahled {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto;
    border-radius: 18px 18px 0 0; border-bottom: none; padding: var(--space-4) var(--space-4) 1.3rem;
    box-shadow: 0 -14px 40px rgba(var(--shadow-color), .45);
  }
  .nahled::before, .nahled::after { display: none; }
  .stats, .stats-3, .stats-4 { grid-template-columns: 1fr 1fr; }
  /* detail tabs wrap on a phone instead of stretching the page sideways */
  .tabs { flex-wrap: wrap; column-gap: 1.1rem; }

  /* TWO BARS (Petr, 18 Sep 2026: „vyhledávání neschovávej na mobilu — lepší chování bude, že místo
       schování se ve stejnou chvíli zalomí do druhé lišty" — do not hide search on mobile; instead wrap it into a
       second bar at the same point). Below 720 px the search does not fit into one row next to the module icons
       and the Add button; it used to be **hidden** for that reason and was missing on a phone entirely. Now the bar
       splits at that same point instead:
         - the top row (module icons, bell, avatar) stays **stuck** at the top,
         - the second row (full-width search + Add) **scrolls away with the content**.
       `.topbar` itself stops being a bar and a sticky element — it is only a wrapper of both rows. The module icons
       have their own horizontal scrolling, so they never push on the rest of the bar (finding A10). */
  .topbar { display: block; height: auto; padding: 0; position: static; background: none; border-bottom: 0; }
  .tb-row {
    display: flex; align-items: center; gap: .55rem;
    background: var(--card); border-bottom: 1px solid var(--line);
    padding: 0 .9rem; height: 56px;
  }
  .tb-row--nav { position: sticky; top: 0; z-index: 50; }
  .tb-row--tools { position: relative; z-index: 40; }
  .nav-icons { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .nav-icons::-webkit-scrollbar { display: none; }
  .nico { flex: none; }
  /* in the second row: the search takes what is left, Add sits at the right edge */
  .search { order: 0; margin: 0; max-width: none; }
  #addMenu { order: 0; margin-left: 0; flex: none; }
  .top-right { flex: none; gap: .6rem; margin-left: auto; }

  /* A toolbar dropdown never stretches past the window edge (at 320 px part of the offer would otherwise
       end up off the screen and could not be tapped). */
  .menu-list { max-width: calc(100vw - 1.2rem); }
  /* A submenu (user menu → Skin) does **not fly out to the side** on a phone: there is no room left of the menu
       and it would slide out of the window (measured 29 Sep 2026: by 27 px at 390 px, by 97 px at 320 px — the
       list of skins started off the screen). Instead it expands **below its item** inside the menu, indented by a
       vertical line, so it is fully visible and nothing scrolls. */
  .submenu-list {
    position: static; right: auto; top: auto; margin: .2rem 0 .3rem .55rem;
    min-width: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0;
    box-shadow: none; padding: .1rem 0 .1rem .3rem;
  }
  .submenu-list::after { display: none; }
}
/* A safeguard against horizontal overflow of the whole page: nothing in the content may widen the canvas past
   the window, otherwise the left and right margins drift apart (finding A10). The Kanban has its own horizontal
   scrollbar inside, so it loses nothing. */
html, body { max-width: 100%; overflow-x: clip; }
@media (max-width: 560px) {
  /* Below 560 px both bar rows shrink further (narrower margins, smaller module icons). */
  .tb-row { padding: 0 var(--space-3); height: 52px; }
  .page { padding: .9rem var(--space-3) var(--space-12); }
  .stats, .stats-3, .stats-4 { grid-template-columns: 1fr; }
  .nico { width: 36px; height: 36px; }
  .page-head h1, .page-head h2 { font-size: var(--text-xl); line-height: var(--leading-xl); }
  /* kanban on a phone: a column narrower than 270 px, so a whole one fits in the window */
  .kcol { flex: 0 0 min(270px, calc(100vw - 3rem)); width: min(270px, calc(100vw - 3rem)); }
  .kanban { padding: 0 var(--space-3) var(--space-2); }
}

/* ---------- A band of „Všechny seznamy“ (catalogue §93): one list in its own frame, the same on the Kanban and in the List ---------- */
.pas { margin: 0 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-12); background: var(--card); }
.pas-hlava { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2-5); padding: var(--space-2) var(--space-3); }
.pas:not(.is-sbaleny) > .pas-hlava { border-bottom: 1px solid var(--line); }
.pas-sbalit { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; padding: var(--space-1); border: 0; border-radius: var(--radius-8); background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.pas-sbalit:hover { background: var(--hover); }
.pas-sipka { display: inline-flex; flex: none; color: var(--muted); transition: transform .15s; }
.pas.is-sbaleny .pas-sipka { transform: rotate(-90deg); }
.pas-nazev { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: 650; font-size: var(--text-sm); line-height: var(--leading-sm); }
.pas-nazev-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pas-obdobi { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.pas-pocet { display: inline-flex; align-items: center; height: var(--chip-sm); padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--accent-soft); color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.pas-odkaz { margin-left: auto; font-size: var(--text-sm); line-height: var(--leading-sm); }
.pas-telo { padding: var(--space-3); }
.pas-telo:has(> .pas-radky) { padding: 0 var(--space-3); }
.pas-ceka { margin: 0; }
/* inside a band the board stays in the frame and scrolls sideways by itself, the first column at the start */
.pas .kanban { width: auto; margin-left: 0; padding: 0 0 var(--space-2); justify-content: flex-start; }
.pas-radky .task-item:last-child { border-bottom: 0; }
@media (max-width: 560px) {
  /* the number stays by the name, the period and the way to the list go under them */
  .pas-hlava { padding: var(--space-2); }
  .pas-sbalit { order: -2; }
  .pas-pocet { order: -1; }
  .pas-odkaz { margin-left: 0; flex-basis: 100%; padding-left: var(--space-6); }
  .pas-telo { padding: var(--space-2); }
  .pas-telo:has(> .pas-radky) { padding: 0 var(--space-2); }
}

/* The "Aktivity" feed — a round icon of the record type (note/task/work record/contact/system) */
.feed-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); background: transparent; }
.feed-ico--note, .feed-ico--task, .feed-ico--work, .feed-ico--attachment { color: var(--accent); }
.feed-ico--contact, .feed-ico--system { color: var(--muted); }
/* A feed row. The quiet kinds (contact, system) are dimmed by colour, not by opacity — opacity took the text below
   the WCAG AA contrast. Links inside the text are underlined: they must differ from it by more than colour. */
/* the spacing, line and text size come from the shared listing row (`.radek-vypisu` above) */
.act-row { display: flex; gap: .7rem; }
/* the header of an activity row: the author (bold) · time — the secondary size of the scale */
/* „Zobrazit změny (N)“ under a group of activity lines: a text link `.odkaz` on its own line */
.act-more { display: inline-block; margin-top: var(--space-1); }
.act-hlava { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: var(--font-size-secondary); line-height: var(--line-height-secondary); }
.act-row--quiet { color: var(--muted); }
.act-row a { text-decoration: underline; text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); }
/* ⋯ „Trvale odstranit zápis…“ (§25, spec `skryty-obsah-poznamky-v1.md` §3.2): on a row it stands right of the text; on an
   expanded entry of a merged row the entry and its ⋯ share the line */
.act-row > .row-actions { flex: none; align-self: flex-start; }
.act-detail-radek { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0 var(--space-1) var(--space-2); }
.act-detail-radek > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* The breakdown of what a permanent removal took (§25, spec `trvale-odstranit-zaznam-t2.md` S.3.1): under the protected record in
   Administration → Historie, a block with a line on the left (as the details of a merged row), groups by kind and their items */
.vycet { margin-top: var(--space-1); padding-left: var(--space-1); border-left: 2px solid var(--line); }
.vycet-skupina { padding: var(--space-2) 0 0 var(--space-2); }
.vycet-polozka { padding: var(--space-1) 0 var(--space-1) var(--space-2); overflow-wrap: anywhere; }
/* a field with its button on the same line (§21b, „Hledaný text“ + Najít znovu): the field takes the room */
.pole-s-tlacitkem { display: flex; gap: var(--space-2); align-items: flex-start; }
.pole-s-tlacitkem > .input { flex: 1; min-width: 0; }

/* Notes — title + mosaic (Google Keep style: cards in columns) */
.note-title { font-weight: 650; font-size: var(--text-md); line-height: var(--leading-md); margin: .1rem 0 .15rem; }
.note-title--empty { font-weight: 500; color: var(--muted); } /* the placeholder "Poznámka bez nadpisu" — muted = missing value, dimmed by colour, not opacity (UI-ZASADY §2) */
/* Notes = always cards; List = 1 column (.notes-grid--one), Mosaic = 2 columns.
   An aligned grid (DOM order = visual order) for clear drag/drop. */
.notes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); align-items: start; }
.notes-grid--one { grid-template-columns: 1fr; }
@media (max-width: 720px) { .notes-grid { grid-template-columns: 1fr; } }
/* fluid preview height: the body grows with the content between min and max; beyond max it is clipped and offers "zobrazit více" */
.notes-grid .note-card { margin: 0; padding: .8rem .9rem; display: flex; flex-direction: column; cursor: grab; }
.notes-grid .note-card.dragging { opacity: .5; cursor: grabbing; }
.notes-grid .note-card .note-content { flex: 0 1 auto; min-height: 2.75rem; max-height: 11rem; overflow: hidden; }
.notes-grid .note-card.expanded .note-content { max-height: none; overflow: visible; }
/* a subtle centred expand row: icon + text "zobrazit více/méně" */
.note-expand { display: none; align-self: center; flex: none; align-items: center; gap: .3rem; margin-top: .35rem; padding: .1rem .4rem; background: none; border: none; cursor: pointer; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.note-expand:hover { color: var(--ink); }
.note-expand svg { transition: transform .15s ease; }
.note-expand .lbl-less { display: none; }
.notes-grid .note-card.has-more .note-expand, .notes-grid .note-card.expanded .note-expand { display: inline-flex; }
.notes-grid .note-card.expanded .note-expand .lbl-more { display: none; }
.notes-grid .note-card.expanded .note-expand .lbl-less { display: inline; }
.notes-grid .note-card.expanded .note-expand svg { transform: rotate(180deg); }

/* Comment thread (KOMPONENTY §34) — a chat below the record: avatar · header · text */
.comment-thread { display: flex; flex-direction: column; gap: .45rem; }
/* The comment field always spans the full thread width — in the task and work-record modals it took barely a third
   (the textarea's default `cols`; walkthrough 17 Sep · A5). Applies to new and edited comments. */
.comment-thread textarea.input { width: 100%; min-width: 0; }
/* a collapsed thread at a note (§34): only "💬 3 komentáře", the body expands on click */
.note-thread { margin-top: .45rem; }
.comment-fold { display: inline-flex; align-self: flex-start; align-items: center; gap: .35rem; padding: .15rem .3rem; margin-left: -.3rem;
  background: none; border: none; border-radius: var(--radius-6); font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); cursor: pointer; }
.comment-fold:hover { color: var(--accent); background: var(--accent-soft); }
.comment-fold[aria-expanded="true"] { color: var(--ink); }
.comment-fold-body { display: flex; flex-direction: column; gap: .45rem; padding-top: .35rem; border-top: 1px solid var(--line); }
.comment-fold-body textarea.input { width: 100%; }
/* ---------- Inherited vs. manually entered value (KOMPONENTY §43) ---------- */
/* the state is carried by TEXT below the field (not just colour): inherited = a grey-tinted field + "Výchozí — odkud";
   manual = a white field + "Vlastní sazba · výchozí by byla … · Vrátit výchozí" */
.inherit:not(.is-own) .input { color: var(--muted); background: var(--surface-2); }
.inh-line { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .3rem; margin-top: .3rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
.inh-line > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1rem .3rem; }
.inh-line b { color: var(--ink); font-weight: 600; }
.inh-own { color: var(--accent); font-weight: 600; }
.inh-reset { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: .2rem; }
.inh-reset:hover { text-decoration: underline; }
.inherit .inh-mine, .inherit.is-own .inh-def, .inherit.is-own .inh-none,
.inherit[data-default=""] .inh-def, .inherit:not([data-default=""]) .inh-none, .inherit[data-default=""] .inh-was { display: none; }
.inherit.is-own .inh-mine { display: inline-flex; }

/* ---------- Checkbox and switch in a form (KOMPONENTY §16c, Petr 16 Sep 2026: variant C) ---------- */
/* A real <input type="checkbox"> (keyboard, screen reader) — only drawn in the application colours; the whole row is clickable.
   Choosing from a list = the .check checkbox; a standalone on/off = the .switch-row switch. */
.check { display: flex; align-items: flex-start; gap: .6rem; padding: .4rem var(--space-2); margin: 0 -.5rem; border-radius: var(--radius-8); cursor: pointer; color: var(--ink); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-sm); }
.check:hover { background: var(--hover); }
/* ONE drawing of the checkbox and the radio (catalogue §16c and §81, spec kontextove-odkazy-v1 §3.4–3.5): a form field
   (`.check input`, also the radios of an option with a description §58 and their relatives) and the mark of an option in a
   panel (`.opt-zaskrt` > `span.okenko`, a link `role="checkbox"` in Filtry, `role="option"` in `PickOne`) draw the same:
   18 px, the `--muted` frame, the `--radius-4` corner (the radio `--radius-full`), the tick as one SVG mask, the dot of the
   radio `--card`, pointing = the `--accent` frame, chosen = filled `--accent`, the focus = one double ring
   (`--focus-ring-double`), unavailable = a grey box on `--surface-2` and muted text (by colour, not by transparency). */
.check input[type="checkbox"], :is(.check, .volba, .co-volba, .loc-radio, .prec-cena-moznost) input[type="radio"], .okenko {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; opacity: 1;
  border: 1.5px solid var(--muted); border-radius: var(--radius-4); background: var(--card); display: grid; place-items: center; cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.check input[type="checkbox"], .check input[type="radio"] { margin: .05rem 0 0; }
.okenko { margin: 0; }
:is(.check, .volba, .co-volba, .loc-radio, .prec-cena-moznost) input[type="radio"], .okenko.kulate { border-radius: var(--radius-full); }
.check input[type="checkbox"]::after, .okenko:not(.kulate)::after {
  content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .12s ease; background: var(--card);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.check, .volba, .co-volba, .loc-radio, .prec-cena-moznost) input[type="radio"]::after, .okenko.kulate::after {
  content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--card); transform: scale(0); transition: transform .12s ease;
}
/* chosen */
.check input[type="checkbox"]:checked, :is(.check, .volba, .co-volba, .loc-radio, .prec-cena-moznost) input[type="radio"]:checked,
.opt-zaskrt:is([aria-checked="true"], [aria-selected="true"]) .okenko { background: var(--accent); border-color: var(--accent); }
.check input[type="checkbox"]:checked::after, :is(.check, .volba, .co-volba, .loc-radio, .prec-cena-moznost) input[type="radio"]:checked::after,
.opt-zaskrt:is([aria-checked="true"], [aria-selected="true"]) .okenko::after { transform: scale(1); }
/* pointing */
.check input[type="checkbox"]:hover:not(:disabled), :is(.check, .volba, .co-volba, .loc-radio, .prec-cena-moznost) input[type="radio"]:hover:not(:disabled),
.opt-zaskrt:not([aria-disabled="true"]):hover .okenko { border-color: var(--accent); }
/* focus, one double ring; an option in a panel draws it on its box (the option itself has no outline; `PickOne` keeps
   its left line of the highlighted option, §19) */
.check input[type="checkbox"]:focus-visible, :is(.check, .volba, .co-volba, .loc-radio, .prec-cena-moznost) input[type="radio"]:focus-visible,
.opt-zaskrt:focus-visible .okenko { outline: none; box-shadow: var(--focus-ring-double); }
.opt-zaskrt:focus-visible { outline: none; }
/* unavailable */
.check input[type="checkbox"]:disabled, :is(.check, .volba, .co-volba, .loc-radio, .prec-cena-moznost) input[type="radio"]:disabled,
.opt-zaskrt[aria-disabled="true"] .okenko { border-color: var(--line); background: var(--surface-2); cursor: not-allowed; }
.check input[type="checkbox"]:disabled::after, :is(.check, .volba, .co-volba, .loc-radio, .prec-cena-moznost) input[type="radio"]:disabled::after,
.opt-zaskrt[aria-disabled="true"] .okenko::after { background: var(--muted); }
.opt-zaskrt[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.opt-zaskrt[aria-disabled="true"]:hover { background: none; }
/* the option of a panel with its mark before the label (multi-value = box, one value = circle) */
.opt.opt-zaskrt { justify-content: flex-start; }
/* the place of a mark an option does not have (a role that only narrows the list, the way back), the labels stay in one column */
.okenko.je-skryte { visibility: hidden; }
.opt-zaskrt .opt-txt { flex: 1 1 auto; min-width: 0; }
.check:has(input:disabled) { cursor: not-allowed; color: var(--muted); }
.check:has(input:disabled):hover { background: none; }
.check-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.check-help { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); font-weight: 400; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: .45rem var(--space-2); margin: 0 -.5rem; border-radius: var(--radius-8); cursor: pointer; color: var(--ink); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-sm); position: relative; }
.switch-row:hover { background: var(--hover); }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch-row .switch { flex: none; width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--muted); position: relative; transition: background .15s; }
.switch-row .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(var(--shadow-color), .35); transition: transform .15s; }
.switch-row input:checked + .switch { background: var(--accent); }
.switch-row input:checked + .switch::after { transform: translateX(16px); }
.switch-row input:focus-visible + .switch { box-shadow: var(--focus-ring-double); }
.switch-row:has(input:disabled) { cursor: not-allowed; color: var(--muted); }
/* a group of options with a heading = fieldset + legend (a screen reader reads the group name) */
fieldset.checks { border: 0; margin: 0 0 .7rem; padding: 0; min-width: 0; }
fieldset.checks legend { padding: 0; margin: 0 0 .15rem; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--muted); }
/* inside .field the field label style (.field > label) must not override the option */
.field > label.check, .field > label.switch-row { display: flex; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); font-weight: 400; margin-bottom: 0; }
fieldset.checks > .help { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); margin-top: .2rem; }

/* The list of roles (KOMPONENTY §77; spec `role-a-opravneni-v1.md` §5.1): the name of a role and its chip on one line. */
.role-nazev { white-space: nowrap; }
/* The name of a switch permission in the role window is bold like the legend of a scope permission (Petr 20 Oct 2026:
   „samotné názvy těch oprávnění udělej tučně“); a switch caption under a legend (S3) stays regular. */
.opr-nazev { font-weight: 600; }
/* Collapsible details under a field or in a cell — „Detaily role {název}“ (KOMPONENTY §78; Petr 16 Oct 2026: „tohle dej
   do toogle seznamu "Detaily role Manažer" (defaultně skrytý) a udělej to jako seznam“). A native <details>, the summary
   in the look of „+ N dalších“ (§21c `.lide-dalsi`): accent text with the chevron, turned when open; the content is the
   text of the page (`--ink`), a group heading as the caption of a field in a section, the groups as far apart as the
   groups of options. */
.detaily { margin: 0; }
.detaily > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--font-size-secondary); font-weight: 600; color: var(--accent);
  padding: var(--space-1) var(--space-1-5); margin: 0 calc(-1 * var(--space-1-5)); border-radius: var(--radius-8);
}
.detaily > summary::-webkit-details-marker { display: none; }
.detaily > summary:hover { background: var(--accent-soft); }
.detaily > summary:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }
.detaily .sipka-dolu { display: inline-flex; transition: transform .15s ease; }
.detaily[open] > summary .sipka-dolu { transform: rotate(180deg); }
/* a summary that says something else while open („Zobrazit výkazy (6)“ / „Skrýt výkazy“, §74, spec T2 S.5): swapped by CSS */
.detaily .detaily-otevreno, .detaily[open] .detaily-zavreno { display: none; }
.detaily[open] .detaily-otevreno { display: inline; }
.detaily-obsah { padding: var(--space-1) 0 var(--space-1); font-size: var(--font-size-secondary); color: var(--ink); }
.detaily-obsah h5 { margin: var(--space-3) 0 var(--space-1); font-size: var(--font-size-secondary); font-weight: 600; color: var(--ink); }
.detaily-obsah h5:first-child { margin-top: 0; }
.detaily-obsah ul { margin: 0; padding-left: var(--space-5); }
.detaily-obsah li + li { margin-top: var(--space-0-5); }
.detaily-obsah p { margin: 0; }
/* under a row of fields in an edit window (Team, Nová role, the transfer): the block sits where the grey sentence stood */
.modal-v2 > .detaily-volby { margin: calc(-1 * var(--space-1)) 0 var(--space-3); }
/* a group of options right under a switch keeps the gap between groups (§16c, §21c) */
.oddil-obsah > .switch-row + fieldset.checks { margin-top: .7rem; }
/* the heading of a group of options in a section of the edit window v2 = the caption of a field; its radios in the
   colour of the application (approved mockup `client-service-rights.html` 02a) */
.modal-v2 fieldset.checks > legend { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--ink); margin-bottom: .3rem; }

/* An option with a description (KOMPONENTY §58) — a switch with a longer name and an explanation on the second line.
   Used where an `<option>` would have to explain (the service billing mode). */
fieldset.volby { border: 0; margin: 0 0 .7rem; padding: 0; min-width: 0; }
fieldset.volby legend { padding: 0; margin: 0 0 var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--muted); }
.volba {
  display: flex; align-items: flex-start; gap: .6rem; padding: .45rem .6rem; margin: 0 0 .3rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: var(--card);
  color: var(--ink); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-sm);
}
.volba:hover { background: var(--hover); }
/* the look follows the checked radio only — a server `.is-on` would stay lit after another choice (7 Oct 2026) */
.volba:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.volba input[type="radio"] { margin: .15rem 0 0; } /* the drawing is the one of §16c / §81 (`.check input`) */
.volba-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.volba-nazev { font-weight: 600; }
.volba-vychozi { color: var(--muted); font-weight: 400; font-size: var(--text-xs); line-height: var(--leading-xs); }
.volba-popis { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }

/* choosing several people (§42) — a field with a summary of names + a panel with checkboxes */
.people-pick { display: block; }
.people-pick-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-pick-list { min-width: 15rem; max-height: 18rem; overflow-y: auto; }
.people-pick-list .opt.check { justify-content: flex-start; margin: 0; align-items: center; }
/* ONE VALUE (PickOne, §19 „Plná a malá varianta“, Petr 10 Oct 2026: „schvaluji mockup výběrů“) — one component, two
   sizes, the same panel and keyboard. The search stays on top, only the list scrolls; in a modal the group headings
   stay small panel headings (`.modal-card .opt-group` would make them section titles). */
.pick-one .people-pick-list { overflow: visible; max-height: none; max-width: min(28rem, calc(100vw - 24px)); }
/* the list never has a frame or a focus ring, not even without the search (Petr: „takhle to působí, že je vybrán celý
   ten blok spíš než jednotlivá volba“) — the cursor is the highlighted option */
.pick-one [role="listbox"] { max-height: 18rem; overflow-y: auto; outline: none; box-shadow: none; } /* 8 options of a fixed list without a scrollbar */
.pick-one [role="option"] { justify-content: flex-start; align-items: center; margin: 0; }
/* the chosen (stored) value = the filled circle before the label (`.okenko.kulate`, catalogue §81); the cursor starts on it */
/* the highlighted option (the cursor, the arrows, `aria-activedescendant`) = a soft accent background and the accent
   name, no frame around it (an accent frame reads as a search hit); the 3 px line on the left inside the option is the
   focus indicator — against the background and the card ≥ 3 : 1 in every skin (`scripts/check-contrast.mjs`) */
.pick-one [role="option"].je-zvyraznena { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pick-one [role="option"].je-zvyraznena .nm { color: var(--accent); font-weight: 600; }
/* an option that cannot be chosen now: grey, its reason in the grey line; the arrows skip it */
.pick-one [role="option"][aria-disabled="true"], .pick-one [role="option"][aria-disabled="true"] .nm { color: var(--muted); cursor: default; }
.pick-one [role="option"][aria-disabled="true"]:hover { background: none; }
/* one height of the options in a list: the grey line on one line (whole in `title`); when one option has it, all have
   the height of an option with it (Petr: „mělo by to být jednotně vysoké“) */
.pick-one .opt-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.pick-one .opt-txt .nm, .pick-one .opt-txt .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* the reason of an unavailable option wraps, it is never cut (spec ucetovani-vykazu-podle-sluzby-v1 §4.6, KOMPONENTY §42) */
.pick-one .opt[aria-disabled="true"] .opt-txt .sub { white-space: normal; overflow: visible; text-overflow: clip; }
.pick-one .opt .sub { font-size: var(--text-xs); line-height: var(--leading-xs); }
/* a name without a grey line stays on one line too; a shortened one gets its whole text as `title` (app.js) */
.pick-one [role="option"] > .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (an option = its padding + the tallest content: an avatar of 26 px, or the name at line-height 1.3 and the grey line
   12 / 18 — stage 3b) */
.pick-one [role="listbox"]:has(.av) [role="option"] { min-height: calc(.9rem + 26px); }
.pick-one [role="listbox"]:has(.opt-txt .sub) [role="option"] { min-height: calc(.9rem + 1.3 * var(--text-sm) + var(--leading-xs)); }
/* the trigger: a muted arrow, a muted empty value („— vyber —“), the accent border while open (the focus of a field) */
.pick-one:not(.pick-maly) > .loc-trigger > svg { color: var(--muted); flex: none; }
.pick-one .people-pick-sum.je-prazdna { color: var(--muted); }
.pick-one.open > .loc-trigger, .pick-maly.open > .btn { border-color: var(--accent); }
/* the search of an open picker has the accent frame of a focused field (the only accent frame of the picker) */
.pick-one [role="combobox"]:focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -1px; border-color: var(--accent); }
.pick-one .loc-trigger:disabled { cursor: default; color: var(--muted); background: var(--surface-2); }
/* full: the panel as wide as the field, at least 15rem (`app.js` sets the width before it places the panel) */
.pick-one:not(.pick-maly) > .people-pick-list { width: 100%; min-width: 15rem; }
/* a picker as narrow as the other fields of a settings form (Administration → a module) */
.pick-uzky { max-width: 20rem; }
.pick-vychozi { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); margin-left: .3rem; }
/* a required picker left empty (app.js stops the form): the message under the red trigger */
.pick-chyba { color: var(--red); font-size: var(--text-sm); line-height: var(--leading-sm); margin: .3rem 0 0; }
.pick-nacitam { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); margin: .3rem .2rem; }
.pick-nacitam:empty { margin: 0; } /* stays in the tree: a live region must exist before its text changes */
.pick-one.nacita [role="listbox"], .pick-one.nacita .opt-nic { display: none !important; }
/* THE ASSIGNEE WITH WORK ROLES (§19 „Výběr řešitele s pracovními rolemi“, spec `role-jako-filtr-resitele-v1.md` §3):
   a work role has a grey circle with the icon of people instead of an avatar and, when it narrows the list to more
   people, a chevron on the right; „Zpět na celou nabídku“ in the accent; a role nobody has stays grey even highlighted
   (the arrows reach it, it cannot be chosen). The narrowed state and the reason after a try are in the status line
   (`.pick-nacitam`, role=status) under the search. The panel is at least 24rem wide (the grey lines fit uncut); on a
   phone it stays the sheet over the whole width. */
.pick-one .opt-ikona { background: var(--surface-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.pick-one [role="option"] > .opt-dal { flex: none; display: inline-flex; margin-left: auto; color: var(--muted); }
.pick-one [role="option"].opt-zpet .nm, .pick-one [role="option"].opt-zpet .opt-ikona { color: var(--accent); }
.pick-one [role="option"][hidden] { display: none; }
.pick-one [role="option"][aria-disabled="true"].je-zvyraznena { background: linear-gradient(to right, var(--muted) 3px, var(--hover) 3px); box-shadow: none; }
.pick-one [role="option"][aria-disabled="true"].je-zvyraznena .nm { color: var(--muted); font-weight: 400; }
.pick-one.pick-s-rolemi:not(.pick-maly) > .people-pick-list { min-width: min(24rem, calc(100vw - var(--space-6))); }
.pick-s-rolemi .pick-nacitam > .ramecek-info { margin: 0; }
/* SMALL = LOWER, NOT NARROWER (Petr 10 Oct 2026: „pozor na to, že malá nemá znamenat, že by to pole mělo být hodně
   úzké“): the height and font of `.btn-sm`, at least 11rem, the value on the left and the arrow on the right; shortened
   only where the row has no room. With the caption („K čemu: Firma ▾“), without it (`.bez-popisku`, the row or the
   column names it) or an action (`.akcni`, the trigger names the action). The panel is at least the trigger and 15rem,
   wider by its content up to 28rem. */
.pick-one.pick-maly { display: inline-flex; flex-direction: column; align-items: flex-start; vertical-align: middle; max-width: 100%; }
.pick-maly > .btn { min-width: 11rem; max-width: 100%; gap: .3rem; justify-content: flex-start; }
.pick-maly > .btn > .btn-sipka { margin-left: auto; padding-left: .35rem; }
.pick-maly > .btn.is-error { border-color: var(--red); }
.pick-maly > .btn:disabled { cursor: default; color: var(--muted); background: var(--surface-2); }
.pick-maly-popisek { color: var(--muted); flex: none; }
.pick-maly > .people-pick-list { width: max-content; }
.pick-maly.akcni .people-pick-sum { color: var(--ink); }
/* the value with an invisible measure of all options: the trigger is as wide as the longest option, so every picker
   of a column (rows of people, rows of a table) has the same width and a new value never moves the row */
.pick-hodnota { display: grid; min-width: 0; text-align: left; }
.pick-hodnota > * { grid-area: 1 / 1; min-width: 0; }
.pick-mira { display: grid; visibility: hidden; height: 0; overflow: hidden; }
.pick-mira > * { grid-area: 1 / 1; white-space: nowrap; }
/* the heading of the sheet (the caption and ✕) — only on a phone */
.pick-list-hlava { display: none; }
/* PHONE (≤ 560 px, Petr 10 Oct 2026: „Jako list přes celou šířku“): full and small the same — with the search a sheet
   from the top over the whole width (the search on top, the keyboard never covers it), without the search a sheet from
   the bottom like Filtry; rows of 44 px. `!important` overrides the position `app.js` computes for a pinned panel (as
   the bottom sheets of the bar do). `data-mk-staticky` never exists in the app: the catalogue mockups (`komponenty.html`,
   `pickers.html`) set it to keep the open panels inside the page on a narrow window; `:where()` adds no specificity. */
@media (max-width: 560px) {
  :where(:root:not([data-mk-staticky])) .pick-one.open > .people-pick-list {
    position: fixed !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    width: auto !important; min-width: 0 !important; max-width: none; max-height: 72vh;
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 0 0 var(--radius-16) var(--radius-16); z-index: 91; padding: var(--space-2) .8rem .9rem;
  }
  :where(:root:not([data-mk-staticky])) .pick-one.open > .people-pick-list:not(:has(> [role="combobox"])) { top: auto !important; bottom: 0 !important; border-radius: var(--radius-16) var(--radius-16) 0 0; }
  :where(:root:not([data-mk-staticky])) .pick-one.open::after { content: ""; position: fixed; inset: 0; background: var(--overlay); z-index: 90; }
  :where(:root:not([data-mk-staticky])) .pick-one.open .pick-list-hlava { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-2); padding: .2rem 0 .45rem; }
  .pick-list-hlava b { font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(:root:not([data-mk-staticky])) .pick-one.open > .people-pick-list > [role="combobox"] { flex: none; height: 40px; font-size: var(--text-md); line-height: var(--leading-md); }
  :where(:root:not([data-mk-staticky])) .pick-one.open [role="listbox"] { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* nothing scrolls under the sheet (app.js also stops the wheel and a finger outside its list) */
  body.pick-list-otevreno { overflow: hidden; }
  :where(:root:not([data-mk-staticky])) .pick-one.open .opt { min-height: 44px !important; } /* a touch row; an option with the grey line is taller by itself */
}
.modal-card .people-pick-list .opt-group { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: .45rem .6rem .15rem; margin: 0; }
.comment { display: flex; gap: var(--space-2); align-items: flex-start; padding: .3rem 0; }
.comment + .comment { border-top: 1px solid var(--line); }
.comment-head { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; font-size: var(--font-size-secondary); line-height: var(--line-height-secondary); color: var(--muted); }
.comment-body { font-size: var(--text-sm); line-height: var(--leading-sm); margin-top: .1rem; overflow-wrap: anywhere; }
/* a count indicator on a kanban card / in a list row */
/* "Zeptat se" (ask) directly in the decision bar (KOMPONENTY §34c, walkthrough 17 Sep · A6): the button opens
   a field below itself with its own "Odeslat" — the comment goes into the same thread as any other. */
.ask-inline { margin-top: var(--space-2); }
.ask-inline-body { margin-top: var(--space-2); }
.ask-inline-body textarea.input { width: 100%; min-width: 0; background: var(--card); }
.comment-count { display: inline-flex; align-items: center; gap: .2rem; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); white-space: nowrap; }

/* Quick notes (KOMPONENTY §40) — the stream at a company and a project; the rows are .comment from §34 */
.zapisky-form { margin: 0 0 .2rem; }
.zapisky-form textarea.input { width: 100%; min-width: 0; }
.zapisky-form .form-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.zapisek-trail { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); margin-top: .15rem; }
.zapisek-trail a { color: var(--muted); }

/* Link or create (KOMPONENTY §41) — a choice + the picker "＋ Nový… / existing" */
.loc { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: var(--space-1) 0; min-height: 34px; }
.loc-radio { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--text-sm); line-height: var(--leading-sm); min-width: 5.5rem; }
.loc .menu { flex: 1 1 14rem; min-width: 0; }
.loc-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; cursor: pointer; text-align: left; color: var(--ink); position: relative; }
.loc-new { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent); font-weight: 600; }
.loc-meta { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
.loc-list { min-width: 16rem; }
.modal-card .loc-list .opt-group { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: .45rem .6rem .15rem; margin: 0; }
.loc-origin { display: flex; flex-direction: column; gap: .2rem; background: var(--accent-soft); border-radius: var(--radius-sm); padding: var(--space-2) .7rem; margin: -.4rem 0 .9rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }

/* ---------- @mentions (KOMPONENTY §35, spec docs/specs/zminky-v1.md) ---------- */
/* A chip in the text of a comment or note: a colleague without a link, a company and a person with a link,
   a deleted one muted (like ClientLink). One's own mention shines in the accent — so that "this is about me"
   is visible at first glance. */
.mention {
  display: inline; padding: .05rem .3rem; border-radius: 5px;
  background: var(--chip-bg); color: var(--ink); font-weight: 500;
  text-decoration: none; overflow-wrap: anywhere;
}
a.mention:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.mention--me { background: var(--accent-soft); color: var(--accent); }
.mention--deleted { color: var(--muted); } /* no link, grey — dimmed by colour, not opacity (§62) */

/* The picker after "@": a floating offer below the field. It is not in a `.menu` wrapper (the field can be anywhere,
   even inside a scrolled card), hence `position: fixed` and coordinates from app.js. */
/* z-index 150 = ABOVE the large modal (`.modal-overlay` has 100) and below the toasts (`#toast-root` 200).
   Without it the suggester in a comment inside a modal hid under the overlay and could not be picked from
   (walkthrough 17 Sep · A1). The offer hangs on <body>, so the modal stacking does not limit it. */
/* Since search stage S2 (spec `vyhledavani-v1.md` §4.7) the menu is the search menu's fragment — the same rows
   (`.hledani-opt`, `.hledani-skupina`, `.hledani-napoveda`), nothing selected, and **no inner scrollbar** (the server
   sends at most 10 items, a phone 8). */
.mention-menu {
  display: block; position: fixed; z-index: 150; padding: .4rem;
  width: min(420px, calc(100vw - 16px)); border-radius: var(--radius-12);
}
.mention-menu .mention-none { margin: 0; padding: .45rem .6rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
@media (max-width: 720px) { .mention-menu .hledani-napoveda { display: none; } }

/* ---------- Panel with a one-time link (KOMPONENTY §37, spec docs/specs/pozvanky-v1.md) ---------- */
/* Shown ONCE, right after the invitation is created — so it visually stands out of the table (accent
   background) and nobody overlooks it or closes the page before copying the link. */
.token-panel {
  display: flex; flex-direction: column; gap: .4rem;
  margin: 0 0 .9rem; padding: .8rem .9rem;
  background: var(--accent-soft); border-radius: var(--radius-10);
}
.token-panel b { color: var(--ink); }
.token-row { display: flex; gap: var(--space-2); align-items: center; }
.token-row .input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); line-height: var(--leading-sm); }
.token-row .btn { flex: none; }

/* ---------- Logo preview in Administration → Appearance (KOMPONENTY §39) ---------- */
/* The frame has a FIXED size, so it is immediately visible how small the logo will really be — the uploaded
   logo fits in it whole (`object-fit: contain`), not cropped. */
.brand-preview { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.brand-preview-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex: none; padding: .4rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-10);
  font-size: var(--text-xs); text-align: center; line-height: var(--leading-xs);
}
.brand-preview-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* the logo in the branded card (sign-in, invitation) and in the bar behaves like the built-in trefoil */
img.login-logo { object-fit: contain; }

/* ---------- Unified toolbar: views · Filtry (N) · Zobrazení (KOMPONENTY §53) ----------
   Spec `docs/specs/lista-filtru-v1.md`, variant V3 hybrid; mockup `mockupy/lista-filtru.html`.
   The panel itself is `.menu-list.panel` from catalogue §19 — only the bar, the button with a count,
   the row of removable chips and the bottom sheet on a phone are added here. Colours only through tokens. */
.lista { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 0; }
.lista .tabs { margin: 0; flex: 1 1 auto; min-width: 0; }
.lista-akce { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex: none; }
.lista-ram { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.lista-zlom { display: none; }
/* the search stands at Filters on every view (spec tasks-unified-toolbar §2, §53): the field gives way first, then the whole
   group wraps under the tabs, never the search away from Filters */
.lista-akce-hledani { flex: 0 1 auto; min-width: 0; }
.lista-akce-hledani .lista-hledat { flex: 0 1 14rem; min-width: 8rem; }
.lista-akce-hledani .lista-hledat .input { width: 100%; }
.lista-akce-hledani .lista-lide { margin-left: 0; }
/* the people control (§53): on the right, just before Filters — it pushes itself over and Filters stick to it */
.lista-lide { flex: none; margin-left: auto; }
.lista-lide + .lista-akce { margin-left: 0; }
/* with the search the group may wrap to its own row under the people control and stays on the right there as well */
.lista:has(> .lista-lide + .lista-akce-hledani) { justify-content: flex-end; }
/* the board picker and the people control side by side (Board for an admin) — only the first one pushes them */
.lista-lide + .lista-lide { margin-left: 0; }
.lista-mesic { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.lista-mesic .mlabel { min-width: 8.5rem; text-align: center; font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-sm); }
.lista-mesic .icon-btn { text-decoration: none; }
/* a vertical divider between layouts (Agenda × Kanban) and views — both are tabs, but a different question */
.lista-del { width: 1px; align-self: center; height: 1.1rem; background: var(--line); margin: 0 .3rem; }

/* toolbar button — the `.fpill` look, but with an icon and an optional count */
.fbtn {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-full);
  height: var(--control-md); padding: 0 .8rem; white-space: nowrap;
}
.fbtn:hover { border-color: var(--accent); }
.fbtn svg { flex: none; }
.fbtn[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* an active filter is visible even on the closed button (Carbon, Baymard) — without JS, from the badge content */
.fbtn:has(.pocet:not(:empty)) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fbtn .pocet:empty { display: none; }
.fbtn .pocet {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--badge); height: var(--badge);
  padding: 0 .3rem; border-radius: var(--radius-full); background: var(--accent-solid); color: var(--on-solid);
  font-size: var(--text-xs); font-weight: 700; line-height: 1;
}
.fbtn:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

/* toolbar panel (a dialog above the listing) */
.lista-panel { min-width: 260px; max-height: min(70vh, 34rem); overflow: auto; }
/* the Tasks panel Zobrazení is taller (Seznamu úkolů, the reason under Stavu, the switch): the switch must not hide below its scroll on a desktop */
.lista-panel:has(.opt-switch[role="switch"]) { max-height: min(85vh, 46rem); }
.lista-panel.siroky { min-width: 320px; }
.lista-panel-hlava { display: none; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: .3rem; }
.lista-panel-hlava h4 { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); }
.lista-panel-pata { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: .6rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.lista-panel-pata .lista-hotovo { display: none; }
.lista-panel .opt-txt { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.lista-panel .barva { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lista-panel .opt-zkratka { color: var(--accent); font-weight: 600; }

/* The Filters panel with groups (catalogue §53 point 23, spec `filter-panel-v1.md`): from 3 drawn groups the panel shows the list of
   groups and the values of one of them. One HTML, only the width switches it: two columns above 560 px, a step list in the bottom
   sheet up to 560 px. The state lives on the panel, which is not swapped (`je-uvnitr` the step, `filtry-hleda` the search, `app.js`).
   The left column scrolls on its own: `.filtry-telo` is not positioned, so the values placed against the wrapper neither scroll
   with it nor get clipped by it. */
.filtry-obal { display: contents; }
.lista-panel:has(.filtry-telo) { max-width: calc(100vw - var(--space-8)); overflow: hidden; }
.menu.open > .lista-panel:has(.filtry-telo) { display: flex; flex-direction: column; }
.lista-panel:has(.filtry-telo) > * { flex: none; }
.filtry-obal:has(> .filtry-telo) { display: block; position: relative; flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--line); }
.filtry-telo { height: 100%; overflow: auto; overscroll-behavior: contain; }
.filtry-hlava { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-md); padding: var(--space-1) var(--space-2-5); border: none; background: none; font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); text-align: left; cursor: pointer; }
.filtry-hlava:hover { background: var(--bg); }
.filtry-hlava:focus-visible, .filtry-zpet:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-width)); }
.filtry-nazev { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* a long name without a space (an e-mail, a code) wraps and never pushes the column sideways */
.filtry-hodnoty .opt-txt { overflow-wrap: anywhere; }
.filtry-hlava .pocet { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: var(--badge); height: var(--badge); padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--accent-solid); color: var(--on-solid); font-size: var(--text-xs); font-weight: 700; line-height: 1; }
.filtry-hlava .pocet::before { content: attr(data-pocet); }
.filtry-sipka-dal, .filtry-zpet { display: none; }
.filtry-akce { display: flex; align-items: center; position: sticky; top: 0; z-index: 1; }
.filtry-zrusit { padding: var(--space-1) var(--space-2-5); font-size: var(--text-xs); line-height: var(--leading-xs); }
@media (min-width: 561px) {
  .lista-panel:has(.filtry-telo) { width: calc(var(--space-16) * 8.5); height: min(70vh, calc(var(--control-lg) * 11)); }
  /* nothing to cancel: on a computer the foot has nothing else, so it is not drawn */
  .lista-panel:has(.filtry-telo) > .lista-panel-pata:has(> span:first-child) { display: none; }
  .lista-panel:not(.filtry-hleda) .filtry-telo { width: calc(var(--space-16) * 3); }
  .lista-panel:not(.filtry-hleda) .filtry-skupina.is-open > .filtry-hlava { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .lista-panel:not(.filtry-hleda) .filtry-hodnoty { display: none; position: absolute; inset: 0 0 0 calc(var(--space-16) * 3); overflow: auto; overscroll-behavior: contain; padding: 0 var(--space-1) var(--space-1); border-left: 1px solid var(--line); }
  /* „Zrušit výběr“ stands over the top right corner, taking no height: its coming or going moves nothing, the first value is level with the first group. It stays there while the values scroll under it, so a long value in any row keeps out of its way, always, so it does not wrap anew when the link comes. */
  .filtry-akce { height: 0; }
  .filtry-zrusit { position: absolute; top: 0; right: 0; background: var(--card); }
  .lista-panel:not(.filtry-hleda) .filtry-akce ~ .opt { padding-right: calc(var(--space-16) * 2); }
  .lista-panel:not(.filtry-hleda) .filtry-skupina.is-open > .filtry-hodnoty { display: block; }
}
@media (max-width: 560px) {
  /* a fixed height in every step, the sheet does not jump (spec §4.5) */
  .lista-pop.open > .lista-panel:has(.filtry-telo) { height: min(82vh, calc(var(--control-lg) * 15)); overflow: hidden; }
  .lista-pop.open > .lista-panel:has(.filtry-telo) > .lista-panel-pata { position: static; margin-bottom: 0; padding-bottom: 0; }
  .filtry-hlava, .filtry-zrusit, .lista-panel:has(.filtry-telo) .opt { min-height: var(--touch-target); }
  .filtry-zrusit { display: flex; align-items: center; flex: none; }
  .filtry-akce { justify-content: space-between; background: var(--card); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
  .lista-panel:not(.filtry-hleda) .filtry-sipka-dal { display: inline-flex; flex: none; color: var(--muted); }
  .lista-panel:not(.filtry-hleda) .filtry-hodnoty { display: none; }
  .lista-panel.je-uvnitr:not(.filtry-hleda) .filtry-hlava, .lista-panel.je-uvnitr:not(.filtry-hleda) .filtry-skupina:not(.is-open) { display: none; }
  .lista-panel.je-uvnitr:not(.filtry-hleda) .filtry-skupina.is-open > .filtry-hodnoty { display: block; }
  .lista-panel:not(.filtry-hleda) .filtry-zpet { display: flex; align-items: center; gap: var(--space-1-5); flex: 1 1 auto; min-width: 0; min-height: var(--touch-target); padding: var(--space-1) var(--space-1-5); border: none; background: none; font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
}
/* while searching the body is a flat list of matches on both widths, a group is only a heading above them (like `.opt-group`) */
.filtry-hleda .filtry-hlava { min-height: 0; padding: var(--space-2) var(--space-2-5) var(--space-1); background: none; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; cursor: default; }
.filtry-hleda .filtry-hlava:hover { background: none; }
.filtry-hleda .filtry-hlava .pocet, .filtry-hleda .filtry-akce { display: none; }

/* segment (sort direction) */
.segment { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-8); overflow: hidden; }
.segment > a {
  font: inherit; font-size: var(--text-xs); line-height: var(--leading-xs); background: var(--bg); color: var(--muted);
  padding: .22rem .55rem; cursor: pointer; text-decoration: none;
}
.segment > a + a { border-left: 1px solid var(--line); }
.segment > a[aria-pressed="true"], .segment > a[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* the row of active filters — removable chips + "Zrušit vše" */
.aktivni { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .55rem 0 .2rem; }
.aktivni.is-prazdna { display: none; }
.chip-x {
  display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-sm); line-height: var(--leading-sm);
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  height: var(--chip-md); border-radius: var(--radius-full); padding: 0 .3rem 0 .65rem;
}
.chip-x .lbl { color: var(--muted); font-weight: 600; }
.chip-x > a {
  display: inline-flex; align-items: center; justify-content: center; width: var(--badge); height: var(--badge);
  color: inherit; cursor: pointer; border-radius: var(--radius-full); text-decoration: none;
}
.chip-x > a:hover { background: var(--accent-solid); color: var(--on-solid); }
.zrusit-vse { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); cursor: pointer; padding: .2rem .3rem; text-decoration: none; }
.zrusit-vse:hover { color: var(--accent); text-decoration: none; }

/* Content below the toolbar (listing `#stred`, board `#board`): the same spacing everywhere — the board used to sit
   right under the bar (Petr, 18 Sep 2026: „kanban sloupce jsou příliš přisedlé" — the kanban columns sit too close). */
.pod-listou { margin-top: var(--lista-odstup); }

/* the people control (whose tasks / whose board — administrator only): a chosen colleague or the team = a highlighted
   button, so that even when closed it is clear I am not looking at my own */
.fbtn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fbtn-lide .fbtn-txt { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
/* the button Úkoly týmu (§53, §56): a long name is shortened, the panel is as wide as the picker in the header */
.fbtn-tym .fbtn-txt { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .fbtn-tym .fbtn-txt { max-width: 9rem; } }
/* two levels: a person is a heading (it cannot be chosen), under it their lists indented, on one line (spec §4.2) */
.tym-clovek + .tym-clovek { margin-top: var(--space-2); }
.tym-clovek:has(> .opt-group[style*="none"]) { display: none; }
.tym-jmeno { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2-5); font-size: var(--font-size-control); line-height: var(--line-height-control); font-weight: 650; color: var(--ink); text-transform: none; letter-spacing: normal; }
.opt-zaskrt.tym-seznam { padding-left: var(--space-8); }
.tym-panel .opt-zaskrt.tym-seznam { align-items: center; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.tym-panel .opt-zaskrt.tym-seznam .opt-txt { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex: 1 1 auto; }
.tym-panel .opt-zaskrt.tym-seznam .opt-txt .nm, .tym-panel .opt-zaskrt.tym-seznam .opt-txt .sub { display: inline; margin: 0; }
.tym-panel .opt-zaskrt.tym-seznam .opt-txt .sub { white-space: nowrap; }
/* the buttons Moje seznamy and Úkoly týmu (spec `ukoly-tymu-zobrazeni-v1.md` §8.1, catalogue §53 point 22): side by side, the
   text only the number of lists chosen in each; an option is a button of the panel's form, ticked as a list (§81) */
.lista-vyber { display: flex; align-items: center; gap: var(--space-2); }
.fbtn-vyber .fbtn-txt { white-space: nowrap; }
.vyber-telo { margin: 0; }
.vyber-prazdny { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-2-5); border-radius: var(--radius-8); background: var(--surface-2); color: var(--ink); }
/* „Všechny moje seznamy“ and „Celý tým (všechny seznamy)“: a checkbox of three states, the middle one a line (aria-checked="mixed") */
.opt-zaskrt[aria-checked="mixed"] .okenko { background: var(--accent); border-color: var(--accent); }
.opt-zaskrt[aria-checked="mixed"] .okenko::after { transform: scale(1); -webkit-mask: none; mask: none; height: 2px; border-radius: var(--radius-full); }
.opt-vse .nm { font-weight: 600; }
/* the header's name of what is shown (§56): only a name since the choice moved to the toolbar, the type of the former picker */
.agenda-nazev { font-family: var(--font-head); font-size: var(--display-xs); font-weight: 600; letter-spacing: -.01em; line-height: var(--leading-display-xs); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a block of one list when grouped by task list (spec §8.3): the fold of a band, the rhythm in grey, „Otevřít seznam ›“ right */
.card-head .skupina-seznam { flex: 1 1 auto; }
.skupina-seznam .pas-sbalit { padding: var(--space-1); margin-left: calc(-1 * var(--space-1)); }
.skupina-seznam.is-sbaleny .pas-sipka { transform: rotate(-90deg); }
.skupina-seznam .pas-obdobi { font-weight: 400; }
.skupina-seznam .pas-odkaz { font-weight: 400; }
/* a row of the window Šablony seznamů úkolů (spec §2): the name, the grey line under it */
.opt-sablona .opt-txt { display: flex; flex-direction: column; align-items: flex-start; }

/* a toolbar without views (the Work records tab at a client): an empty tab row draws no line */
.lista .tabs:empty { border-bottom-color: transparent; }
/* the listing below the toolbar inside a tab card (Tasks, Work records, Notes at a record) */
.lista-vypis { margin-top: .6rem; }

/* search in the listing (Clients, Projects) — in place of the frame, on its own line on a phone */
.lista-hledat .input { width: 14rem; max-width: 100%; }

/* a divider row inside one table (Administration → Stavy obchodu: „Konec obchodu", §32) — NOT the grouping of a listing,
   which draws each group as its own table (§8c below) */
.tbl tr.tbl-skupina td { padding: .6rem var(--space-4) .3rem; }
.tbl tr.tbl-skupina:hover td { background: none; }
.tbl-skupina .task-group { margin: 0; }

/* ---------- Grouped listing: each group its own table (KOMPONENTY §8c) ----------
   Petr, 2 Oct 2026: „ta seskupení … dělat jako samostatné tabulky … s trochou rozestupu mezi nimi". At the agenda level a
   group is a table card with a heading (§6, `.card + .card` keeps the gap); inside a card it is a framed block. */
.skupina-nadpis { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; overflow-wrap: anywhere; min-width: 0; }
.skupina-nadpis.overdue { color: var(--red); }
.card-head .skupina-nadpis .pocet-sk { margin-left: 0; }
.skupiny-v-karte { display: flex; flex-direction: column; gap: var(--space-4); }
.card-table .skupiny-v-karte { padding: 0 var(--space-5) var(--space-5); }
.skupina-blok > .skupina-nadpis { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 650; margin: 0 0 .45rem; }
.skupina-ram { border: 1px solid var(--line); border-radius: var(--radius-10); overflow-x: auto; background: var(--card); }
.skupina-ram > .radek-vypisu, .skupina-ram > .task-item { padding-left: var(--space-4); padding-right: var(--space-4); }
/* Tasks grouped by assignee (spec ukoly-tymu-zobrazeni-v1 §3.2, KOMPONENTY §8c): the avatar before the name, „už není v týmu“
   after it and „3 po termínu“ in red after the count; the count's words for a screen reader sit inside `.pocet-sk` */
.skupina-clovek .av { flex: none; }
/* a long name wraps beside its avatar, not under it (phone) */
.skupina-clovek .skupina-jmeno, .skupina-seznam .skupina-jmeno { flex: 0 1 auto; min-width: 0; }
.skupina-nadpis .pocet-sk { position: relative; }
.skupina-dovetek { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 400; color: var(--muted); }
.skupina-prosle { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--red); }
.termin-prosly { color: var(--red); font-weight: 600; }
/* Done tasks folded at the end of a group (spec §3.4, KOMPONENTY §8c): the row „Hotové úkoly (N)“ across the whole group,
   at least a touch target high, the arrow turns when open; under the open rows „Načíst další …“ and „Zobrazit všech …“ */
.hotove-radek { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; text-decoration: none; }
.hotove-radek:hover { color: var(--ink); background: var(--hover); }
.hotove-radek:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hotove-sipka { display: inline-flex; flex: none; transition: transform .15s; }
.hotove-radek[aria-expanded="true"] .hotove-sipka { transform: rotate(90deg); }
.hotove-radek + div .task-item:first-child { border-top: 1px solid var(--line); }
.hotove-vic { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-2); }
.hotove-vic .odkaz { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.card > .hotove-radek { margin: 0 var(--space-5); }
/* the switch in a toolbar panel where it changes nothing (KOMPONENTY §11c): grey, the reason under it */
.opt-switch[aria-disabled="true"] { cursor: not-allowed; }
.opt-switch[aria-disabled="true"] .opt-switch-txt > span:first-child { color: var(--muted); }
/* dimmed by colour, not opacity: the track of a grey switch that is on is muted instead of the accent */
.opt-switch[aria-disabled="true"][aria-checked="true"] .switch { background: var(--muted); }
/* the columns line up from group to group: a fixed layout with the agenda's column widths (a phone folds rows, §8b) */
@media (min-width: 561px) {
  .tbl-skupinova { table-layout: fixed; }
  .tbl-skupinova td { overflow-wrap: anywhere; }
}
/* the task's state in a row (catalogue §11, `TaskStateChip`): a muted chip with the dot of the column's colour */
.chip-stav { gap: .35rem; }
.chip-stav .kcol-dot { width: 8px; height: 8px; }

/* Vzestupně | Sestupně on top of the Zobrazení panel, across it, without a label (spec `tasks-unified-toolbar-v1.md` §7) */
.razeni-smer { padding: var(--space-1) var(--space-2-5) var(--space-2); }
.razeni-smer .segment { display: flex; width: 100%; }
.razeni-smer .segment a { flex: 1 1 0; text-align: center; }
/* why a grouping is not on offer here (the whole team has no common columns) */
.razeni-proc { margin: 0 var(--space-2) var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); }

/* a work-record row (`WorkRecordRow`): date · description · amount · time · actions; phone: see the media query below */
.vykaz-radek { display: flex; gap: .7rem; align-items: flex-start; }
.vykaz-telo { flex: 1; min-width: 0; }

/* ---------- Agenda header: "Úkoly / <task list> ▾" + Kanban | List (KOMPONENTY §56) ----------
   Mockup `mockupy/sablony-seznamu-ukolu.html` M0. The list picker is a Picker (§19) with `.lista-pop` — on a phone
   a bottom sheet like the toolbar panels; the view switch is a segment of two POST forms (preference, audit N2). */
.agenda-hlava { justify-content: flex-start; gap: .6rem var(--space-4); }
.agenda-titul { display: flex; align-items: center; gap: .1rem; min-width: 0; }
.agenda-titul h1 { flex: none; }
.agenda-lomitko { flex: none; color: var(--muted); font-family: var(--font-head); font-size: var(--display-xs); line-height: var(--leading-display-xs); font-weight: 300; padding: 0 var(--space-1) 0 .45rem; }
.seznam-menu { min-width: 0; }
.seznam-vyber {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; min-width: 0;
  font-family: var(--font-head); font-size: var(--display-xs); font-weight: 600; letter-spacing: -.01em; line-height: var(--leading-display-xs);
  color: var(--ink); background: none; border: 1px solid transparent; border-radius: var(--radius-10);
  padding: .2rem .45rem .2rem var(--space-2); cursor: pointer;
}
.seznam-vyber:hover { background: var(--surface-2); }
.seznam-vyber[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.seznam-vyber:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.seznam-vyber .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 32rem; }
.seznam-vyber .chev { flex: none; display: inline-flex; color: var(--muted); }
.seznam-vyber[aria-expanded="true"] .chev { color: var(--accent); transform: rotate(180deg); }
:is(.seznam-panel, .tym-panel) { min-width: 320px; max-width: min(430px, calc(100vw - 2rem)); }
:is(.seznam-panel, .tym-panel) .opt-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; line-height: 1.3; }
:is(.seznam-panel, .tym-panel) .opt .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
:is(.seznam-panel, .tym-panel) .opt[aria-checked="true"] { background: var(--accent-soft); }
:is(.seznam-panel, .tym-panel) .opt[aria-checked="true"] .nm { color: var(--accent); font-weight: 600; }
:is(.seznam-panel, .tym-panel) .opt .sub { font-size: var(--text-xs); line-height: var(--leading-xs); }
/* view switch — two states of the same thing, hence a segment (like "Směr" in the Zobrazení panel, §53) */
.pohled-prepinac { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: var(--radius-10); overflow: hidden; background: var(--card); }
.pohled-prepinac form { display: contents; }
.pohled-prepinac button {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500;
  color: var(--muted); background: none; border: 0; padding: 0 .8rem; height: var(--control-sm); cursor: pointer;
}
.pohled-prepinac button + button, .pohled-prepinac form + form button { border-left: 1px solid var(--line); }
.pohled-prepinac button:hover { color: var(--ink); background: var(--hover); }
.pohled-prepinac button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pohled-prepinac button:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
/* icons only (List | Mosaic of Notes, right of Zobrazení in the toolbar §53): as tall and round as the `.fbtn` buttons next to it */
.pohled-prepinac.jen-ikony { border-radius: var(--radius-full); }
.pohled-prepinac.jen-ikony button { padding: 0 .6rem; line-height: 1; }
.pohled-prepinac.jen-ikony button svg { display: block; }
.agenda-akce { margin-left: auto; flex-wrap: wrap; }
/* the link back next to the title when what is shown is not in the picker (spec §4.3, §56) */
.agenda-titul:has(.agenda-zpet) { flex-wrap: wrap; }
.agenda-zpet { margin-left: var(--space-3); white-space: nowrap; font-size: var(--text-sm); line-height: var(--leading-sm); }
/* E0e (spec šablon §4a.8 c, mockup `sledovani-seznamu.html`): the list's actions top right = the badge with people and
   the bell · Upravit ▾ · Nový úkol in the group `.zaznam-akce` (34 px as on a record, §36, §18). On a phone the view
   switch and „Nový úkol“ only as icons: the word `.btn-popis` stays for a screen reader (and in `title`), the icon
   `.btn-ico-tel` shows only there — otherwise the actions would wrap into a third row. */
.agenda-akce .zaznam-akce { margin-left: 0; }
/* the Upravit ▾ menu of a list: „Nastavení seznamu úkolů…“ on one line */
.agenda-akce .split > .menu-list { min-width: 16rem; }
.btn-ico-tel { display: none; }
/* a toolbar without tabs (Kanban has no views and the layout is in the header): the empty tab row is not drawn */
.lista--bez-pohledu .lista-tabs { display: none; }
.lista--bez-pohledu .lista-ram { order: 0; flex: 0 1 auto; }
@media (max-width: 560px) {
  /* row 1 = Úkoly / list ▾, row 2 = Kanban | List + actions */
  .agenda-hlava { gap: var(--space-2); }
  .agenda-titul { flex: 1 1 100%; }
  .agenda-zpet { margin-left: 0; flex-basis: 100%; }
  .agenda-titul h1 { font-size: var(--text-xl); line-height: var(--leading-xl); }
  .agenda-lomitko { font-size: var(--text-xl); line-height: var(--leading-xl); padding: 0 .1rem 0 .3rem; }
  .seznam-vyber { font-size: var(--text-lg); line-height: var(--leading-lg); padding: .2rem .3rem .2rem .35rem; }
  .pohled-prepinac button { padding: 0 .7rem; }
  :is(.seznam-panel, .tym-panel) { min-width: 0; max-width: none; }
  /* E0e: the view switch and „Nový úkol“ only as icons, the word only for a screen reader */
  .agenda-hlava .btn-popis { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .agenda-hlava .btn-ico-tel { display: inline-flex; }
  .agenda-hlava .pohled-prepinac button { padding: 0 .6rem; }
  .agenda-akce .zaznam-akce .btn-primary { padding: 0 .55rem; }
  /* without tabs there is nothing to wrap: frame on the left, Filters on the right in one row */
  .lista--bez-pohledu .lista-zlom { display: none; }
  .lista--bez-pohledu .lista-ram { order: 0; flex: 1 1 100%; }
  .lista--bez-pohledu .lista-lide { order: 1; }
  .lista--bez-pohledu .lista-akce { order: 2; }
}

/* "Načíst dalších 20" below the listing */
.lista-vic { display: flex; align-items: center; gap: .7rem; justify-content: center; margin: .7rem 0 .2rem; }
/* pages under a listing in place of „Načíst dalších N“ (spec strankovani-agend-v1 §2, catalogue §53 bod 8, `Pager` in
   toolbar.tsx). Under the table inside its card: the range on the left, the pages in the middle, Na stránce 25 · 50 · 100 on
   the right (the segment `.pohled-prepinac` of one POST form, §46, §56). Up to 1,100 px the range and the size on one row,
   the pages under them. On a phone three rows: the range, the pages (5 places instead of 7, 7 × 44 px = 308 px, fits from
   360 px), the size. */
.strankovani { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2-5) var(--space-4); border-top: 1px solid var(--line); }
.strankovani--samostatne { border-top: none; padding: var(--space-3) 0 0; }
.strankovani-rozsah { grid-column: 1; margin: 0; white-space: nowrap; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); font-variant-numeric: tabular-nums; }
.strankovani-stranky { grid-column: 2; }
.strankovani-stranky ul { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; }
.strankovani-stranky .strankovani-uzke { display: none; }
.strankovani-cislo { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-sm); height: var(--control-sm); padding: 0 var(--space-1-5); border-radius: var(--radius-8); color: var(--ink); font-size: var(--font-size-control); line-height: var(--line-height-control); font-variant-numeric: tabular-nums; text-decoration: none; }
.strankovani-cislo:hover { background: var(--hover); }
.strankovani-cislo[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.strankovani-cislo:focus-visible, .strankovani-krok:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.strankovani-vynech { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-sm); color: var(--muted); }
.strankovani-krok { gap: var(--space-1); text-decoration: none; }
.strankovani-krok[aria-disabled="true"] { color: var(--muted); cursor: default; pointer-events: none; }
.strankovani-pocet { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.strankovani-pocet-popisek { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-sm); white-space: nowrap; }
/* a group split between pages: its heading on the next page with „pokračování“ (continued) */
.skupina-pokracovani { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 500; }
/* tablet: the range and the size on one row, the pages centred under them */
@media (max-width: 1100px) {
  .strankovani { grid-template-columns: 1fr auto; }
  .strankovani-rozsah { grid-row: 1; }
  .strankovani-pocet { grid-row: 1; grid-column: 2; }
  .strankovani-stranky { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 560px) {
  .strankovani { grid-template-columns: 1fr; justify-items: center; padding: var(--space-3) var(--space-2); }
  .strankovani-stranky ul { gap: 0; }
  .strankovani--samostatne { padding: var(--space-3) 0 0; }
  .strankovani-rozsah { grid-row: 1; grid-column: 1; }
  .strankovani-stranky { grid-row: 2; grid-column: 1; justify-self: center; }
  .strankovani-pocet { grid-row: 3; grid-column: 1; justify-self: center; }
  .strankovani-stranky .strankovani-siroke { display: none; }
  .strankovani-stranky .strankovani-uzke { display: flex; }
  .strankovani-cislo, .strankovani-vynech { min-width: var(--touch-target); height: var(--touch-target); }
  .strankovani-krok { min-width: var(--touch-target); height: var(--touch-target); padding: 0; justify-content: center; }
  .strankovani .pohled-prepinac button { min-width: var(--touch-target); height: var(--touch-target); justify-content: center; }
  /* on a phone only the arrow shows; Předchozí and Další stay for a screen reader (like `.sr-only`) */
  .strankovani-krok-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.task-group .pocet-sk, .card-head .pocet-sk, .skupina-nadpis .pocet-sk {
  display: inline-flex; align-items: center; height: var(--chip-sm); font-weight: 600; color: var(--muted); background: var(--surface-2);
  border-radius: var(--radius-full); padding: 0 .45rem; font-size: var(--text-xs); line-height: var(--leading-xs);
}
/* a count next to a card heading (Plán: „V plánu 13") — the heading text and the pill do not touch */
.card-head .pocet-sk { margin-left: .4rem; vertical-align: middle; }

/* Phone: views scroll horizontally, panels are bottom sheets (recommended pattern, Baymard/NN/g). */
@media (max-width: 560px) {
  /* Tabs have **basis 0** (`flex: 1 1 0`), so instead of wrapping they shrink and scroll
       sideways — the Filters/Zobrazení buttons thus stay on the first line at the right edge. With `1 1 auto`
       the whole `.lista-akce` wrapped off the screen (measured on the Kanban, 18 Sep 2026).
       The frame (month, board picker), on the other hand, wraps onto **its own line** below them. */
  .lista { gap: .45rem; flex-wrap: wrap; }
  .lista .tabs { flex: 1 1 0; min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; gap: var(--space-4); }
  .lista .tabs::-webkit-scrollbar { display: none; }
  .lista .tab { white-space: nowrap; }
  .lista-akce { margin-left: 0; flex: none; }
  .fbtn { padding: 0 .6rem; }
  .fbtn .fbtn-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* for the people control the name is the main thing — it stays visible, only shortened */
  .fbtn-lide .fbtn-txt { position: static; width: auto; height: auto; clip-path: none; max-width: 7.5rem; white-space: nowrap; }
  /* the buttons of the chosen lists: the icon with the number (spec §8.3) */
  .fbtn-vyber .fbtn-txt { position: static; width: auto; height: auto; clip-path: none; }
  .fbtn-vyber .fbtn-nazev { display: none; }
  .agenda-nazev { font-size: var(--text-xl); line-height: var(--leading-xl); white-space: normal; }
  /* The second line: the frame (month, search) on the left, the people control on the right. They are wrapped by an
       invisible full-width break — otherwise the frame itself would squeeze into the first line next to the tabs (which have basis 0). */
  .lista-zlom { display: block; order: 2; flex-basis: 100%; height: 0; }
  .lista-ram { order: 3; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
  .lista-lide { order: 4; }
  .lista-mesic { flex: 1 1 auto; min-width: 0; }
  .lista-mesic .mlabel { min-width: 0; flex: 1 1 auto; }
  /* `!important` is deliberate here: when opening, app.js computes the panel position inline (fixed/left/top)
       because of clipping ancestors; the bottom sheet must override it. No other place in the CSS does this. */
  .lista-pop.open > .menu-list {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none; max-height: 82vh; overflow: auto;
    border-radius: 18px 18px 0 0; z-index: 80; padding: .7rem .9rem var(--space-4);
  }
  .lista-pop.open::before { content: ""; position: fixed; inset: 0; background: var(--overlay); z-index: 79; }
  .lista-pop.open .lista-panel-hlava { display: flex; position: sticky; top: -.1rem; background: var(--card); z-index: 1; padding-top: .1rem; }
  .lista-pop.open .lista-panel-pata { position: sticky; bottom: calc(-1 * var(--space-4)); margin-bottom: calc(-1 * var(--space-4)); background: var(--card); padding-bottom: var(--space-4); z-index: 1; }
  .lista-pop.open .lista-panel-pata .lista-hotovo { display: inline-flex; }
  .lista-pop.open .lista-panel-pata .btn { flex: 1 1 0; justify-content: center; }
  /* the last row: the search over the rest of the width, the buttons as icons (at most three rows, spec §2) */
  .lista-akce-hledani { order: 5; flex: 1 1 100%; margin-left: 0; }
  .lista-akce-hledani .lista-hledat { flex: 1 1 auto; min-width: 0; }
  .lista-akce-hledani .lista-lide { order: 0; }

  /* Mobile table row layout (KOMPONENTY §8b): instead of a clipped table each row folds into a
       block — the main cell across the full width (⋯ to the right of it), the other cells wrap below it.
       Empty cells ("—") disappear; numbers without context get a label from `data-label`. No JS. */
  .tbl-radky thead { display: none; }
  .tbl-radky, .tbl-radky tbody { display: block; }
  .tbl-radky tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
  .tbl-radky tr:last-child { border-bottom: none; }
  .tbl-radky td { display: block; padding: 0; border: 0; min-width: 0; max-width: 100%; font-size: var(--text-sm); line-height: var(--leading-sm); overflow-wrap: anywhere; }
  .tbl-radky tr:hover td { background: none; }
  .tbl-radky td.r-hlavni { order: -2; flex: 1 1 calc(100% - 3rem); font-size: var(--text-sm); line-height: var(--leading-sm); }
  .tbl-radky td.r-akce { order: -1; flex: 0 0 auto; margin-left: auto; }
  .tbl-radky td.r-prazdne { display: none; }
  /* the Total row (catalogue §8f): one line over the whole stacked row, not a piece above every cell */
  .tbl-radky tr.radek-celkem { border-top: 2px solid var(--line); }
  .tbl-radky tr.radek-celkem td { border-top: 0; }
  .tbl-radky td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
  .tbl-radky tr.tbl-skupina { padding: .55rem .9rem .15rem; border-bottom: 0; }
  .tbl-radky tr.tbl-skupina td { flex: 1 1 100%; padding: 0; }
  .tbl-radky .cell-name { gap: .6rem; }
  /* a table with the group's tick in its header (`.tbl-vyber`): the header stays as one row, the tick with its words */
  .tbl-radky.tbl-vyber thead { display: block; }
  .tbl-radky.tbl-vyber thead th:not(.r-vyber) { display: none; }
  .tbl-radky.tbl-vyber thead th.r-vyber { width: auto; padding: 0; border: 0; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 400; }
  /* the rows' ticks sit at the right end of a folded row, so the group's tick does too, its words before it */
  .tbl-radky.tbl-vyber thead tr { justify-content: flex-end; }
  .tbl-radky.tbl-vyber .vyber-skupiny { flex-direction: row-reverse; }
  .tbl-radky.tbl-vyber .vyber-skupiny-text { display: inline; }
  /* the same principle for the work-record row (`WorkRecordRow`): description across the full width, date · amount · time · actions below it */
  .vykaz-radek { flex-wrap: wrap; row-gap: .3rem; align-items: center; }
  .vykaz-radek > .vykaz-telo { order: -1; flex: 1 1 100%; }
}
@media (min-width: 561px) {
  /* on a wide display the panel closes by a click outside and Esc — the buttons at the bottom are only for the bottom sheet */
  .lista-zavrit { display: none; }
}

/* ---------- Import wizard (KOMPONENTY §58, spec `import-csv-json-v1.md`) ---------- */
/* Colours only from tokens — none hard-coded. */

/* Step trail: `.tabs` with an ordinal number; future steps are muted and not clickable. */
.imp-krok-cislo { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: .3rem; border-radius: 50%; background: var(--chip-bg); color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700; }
.tab.active .imp-krok-cislo { background: var(--accent-soft); color: var(--accent); }
/* a future step: the same grey text as the other steps (readable), not clickable, its number only outlined */
.tab.imp-krok-pristi { cursor: default; }
.tab.imp-krok-pristi .imp-krok-cislo { background: none; box-shadow: inset 0 0 0 1px var(--line); }

/* File upload area (app.js handles drag & drop through [data-drop]). */
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.6rem var(--space-4); border: 2px dashed var(--line); border-radius: var(--radius-12); background: var(--surface-2); text-align: center; cursor: pointer; }
.imp-drop:hover, .imp-drop:focus-within { border-color: var(--accent); }
.imp-drop.je-nad { border-color: var(--accent); background: var(--accent-soft); }
.imp-drop-hlavni { font-weight: 600; }
.imp-drop-nebo, .imp-drop-mez { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.imp-drop-input { margin-top: .3rem; max-width: 100%; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.imp-drop-input:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.imp-text { margin: .8rem 0; }
/* The built-in `<input type="file">` button inside the upload area — so that there is only ONE
   "Vybrat soubor" on the screen and it looks like the other buttons (catalogue §1). */
.imp-drop-input::file-selector-button { margin-right: var(--space-2); padding: .35rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--card); color: var(--ink); font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); cursor: pointer; }
.imp-drop-input::file-selector-button:hover { background: var(--hover); }

.imp-text > summary { cursor: pointer; color: var(--accent); font-size: var(--text-sm); line-height: var(--leading-sm); }

/* The sentence "Soubor čteme jako…" and the yellow bar of unused columns — nothing is dropped without a word. */
.imp-info { margin: .6rem 0; padding: .45rem .7rem; border-radius: var(--radius-8); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--text-sm); line-height: var(--leading-sm); }
.imp-varovani { margin: .6rem 0; padding: .45rem .7rem; border-radius: var(--radius-8); background: var(--chip-orange-bg); color: var(--chip-orange-ink); font-size: var(--text-sm); line-height: var(--leading-sm); }
.imp-nastaveni { min-width: 240px; padding: .2rem; }
.imp-nastaveni .field { margin-bottom: var(--space-2); }

/* Column mapping: one card = one file column (name · field choice · sample values).
   Cards instead of a wide table because a table with seven `<select>`s does not fit on a phone and
   horizontal scrolling would hide exactly the columns the person has to map. */
.imp-sloupce { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; margin-top: .6rem; }
.imp-sloupec { display: flex; flex-direction: column; gap: .3rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-10); background: var(--card); }
.imp-sloupec.je-naparovano { border-color: var(--teal); }
.imp-sloupec-nazev { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.imp-fajfka { color: var(--teal-ink); font-weight: 700; } /* a text glyph ✓ — the text shade of teal */
.imp-sloupec-ukazka { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); overflow-wrap: anywhere; }

/* Expandable listings on the "Co se stane" screen. */
.imp-vypis { margin: var(--space-2) 0; }
.imp-vypis > summary { cursor: pointer; color: var(--accent); font-size: var(--text-sm); line-height: var(--leading-sm); }
.imp-vypis ul { margin: .4rem 0 .2rem; padding-left: 1.1rem; font-size: var(--text-sm); line-height: var(--leading-sm); max-height: 16rem; overflow-y: auto; }
.imp-vypis li { margin-bottom: .15rem; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .imp-sloupce { grid-template-columns: 1fr; }
  .imp-drop { padding: 1.1rem .7rem; }
}

/* ============================================================
   WORK TIMER in the top bar (catalogue §60, spec `casovac-v1.md` §2) — three states that can be told apart
   at first glance: OFF (outline, ▶ Časovač) · RUNNING (solid pill, a dot pulsing every second, time, ■)
   · STOPPED, NOT WRITTEN UP (dashed outline, a ring, "Dopsat"). They differ in shape, colour and motion.
   It sits in `.top-right` left of the bell (the sticky row of the bar). The bar holds ONLY the icon and the time.
   ============================================================ */
.cas { flex: none; }
.cas-zona { display: inline-flex; }

.cas-start {
  display: inline-flex; align-items: center; gap: .4rem; height: var(--control-md); padding: 0 .8rem 0 .65rem;
  font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: var(--radius-full); cursor: pointer; white-space: nowrap;
}
.cas-start:hover { color: var(--ink); background: var(--hover); border-color: var(--accent); }
.cas-start:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.cas-start svg { color: var(--accent); }

.cas-bezi {
  position: relative; display: inline-flex; align-items: center; gap: .1rem; height: var(--control-md);
  background: var(--teal-soft); border: 1px solid var(--teal); border-radius: var(--radius-full); padding: 0 .2rem 0 .1rem;
}
.cas-bezi.je-dlouhy { background: var(--chip-orange-bg); border-color: var(--orange); }
.cas-bezi.je-ceka { background: var(--chip-bg); border-color: var(--line); border-style: dashed; }

.cas-bezi .cas-telo {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0;
  font: inherit; background: none; border: 0; padding: 0 .55rem 0 .7rem; height: var(--control-sm); cursor: pointer; color: var(--teal-ink);
}
.cas-bezi.je-dlouhy .cas-telo { color: var(--chip-orange-ink); }
.cas-bezi.je-ceka .cas-telo { color: var(--muted); cursor: default; }
.cas-bezi .cas-telo:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-full); }

/* "recording" — the dot pulses every second (the same rhythm in which the seconds tick) */
.cas-tecka { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.je-dlouhy .cas-tecka { background: var(--orange); }
/* stopped = a ring, not a dot: "it is not lit" even for someone who cannot tell colours apart */
.je-ceka .cas-tecka { background: none; border: 2px solid var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .cas-bezi:not(.je-ceka) .cas-tecka { animation: cas-tep 1s ease-in-out infinite; }
}
/* without animations: the dot shines steadily with a ring (the "recording" signal); the changing time also says it runs */
@media (prefers-reduced-motion: reduce) {
  .cas-bezi:not(.je-ceka) .cas-tecka { box-shadow: 0 0 0 3px var(--teal-soft), 0 0 0 4px var(--teal); }
  .cas-bezi.je-dlouhy .cas-tecka { box-shadow: 0 0 0 3px var(--chip-orange-bg), 0 0 0 4px var(--orange); }
}
@keyframes cas-tep { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }

.cas-cas { font-family: var(--font-mono); font-size: var(--text-md); line-height: var(--leading-md); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cas-stop {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--teal-solid); color: var(--on-solid); /* white on a solid colour like .btn-primary */ border: 0; cursor: pointer;
}
.cas-bezi.je-dlouhy .cas-stop { background: var(--orange-solid); }
.cas-stop:hover { filter: brightness(1.08); }
.cas-stop:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.cas-dopsat { flex: none; height: 26px; padding: 0 .6rem; margin-right: .15rem; font-size: var(--text-xs); line-height: var(--leading-xs); }

/* ---- the panel below the timer (click on the time) — .menu-list.panel from catalogue §19 ---- */
.menu-list.panel.cas-panel { width: 24.5rem; max-width: calc(100vw - 24px); padding: .85rem .9rem var(--space-3); }
/* a phone: the panel spans the window under the timer (like the notifications) — aligned to the timer's right edge it
   started 93 px off the left edge on 390 px, the time and „Zastavit a dopsat“ out of sight (ROADMAP, 10 Oct 2026) */
@media (max-width: 560px) {
  .cas.open > .menu-list.panel.cas-panel {
    position: fixed; left: 12px; right: 12px; top: 48px; width: auto; max-width: none;
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
}
.cas-panel .cas-velky { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1; }
.cas-panel .cas-od { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); margin: .1rem 0 var(--space-3); }
.cas-panel .cas-popis { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--ink); margin: 0 0 .1rem; }
.cas-panel .cas-popis-prazdny { font-weight: 500; color: var(--muted); }
.cas-panel .cas-tuzka { width: 22px; height: 22px; vertical-align: -2px; }
.cas-panel .cas-chyba { margin: 0 0 .6rem; padding: .45rem .6rem; border-radius: var(--radius-8); background: var(--red-soft); color: var(--red); font-size: var(--text-sm); line-height: var(--leading-sm); }
.cas-uprava { display: grid; grid-template-columns: 1fr auto; gap: .4rem var(--space-2); align-items: end; margin: var(--space-2) 0 .2rem; }
.cas-uprava.hidden { display: none; }
.cas-pole { display: flex; flex-direction: column; gap: .2rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); min-width: 0; }
.cas-pole:first-child { grid-column: 1 / -1; }
.menu-list.panel .cas-uprava .input { margin-bottom: 0; }
.cas-pole--cas .input { width: 7.5rem; }
.cas-cara { border: 0; border-top: 1px solid var(--line); margin: .7rem 0; }

/* assigned links = chips with ✕ (what the timer already knows) */
.cas-vazby { display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 0; }
.cas-vazba { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-xs); line-height: var(--leading-xs); background: var(--chip-bg); color: var(--ink);
  border-radius: var(--radius-full); padding: .15rem var(--space-1) .15rem .55rem; }
.cas-vazba .cas-vazba-typ { color: var(--muted); }
.cas-vazba button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border: 0; background: none; color: var(--muted); border-radius: 50%; cursor: pointer; padding: 0; }
.cas-vazba button:hover { background: var(--red-soft); color: var(--red); }
.cas-vazba button:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }

/* the "z této stránky" offer = plain links, the record name is the link (Petr, 29 Sep 2026) */
.cas-nabidka { margin: .55rem 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.cas-nabidka-hlava { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--space-1); }
.cas-nabidka ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.cas-nabidka #casVyber { margin-top: .4rem; }
.cas-prirad { display: inline; font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.cas-prirad b { color: var(--accent); font-weight: 600; }
.cas-prirad:hover b { text-decoration: underline; }
.cas-prirad:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-4); }
.cas-jinde { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }

.cas-panel .cas-akce { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .7rem; margin-top: var(--space-3); }
.cas-panel .cas-akce .btn { flex: none; }
.cas-panel .cas-zahodit { margin-left: auto; font: inherit; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); background: none; border: 0; cursor: pointer; padding: .2rem; }
.cas-panel .cas-zahodit:hover { color: var(--red); text-decoration: underline; }

/* ---- the "timer running long" banner — a quiet banner above the page content (like the period banner, §55) ---- */
.cas-pruh {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--chip-orange-bg); color: var(--chip-orange-ink); border: 1px solid var(--orange);
  border-radius: var(--radius-10); padding: .6rem .8rem; margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: var(--leading-sm);
}
.cas-pruh .cas-pruh-txt { flex: 1 1 18rem; min-width: 0; }
.cas-pruh .btn { flex: none; }

/* ---- modal after stopping: the work duration at the top = the biggest number in the modal (stat tile, catalogue §7) ---- */
.cas-delka {
  display: flex; align-items: baseline; gap: .3rem var(--space-4); flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-10);
  padding: .6rem .85rem; margin: 0 0 .9rem;
}
.cas-delka-cislo { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.05; }
.cas-delka-pod { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
.cas-delka-varovani { flex-basis: 100%; }
.cas-delka.je-varovani { background: var(--chip-orange-bg); border-color: var(--orange); }
.cas-delka.je-varovani .cas-delka-cislo, .cas-delka.je-varovani .cas-delka-pod { color: var(--chip-orange-ink); }

/* the "what to do with this time" choice (Vykázat práci · Jen zahodit) */
.co-volby { display: grid; gap: .45rem; }
/* … on top of the window after a stop, right under the duration (spec ucetovani-vykazu-podle-sluzby-v1 §4.6 point 2) */
.co-volby.co-volby-nahore { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.co-hlava { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0; margin: 0 0 .4rem; }
.co-volba { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-10);
  padding: .55rem .7rem; cursor: pointer; background: var(--card); }
.co-volba:hover { border-color: var(--accent); }
.co-volba input { margin-top: .2rem; } /* the drawing of §16c / §81 */
.co-volba:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.co-volba:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.co-telo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.co-nazev { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--ink); }
.co-popis { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
.co-doporuceno { margin-left: auto; align-self: center; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-full); padding: .12rem var(--space-2); white-space: nowrap; }

/* PHONE (≤ 720 px): the running state = ONE pulsing badge with the time, and all of it is STOP (Petr, 29 Sep 2026).
   The DOM is not duplicated — the ■ button invisibly stretches over the whole pill (the `icon-btn--tap` pattern, §20);
   the tap area exceeds 44 px. The panel is unavailable on a phone (everything is filled in the modal after stopping). */
@media (max-width: 720px) {
  .cas-start-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cas-start { min-width: 44px; justify-content: center; padding: 0 var(--space-3); }
  .cas-bezi { height: 32px; padding: 0; }
  .cas-bezi .cas-telo { pointer-events: none; padding: 0 var(--space-3); height: 30px; }
  .cas-bezi .cas-stop, .cas-bezi.je-dlouhy .cas-stop, .cas-bezi .cas-dopsat {
    position: absolute; inset: -6px 0; width: 100%; height: auto; margin: 0;
    border-radius: var(--radius-full); background: none; color: transparent; padding: 0; border: 0;
  }
  .cas-bezi .cas-stop svg { display: none; }
  .cas-bezi .cas-stop:focus-visible, .cas-bezi .cas-dopsat:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 0; }
}

/* ===== Hromadné / Opakované karty (karta s receptem), galerie receptů, okno Recept, chip ✨ — katalog §66,
   spec šablon v2 §6, §6.11; mockup sablony-a-recepty.html S5–S13. Barvy výhradně tokeny. ===== */
.kcard.kcard-smart { border: 1.5px dashed var(--accent); background: var(--accent-soft); display: flex; flex-direction: column; gap: .3rem; }
.kcard.kcard-smart:not([draggable="true"]), .kcard.smart-lista:not([draggable="true"]) { cursor: default; }
.smart-hlava { display: flex; align-items: center; gap: .4rem; }
.smart-hlava .row-actions { margin-left: auto; }
.chip-smart { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }
.chip-smart svg { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 3; flex: none; }
.smart-nazev { font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.smart-popis { margin: 0; font-size: var(--text-xs); color: var(--muted); line-height: var(--leading-xs); }
.smart-pocty { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
.smart-pocty b { color: var(--accent); }
/* a warning said ahead (§6.5) — on its own orange ground, so the text keeps AA contrast on any card */
.smart-upoz { margin: 0; padding: .2rem .45rem; border-radius: var(--radius-6); font-size: var(--text-xs); line-height: var(--leading-xs);
  background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.smart-sablona { margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); font-style: italic; }
.kcard-smart .btn { align-self: flex-start; }
.kcard.smart-lista { padding: .3rem .45rem .35rem; border: 1.5px dashed var(--accent); background: var(--accent-soft);
  font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink); box-shadow: none; }
.smart-lista .r1, .smart-lista .r2 { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.smart-lista .r2 { padding-left: .15rem; margin-top: .1rem; flex-wrap: wrap; }
.smart-lista .r1 .row-actions { margin-left: auto; }
.smart-lista .nm { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-lista .sub { color: var(--muted); }
.smart-lista .btn-sm { padding: .15rem .55rem; font-size: var(--text-xs); line-height: var(--leading-xs); }
.kcard.smart-lista.je-doplnit { border-style: solid; box-shadow: 0 0 0 3px var(--accent-soft); }
.kcard.je-zvyraznena { outline: 2px solid var(--accent); outline-offset: 2px; }
.smart-pruh { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 .8rem; padding: .45rem .7rem;
  border-radius: var(--radius-8); border: 1.5px dashed var(--accent); background: var(--accent-soft); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
.chip-smart-origin { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); flex: none; font-size: var(--text-xs); line-height: 1;
  vertical-align: -3px; margin-right: .3rem; }
.chip-smart-origin svg { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 3; }
/* the warning frame (orange line): the sentence of a recipe's preview nobody can take the cards over in, the prompt of a
   task waiting to be handed over (catalogue §66, §67) */
.ramecek-upoz { border-left: 3px solid var(--orange); }
/* THE PROMPT OF A TASK WAITING TO BE HANDED OVER (catalogue §67 „Výzva k předání“, spec `role-jako-filtr-resitele-v1.md`
   §6): `.ramecek-info.ramecek-upoz` under the line „Zadal(a) …“ of the task window, the sentence and under it the small
   button „Nechat si úkol“ / „Ponechat řešitele“ */
.ramecek-predat { margin: var(--space-3) 0 0; }
.ramecek-predat > p { margin: 0; }
.ramecek-predat > .btn { margin-top: var(--space-2); }
.chipy-vyber { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; }
.chipy-vyber:empty { display: none; }
.chipy-vyber .chip { display: inline-flex; align-items: center; gap: .3rem; }
.chipy-vyber .chip button { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0;
  padding: .1rem; margin: 0 -.25rem 0 0; color: inherit; cursor: pointer; border-radius: var(--radius-full); }
.chipy-vyber .chip button:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }
.chipy-vyber .chip svg { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 3; }
.role-pick-list { min-width: 14rem; max-height: 16rem; overflow-y: auto; }
.role-pick-list .opt[hidden] { display: none; }
.role-pick-list .role-pick-prazdne { display: none; margin: 0; padding: .45rem .6rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); cursor: default; }
.role-pick-list:not(:has([data-chip-pick-add]:not([hidden]))) .role-pick-prazdne { display: block; }
.tym-role { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: .2rem; }
.tym-role .chip { height: var(--chip-sm); font-size: var(--text-xs); line-height: var(--leading-xs); padding: 0 .45rem; }
/* galerie receptů (S10) */
.galerie-hlava { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: 0 0 .7rem; }
.galerie-hlava .sub { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.galerie-hlava .sub b { color: var(--ink); }
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: .2rem 0 .4rem; }
.dlazdice { display: flex; flex-direction: column; gap: .4rem; border: 1px solid var(--line); border-radius: var(--radius-12);
  padding: var(--space-3) .85rem; background: var(--card); min-width: 0; }
.dlazdice:hover { border-color: var(--accent); }
.dlazdice-hlava { display: flex; align-items: center; gap: .4rem; }
.dlazdice-hlava .menu { margin-left: auto; }
.dlazdice-nazev { font-weight: 650; font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); overflow-wrap: anywhere; }
.dlazdice-veta { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-sm); }
.dlazdice-chipy { display: flex; flex-wrap: wrap; gap: .3rem; }
.dlazdice-chipy .chip { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--chip-sm); font-size: var(--text-xs); line-height: var(--leading-xs); padding: 0 var(--space-2); }
.dlazdice-chipy .chip svg { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 3; flex: none; }
.dlazdice .btn { align-self: flex-start; margin-top: .15rem; }
.dlazdice.je-mimo { background: var(--surface-2); }
.dlazdice.je-mimo .dlazdice-nazev, .dlazdice.je-mimo .dlazdice-veta { color: var(--muted); }
.dlazdice-duvod { margin: 0; padding: .2rem .45rem; border-radius: var(--radius-6); font-size: var(--text-xs); line-height: var(--leading-xs); background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.chip-typ { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
/* okno receptu na seznamu (S11) a okno Recept (S5 A) */
.modal-card:has(.galerie), .modal-card:has(.recept-form), .modal-card:has(.rovnou) { max-width: 680px; }
.pole-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
.pick-pod { margin-top: .4rem; }
.label-like { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }
.pole-zarovnane { margin-top: 1.55rem; }
.vzor-pole { font-family: var(--font-mono, ui-monospace, monospace); }
.promenne { display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0 0; }
.promenna { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: var(--text-xs); line-height: var(--leading-xs); cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px dashed var(--line); border-radius: var(--radius-full); padding: .12rem .6rem; }
.promenna:hover { border-color: var(--accent); }
.promenna:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.promenna code { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--accent); }
.ukazka-hlava { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: var(--text-sm); line-height: var(--leading-sm); margin: .2rem 0 0; }
.ukazka-hlava .sub { color: var(--muted); }
.ukazka-hlava b.pocet-nahledu { color: var(--accent); }
.nahled-karet { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0; padding: .6rem; border-radius: var(--radius-10); background: var(--surface-2); }
.nahled-karet .kcard { flex: 1 1 13rem; max-width: 17rem; cursor: default; }
.recept-nahled { margin: .2rem 0 .6rem; }
.pouziti { margin: .2rem 0 .6rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.pouziti b { color: var(--ink); font-weight: 600; }
.rovnou { display: flex; align-items: flex-start; gap: .55rem; margin: .4rem 0 .2rem; padding: .6rem .7rem;
  border: 1px solid var(--accent); border-radius: var(--radius-10); background: var(--accent-soft); cursor: pointer; }
.rovnou input { accent-color: var(--accent); width: 16px; height: 16px; margin: .15rem 0 0; flex: none; }
.rovnou .sub { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
@media (max-width: 560px) {
  .galerie, .pole-2 { grid-template-columns: 1fr; }
  .pole-zarovnane { margin-top: 0; }
  .kcard-smart .btn { align-self: stretch; }
}

/* ===== Karta úkolu v2 — popis a podúkoly (spec karta-ukolu-v2 §4, §6, §7; KOMPONENTY §24, §69, §11b; krok E1) ===== */
/* the description in the card window: the note editor (§24) a little taller; read only = the text collapsed after 12
   lines with a fade to the card's colour and „Zobrazit celý popis“ (`app.js` shows the button only for a longer text) */
.popis-karty .note-area { min-height: 5.5rem; }
.popis-cteni { position: relative; }
.popis-cteni.je-sbaleny .note-content { max-height: calc(12 * var(--leading-sm)); overflow: hidden; } /* 12 lines */
.popis-cteni.je-sbaleny:has(.popis-rozbalit:not(.hidden))::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2rem; height: 2.4rem;
  background: linear-gradient(to bottom, transparent, var(--card)); pointer-events: none; }
.popis-rozbalit { margin-top: .2rem; }
.popis-rozbalit .lbl-less { display: none; }
.popis-cteni.je-rozbaleny .popis-rozbalit .lbl-more { display: none; }
.popis-cteni.je-rozbaleny .popis-rozbalit .lbl-less { display: inline; }
/* a section of the card window below the form (Podúkoly; later Přílohy) — air above it, no line (22 Oct 2026) */
.karta-oddil { margin: var(--space-8) 0 0; }
.oddil-hlava { display: flex; align-items: center; gap: .6rem; margin: 0 0 .35rem; flex-wrap: wrap; }
.oddil-hlava h4 { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; }
.oddil-hlava .pocet { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); font-weight: 600; }
.oddil-hlava .progress { flex: 1 1 6rem; max-width: 12rem; }
.oddil-hlava .vpravo { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
/* a subtask: tick · text · ⋯ (§69); done ones stay in place, muted (colour, not opacity — WCAG AA) and struck through */
.pod-radek { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px; align-items: center; gap: .1rem .55rem;
  padding: .28rem var(--space-1); border-radius: var(--radius-8); }
.pod-radek:hover { background: var(--hover); }
.pod-radek input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); margin: 0; }
.pod-text { font-size: var(--text-sm); line-height: var(--leading-sm); min-width: 0; overflow-wrap: anywhere; }
.pod-radek[draggable="true"] .pod-text { cursor: grab; }
.pod-radek.hotovy .pod-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); }
.pod-radek .icon-btn { width: var(--control-icon); height: var(--control-icon); }
.pod-radek.dragging { background: var(--accent-soft); }
.pod-radek.uprava { grid-template-columns: 22px minmax(0, 1fr); }
.pod-radek.uprava .input { height: var(--control-sm); }
.pod-radek.cte .pod-text { cursor: default; }
.pod-pridat { display: flex; gap: var(--space-2); align-items: center; margin: .35rem 0 0; }
.pod-pridat .input { flex: 1; min-width: 0; }
.pod-menu .menu-list { min-width: 13rem; }
.pod-skryte { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); padding: .3rem var(--space-1) 0; margin: 0; }
/* the card's content on its front (§7, §11b): a description icon, „☑ 3/5“ (all done = teal) — before the due date */
.kcard-ikony { display: inline-flex; align-items: center; gap: .35rem; }
.ikona-popis { display: inline-flex; color: var(--muted); }
.ikona-popis svg, .chip-pod svg, .chip-priloha svg { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; }
/* the paperclip with the number of attachments (spec prilohy-v2 §4, karta úkolu v2 §7): in the List the same plain icon + number as
   the description icon; in the footer of a card the rule of the footer above makes it look like the other counts */
.chip-priloha { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.chip-pod { display: inline-flex; align-items: center; gap: .22rem; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 600; color: var(--muted);
  background: var(--chip-bg); border-radius: var(--radius-full); height: var(--chip-sm); padding: 0 .45rem; white-space: nowrap; }
.chip-pod.vse-hotove { background: var(--teal-soft); color: var(--teal-ink); }
.task-txt .when .kcard-ikony { vertical-align: middle; }
/* a done / dimmed card keeps its icons, muted like the rest of the card (the card's band, AA contrast) */
:is(.je-neaktivni, .kcard-hotova, .kcard-trace, .kcard-otisk, .kcard-snimek) .chip-pod { background: var(--card); color: var(--muted); }
:is(.je-neaktivni, .kcard-hotova, .kcard-trace, .kcard-otisk, .kcard-snimek) .chip-pod.vse-hotove { color: var(--teal-ink); }

/* ===== Souhrn výkazů 3.1 (KOMPONENTY §8e, §73, spec `vykazy-prace-v3.md` §12.6; built 17 Oct 2026 from the block
   NÁVRH 3.1 of `mockupy/navrh.css`). Tiles = the catalogue's `.stat` (§7) of one width (14 rem) from the left; every
   item of the first level is a card `.souhrn-karta-obal` whose table header carries its name (the toggle) and, above
   every column, a small label over the sum — the sums stay visible in a collapsed card. Every level on one axis, told
   apart by the font; the grey balancing row moves the overage between the columns. Only hours. Colours only tokens. ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* the strip of undecided overages of OTHER months above the cards (§4.7) */
.souhrn-minule { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) .6rem; margin: 0 0 .8rem; padding: var(--space-2) .8rem;
  border-radius: var(--radius-10); background: var(--surface-2); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
.souhrn-minule a { color: var(--accent); text-decoration: underline; text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); }
/* „Zobrazit: …“ — the segment §46/§56 made of LINKS (the choice is not remembered, only the address) */
.pohled-prepinac a { display: inline-flex; align-items: center; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500; color: var(--muted); padding: 0 .8rem; height: var(--control-sm); text-decoration: none; }
.pohled-prepinac a + a { border-left: 1px solid var(--line); }
.pohled-prepinac a:hover { color: var(--ink); background: var(--hover); }
.pohled-prepinac a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pohled-prepinac a:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: -2px; }
/* the grouping above the cards, the sentences of the month's state — one each */
.souhrn-ovladace { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.souhrn-vety { margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .2rem; }
.souhrn-stav { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.souhrn-stav svg { flex: none; }
.souhrn-stav a { color: var(--accent); text-decoration: underline; text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); }
.souhrn-stav.je-ukol { color: var(--chip-orange-ink); font-weight: 600; }
/* Moje výkazy: returned records of other months (spec vykazy-prace-v3 §12.1) — above the tiles */
.vraceno-jinde { margin: 0 0 var(--space-3); }
.souhrn-vety:empty { display: none; }
/* tiles (§7, §8e): the label, the big number, the muted line; only information — one width on every tab */
.souhrn-dlazdice { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-4); }
.souhrn-dlazdice .stat { flex: 0 0 14rem; min-width: 0; padding: var(--space-3) var(--space-4); }
.souhrn-dlazdice .stat > span:first-child { display: block; }
.souhrn-dlazdice .stat b { font-variant-numeric: tabular-nums; margin-top: .1rem; }
.souhrn-dlazdice .stat b.nula { color: var(--muted); }
.stat .stat-pod { display: block; margin-top: .2rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
.stat .stat-pod a { color: var(--accent); }
/* a tile with an action right at its number („Čeká na tvé schválení 6:30 h [Schválit vše]“) */
.stat .stat-akce { color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.souhrn-pozn { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); margin: .7rem 0; }
/* the cards of the first level, separated by the grey page (the pattern of the dashboard, §8c „výpis agendy“) */
.skupiny-stranky { display: flex; flex-direction: column; gap: var(--space-4); }
/* the table of a card: the same column widths in every card */
.tbl-souhrn th, .tbl-souhrn td { padding: .55rem .6rem; }
/* `position: relative`: a hidden text (`.sr-only`, absolute) stays in its cell — never widens the page */
.tbl-souhrn th { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; color: var(--muted); white-space: nowrap; text-align: left; position: relative; }
.tbl-souhrn th.cislo, .tbl-souhrn td.cislo { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-souhrn td { font-size: var(--text-sm); line-height: var(--leading-sm); vertical-align: top; }
.tbl-souhrn .nazev { display: inline-flex; align-items: center; gap: var(--space-1); }
.tbl-souhrn td.r-hlavni a { color: inherit; text-decoration: none; }
.tbl-souhrn td.r-hlavni a:hover { color: var(--accent); text-decoration: underline; }
.tbl-souhrn .rozbal { height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 0; background: none; color: var(--muted); border-radius: var(--radius-6); cursor: pointer; }
.rozbal svg { transition: transform .12s ease; }
/* the toggle: the arrow and the name are ONE control (Petr 9 Oct 2026) */
.tbl-souhrn .rozbal-radek { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; border-radius: var(--radius-6); }
.tbl-souhrn .rozbal-radek:hover { color: var(--accent); }
.tbl-souhrn .rozbal-radek:hover .rozbal { background: var(--surface-2); color: var(--ink); }
.rozbal-radek[aria-expanded="true"] .rozbal svg { transform: rotate(90deg); }
.rozbal-radek:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }
.tbl-souhrn .bez { color: var(--muted); font-style: italic; font-weight: 500; }
.tbl-souhrn .nula { color: var(--muted); }
.tbl-souhrn.souhrn-karta { table-layout: fixed; }
.tbl-souhrn.souhrn-karta col.sl-cislo { width: 7.5rem; }
/*    the money column „Fakturuje se“ (3.2, spec §12.11) as wide as the others; the last column --space-2 wider — it has
      the right padding --space-4 like the first one on the left */
.tbl-souhrn.souhrn-karta col.sl-penize { width: 7.5rem; }
.tbl-souhrn.souhrn-karta col:last-child { width: calc(7.5rem + var(--space-2)); }
.tbl-souhrn.souhrn-karta th.cislo, .tbl-souhrn.souhrn-karta td.cislo { padding-left: var(--space-2); padding-right: var(--space-2); }
.tbl-souhrn.souhrn-karta .skup-zacatek { border-left: 1px solid var(--line); }
/*    the row of the blocks (Rozpočet · Mimo rozpočet): the heading aligned right as the labels, a line over its columns */
.tbl-souhrn.souhrn-karta tr.souhrn-skupiny th, .tbl-souhrn.souhrn-karta tr.souhrn-skupiny td { padding-top: var(--space-3); padding-bottom: 0; border-bottom: 0;
  font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; color: var(--muted); text-align: right; background: var(--card); }
.tbl-souhrn.souhrn-karta tr.souhrn-skupiny th { padding-left: var(--space-2); padding-right: var(--space-2); }
.tbl-souhrn.souhrn-karta tr.souhrn-skupiny .ma-skupinu > span { display: block; padding-bottom: var(--space-1); border-bottom: 1px solid var(--line); }
/*    the row of the first level: the label (one line) · the sum · the muted line; the name on the line of the sums.
      3.2 (Petr 17 Oct 2026: „udělej to záhlaví pořádně, správné zarovnání, velikosti, odsazení“, spec §12.11): the label
      stands above the sum OUTSIDE the flow of its cell, so the first line of every cell is the name or the sum and the
      row aligns them on ONE baseline (`vertical-align: baseline`), whatever the font of the name; the label's right edge =
      the sum's right edge = the muted line's right edge in every column. */
.tbl-souhrn.souhrn-karta tr.souhrn-hlava th { vertical-align: baseline; padding-top: calc(var(--space-2) + var(--leading-xs)); padding-bottom: var(--space-3); background: var(--card); }
.tbl-souhrn.souhrn-karta tr.souhrn-hlava th.cislo .th-popisek { position: absolute; top: var(--space-2); left: var(--space-2); right: var(--space-2); }
.tbl-souhrn.souhrn-karta tr.souhrn-hlava th.cislo:last-child .th-popisek { right: var(--space-4); }
.tbl-souhrn.souhrn-karta th .th-popisek { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 500; color: var(--muted); white-space: nowrap; }
.tbl-souhrn.souhrn-karta th b { display: block; font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.tbl-souhrn.souhrn-karta th b.nula { color: var(--muted); font-weight: 400; }
.tbl-souhrn.souhrn-karta th .th-pod { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 400; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl-souhrn.souhrn-karta .souhrn-karta-nazev { color: var(--ink); margin: 0; font-size: var(--font-size-card-title); line-height: var(--leading-md); font-weight: 650; white-space: normal; }
.tbl-souhrn.souhrn-karta .souhrn-karta-nazev .rozbal-radek { font: inherit; color: var(--ink); }
/*    the baseline of the header row is the name's text, not the arrow (the arrow only centred) */
.tbl-souhrn.souhrn-karta .souhrn-karta-nazev .nazev { align-items: baseline; }
.tbl-souhrn.souhrn-karta .souhrn-karta-nazev :is(.rozbal, .rozbal-misto) { align-self: center; }
/*    the line „Aplikace Conviu …“ under the client's name (KOMPONENTY §73, spec conviu-predplatne-a-faktury-v1 §6):
      only information, outside the columns and outside Fakturuje se — on the axis of the name (after the arrow), muted,
      12 px, wrapping; „Aplikace Conviu:“ of a client is the link to its service */
.tbl-souhrn.souhrn-karta .souhrn-conviu { display: block; margin-top: var(--space-1); padding-left: var(--space-7); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 400; color: var(--muted); white-space: normal; }
.tbl-souhrn.souhrn-karta .souhrn-conviu a { color: var(--accent); font-weight: 600; }

/* ---------- A link to another application before a value (catalogue §80 `a.odkaz-fa`; spec conviu-predplatne-a-faktury-v2
   §7, Petr 21. 10. 2026: a circle with „FA“ and a triangle right next to it; before the number since 30. 10. 2026),
   only in the list of Conviu invoices. Our
   own mark, never Fakturoid's logo. The value and the mark are one unbreakable whole, on the centre of the row; the mark
   takes the colour of the row's text, „FA“ the colour of the card; on hover and focus the colour of a link. */
.cislo-s-odkazem { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.odkaz-fa { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; border-radius: var(--radius-full); }
.odkaz-fa:hover, .odkaz-fa:focus-visible { color: var(--accent); text-decoration: none; }
.odkaz-fa:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.je-neaktivni .odkaz-fa { color: var(--muted); }
.odkaz-fa-znak {
  display: inline-flex; align-items: center; justify-content: center; width: 1.75em; height: 1.75em; border-radius: var(--radius-full); letter-spacing: -.04em;
  background: var(--ink); color: var(--card); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 700;
}
.je-neaktivni .odkaz-fa-znak { background: var(--muted); }
.odkaz-fa:hover .odkaz-fa-znak, .odkaz-fa:focus-visible .odkaz-fa-znak { background: var(--accent); }
.odkaz-fa svg { width: .8em; height: .8em; flex: none; margin-left: var(--space-0-5); }
/* a cell with a short list on one line (the column „Položky“ of Conviu invoices, spec v2 §7.1): the whole list in `title` */
.tbl td.polozky { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* on a phone the bubble cannot be opened by touch: the whole list, wrapped (spec v2 §7.1) */
@media (max-width: 560px) {
  .tbl-radky td.polozky { max-width: 100%; white-space: normal; overflow: visible; }
}
.tbl-souhrn.souhrn-karta th.r-hlavni, .tbl-souhrn.souhrn-karta td.r-hlavni,
.tbl-souhrn.souhrn-karta tr.l2 td.r-hlavni, .tbl-souhrn.souhrn-karta tr.l3 td.r-hlavni { padding-left: var(--space-4); font-weight: 400; }
.tbl-souhrn.souhrn-karta th:last-child, .tbl-souhrn.souhrn-karta td:last-child { padding-right: var(--space-4); }
/*    the rows of the colleagues and the work records: the same vertical padding; the axis of a record is a block, not
      an inline element — otherwise a line of text is added under it */
.tbl-souhrn.souhrn-karta tr.l2 td, .tbl-souhrn.souhrn-karta tr.l3 td { padding-top: var(--space-1-5); padding-bottom: var(--space-1-5); }
.tbl-souhrn.souhrn-karta .l3-osa { display: flex; align-items: flex-start; }
.tbl-souhrn.souhrn-karta .l3-text { min-width: 0; white-space: normal; }
.tbl-souhrn.souhrn-karta tr.hover-row.l2 .rozbal-radek, .tbl-souhrn.souhrn-karta tr.hover-row.l2 td.r-hlavni > .nazev { font-weight: 600; }
.tbl-souhrn.souhrn-karta .l3-den { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-souhrn.souhrn-karta .l3-popis { color: var(--ink); font-weight: 400; text-decoration: none; }
.tbl-souhrn.souhrn-karta .l3-popis:hover { color: var(--accent); text-decoration: underline; }
.tbl-souhrn.souhrn-karta .l3-popis:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; border-radius: var(--radius-4); }
.tbl-souhrn.souhrn-karta .l3-meta { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); }
/*    the grey balancing row: the name and the signed numbers muted in their columns, the sentence under them across the card */
.tbl-souhrn.souhrn-karta tr.dorovnani td { color: var(--muted); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.tbl-souhrn.souhrn-karta tr.dorovnani:hover td { background: none; }
.tbl-souhrn.souhrn-karta tr.dorovnani-cisla td { border-bottom: 0; padding-bottom: 0; }
.tbl-souhrn.souhrn-karta tr.dorovnani-veta td { padding-top: 0; }
.tbl-souhrn.souhrn-karta .dorovnani-nazev { display: block; font-weight: 600; color: var(--muted); }
.tbl-souhrn.souhrn-karta .dorovnani-text { display: block; max-width: 80ch; }
.tbl-souhrn.souhrn-karta .dorovnani-text a { color: var(--accent); }
/*    the axis of the names: the arrow and its empty place are --space-6 wide with the gap --space-1 → every name
      --space-7 from the edge of its cell (header, colleague, record, grey row) */
.tbl-souhrn.souhrn-karta .nazev { gap: var(--space-1); }
.tbl-souhrn.souhrn-karta .rozbal, .tbl-souhrn.souhrn-karta .rozbal-misto { width: var(--space-6); flex: none; display: inline-flex; justify-content: center; }
.tbl-souhrn.souhrn-karta .th-skupina { display: none; }
/*    The folded card: the table needs 16 rem for the name + 7 × 7.5 rem + 8 px = 1 104 px and the page around it 50 px →
      it folds under 1160 px. Nothing scrolls; the row of the blocks hides and the block goes to the label. */
@media (max-width: 1159px) {
  .tbl-souhrn.souhrn-karta, .tbl-souhrn.souhrn-karta thead, .tbl-souhrn.souhrn-karta tbody { display: block; }
  .tbl-souhrn.souhrn-karta colgroup, .tbl-souhrn.souhrn-karta tr.souhrn-skupiny { display: none; }
  .tbl-souhrn.souhrn-karta tbody[hidden] { display: none; }
  .tbl-souhrn.souhrn-karta .th-skupina { display: inline; }
  .tbl-souhrn.souhrn-karta th .th-popisek, .tbl-souhrn.souhrn-karta tr.souhrn-hlava th.cislo .th-popisek { white-space: normal; position: static; }
  .tbl-souhrn.souhrn-karta tr { border-bottom: 1px solid var(--line); }
  .tbl-souhrn.souhrn-karta tr:last-child, .tbl-souhrn.souhrn-karta tr.dorovnani-cisla { border-bottom: 0; }
  .tbl-souhrn.souhrn-karta th, .tbl-souhrn.souhrn-karta td, .tbl-souhrn.souhrn-karta .skup-zacatek,
  .tbl-souhrn.souhrn-karta th.cislo, .tbl-souhrn.souhrn-karta td.cislo { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .tbl-souhrn.souhrn-karta th.r-hlavni, .tbl-souhrn.souhrn-karta td.r-hlavni, .tbl-souhrn.souhrn-karta th:last-child, .tbl-souhrn.souhrn-karta td:last-child,
  .tbl-souhrn.souhrn-karta tr.souhrn-hlava th, .tbl-souhrn.souhrn-karta tr.souhrn-hlava th.r-hlavni, .tbl-souhrn.souhrn-karta tr.l2 td, .tbl-souhrn.souhrn-karta tr.l3 td,
  .tbl-souhrn.souhrn-karta tr.dorovnani td, .tbl-souhrn.souhrn-karta tr.l2 td.r-hlavni, .tbl-souhrn.souhrn-karta tr.l3 td.r-hlavni { padding: 0; }
  .tbl-souhrn.souhrn-karta td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; font-size: var(--text-xs); line-height: var(--leading-xs); }
}
/*    561–1159 px: the numbers in a grid of equal columns under the name, on the axis of the name (--space-7); an empty
      cell keeps its place, so the numbers line up in the rows and across the cards. */
@media (min-width: 561px) and (max-width: 1159px) {
  .tbl-souhrn.souhrn-karta tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-1) var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + var(--space-7)); }
  .tbl-souhrn.souhrn-karta tr.dorovnani-cisla { padding-bottom: var(--space-1); }
  .tbl-souhrn.souhrn-karta tr.dorovnani-veta { padding-top: 0; }
  .tbl-souhrn.souhrn-karta th.r-hlavni, .tbl-souhrn.souhrn-karta td.r-hlavni { grid-column: 1 / -1; margin-left: calc(-1 * var(--space-7)); }
  .tbl-souhrn.souhrn-karta td.je-nula { visibility: hidden; }
  /* the label over the number and it may wrap; the number always at the bottom, so it lines up next to a two-line label */
  .tbl-souhrn.souhrn-karta td[data-label] { display: flex; flex-direction: column; justify-content: flex-end; }
  .tbl-souhrn.souhrn-karta td[data-label]::before { content: attr(data-label); white-space: normal; }
}
/*    3.2: a card with the money column „Fakturuje se“ has one column more — 16 rem + 8 × 7.5 rem + 8 px = 1 224 px and
      the page 50 px → it folds already under 1280 px: the rules above, only for `.s-penezi` between 1160 and 1279 px. */
@media (min-width: 1160px) and (max-width: 1279px) {
  .tbl-souhrn.souhrn-karta.s-penezi, .tbl-souhrn.souhrn-karta.s-penezi thead, .tbl-souhrn.souhrn-karta.s-penezi tbody { display: block; }
  .tbl-souhrn.souhrn-karta.s-penezi colgroup, .tbl-souhrn.souhrn-karta.s-penezi tr.souhrn-skupiny { display: none; }
  .tbl-souhrn.souhrn-karta.s-penezi tbody[hidden] { display: none; }
  .tbl-souhrn.souhrn-karta.s-penezi .th-skupina { display: inline; }
  .tbl-souhrn.souhrn-karta.s-penezi th .th-popisek, .tbl-souhrn.souhrn-karta.s-penezi tr.souhrn-hlava th.cislo .th-popisek { white-space: normal; position: static; }
  .tbl-souhrn.souhrn-karta.s-penezi tr { border-bottom: 1px solid var(--line); }
  .tbl-souhrn.souhrn-karta.s-penezi tr:last-child, .tbl-souhrn.souhrn-karta.s-penezi tr.dorovnani-cisla { border-bottom: 0; }
  .tbl-souhrn.souhrn-karta.s-penezi th, .tbl-souhrn.souhrn-karta.s-penezi td, .tbl-souhrn.souhrn-karta.s-penezi .skup-zacatek,
  .tbl-souhrn.souhrn-karta.s-penezi th.cislo, .tbl-souhrn.souhrn-karta.s-penezi td.cislo { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .tbl-souhrn.souhrn-karta.s-penezi th.r-hlavni, .tbl-souhrn.souhrn-karta.s-penezi td.r-hlavni, .tbl-souhrn.souhrn-karta.s-penezi th:last-child, .tbl-souhrn.souhrn-karta.s-penezi td:last-child,
  .tbl-souhrn.souhrn-karta.s-penezi tr.souhrn-hlava th, .tbl-souhrn.souhrn-karta.s-penezi tr.souhrn-hlava th.r-hlavni, .tbl-souhrn.souhrn-karta.s-penezi tr.l2 td, .tbl-souhrn.souhrn-karta.s-penezi tr.l3 td,
  .tbl-souhrn.souhrn-karta.s-penezi tr.dorovnani td, .tbl-souhrn.souhrn-karta.s-penezi tr.l2 td.r-hlavni, .tbl-souhrn.souhrn-karta.s-penezi tr.l3 td.r-hlavni { padding: 0; }
  .tbl-souhrn.souhrn-karta.s-penezi tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-1) var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + var(--space-7)); }
  .tbl-souhrn.souhrn-karta.s-penezi tr.dorovnani-cisla { padding-bottom: var(--space-1); }
  .tbl-souhrn.souhrn-karta.s-penezi tr.dorovnani-veta { padding-top: 0; }
  .tbl-souhrn.souhrn-karta.s-penezi th.r-hlavni, .tbl-souhrn.souhrn-karta.s-penezi td.r-hlavni { grid-column: 1 / -1; margin-left: calc(-1 * var(--space-7)); }
  .tbl-souhrn.souhrn-karta.s-penezi td.je-nula { visibility: hidden; }
  .tbl-souhrn.souhrn-karta.s-penezi td[data-label] { display: flex; flex-direction: column; justify-content: flex-end; }
  .tbl-souhrn.souhrn-karta.s-penezi td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 400; font-size: var(--text-xs); line-height: var(--leading-xs); white-space: normal; }
}
/*    a phone: the numbers one after another with their label, the empty ones not drawn */
@media (max-width: 560px) {
  .tbl-souhrn.souhrn-karta tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + var(--space-7)); }
  .tbl-souhrn.souhrn-karta tr.dorovnani-cisla { padding-bottom: var(--space-1); }
  .tbl-souhrn.souhrn-karta tr.dorovnani-veta { padding-top: 0; }
  .tbl-souhrn.souhrn-karta th.r-hlavni, .tbl-souhrn.souhrn-karta td.r-hlavni { flex: 1 1 100%; margin-left: calc(-1 * var(--space-7)); }
  .tbl-souhrn.souhrn-karta td.je-nula, .tbl-souhrn.souhrn-karta td:empty, .tbl-souhrn.souhrn-karta th.je-nula { display: none; }
  .souhrn-dlazdice { gap: var(--space-2); }
  .souhrn-dlazdice .stat { flex: 1 1 calc(50% - .25rem); padding: .6rem .7rem; }
  .souhrn-dlazdice .stat:only-child { flex-basis: 100%; }
}
/* the help ⓘ: a 16 px button, the bubble at once on hover and keyboard focus, a click / tap pins it, Esc closes (`app.js`) */
.info-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: .3rem; padding: 0; vertical-align: 1px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--muted); font: italic 700 .62rem/1 Georgia, serif; cursor: pointer; }
.info-tip:hover, .info-tip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.info-tip:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 1px; }
.info-pop { position: fixed; z-index: 300; width: 17rem; max-width: calc(100vw - 16px); padding: .6rem var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-10);
  background: var(--card); color: var(--ink); box-shadow: 0 8px 24px rgba(var(--shadow-color), .18); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-xs);
  text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; }
.info-pop[hidden] { display: none; }
.info-pop a { color: var(--accent); }
/* the grouping picker (§19): presets, three levels under each other (a GET form), row sorting */
.seskupeni-panel { min-width: 300px; }
.seskupeni-panel .jinak { display: grid; grid-template-columns: 1fr; gap: .45rem; padding: .3rem .4rem .2rem; }
.seskupeni-panel .jinak label { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); display: block; margin-bottom: .15rem; }
.seskupeni-panel .jinak .pick-one { width: 100%; }
.seskupeni-panel .jinak .btn { justify-self: end; }
/* the strip of a notification's context above the report (§67 `.ramecek-info`) */
.kontext-uzavreni { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.kontext-uzavreni a { color: var(--accent); }
/* the billing statement compact (the same component as the company card) */
.vyuctovani-kompaktni { font-size: var(--text-sm); line-height: var(--leading-sm); }
.vyuctovani-kompaktni .card-head { margin-bottom: .2rem; }
.vyuctovani-kompaktni .card-head h3 { font-size: var(--text-sm); line-height: var(--leading-sm); }
.vyuctovani-kompaktni .card-head h3 a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); }
.vyuctovani-kompaktni .prec-blok { margin: .3rem 0; padding: .45rem .6rem; }
/* the modal „Rozdělit…“: the sentence only the modal has */
.prec-cerpano { margin: 0 0 .6rem; font-size: var(--text-sm); line-height: var(--leading-sm); }
/* ===== §72 Retainer overage in the billing statement (`OverageBlock`, `OverageDecisionForm`) — spec precerpani-pausalu-v1,
   ADR 0050. Rows of the billing statement are inline styles in tab.tsx; these classes are the new parts. ===== */
/* the sentence under the retainer row: the overage state, or „Rozpočet snížen o …, čerpáno pro …“ */
.vy-navyseni { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); margin-top: .1rem; }
.vy-navyseni a, .prec-kdo a, .prec-vzkaz-zaznam a { color: var(--accent); text-decoration: underline; text-decoration-thickness: var(--underline-width); text-underline-offset: var(--underline-offset); }
.prec-blok { border-top: 1px solid var(--line); padding: .55rem 0 .65rem; }
.prec-blok.je-otevreny { background: var(--surface-2); border-radius: var(--radius-10); border-top: 0; padding: .7rem .8rem .8rem; margin: .35rem 0 .45rem; }
.prec-hlava { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .55rem; }
.prec-hlava .prec-nazev { font-weight: 600; }
.prec-hlava .vpravo { margin-left: auto; display: flex; align-items: center; gap: .2rem; white-space: nowrap; }
.prec-vysv { margin: .2rem 0 .35rem; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
/* the breakdown: name | hours | amount */
.prec-radky { margin: .2rem 0 0; }
.prec-radek { display: grid; grid-template-columns: minmax(0, 1fr) auto 6.5rem; gap: .1rem var(--space-4); align-items: baseline;
  padding: .2rem 0 .2rem 1.1rem; font-size: var(--text-sm); line-height: var(--leading-sm); }
.prec-radek > .h { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.prec-castka { white-space: nowrap; font-weight: 600; text-align: right; font-size: var(--text-sm); line-height: var(--leading-sm); }
.prec-castka.tlumena { font-weight: 400; color: var(--muted); }
.prec-pozn { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
.prec-radek.je-zdarma > span:first-child { font-weight: 600; }
.prec-nerozh { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); font-style: italic; font-weight: 400; }
.prec-kdo { margin: .35rem 0 0 1.1rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); overflow-wrap: anywhere; }
.prec-kdo q { color: var(--ink); }
/* „Změnilo se“: what no longer fits, with the way out */
.prec-zmena { margin: .4rem 0 0 1.1rem; padding: .45rem .6rem; border-radius: var(--radius-8); background: var(--chip-orange-bg); color: var(--chip-orange-ink); font-size: var(--text-sm); line-height: var(--leading-sm); }
.prec-zmena p { margin: 0 0 var(--space-1); }
.prec-zmena .btn { margin: .2rem 0 0; }
.prec-menu .menu-list { right: 0; left: auto; min-width: 14rem; }
.prec-dalsi { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); margin: .35rem 0 0 1.1rem; }
.prec-akce { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .55rem 0 0 1.1rem; }
.prec-akce form { margin: 0; }
/* colleagues' messages = comments on the month's retainer work records (§34) */
.prec-vzkazy { margin: .55rem 0 0 1.1rem; padding: .45rem .7rem .3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-10); }
.prec-vzkazy-nadpis { margin: 0 0 .1rem; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; color: var(--muted); }
.prec-vzkazy .comment { padding: .35rem 0; }
.prec-vzkaz-zaznam { font-size: var(--text-xs); line-height: var(--leading-xs); }
.prec-vzkazy-dalsi { margin: .1rem 0 .2rem; font-size: var(--text-xs); line-height: var(--leading-xs); }
/* the split form */
.prec-pole { margin: .55rem 0 .55rem; padding: var(--space-3) .85rem .35rem; border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 var(--radius-10) var(--radius-10) 0; }
.prec-pole-nadpis { margin: 0 0 .6rem; font-weight: 650; font-size: var(--text-md); line-height: var(--leading-md); }
.prec-cast { margin: 0 0 .8rem; padding: 0 0 .7rem; border-bottom: 1px solid var(--line); }
/* in a modal the parts of the split are parted by air only, no line (22 Oct 2026, catalogue §21c) */
.modal-card .prec-cast { margin-bottom: var(--space-6); padding-bottom: 0; border-bottom: 0; }
.prec-cast-nazev { margin: 0 0 .1rem; font-weight: 650; font-size: var(--text-sm); line-height: var(--leading-sm); }
.prec-cast-popis { margin: 0 0 .45rem; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); }
.prec-pole .field { margin-bottom: .55rem; }
.prec-pole .field > label, .prec-pole .field > .label { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; display: block; margin-bottom: .2rem; }
.prec-cas { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.prec-cas .input { width: 3.2rem; min-width: 0; flex: none; padding-left: .4rem; padding-right: .4rem; text-align: right; }
@media (min-width: 600px) { .prec-cas { flex-wrap: nowrap; } }
.prec-cas .sub { white-space: nowrap; }
.prec-cas .prec-z { margin-left: .4rem; white-space: normal; }
.prec-cena { border: 0; margin: 0; padding: 0; min-width: 0; }
.prec-cena legend { padding: 0; margin: 0 0 var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; }
.prec-cena-moznost { display: flex; align-items: flex-start; gap: var(--space-2); padding: .3rem 0; }
.prec-cena-moznost > input[type="radio"] { margin: .55rem 0 0; } /* the drawing of §16c / §81 */
.prec-cena-moznost > div { min-width: 0; flex: 1 1 auto; }
.prec-cena-moznost .prec-cena-nazev { display: block; font-size: var(--text-sm); line-height: var(--leading-sm); margin-bottom: .15rem; font-weight: 400; }
.prec-sazba { display: flex; align-items: center; gap: .35rem; }
.prec-sazba .input { width: 8rem; }
.prec-sazba .input:disabled { background: var(--surface-2); color: var(--muted); }
.prec-vypocet { margin: .1rem 0 0; padding: .4rem .6rem; border-radius: var(--radius-8); background: var(--surface-2); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); }
.prec-vypocet b { font-weight: 650; }
.prec-dopocet { display: flex; justify-content: space-between; gap: .3rem var(--space-4); flex-wrap: wrap; padding: .45rem .6rem; border-radius: var(--radius-8);
  background: var(--surface-2); color: var(--ink); font-size: var(--text-sm); line-height: var(--leading-sm); }
.prec-dopocet .sub { font-size: var(--text-xs); line-height: var(--leading-xs); }
.prec-souhrn { margin: .2rem 0 .6rem; font-size: var(--text-md); line-height: var(--leading-md); }
.prec-souhrn b { font-weight: 700; }
.prec-pole .form-actions { margin: 0 0 var(--space-2); }
/* a tile of the company dashboard: the undecided overage under „očekávaný měsíc“ (muted while the month runs) */
.stat .stat-upoz { display: block; margin-top: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--muted); font-weight: 600; }
.stat .stat-upoz.je-po-konci { color: var(--chip-orange-ink); }
@media (max-width: 560px) {
  .prec-blok.je-otevreny { padding: .6rem .55rem .7rem; }
  .prec-radek { grid-template-columns: minmax(0, 1fr) auto; padding-left: .4rem; }
  .prec-radek > .h { grid-column: 2; grid-row: 1; }
  .prec-radek > .prec-castka { grid-column: 2; grid-row: 2; }
  .prec-radek > .prec-castka.tlumena { display: none; }
  .prec-kdo, .prec-zmena, .prec-dalsi, .prec-akce, .prec-vzkazy { margin-left: .4rem; }
  .prec-pole { padding: .65rem .6rem .3rem; }
  .prec-akce .btn, .prec-akce form, .prec-pole .form-actions .btn { flex: 1 1 100%; justify-content: center; }
  .prec-pole .form-actions { flex-wrap: wrap; }
}

/* The billing closing (catalogue §75, ADR 0054, mockup `mockupy/billing-close.html`): the card's head with the chip and ⋯,
   the conditions with their buttons, the preview of what is stored, the revision line, a carry-over fixed by a closed
   next month, the split in the window of a change. Colours only as tokens. */
.uz-hlava { display: flex; align-items: center; justify-content: flex-start; gap: .4rem .6rem; flex-wrap: wrap; }
.uz-hlava h3 { margin: 0; }
.uz-hlava .vpravo { margin-left: auto; display: flex; align-items: center; gap: .3rem; }
.uz-podminky li .uz-vic { display: block; margin: .3rem 0 0; }
.uz-podminky li .uz-vic .btn { margin: 0 .4rem .3rem 0; }
.uz-podminky li > span:last-child { min-width: 0; flex: 1 1 auto; }
.uz-nahled { margin: .4rem 0 .9rem; padding: .6rem .8rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-10); background: var(--card); }
.uz-nahled-nadpis { margin: 0 0 .2rem; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 650; color: var(--muted); }
.uz-revize { margin: .45rem 0 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.uz-revize b { color: var(--ink); }
.uz-zamek { color: var(--muted); }
.uz-rozdeleni { margin: 0 0 .8rem; }
@media (max-width: 560px) {
  .uz-podminky li .uz-vic .btn { width: 100%; margin-right: 0; }
}

/* ===== Výkazy práce v3 — strukturovaný výpis výkazů (spec `docs/specs/vykazy-prace-v3.md` §2.4–§2.8, katalog §8d,
   mockup `mockupy/work-records-v3.html`; postaveno 16. 10. 2026 z bloku NÁVRH v `mockupy/navrh.css`, kolo 3.1 17. 10. 2026). Tabulka `.tbl.tbl-radky.tbl-vykazy` s pevnými sloupci: datum · popis + služba ·
   (kdo) · zákazník · projekt / úkol · účtování · stav · čas · ⋯. Účtování je text, stav jediná pilulka v barvě podle
   významu (katalog §2), čas vpravo, ⋯ v pevném sloupci. Záhlaví řadí (`.th-razeni`, šipka jen u
   aktivního sloupce); filtr jen panelem Filtry nad výpisem. Pod řádkem blok `.vykaz-duvod-blok`: výzva ke schválení (informační), vráceno (oranžová), zamítnuto (červená).
   Telefon: mřížka se stejnými pozicemi v každé kartě. ===== */
.tbl-vykazy { table-layout: fixed; }
.tbl-vykazy th, .tbl-vykazy td { padding: var(--space-3) var(--space-2-5); vertical-align: top; overflow-wrap: break-word; }
.tbl-vykazy th { position: relative; padding-top: var(--space-2); padding-bottom: var(--space-2); }   /* skrytý text „Akce“ zůstane v kartě */
.tbl-vykazy th:first-child, .tbl-vykazy td:first-child { padding-left: var(--space-4); }
.tbl-vykazy th:last-child, .tbl-vykazy td:last-child { padding-right: var(--space-3); }
.tbl-vykazy .k-datum { width: 5.5rem; }
.tbl-vykazy .k-kdo { width: 9.5rem; }
.tbl-vykazy .k-zakaznik { width: 11rem; }
.tbl-vykazy .k-projekt { width: 11rem; }
.tbl-vykazy .k-uctovani { width: 8.5rem; }
.tbl-vykazy .k-stav { width: 7rem; }
.tbl-vykazy .k-cas { width: 5rem; text-align: right; }
.tbl-vykazy .k-akce { width: 3rem; text-align: right; }
.tbl-vykazy td.k-datum { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-vykazy td.k-cas { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-vykazy td .sub { display: block; }
.tbl-vykazy .vykaz-popis { font-weight: 600; color: var(--ink); cursor: pointer; }
.tbl-vykazy .vykaz-popis:hover { color: var(--accent); }
.tbl-vykazy .vykaz-popis:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-4); }
.tbl-vykazy .comment-count { margin-left: var(--space-1-5); vertical-align: baseline; }
.tbl-vykazy .k-zakaznik a, .tbl-vykazy .k-projekt a { color: var(--ink); text-decoration: none; }
.tbl-vykazy .k-zakaznik a:hover, .tbl-vykazy .k-projekt a:hover { color: var(--accent); text-decoration: underline; }
.tbl-vykazy .ukol-odkaz { display: inline-flex; align-items: flex-start; gap: var(--space-1); color: var(--muted); }
.tbl-vykazy .ukol-odkaz svg { flex: none; margin-top: var(--space-0-5); }
.tbl-vykazy .k-projekt .sub a { color: var(--muted); }
.tbl-vykazy .kdo { display: flex; align-items: center; gap: var(--space-2); }
/* záhlaví: tlačítko řazení (aktivní sloupec ↑/↓ v barvě odkazu) */
.tbl-vykazy .th-obsah { display: inline-flex; align-items: center; gap: var(--space-0-5); max-width: 100%; }
.tbl-vykazy th.k-cas .th-obsah { justify-content: flex-end; width: 100%; }
.tbl-vykazy .th-razeni { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; padding: 0; border: 0; background: none;
  font: inherit; font-weight: inherit; color: inherit; cursor: pointer; text-align: left; }
/* šipka jen u sloupce, podle kterého se řadí; u ostatních se slabě ukáže až při najetí nebo fokusu (nápověda, že jde řadit) */
.tbl-vykazy .th-razeni svg { flex: none; color: var(--muted); opacity: 0; }
.tbl-vykazy .th-razeni:hover svg, .tbl-vykazy .th-razeni:focus-visible svg { opacity: .55; }
.tbl-vykazy .th-razeni.is-on svg { color: var(--accent); opacity: 1; }
.tbl-vykazy .th-razeni.is-on { color: var(--accent); }
.tbl-vykazy .th-razeni:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-4); }
/* blok pod řádkem patří k řádku: bez čáry mezi nimi */
.tbl-vykazy tr.ma-duvod td { border-bottom: 0; }
.tbl-vykazy tr.vykaz-duvod td { padding-top: 0; }
.vykaz-duvod-blok { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-8); color: var(--ink); }
.vykaz-duvod-blok > svg { flex: none; margin-top: var(--space-0-5); }
.vykaz-duvod-blok .duvod-obsah { flex: 1 1 18rem; min-width: 0; }
.vykaz-duvod-blok .duvod-hlava { display: block; }
.vykaz-duvod-blok .duvod-hlava b { font-weight: 650; }
.vykaz-duvod-blok .duvod-text { display: block; }
.vykaz-duvod-blok .duvod-akce { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
.vykaz-duvod-blok .vykaz-duvod-odkaz { color: var(--accent); }
/* the prompt to approve: its text vertically on the axis of the buttons' text (spec §12.4) */
.vykaz-duvod-blok.je-vyzva { align-items: center; }
.vykaz-duvod-blok.je-vyzva > svg { margin-top: 0; }
/* barva podle významu (katalog §2): výzva = informace (akce pro tebe), vráceno = pozor, zamítnuto = negativní */
.vykaz-duvod-blok.je-vyzva { background: var(--accent-soft); }
.vykaz-duvod-blok.je-vyzva > svg, .vykaz-duvod-blok.je-vyzva .duvod-hlava b { color: var(--accent); }
.vykaz-duvod-blok.je-vraceno { background: var(--chip-orange-bg); }
.vykaz-duvod-blok.je-vraceno > svg, .vykaz-duvod-blok.je-vraceno .duvod-hlava { color: var(--chip-orange-ink); }
.vykaz-duvod-blok.je-zamitnuto { background: var(--red-soft); }
.vykaz-duvod-blok.je-zamitnuto > svg, .vykaz-duvod-blok.je-zamitnuto .duvod-hlava { color: var(--red); }
.fronta-pozn { margin: var(--space-3) 0 0; }
/* záložky lišty na telefonu krátkým názvem (spec §2.8): Výkazy · Ke schválení · Souhrn */
.lista-tabs .tab-kratky { display: none; }
/* Střední šířka (561–1279 px, spec §2.4 „Užší okno“): plná tabulka by se nevešla — nikde se neposouvá, řádek se složí.
   Kdo, Zákazník a Projekt / úkol jdou pod popis, Účtování · Stav · Čas · ⋯ zůstávají sloupci vpravo se stejnou pravou
   hranou; v záhlaví zůstanou sloupce, které jsou pořád sloupci (řadit podle ostatních jde v panelu Zobrazení). */
@media (max-width: 1279px) {
  .tbl-vykazy.tbl-radky, .tbl-vykazy.tbl-radky thead, .tbl-vykazy.tbl-radky tbody { display: block; }
  .tbl-vykazy.tbl-radky tr { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem 7rem 5rem 3rem; align-items: start;
    grid-template-areas: "datum popis uct stav cas akce" ". kdo . . . ." ". zak . . . ." ". proj . . . ."; border-bottom: 1px solid var(--line); }
  .tbl-vykazy.tbl-radky.bez-data tr { grid-template-columns: minmax(0, 1fr) 8.5rem 7rem 5rem 3rem;
    grid-template-areas: "popis uct stav cas akce" "kdo . . . ." "zak . . . ." "proj . . . ."; }
  .tbl-vykazy.tbl-radky tr:last-child { border-bottom: 0; }
  .tbl-vykazy.tbl-radky th, .tbl-vykazy.tbl-radky td { width: auto; border-bottom: 0; padding-bottom: 0; }
  .tbl-vykazy.tbl-radky tbody tr { padding-bottom: var(--space-3); }
  .tbl-vykazy.tbl-radky thead tr { padding-bottom: var(--space-2); }
  .tbl-vykazy.tbl-radky th.k-kdo, .tbl-vykazy.tbl-radky th.k-zakaznik, .tbl-vykazy.tbl-radky th.k-projekt { display: none; }
  .tbl-vykazy.tbl-radky td:empty { display: none; }
  .tbl-vykazy .k-datum { grid-area: datum; }
  .tbl-vykazy .k-popis { grid-area: popis; }
  .tbl-vykazy .k-kdo { grid-area: kdo; }
  .tbl-vykazy .k-zakaznik { grid-area: zak; }
  .tbl-vykazy .k-projekt { grid-area: proj; }
  .tbl-vykazy .k-uctovani { grid-area: uct; }
  .tbl-vykazy .k-stav { grid-area: stav; }
  .tbl-vykazy .k-cas { grid-area: cas; }
  .tbl-vykazy .k-akce { grid-area: akce; }
  .tbl-vykazy.tbl-radky td.k-kdo, .tbl-vykazy.tbl-radky td.k-zakaznik, .tbl-vykazy.tbl-radky td.k-projekt { padding-top: var(--space-1); }
  .tbl-vykazy.tbl-radky tr.ma-duvod { border-bottom: 0; padding-bottom: var(--space-2); }
  .tbl-vykazy.tbl-radky tr.vykaz-duvod td[colspan] { grid-row: 1; grid-column: popis-start / -1; }
}
/* Karta (do 819 px, spec §2.4 a §2.8): složený řádek by od této šířky dolů nedal popisu aspoň 12 rem, proto každý
   výkaz jako karta se stejnými pozicemi — datum · stav · ⋯ nahoře, čas vpravo dole. */
@media (max-width: 819px) {
  .tbl-vykazy.tbl-radky tbody tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  .tbl-vykazy.tbl-radky tbody tr:last-child { border-bottom: 0; }
  .tbl-vykazy.tbl-radky thead { display: none; }
  .tbl-vykazy.tbl-radky tr, .tbl-vykazy.tbl-radky.bez-data tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--space-2); row-gap: 0;
    grid-template-areas: "datum stav akce" "popis popis popis" "kdo kdo kdo" "zak zak zak" "proj proj proj" "uct uct cas"; align-items: center; }
  .tbl-vykazy.tbl-radky td { width: auto; padding: var(--space-0-5) 0 0; font-size: var(--font-size-body); }
  .tbl-vykazy.tbl-radky td:empty { display: none; }
  .tbl-vykazy td.k-datum { grid-area: datum; }
  .tbl-vykazy td.k-popis { grid-area: popis; padding-top: var(--space-1); }
  .tbl-vykazy td.k-kdo { grid-area: kdo; }
  .tbl-vykazy td.k-zakaznik { grid-area: zak; }
  .tbl-vykazy td.k-projekt { grid-area: proj; }
  .tbl-vykazy td.k-projekt .sub { display: inline; }
  .tbl-vykazy td.k-projekt .sub::before { content: " › "; color: var(--muted); }
  .tbl-vykazy td.k-uctovani { grid-area: uct; padding-top: var(--space-1); }
  .tbl-vykazy td.k-uctovani .sub { display: inline; }
  .tbl-vykazy td.k-uctovani .sub::before { content: " · "; }
  .tbl-vykazy td.k-stav { grid-area: stav; justify-self: end; }
  .tbl-vykazy td.k-cas { grid-area: cas; justify-self: end; padding-top: var(--space-1); }
  .tbl-vykazy td.k-akce { grid-area: akce; }
  .tbl-vykazy .row-actions { opacity: 1; }
  .tbl-vykazy.tbl-radky tr.ma-duvod { border-bottom: 0; padding-bottom: var(--space-1); }
  .tbl-vykazy.tbl-radky tr.vykaz-duvod { display: block; padding-top: 0; }
  .tbl-vykazy.tbl-radky tr.vykaz-duvod td { display: block; padding: 0; }
  .tbl-vykazy.tbl-radky tr.vykaz-duvod td[colspan] { grid-row: auto; grid-column: auto; }
  .vykaz-duvod-blok .duvod-obsah { flex-basis: 0; }
  .vykaz-duvod-blok .duvod-akce { flex: 1 1 100%; margin-left: 0; }
}
@media (max-width: 560px) {
  .lista-tabs .tab-dlouhy { display: none; }
  .lista-tabs .tab-kratky { display: inline; }
}
/* nejužší telefony: menší mezera mezi záložkami, ať se tři krátké názvy vejdou i na 360 px */
@media (max-width: 400px) {
  .lista .lista-tabs.tabs { gap: var(--space-3); }
}

/* Výkazy práce v3 — doplňky stavby: sloupec Částka (karta zákazníka, §2.10), smazaný výkaz */
.tbl-vykazy .k-castka { width: 7rem; text-align: right; white-space: nowrap; }
.tbl-vykazy td.k-castka { font-variant-numeric: tabular-nums; }
/* the client is a mentioned record (preview on click) — in the column it reads like the other cells, not bold */
.tbl-vykazy .k-zakaznik .zmineny { font-weight: inherit; }
.tbl-vykazy .vykaz-popis--smazany { cursor: default; }
.tbl-vykazy .vykaz-popis--smazany:hover { color: var(--ink); }
/* the badge „Překročený rozpočet“ of a record over the budget of its service (spec rozpocet-sluzby-d §3.6) */
.tbl-vykazy .vykaz-nad-rozpoctem { margin-left: var(--space-2); vertical-align: baseline; }
/* the chip of the series of months drawing from the next month's budget under a customer's name in the Souhrn (§5.10) */
.tbl-souhrn .souhrn-serie { margin-top: var(--space-1); }
@media (max-width: 1279px) {
  .tbl-vykazy.tbl-radky.s-castkou tr { grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem 7rem 7rem 5rem 3rem;
    grid-template-areas: "datum popis uct stav castka cas akce" ". kdo . . . . ." ". zak . . . . ." ". proj . . . . ."; }
  .tbl-vykazy .k-castka { grid-area: castka; }
}
/* Výkazy práce v3 — výpis v užším místě (karta zákazníka, služba, projekt, Nástěnka): tam je i na širokém okně málo
   místa na plnou tabulku, proto vždy skládaný řádek (Kdo, Zákazník a Projekt / úkol pod popisem) — do 819 px karta
   jako všude. Stejná pravidla jako pásmo 820–1279 px výš, jen pro `.je-uzka` i nad 1280 px. */
@media (min-width: 1280px) {
  .tbl-vykazy.je-uzka.tbl-radky, .tbl-vykazy.je-uzka.tbl-radky thead, .tbl-vykazy.je-uzka.tbl-radky tbody { display: block; }
  .tbl-vykazy.je-uzka.tbl-radky tr { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem 7rem 5rem 3rem; align-items: start;
    grid-template-areas: "datum popis uct stav cas akce" ". kdo . . . ." ". zak . . . ." ". proj . . . ."; border-bottom: 1px solid var(--line); }
  .tbl-vykazy.je-uzka.tbl-radky.bez-data tr { grid-template-columns: minmax(0, 1fr) 8.5rem 7rem 5rem 3rem;
    grid-template-areas: "popis uct stav cas akce" "kdo . . . ." "zak . . . ." "proj . . . ."; }
  .tbl-vykazy.je-uzka.tbl-radky tr:last-child { border-bottom: 0; }
  .tbl-vykazy.je-uzka.tbl-radky th, .tbl-vykazy.je-uzka.tbl-radky td { width: auto; border-bottom: 0; padding-bottom: 0; }
  .tbl-vykazy.je-uzka.tbl-radky tbody tr { padding-bottom: var(--space-3); }
  .tbl-vykazy.je-uzka.tbl-radky thead tr { padding-bottom: var(--space-2); }
  .tbl-vykazy.je-uzka.tbl-radky th.k-kdo, .tbl-vykazy.je-uzka.tbl-radky th.k-zakaznik, .tbl-vykazy.je-uzka.tbl-radky th.k-projekt { display: none; }
  .tbl-vykazy.je-uzka.tbl-radky td:empty { display: none; }
  .tbl-vykazy.je-uzka .k-datum { grid-area: datum; }
  .tbl-vykazy.je-uzka .k-popis { grid-area: popis; }
  .tbl-vykazy.je-uzka .k-kdo { grid-area: kdo; }
  .tbl-vykazy.je-uzka .k-zakaznik { grid-area: zak; }
  .tbl-vykazy.je-uzka .k-projekt { grid-area: proj; }
  .tbl-vykazy.je-uzka .k-uctovani { grid-area: uct; }
  .tbl-vykazy.je-uzka .k-stav { grid-area: stav; }
  .tbl-vykazy.je-uzka .k-cas { grid-area: cas; }
  .tbl-vykazy.je-uzka .k-akce { grid-area: akce; }
  .tbl-vykazy.je-uzka.tbl-radky td.k-kdo, .tbl-vykazy.je-uzka.tbl-radky td.k-zakaznik, .tbl-vykazy.je-uzka.tbl-radky td.k-projekt { padding-top: var(--space-1); }
  .tbl-vykazy.je-uzka.tbl-radky tr.ma-duvod { border-bottom: 0; padding-bottom: var(--space-2); }
  .tbl-vykazy.je-uzka.tbl-radky tr.vykaz-duvod td[colspan] { grid-row: 1; grid-column: popis-start / -1; }
  .tbl-vykazy.je-uzka.tbl-radky.s-castkou tr { grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem 7rem 7rem 5rem 3rem;
    grid-template-areas: "datum popis uct stav castka cas akce" ". kdo . . . . ." ". zak . . . . ." ". proj . . . . ."; }
  .tbl-vykazy.je-uzka .k-castka { grid-area: castka; }
}
@media (max-width: 819px) {
  .tbl-vykazy.tbl-radky.s-castkou tr { grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "datum stav akce" "popis popis popis" "kdo kdo kdo" "zak zak zak" "proj proj proj" "uct castka cas"; }
  .tbl-vykazy td.k-castka { grid-area: castka; justify-self: end; padding-top: var(--space-1); }
}

/* Výkazy práce v3 — výpis v úzkém sloupci stránky (projekt, Nástěnka): ani skládaný řádek se tam nevejde, proto vždy
   karta se stejnými pozicemi (§8d bod 7) — pravidla pásem výš i pro `.je-karta` nad 820 px. */
@media (min-width: 1280px) {
  .tbl-vykazy.je-karta.tbl-radky, .tbl-vykazy.je-karta.tbl-radky thead, .tbl-vykazy.je-karta.tbl-radky tbody { display: block; }
  .tbl-vykazy.je-karta.tbl-radky tr { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem 7rem 5rem 3rem; align-items: start;
    grid-template-areas: "datum popis uct stav cas akce" ". kdo . . . ." ". zak . . . ." ". proj . . . ."; border-bottom: 1px solid var(--line); }
  .tbl-vykazy.je-karta.tbl-radky.bez-data tr { grid-template-columns: minmax(0, 1fr) 8.5rem 7rem 5rem 3rem;
    grid-template-areas: "popis uct stav cas akce" "kdo . . . ." "zak . . . ." "proj . . . ."; }
  .tbl-vykazy.je-karta.tbl-radky tr:last-child { border-bottom: 0; }
  .tbl-vykazy.je-karta.tbl-radky th, .tbl-vykazy.je-karta.tbl-radky td { width: auto; border-bottom: 0; padding-bottom: 0; }
  .tbl-vykazy.je-karta.tbl-radky tbody tr { padding-bottom: var(--space-3); }
  .tbl-vykazy.je-karta.tbl-radky thead tr { padding-bottom: var(--space-2); }
  .tbl-vykazy.je-karta.tbl-radky th.k-kdo, .tbl-vykazy.je-karta.tbl-radky th.k-zakaznik, .tbl-vykazy.je-karta.tbl-radky th.k-projekt { display: none; }
  .tbl-vykazy.je-karta.tbl-radky td:empty { display: none; }
  .tbl-vykazy.je-karta .k-datum { grid-area: datum; }
  .tbl-vykazy.je-karta .k-popis { grid-area: popis; }
  .tbl-vykazy.je-karta .k-kdo { grid-area: kdo; }
  .tbl-vykazy.je-karta .k-zakaznik { grid-area: zak; }
  .tbl-vykazy.je-karta .k-projekt { grid-area: proj; }
  .tbl-vykazy.je-karta .k-uctovani { grid-area: uct; }
  .tbl-vykazy.je-karta .k-stav { grid-area: stav; }
  .tbl-vykazy.je-karta .k-cas { grid-area: cas; }
  .tbl-vykazy.je-karta .k-akce { grid-area: akce; }
  .tbl-vykazy.je-karta.tbl-radky td.k-kdo, .tbl-vykazy.je-karta.tbl-radky td.k-zakaznik, .tbl-vykazy.je-karta.tbl-radky td.k-projekt { padding-top: var(--space-1); }
  .tbl-vykazy.je-karta.tbl-radky tr.ma-duvod { border-bottom: 0; padding-bottom: var(--space-2); }
  .tbl-vykazy.je-karta.tbl-radky tr.vykaz-duvod td[colspan] { grid-row: 1; grid-column: popis-start / -1; }
  .tbl-vykazy.je-karta.tbl-radky.s-castkou tr { grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem 7rem 7rem 5rem 3rem;
    grid-template-areas: "datum popis uct stav castka cas akce" ". kdo . . . . ." ". zak . . . . ." ". proj . . . . ."; }
  .tbl-vykazy.je-karta .k-castka { grid-area: castka; }
}
@media (min-width: 820px) {
  .tbl-vykazy.je-karta.tbl-radky tbody tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  .tbl-vykazy.je-karta.tbl-radky tbody tr:last-child { border-bottom: 0; }
  .tbl-vykazy.je-karta.tbl-radky thead { display: none; }
  .tbl-vykazy.je-karta.tbl-radky tr, .tbl-vykazy.je-karta.tbl-radky.bez-data tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--space-2); row-gap: 0;
    grid-template-areas: "datum stav akce" "popis popis popis" "kdo kdo kdo" "zak zak zak" "proj proj proj" "uct uct cas"; align-items: center; }
  .tbl-vykazy.je-karta.tbl-radky td { width: auto; padding: var(--space-0-5) 0 0; font-size: var(--font-size-body); }
  .tbl-vykazy.je-karta.tbl-radky td:empty { display: none; }
  .tbl-vykazy.je-karta td.k-datum { grid-area: datum; }
  .tbl-vykazy.je-karta td.k-popis { grid-area: popis; padding-top: var(--space-1); }
  .tbl-vykazy.je-karta td.k-kdo { grid-area: kdo; }
  .tbl-vykazy.je-karta td.k-zakaznik { grid-area: zak; }
  .tbl-vykazy.je-karta td.k-projekt { grid-area: proj; }
  .tbl-vykazy.je-karta td.k-projekt .sub { display: inline; }
  .tbl-vykazy.je-karta td.k-projekt .sub::before { content: " › "; color: var(--muted); }
  .tbl-vykazy.je-karta td.k-uctovani { grid-area: uct; padding-top: var(--space-1); }
  .tbl-vykazy.je-karta td.k-uctovani .sub { display: inline; }
  .tbl-vykazy.je-karta td.k-uctovani .sub::before { content: " · "; }
  .tbl-vykazy.je-karta td.k-stav { grid-area: stav; justify-self: end; }
  .tbl-vykazy.je-karta td.k-cas { grid-area: cas; justify-self: end; padding-top: var(--space-1); }
  .tbl-vykazy.je-karta td.k-akce { grid-area: akce; }
  .tbl-vykazy.je-karta .row-actions { opacity: 1; }
  .tbl-vykazy.je-karta.tbl-radky tr.ma-duvod { border-bottom: 0; padding-bottom: var(--space-1); }
  .tbl-vykazy.je-karta.tbl-radky tr.vykaz-duvod { display: block; padding-top: 0; }
  .tbl-vykazy.je-karta.tbl-radky tr.vykaz-duvod td { display: block; padding: 0; }
  .tbl-vykazy.je-karta.tbl-radky tr.vykaz-duvod td[colspan] { grid-row: auto; grid-column: auto; }
  .tbl-vykazy.je-karta .vykaz-duvod-blok .duvod-obsah { flex-basis: 0; }
  .tbl-vykazy.je-karta .vykaz-duvod-blok .duvod-akce { flex: 1 1 100%; margin-left: 0; }
  .tbl-vykazy.je-karta.tbl-radky.s-castkou tr { grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "datum stav akce" "popis popis popis" "kdo kdo kdo" "zak zak zak" "proj proj proj" "uct castka cas"; }
  .tbl-vykazy.je-karta td.k-castka { grid-area: castka; justify-self: end; padding-top: var(--space-1); }
}

/* Souhrn výkazů (spec vykazy-prace-v3 §2.7): skrytý text „Akce“ v záhlaví utíkal z posuvné tabulky a rozšiřoval stránku
   pod ~1100 px — obalem je záhlaví (stejně jako u .tbl-vykazy). */
.tbl-souhrn th { position: relative; }

/* Administrace → Vlastní pole (spec vlastni-pole-v1 §2 slides 01 and 02a, catalogue §79; stage E1b).
   The switch Zapnuto in a table row = `SwitchRow` (§16c) without a visible text (the name is in `.sr-only`) and without the
   padding of a form row. The switch and the ⋯ item „Vypnout / Zapnout“ are one control: on a phone, where the row folds
   (§8b), the switch goes and ⋯ carries the item. */
.tbl .switch-row.pole-zapnuto { display: inline-flex; margin: 0; padding: var(--space-1); }
.opt.pole-jen-telefon { display: none; }
@media (max-width: 560px) {
  .tbl-radky .pole-zapnuto-bunka { display: none; }
  .opt.pole-jen-telefon { display: flex; }
}
/* eleven tabs of Administration do not fit a tablet (768 px): only these tabs wrap already below 1024 px */
@media (max-width: 1024px) { .tabs.tabs-admin { flex-wrap: wrap; } }
/* the options of an existing choice field: the editor of a List (§32) as a card under the form of the window */
.modal-skrol > form + .pole-polozky { margin-top: var(--space-6); margin-bottom: 0; }
/* the colour of an option in a row of a new choice field (slide 02d): the swatch opens the palette; without a colour
   it is a dashed circle like „Bez barvy“ */
.crow > .menu { flex: none; align-self: center; }
.barva-volba[data-bez-barvy] { border-style: dashed; border-color: var(--muted); background: none; }
/* A LONG NAME in Administrace → Vlastní pole (a field, a group, an option of a choice: up to 200 characters, Petr 21 Oct
   2026 „dej 200“; only custom fields have it, KOMPONENTY §79): `.nazev-zkr` is used only on these screens. The name may
   wrap anywhere but shows only its first line, ending with „…“ (`line-clamp: 1`): a table can shrink it, so it never runs
   out of its card or window (wrapping keeps it inside its place on a phone too); the whole name is in `title` and in
   the window of the field. */
.nazev-zkr {
  display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1;
  overflow: hidden; overflow-wrap: anywhere; white-space: normal; max-width: 28rem; vertical-align: bottom;
}
.chip.nazev-zkr { line-height: var(--chip-md); vertical-align: middle; }
.cat.nazev-zkr { line-height: var(--chip-sm); vertical-align: middle; }
/* the options card in the window is narrower than a page table: an option asks for at most 16rem */
.pole-polozky .nazev-zkr { max-width: 16rem; }
/* the head of the options card: „+ Přidat položku“ keeps one line next to the title */
.pole-polozky .card-head .btn { white-space: nowrap; }

/* Přílohy (spec prilohy-v2, KOMPONENTY §84 a §86; postaveno v etapách E2a a E2b): ikona druhu souboru, řádek přílohy v oddílu,
   tlačítko Přidat přílohy a fronta nahrávání. Koncepty u komentářů a zapamatovaný pohled (§87) jsou dál NÁVRH v `mockupy/navrh.css`. */
/* §84 ikona druhu souboru: barva nese druh jen navíc, druh říká i přípona v názvu */
.typ-souboru {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--control-md); height: var(--control-md);
  border-radius: var(--radius-8); background: var(--chip-bg); color: var(--muted);
}
.typ-souboru svg { width: var(--icon-md); height: var(--icon-md); }
.typ-souboru.obrazek { background: var(--teal-soft); color: var(--teal-ink); }
.typ-souboru.video { background: var(--accent-soft); color: var(--accent); }
.typ-souboru.pdf { background: var(--red-soft); color: var(--red); }
.typ-souboru.text { background: var(--chip-bg); color: var(--muted); }
.typ-souboru.tabulka { background: var(--av-g-bg); color: var(--av-g-ink); }
.typ-souboru.dokument { background: var(--av-b-bg); color: var(--av-b-ink); }
.typ-souboru.prezentace, .typ-souboru.je-chyba { background: var(--chip-orange-bg); color: var(--chip-orange-ink); }
.typ-souboru.velka { width: calc(var(--control-md) * 2); height: calc(var(--control-md) * 2); border-radius: var(--radius-12); }
.typ-souboru.velka svg { width: calc(var(--icon-md) * 2); height: calc(var(--icon-md) * 2); }

/* §84 řádek přílohy: název je tlačítko (otevře prohlížeč), pod ním název souboru (má-li příloha vlastní název) a popisek na jeden řádek; na telefonu pod názvem
   „Kde · kdo · kdy“, vpravo velikost a ⋯ */
.tbl-prilohy .r-hlavni .cell-name > span:last-child { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.priloha-soubor { overflow-wrap: anywhere; }
.priloha-otevrit { font-family: inherit; font-size: inherit; line-height: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.tbl-prilohy .r-hlavni .priloha-popisek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; max-width: 26rem; overflow: hidden; }
.tbl-prilohy .k-kde > :is(.sub, .chip) { display: block; }
.tbl-prilohy .k-kde > .chip { width: fit-content; margin-top: var(--space-1); }
.tbl-prilohy .autor { gap: var(--space-2); overflow-wrap: normal; }
.tbl-prilohy td.r-hlavni { min-width: 12rem; }
.tbl-prilohy .k-kdy { white-space: nowrap; }
.tbl-prilohy .r-hlavni .priloha-souhrn { display: none; }
@media (max-width: 560px) {
  .tbl-prilohy td.k-kde, .tbl-prilohy td.k-autor, .tbl-prilohy td.k-kdy { display: none; }
  .tbl-prilohy td.r-hlavni { flex: 1 1 0; min-width: 0; }
  .tbl-prilohy td.cislo { order: -1; color: var(--muted); }
  .tbl-prilohy .r-hlavni .priloha-souhrn { display: block; }
  .tbl-prilohy .priloha-popisek { max-width: 100%; }
}

/* Stránka Soubory (spec prilohy-v2 §5.5): sloupec Zákazník navíc proti záložce; na telefonu se schová do šedého řádku pod názvem jako Kde, Autor a Přidáno */
.tbl-prilohy .k-zakaznik { min-width: 9rem; }
@media (max-width: 560px) { .tbl-prilohy td.k-zakaznik { display: none; } }
/* výpis záložky a stránky Soubory má od tabletu pevné šířky sloupců i bez skupin: dlouhé slovo nerozšíří sloupec ani stránku, popisek zůstane ve svém sloupci,
   dlouhé jméno se zkrátí třemi tečkami (celé v title) */
@media (min-width: 561px) {
  .tbl-prilohy-pevne .tbl { table-layout: fixed; }
  .tbl-prilohy-pevne .tbl td { overflow-wrap: anywhere; }
  .tbl-prilohy-pevne td.r-hlavni { min-width: 0; }
  .tbl-prilohy-pevne .autor { white-space: normal; }
  .tbl-prilohy-pevne .autor-jmeno { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tbl-prilohy-pevne .k-autor .av { flex: none; }
}
/* na tabletu se Autor a Přidáno skládají pod název a sloupce mají pevné šířky: karta bez vodorovného posuvníku při každé šířce (Petr 31. 10. 2026) */
.tbl-prilohy .r-hlavni .priloha-kdo-kdy { display: none; }
@media (min-width: 561px) and (max-width: 960px) {
  .tbl-prilohy-pevne :is(td, th).k-autor, .tbl-prilohy-pevne :is(td, th).k-kdy { display: none; }
  .tbl-prilohy.tbl-prilohy-pevne .r-hlavni .priloha-kdo-kdy { display: block; }
  .tbl-soubory .k-zakaznik { min-width: 0; }
  .tbl-soubory .tbl th.k-kde { width: 20% !important; }
  .tbl-soubory .tbl th.k-zakaznik { width: 23% !important; }
  .tbl-soubory .tbl th.cislo { width: 5rem !important; }
}
/* Soubory na telefonu: ikona se do lišty nevejde, místo ní položka v nabídce pod avatarem (jen na úzké obrazovce) */
.menu-item.jen-uzke, .menu-sep.jen-uzke { display: none; }
@media (max-width: 560px) {
  .nico.nico-soubory { display: none; }
  .menu-item.jen-uzke { display: flex; }
  .menu-sep.jen-uzke { display: block; }
}

.empty .hint > p.sub + .btn { margin-top: var(--space-2-5); }

/* §84 úprava názvu a popisku přímo v řádku (⋯ → Upravit název a popisek): pole Název přílohy a Popisek */
.priloha-uprava { background: var(--surface-2); }
.tbl-prilohy .priloha-uprava > td { padding: var(--space-3) var(--space-4); }
@media (max-width: 560px) { .tbl-prilohy .priloha-uprava > td { flex: 1 1 100%; padding: 0; } }
.priloha-uprava-form { display: flex; flex-direction: column; gap: var(--space-3); }
.priloha-uprava-form .field { margin: 0; }
.priloha-uprava-akce { display: flex; align-items: center; gap: var(--space-2); }
.prilohy-pridavani { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.prilohy-hlava-akce { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2) var(--space-3); }
:is(.oddil, .blok) > .prilohy-pridavani { margin-top: var(--space-3); }
/* in the empty state of the tab (catalogue §13): the button and the sentence about dragging under the text, on the centre */
.empty .prilohy-pridavani { flex-direction: column; justify-content: center; margin-top: var(--space-3); }
:has(> .prilohy-pretazeni) { position: relative; }
/* catalogue §85, §86 (E5): the small gallery and the compact list under a message, the drafts of a form */
.galerie-priloh.galerie-mala { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--space-2); max-width: 24rem; margin-top: var(--space-2); }
.galerie-mala .galerie-nazev { margin-top: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 500; }
.galerie-mala > [hidden] { display: none; }
@media (max-width: 560px) { .galerie-priloh.galerie-mala { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prilohy-koncept, .prilohy-kompakt { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.prilohy-koncept:empty { display: none; }
.prilohy-koncept > li, .prilohy-kompakt > li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.prilohy-kompakt > li[hidden] { display: none; }
:is(.prilohy-koncept, .prilohy-kompakt) .typ-souboru { flex: none; width: var(--control-icon); height: var(--control-icon); border-radius: var(--radius-6); }
:is(.prilohy-koncept, .prilohy-kompakt) .typ-souboru svg { width: var(--icon-sm); height: var(--icon-sm); }
:is(.prilohy-koncept, .prilohy-kompakt) :is(.nm, .priloha-otevrit) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prilohy-koncept .progress { flex: 0 0 5rem; margin: 0; }
:is(.prilohy-koncept, .prilohy-kompakt) .sub { flex: none; }
.prilohy-koncept .icon-btn { margin-left: auto; flex: none; }
/* a file the form refused: the whole sentence, in the row of the drafts (the shape of the queue, §86) */
.prilohy-koncept > li.nahravani-radek { display: grid; }
.prilohy-dalsi { margin-top: var(--space-1); font-size: var(--text-sm); line-height: var(--leading-sm); }
.prilohy-pretazeni {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-6); border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); color: var(--accent);
  font-size: var(--text-md); line-height: var(--leading-md); font-weight: 600; text-align: center;
}
button.prilohy-pretazeni { font-family: inherit; cursor: pointer; }
.prilohy-pretazeni > span { display: flex; flex-direction: column; gap: var(--space-1); }
.prilohy-pretazeni .sub { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 400; color: var(--accent); }
.prilohy-pretazeni:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.fronta-nahravani { display: flex; flex-direction: column; gap: var(--space-2); }
.card-table > .imp-banner { margin-top: var(--space-3); }
.card-table > .fronta-nahravani { padding: var(--space-3) var(--space-5); }
.nahravani-radek {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1-5) var(--space-3);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--card);
}
.nahravani-info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.nahravani-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nahravani-info .progress { margin: 0; }
.nahravani-akce { display: flex; align-items: center; gap: var(--space-2); }
.nahravani-popisek { grid-column: 2 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--muted); }
.nahravani-popisek .input { flex: 1 1 14rem; max-width: 28rem; }
.nahravani-radek.je-chyba { align-items: start; background: var(--red-soft); border-color: var(--red-soft); }
.nahravani-radek.prerusene, .nahravani-radek.nedokoncene { background: var(--surface-2); }
@media (max-width: 560px) {
  .nahravani-radek { grid-template-columns: auto minmax(0, 1fr); }
  .nahravani-akce, .nahravani-popisek { grid-column: 1 / -1; }
  .nahravani-radek.je-chyba { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nahravani-radek.je-chyba > .nahravani-akce { grid-column: auto; }
}

/* Přílohy: galerie (§85) a prohlížeč obrázků (§83), postaveno v etapě E2b; přesunuto z bloku NÁVRH v `mockupy/navrh.css`. */
/* §85 galerie: mřížka dlaždic, obrázek do 3 MB přímo, ostatní ikonou druhu s příponou */
.galerie-priloh { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; }
.card-table > .galerie-priloh { padding: var(--space-4) var(--space-5) var(--space-5); }
/* the gallery in the tab Přílohy: inside the list (a group of it too), not a direct child of the card */
.galerie-priloh.galerie-v-tabu { padding: var(--space-4) var(--space-5) var(--space-5); }
@media (max-width: 560px) { .galerie-priloh.galerie-v-tabu { padding: var(--space-3); } }
.galerie-dlazdice { position: relative; display: flex; flex-direction: column; min-width: 0; }
.galerie-plocha {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; aspect-ratio: 4 / 3;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--surface-2); color: var(--muted);
  font: inherit; cursor: pointer; overflow: hidden;
}
.galerie-plocha:hover { border-color: var(--accent); }
.galerie-plocha:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.galerie-plocha > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galerie-pripona { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: 600; text-transform: uppercase; }
.galerie-nazev { margin-top: var(--space-1-5); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galerie-dlazdice > .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galerie-dlazdice > .chip { align-self: flex-start; margin-top: var(--space-1); }
.galerie-dlazdice > .row-actions { position: absolute; top: var(--space-1-5); right: var(--space-1-5); }
.galerie-dlazdice > .row-actions .icon-btn { background: var(--card); box-shadow: var(--shadow-xs); }
@media (max-width: 560px) { .galerie-priloh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* §83 prohlížeč přílohy: vestavěný <dialog> otevřený showModal(); na telefonu přes celou obrazovku */
.prohlizec {
  width: calc(100% - 2 * var(--space-6)); max-width: none; height: calc(100% - 2 * var(--space-6)); max-height: none; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-16); background: var(--card); color: var(--ink); box-shadow: var(--shadow-xl);
}
.prohlizec[open] { display: flex; flex-direction: column; }
.prohlizec::backdrop { background: var(--overlay); }
.prohlizec-hlava { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.prohlizec-nazvy { display: flex; flex-direction: column; min-width: 0; }
.prohlizec-soubor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prohlizec-hlava h2 { display: flex; min-width: 0; margin: 0; font-size: var(--text-md); line-height: var(--leading-md); font-weight: 650; white-space: nowrap; }
.prohlizec-hlava h2 > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.prohlizec-hlava > .sub { flex: none; margin-right: auto; }
.prohlizec-obsah {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4) var(--space-16); background: var(--surface-2); overflow: auto;
}
.prohlizec-obsah > img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-4); }
.prohlizec-nahrada { display: flex; flex-direction: column; gap: var(--space-2); text-align: center; align-items: center; justify-content: center; height: 100%; padding: var(--space-6); }
.prohlizec-nahrada p { margin: 0; max-width: 30rem; }
.prohlizec-nahrada .btn { margin-top: var(--space-2); }
/* §83 obsah podle druhu (E4): video, PDF přes celou plochu, text s pevnou šířkou, jinak věta a Stáhnout */
.prohlizec-obsah > video { display: block; width: 100%; height: 100%; object-fit: contain; }
.prohlizec-obsah.je-pdf { padding: 0; }
.prohlizec-obsah.je-pdf > object { width: 100%; height: 100%; }
.prohlizec-nahrada-akce { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.prohlizec-nahrada-akce .btn { margin-top: 0; }
.prohlizec-obsah.je-text { flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; }
.prohlizec-obsah.je-text > .ramecek-info { flex: none; margin: 0 0 var(--space-3); background: var(--card); }
.prohlizec-text {
  flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: var(--space-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-8);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-sm); white-space: pre-wrap; overflow-wrap: anywhere;
}
.prohlizec-text:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(var(--focus-width) * -1); }
.prohlizec-obsah.je-soubor { flex-direction: column; gap: var(--space-2); text-align: center; }
.prohlizec-obsah.je-soubor p { margin: 0; max-width: 30rem; }
.prohlizec-obsah.je-soubor .btn { margin-top: var(--space-2); }
.prohlizec-sipka {
  position: absolute; top: 50%; transform: translateY(-50%); width: var(--control-lg); height: var(--control-lg);
  border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card); box-shadow: var(--shadow-sm);
}
.prohlizec-sipka.predchozi { left: var(--space-3); }
.prohlizec-sipka.dalsi { right: var(--space-3); }
.prohlizec-pata {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line);
}
.prohlizec-udaje { display: flex; flex-direction: column; gap: var(--space-0-5); flex: 1 1 20rem; min-width: 0; }
.prohlizec-udaje > p { margin: 0; }
.prohlizec-popisek { font-size: var(--text-sm); line-height: var(--leading-sm); }
.prohlizec-akce { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 560px) {
  .prohlizec { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .prohlizec-obsah { padding: var(--space-2); }
  .prohlizec-sipka { display: none; }
  .prohlizec-akce { flex-direction: column; align-items: stretch; width: 100%; }
  .prohlizec-akce > .btn { justify-content: center; }
}

/* §85 galerie v oddílu okna (úkol, výkaz): tři dlaždice vedle sebe */
:is(.blok, .oddil) > .galerie-priloh { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
/* §85 úprava názvu a popisku na dlaždici galerie: formulář přes celou šířku mřížky; §83 prohlížeč: text „Načítá se obrázek…“
   pod obrázkem, dokud se nenačte */
.galerie-uprava { grid-column: 1 / -1; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--surface-2); }
.prohlizec-nacita { position: absolute; margin: 0; }
.prohlizec-obsah > img[data-prohlizec-obrazek] { position: relative; }
.prohlizec-udaje > .priloha-uprava-form { max-width: 36rem; }
.prohlizec-hlava .icon-btn.zavrit { margin-left: 0; }

/* §87 „Vrátit výchozí pohled“ za „Zrušit vše“: tlačítko (POST), vzhled jako „Zrušit vše“ (postaveno v E3, příloha na záložce) */
.zrusit-vse.vratit-vychozi { font-family: inherit; background: none; border: 0; }
.zrusit-vse.vratit-vychozi:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--radius-4); }
/* §8c uvnitř karty s lištou: první blok skupiny má od řady chipů odstup (bez něj nadpis skupiny přisedne k liště) */
.card-table > .lista ~ .skupiny-v-karte, .card-table > .lista-vypis > .skupiny-v-karte { padding-top: var(--space-3); }
/* věta pod výpisem příloh (zámek měsíce, nedostupné úložiště) */
.prilohy-poznamka { margin: 0; padding: 0 var(--space-5) var(--space-4); }
/* §86 na telefonu se soubory nepřetahují ani nevkládají přes Ctrl+V: věta u tlačítka se nekreslí */
@media (max-width: 560px) { .prilohy-pridavani > .sub { display: none; } }
/* §84 jméno autora se na širokém okně nezalamuje */
@media (min-width: 1000px) { .tbl-prilohy .autor { white-space: nowrap; } }
/* the one question of the service window (spec rozpocet-sluzby-d §3.5): while it is shown, the main button of the window is
   hidden — only the two answers of the question and „Zrušit“ (so the question cannot be walked around) */
.modal-card:has([data-raise-bar]) form.modal-v2 .form-actions > .btn-primary { display: none; }

/* ---------- the trash of attachments (Administration → Úložiště příloh, spec `prilohy-v2.md` §18, catalogue §93) ---------- */
.kos-nastaveni { border-top: 1px solid var(--line); }
.kos-nastaveni .zavisla { margin-top: var(--space-2); }
.kos-nastaveni .form-actions { margin-top: var(--space-3); }
.kos-lhuta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.kos-lhuta .input { flex: 0 0 auto; width: calc(var(--control-sm) * 2.5); min-width: 0; }
.kos-hromadne { display: flex; flex-wrap: wrap; gap: var(--space-2); border-top: 1px solid var(--line); }
.kos-vycet { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.kos-vycet li { margin: var(--space-1) 0; }
/* the tab Koš of the page Soubory (spec smazane-zaznamy-v1 §2.3, catalogue §95) and the overview of the card in Administration (slide 05f) */
.kos-tabulka .k-kdo .sub { display: block; }
.kos-tabulka .k-kde .chip { display: flex; width: fit-content; margin-top: var(--space-1); }
.kos-prehled { margin-top: var(--space-1-5); }
/* fixed widths from a tablet up, as the list of attachments (`.tbl-prilohy-pevne`): a long word in a name or in Kde never widens the table, the name takes what is left */
@media (min-width: 561px) {
  .tbl.kos-tabulka { table-layout: fixed; width: 100%; }
  .tbl.kos-tabulka td { overflow-wrap: anywhere; }
  .kos-tabulka th.r-vyber { width: 3rem; }
  .kos-tabulka th.k-kde { width: 24%; }
  .kos-tabulka th.k-kdo { width: 15%; }
  .kos-tabulka th.cislo { width: 6rem; }
  .kos-tabulka th.k-odstrani { width: 8rem; }
  .kos-tabulka th.r-akce { width: 3.5rem; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .kos-tabulka th, .kos-tabulka td { padding-inline: var(--space-2); }
  .kos-tabulka th.k-kde { width: 22%; }
  .kos-tabulka th.k-kdo { width: 16%; }
  .kos-tabulka th.cislo { width: 4.5rem; }
  .kos-tabulka th.k-odstrani { width: 6.5rem; }
}
/* the list of the trash folds on a phone like a list of attachments, but „Kde“ stays: there is no record around it to say it */
@media (max-width: 560px) {
  .tbl-prilohy.kos-tabulka td.k-kde { display: block; flex: 1 1 100%; }
  .tbl-prilohy.kos-tabulka td.r-hlavni { flex: 1 1 calc(100% - 6rem); }
  .tbl-prilohy.kos-tabulka td.cislo { order: 0; }
  .tbl-prilohy.kos-tabulka td:first-child { order: -1; margin-left: auto; }
}

/* Stránka Smazané záznamy (spec smazane-zaznamy-v1, KOMPONENTY §95). Tabulka je §8 a §8b, navíc jen viditelné Obnovit a ⋯ v jedné buňce;
   na telefonu jsou tlačítka poslední a celá na prst. */
.stranka-uvod { margin: var(--space-2) 0 var(--space-3); }
.smazane-akce { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.tbl-smazane .nm { display: block; font-weight: 600; }
.tbl-smazane .k-kdo .sub { display: block; }
.tbl-smazane .k-kde .chip { display: flex; width: fit-content; margin-top: var(--space-1); }
.tbl-smazane .opt-cervena { white-space: nowrap; }
@media (max-width: 560px) {
  .tbl-smazane td.k-kde:empty, .tbl-smazane td.r-akce:has(.smazane-akce:empty) { display: none; }
  .tbl-smazane td.k-kde .chip { display: inline-flex; margin: 0 0 0 var(--space-1); }
  .tbl-smazane td.r-akce { order: 1; flex: 1 1 100%; margin-left: 0; }
  .tbl-smazane .smazane-akce { justify-content: flex-start; }
  .tbl-smazane .smazane-akce form { display: flex; flex: 1 1 auto; }
  .tbl-smazane .smazane-akce .btn { flex: 1 1 auto; justify-content: center; min-height: var(--touch-target); }
}
/* pevné sloupce jako .tbl-prilohy-pevne: dlouhé slovo se zalomí uvnitř sloupce a nerozhodí stránku */
.tbl-smazane td { overflow-wrap: anywhere; }
.tbl-smazane .k-kde .chip { max-width: 100%; white-space: normal; }
@media (min-width: 561px) {
  .tbl-smazane { table-layout: fixed; }
  .tbl-smazane th.k-typ { width: 13%; }
  .tbl-smazane th.k-kde { width: 25%; }
  .tbl-smazane th.k-kdo { width: 18%; }
  .tbl-smazane th.k-akce { width: 9rem; }
}
/* tablet: užší mezery, ať má název místo */
@media (min-width: 561px) and (max-width: 900px) {
  .tbl-smazane th, .tbl-smazane td { padding-inline: var(--space-2); }
  .tbl-smazane th.k-typ { width: 6.5rem; }
  .tbl-smazane th.k-kde { width: 22%; }
  .tbl-smazane th.k-kdo { width: 19%; }
}