/* ============================================================
   Karta poznámky — KANONICKÝ prvek (engine).

   Zdroj pravdy pro výpis poznámek. Poznámka NENÍ vlastnictví osoby:
   týž prvek kreslí tab „Poznámky“ na detailu OSOBY, FIRMY i OBCHODU
   a agregace „Z historie subjektů“. Proto engine, ne blok uvnitř
   obrazovkové karty — do 23. 8. 2026 ležely v kanonu TŘI kopie
   (Person / Company / Deal detail) a Deal se už začal rozcházet
   (chyběl mu `.note-author`).

   Dokumentace, stavy a pravidla: karta `Components · Karta poznámky`
   (note-card.html). Obrazovkové karty tenhle soubor jen linkují
   a NEDEFINUJÍ si `.note-*` samy.

   Anatomie (schváleno picky F204–F218):
     nadpis (--h3, jeden řádek)
     náhled těla (--p, pět řádků)
     patička: autor vlevo · datum vpravo

   Změny proti zápisu do 22. 8. 2026:
     · `.note-body` mělo `flex: 1` → clamp box vyrostl nad pět řádků
       a overflow uřízl šestý řádek v půlce písmen; nově `flex: 0 1 auto`
     · autor byl NAD nadpisem (`.note-author` + `.note-av`) → je jen
       v patičce; obě třídy zanikly
     · `.note-grid` mělo pevné dva sloupce → dělí se o šířku hostitele
     · odsazení marginy na potomcích → `gap` na kartě
     · přibyl stav fokusu (karta je `<button>`)
   ============================================================ */

/* hlavička výpisu — titulek + akce „Nová poznámka“ */
.note-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  row-gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.note-hd .t {
  font: var(--h1);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
}
/* Pravý cluster hlavičky (přepínač zobrazení + primární akce). Bez něj
   si tlačítko bralo `margin-left: auto` samo a druhý ovladač neměl kam. */
.note-hd .note-acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.note-hd .note-acts .btn {
  margin-left: 0;
}
.note-hd .btn {
  height: var(--control-h);
  margin-left: auto;
}

/* mřížka — sloupce se dělí o šířku hostitele, ne pevný počet */
.note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--sp-4);
  align-items: stretch;
}

/* karta — jediná úroveň rámování; `<button>`, takže klik i klávesnice jsou nativní */
.note-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 184px;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-100);
  box-shadow: var(--shadow-xs);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
/* Potomci musí umět zúžit na šířku karty. Karta je `<button>`, a ten se chová jako
   `min-width: max-content` — bez tohohle řádku se dlouhý nadpis neořízne výpustkou,
   ale přeteče přes hranu a hairline patičky skončí kus za ní. `min-width: 0` na kartě
   samotné to neřeší, procento se musí resolvovat na dítěti. */
.note-card > * {
  width: 100%;
}
.note-card:hover {
  background: var(--hover-surface);
}
.note-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.note-title {
  font: var(--h3);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ⚠️ `flex: 0 1 auto`, NIKDY `flex: 1` — s ním clamp box vyroste na zbylou
   výšku karty, `-webkit-line-clamp` přestane platit a `overflow: hidden`
   uřízne šestý řádek uprostřed písmen. */
.note-body {
  font: var(--p);
  color: var(--fg-secondary);
  flex: 0 1 auto;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* zástupné texty: bez nadpisu „Bez názvu“, bez těla „Bez obsahu“ */
.note-title.muted,
.note-body.muted,
.note-by .nm.muted {
  color: var(--fg-muted);
}

/* patička — dolů ji tlačí `margin-top: auto`, ne roztažené tělo */
.note-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.note-by {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font: var(--small);
  color: var(--fg-secondary);
}
.note-by .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Značku autora si engine NEKRESLÍ — je to kanonický avatar (`Components · Avatars`)
   ve velikosti inline 16. V appce ho renderuje `<Avatar size="inline">`, která si velikost
   drží sama; karty kanonu píšou `.av` ze `_ds/segment-screen.css` (24 px) a velikost si
   dorovnávají u sebe. Pravidlo pro `.av` tady BÝVALO — vyhozeno 23. 8. 2026: v appce nemělo
   co obarvit (jiné jméno třídy) a do portu propadalo jen jako dluh validátoru. */
/* datum NIKDY tabular-nums (AD 22. 7. 2026) */
.note-when {
  flex: none;
  margin-left: auto;
  padding-left: var(--sp-2);
  font: var(--small);
  color: var(--fg-muted);
  font-variant-numeric: normal;
}

/* Načítání — placeholder jede ve stejné mřížce a se stejnými metrikami jako hotová karta
   (pravidlo DS.Skeleton: nulový layout shift). Řádkový skeleton by na tabu blikl seznamem
   a pak přeskočil na mřížku. */
.note-card--sk {
  cursor: default;
}
/* Proužky kreslí KANONICKÝ skeleton `_ds/skeleton.css` (`.sk` + `.sk-line`) — má shimmer
   vedený tokeny a klidný fallback pod `prefers-reduced-motion`. Tenhle engine k němu
   dodává jen rozvržení a šířky; výšky patří primitivu, ne kartě.
   Markup: `.note-card.note-card--sk` › `.sk.sk-line.lg.note-sk-title`
           › `.note-sk-body` › 3× `.sk.sk-line` › `.sk.sk-line.sm.note-sk-foot` */
.note-sk-title {
  width: 62%;
}
.note-sk-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 0 1 auto;
  min-height: 0;
}
.note-sk-body .sk:nth-child(1) {
  width: 100%;
}
.note-sk-body .sk:nth-child(2) {
  width: 92%;
}
.note-sk-body .sk:nth-child(3) {
  width: 70%;
}
.note-sk-foot {
  width: 38%;
}