/* Zastupky anonymizovaneho textu (analysis/avalanche/anonym-personas, M1
 * varianta A "postavicka"; markup sklada anonym/rendering.py).
 *
 * .atk.atk-p  zastupka osoby jako stihla pilulka (styl filtracnich pilulek
 *             .dvd-f, rozhodnuti majitele 2026-10-18): pismo i velikost textu,
 *             nevyssi nez radek, jemne pozadi v barve osoby (--pc). Nepriprazena
 *             = silueta, barva podle cisla zastupky; .is-set = kolecko
 *             s pocatecnim pismenem v barve osoby; .is-me = tmave kolecko "Ja".
 *             <button> otevira vyber osoby.
 * .atk.atk-q  ticha zastupka ostatnich kategorii (datum 1, adresa 1 ...).
 * .atk-pa     samostatne kolecko osoby (seznamy, pill v hlavicce, prehled).
 * Tokeny domu (avalanche/_tokens.html) s nahradnimi hodnotami, aby soubor
 * fungoval i mimo .ab-shell (stary workspace).
 */
.atk { white-space: nowrap; font: inherit; line-height: inherit; }
.atk-p {
  --pc: #64748b;
  display: inline; margin: 0; padding: 0 .4em 0 .16em; border-radius: 999px; font-size: 1em;
  background: color-mix(in srgb, var(--pc) 8%, #fff); border: 1px solid color-mix(in srgb, var(--pc) 22%, #fff);
  color: var(--ink-2, #334155); font-weight: inherit; cursor: default; transition: background-color .15s, box-shadow .15s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* <button> se v radku chova jako inline-block a prebira vysku radku textu;
   vlastni line-height ho drzi na vysce pisma, aby radek nenafukoval. */
button.atk-p { cursor: pointer; appearance: none; -webkit-appearance: none; text-align: inherit; vertical-align: baseline; line-height: 1.25; }
.atk-p .atk-av {
  display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em;
  border-radius: 50%; font-size: .66em; vertical-align: .14em; margin-right: .3em;
  background: color-mix(in srgb, var(--pc) 18%, #fff); color: color-mix(in srgb, var(--pc) 75%, #000); font-weight: 700;
}
.atk-p .atk-av i { font-size: .95em; }
.atk-p .atk-av[data-i]::before { content: attr(data-i); }
.atk-p.is-set {
  background: color-mix(in srgb, var(--pc) 10%, #fff); border-color: color-mix(in srgb, var(--pc) 28%, #fff);
  color: var(--ink, #0f172a);
}
.atk-p.is-set .atk-av { background: var(--pc); color: #fff; }
.atk-p.is-me .atk-av { background: var(--ink, #0f172a); }
button.atk-p:hover, .atk-p.is-hl { background: color-mix(in srgb, var(--pc) 15%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 20%, transparent); }
button.atk-p.is-set:hover, .atk-p.is-set.is-hl { background: color-mix(in srgb, var(--pc) 14%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 25%, transparent); }
button.atk-p:focus-visible { outline: 2px solid var(--accent, #f97316); outline-offset: 1px; }
.atk-p.is-open { box-shadow: 0 0 0 2px var(--accent, #f97316) !important; background: #fff7ed; }

.atk-q {
  border-radius: 5px; padding: .02em .35em; background: var(--bg, #f8fafc); border: 1px solid var(--line, #e2e8f0);
  color: var(--muted, #64748b); font-size: .9em;
}
.atk-q i { font-size: .82em; margin-right: .25em; color: var(--muted-2, #94a3b8); }

.atk-pa {
  --pc: #64748b;
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px;
  border-radius: 50%; background: var(--pc); color: #fff; font-weight: 700; font-size: .72rem; line-height: 1;
}
.atk-pa.is-me { background: var(--ink, #0f172a); }
.atk-pa.is-anon { background: #eef2f6; color: var(--muted, #64748b); border: 1px dashed var(--muted-2, #94a3b8); }
.atk-pa.is-new { background: #fff; color: var(--accent-ink, #d35400); border: 1px dashed rgba(211, 84, 0, .45); }
.atk-pa.sm { width: 22px; height: 22px; font-size: .62rem; }

/* Telefon: o neco vetsi cil dotyku, ale bez zvetseni radku textu */
@media (max-width: 767.98px) {
  .atk-p { padding: .06em .5em .06em .18em; }
}