/* DS site chrome (:3777/ds). Built only from canon tokens (tokens.css served at /ds/_tokens.css) and canon elements:
   sidebar rows = nav-item card (28px, 500 13px), tabs = .acrm-tab (46px, accent underline),
   search = .acrm-input (32px), lozenge = _ds/pills.css .pill.sm, buttons = buttons.html .btn.
   Site-only elements approved 2 Sep 2026: home tiles, do/don't pair, on-this-page outline, breadcrumb, example frame.
   Every colour is a token, so [data-theme="dark"] on <html> (sidebar footer toggle) needs no rules of its own. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-canvas); color: var(--fg); font: 400 13px/1.5 var(--font-sans); }
/* Holá elementová pravidla dokumentace mají `:not(.ds-ex *)`: ukázky jsou vložený skutečný DOM
   (ne iframe), a bez výjimky jim web přepisoval tabulky (td vertical-align: top → text u horní hrany),
   odkazy, odstavce i kód — ukázka pak neodpovídala appce (vizuální audit AD 28. 9. 2026). */
a:where(:not(.ds-ex *)) { color: inherit; text-decoration: none; }
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* sidebar */
.side { background: var(--sidebar-bg); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; height: 49px; padding: 0 var(--sp-5); border-bottom: 1px solid var(--border); font: var(--h3); color: var(--ink-900); flex: none; white-space: nowrap; }
.brand .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ACRM-72: never wrap; truncate instead */
.brand .mark { width: 20px; height: 20px; border-radius: 6px; background: var(--ink-900); color: var(--surface-100); display: grid; place-items: center; font: 600 10px var(--font-display); }
.brand .ver { margin-left: auto; font: var(--hint); color: var(--fg-muted); }
.brand .ver.dirty { color: var(--warning-ink); }
.search { padding: var(--sp-4) var(--sp-4) var(--sp-2); position: relative; }
.acrm-input { display: flex; align-items: center; gap: var(--sp-2); width: 100%; height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-100); color: var(--fg); font: 400 13px var(--font-sans); outline: 0; }
.acrm-input::placeholder { color: var(--fg-muted); }
.acrm-input:focus { border-color: var(--accent); }
.search .kbd { position: absolute; right: 20px; top: 19px; font: 500 11px var(--font-mono); color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 5px; background: var(--surface-75); pointer-events: none; }
.hits { position: absolute; left: var(--sp-4); right: var(--sp-4); top: 46px; z-index: 10; background: var(--surface-100); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); max-height: 380px; overflow-y: auto; padding: 4px; }
.hits[hidden] { display: none; }
.hits a { display: flex; flex-direction: column; padding: 6px 8px; border-radius: var(--radius-sm); font: 500 13px var(--font-sans); color: var(--ink-900); }
.hits a:hover, .hits a.on { background: var(--hover-surface); }
.hits a small { font: var(--hint); color: var(--fg-muted); }
.hits .none { padding: 8px; color: var(--fg-muted); font: var(--hint); }
.nav { padding: var(--sp-3); display: flex; flex-direction: column; gap: 1px; flex: 1; }
.ttl { font: var(--label); color: var(--fg-muted); padding: var(--sp-4) 8px var(--sp-1); }
.ttl a:hover { color: var(--ink-900); }
.row { display: flex; align-items: center; gap: 10px; height: var(--row-h-nav); padding: 0 8px; border-radius: var(--radius-md); font: 500 13px var(--font-sans); color: var(--ink-700); cursor: pointer; white-space: nowrap; overflow: hidden; }
.row:hover { background: var(--hover-surface); }
.row.active { background: var(--active-surface); color: var(--ink-900); }
.row .cnt { margin-left: auto; font: 500 11px var(--font-sans); color: var(--fg-muted); }
/* tree: category row → family (<details>, collapsed unless current) → sub-components */
.row.fam { padding-left: 18px; font-weight: 500; }
.row.fam a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row.sub { padding-left: 40px; font-weight: 400; }
/* Třetí úroveň (zadavatel 28. 9. 2026): mechanika vícekrokového dialogu (pružina, MorphText) stojí
   pod „Multi-step dialog“, ne vedle něj. Strom nemá rodiče podkomponent, dokud ds-catalog.mjs
   nečte pole `parent` z registru (vyžaduje restart služby), proto zatím podle adresy. */
.row.sub[href$="/dialog/spring"], .row.sub[href$="/dialog/morph-text"] { padding-left: 56px; }
/* deprecated ve stromu — vedeno kvůli migraci (AD 2. 9. 2026) */
.row.sub.dep { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--line-300); }
/* Co je hotové a co ne (AD 3. 9. 2026): hotové = plná barva, rozpracované = tlumené,
   zrušené = přeškrtnuté. „Hotové" = má ukázku, API, usage i přístupnost. */
.row.sub.todo { color: var(--fg-muted); }
.row.sub.todo::after { content: ''; width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--line-300); flex: none; }
.row.sub.done { color: var(--ink-700); }
.row.fam.todo > a { color: var(--fg-muted); }
.row.fam .cnt { font-variant-numeric: tabular-nums; }
details > summary.row { list-style: none; }
details > summary.row::-webkit-details-marker { display: none; }
details > summary.row::before { content: '›'; width: 10px; color: var(--fg-muted); font-weight: 500; transition: transform .15s; flex: none; }
details[open] > summary.row::before { transform: rotate(90deg); }
.foot { padding: var(--sp-3); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
.foot button.row { width: 100%; border: 0; background: none; text-align: left; font: 500 13px var(--font-sans); }
.foot button.row:hover { background: var(--hover-surface); }
.foot button.row[aria-pressed="true"] { color: var(--ink-900); }

/* content */
.main { padding: 32px 48px 64px; display: grid; grid-template-columns: minmax(0, 880px) 200px; gap: 48px; align-items: start; }
.main.wide { grid-template-columns: minmax(0, 1200px); }
.crumb { font: var(--hint); color: var(--fg-muted); margin-bottom: 10px; }
.crumb a { color: var(--fg-secondary); }
.head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
h1:where(:not(.ds-ex *)) { font: var(--h1); margin: 0; }
h2:where(:not(.ds-ex *)) { font: var(--h2); margin: 28px 0 8px; }
h3:where(:not(.ds-ex *)) { font: var(--h3); margin: 18px 0 6px; }
h1:where(:not(.ds-ex *)) + p, .summary { font: 400 13px/1.55 var(--font-sans); color: var(--fg-secondary); margin: 6px 0 10px; max-width: 640px; }
p:where(:not(.ds-ex *)) { margin: 0 0 8px; max-width: 700px; color: var(--ink-700); }
.hint { font: var(--hint); color: var(--fg-muted); }
.links { display: flex; flex-wrap: wrap; gap: var(--sp-5); font: var(--hint); align-items: center; }
.links a, .md a, .lead a { color: var(--accent); font-weight: 500; }
code:where(:not(.ds-ex *)), .md code { font: 500 11.5px var(--font-mono); background: var(--surface-75); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 5px; color: var(--ink-800); }
pre:where(:not(.ds-ex *)) { background: var(--surface-75); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; font: 400 12px/1.5 var(--font-mono); max-width: 760px; color: var(--ink-800); }
pre:where(:not(.ds-ex *)) code { border: 0; background: none; padding: 0; font: inherit; }
.ok { color: var(--positive-ink); font-weight: 600; }
.no { color: var(--fg-muted); }
.cov { display: inline-flex; gap: 2px; font: 600 11px var(--font-mono); }
.cov i { font-style: normal; width: 14px; text-align: center; }
.cov i.ok { color: var(--positive-ink); }
.cov i.no { color: var(--ink-300); }
.req { color: var(--critical-ink); font-weight: 600; }

/* tabs = .acrm-tab */
.acrm-tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border); margin: 18px 0 24px; }
.acrm-tab { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); height: 46px; padding: 0 var(--sp-3); font: 600 13px var(--font-sans); color: var(--fg-secondary); cursor: pointer; white-space: nowrap; background: none; border: 0; }
.acrm-tab:hover { color: var(--ink-800); }
.acrm-tab.active { color: var(--ink-900); }
.acrm-tab.active::after { content: ''; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px; height: 2px; background: var(--accent); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }

/* example frame: story iframe (auto-height from the story document, resizable as fallback) + bar + collapsible source */
.ex { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-100); overflow: hidden; max-width: 1200px; margin: 0 0 14px; }
.ex .h { background: var(--surface-100); }  /* výšku určuje obsah ukázky — žádný rám, žádné pevné 260px */
.ex iframe { display: block; width: 100%; height: 100%; border: 0; }
.ex .bar { display: flex; gap: var(--sp-5); align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); font: var(--hint); color: var(--fg-muted); }
.ex .bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex .bar a { color: var(--accent); font-weight: 500; }
.ex .src { border-top: 1px solid var(--border); }
.ex .src pre { border: 0; border-radius: 0; max-width: none; margin: 0; }
.render { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-100); overflow: hidden; max-width: 1200px; }
.render iframe { display: block; width: 100%; border: 0; }
.render .bar { display: flex; gap: var(--sp-5); padding: 8px 12px; border-top: 1px solid var(--border); font: var(--hint); color: var(--fg-muted); }
.render .bar a { color: var(--accent); font-weight: 500; }
table:where(:not(.ds-ex *)) { border-collapse: collapse; width: 100%; max-width: 880px; font: 400 13px var(--font-sans); }
th:where(:not(.ds-ex *)) { text-align: left; font: var(--label); color: var(--fg-secondary); padding: 0 12px 6px 0; border-bottom: 1px solid var(--border); }
td:where(:not(.ds-ex *)) { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--ink-700); }
table.props td:nth-child(2) code { white-space: pre-wrap; }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); vertical-align: middle; margin-right: 8px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); max-width: 880px; }
.tile { display: block; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-100); box-shadow: var(--shadow-xs); }
.tile:hover { background: var(--hover-surface); }
.tile b { display: block; font: var(--h3); color: var(--ink-900); margin-bottom: 4px; }
.tile span { display: block; color: var(--fg-secondary); font: 400 12.5px/1.45 var(--font-sans); }
.tile .n { margin-top: 10px; font: var(--hint); color: var(--fg-muted); }
.list { list-style: none; margin: 0; padding: 0; max-width: 880px; }
.list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.list li:first-child { border-top: 0; }
.list li a.t { font: 500 13px var(--font-sans); color: var(--ink-900); }
.list li a.t:hover { color: var(--accent); }
.list li .sub { grid-column: 1 / -1; color: var(--fg-secondary); font: 400 12.5px/1.45 var(--font-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list li .r { display: flex; gap: 8px; align-items: center; }
/* deprecated sub-component — vedeno kvůli migraci, ne pro novou práci (AD 2. 9. 2026) */
.list li.dep a.t { color: var(--fg-secondary); text-decoration: line-through; text-decoration-color: var(--line-300); }
.list li.dep .sub { color: var(--fg-muted); }
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); max-width: 880px; }
.role b { display: block; font: var(--h3); margin-bottom: 6px; }
.role ul { list-style: none; margin: 0; padding: 0; }
.role li { padding: 4px 0; color: var(--ink-700); }
.role li a { color: var(--accent); font-weight: 500; }
.log { list-style: none; margin: 0; padding: 0; max-width: 880px; }
.log li { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-4); align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); }
.log li:first-child { border-top: 0; }
.log .d, .log .who { font: var(--hint); color: var(--fg-muted); white-space: nowrap; }
.log .files { display: block; font: var(--hint); color: var(--fg-muted); }
.log a { color: var(--accent); font-weight: 500; }
.dd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); max-width: 760px; margin: 8px 0 14px; }
.dd > div { border-top: 2px solid var(--line-300); padding-top: 8px; }
.dd > div.do { border-top-color: var(--positive); }
.dd > div.dont { border-top-color: var(--critical); }
.dd b { display: block; font: var(--label); margin-bottom: 4px; }
.dd .do b { color: var(--positive-ink); }
.dd .dont b { color: var(--critical-ink); }
.dd ul { padding-left: 18px; margin: 0; }
.chips span { display: inline-block; font: 500 11.5px var(--font-mono); background: var(--surface-75); border: 1px solid var(--border); padding: 2px 7px; border-radius: var(--radius-xs); margin: 0 6px 6px 0; color: var(--ink-800); }
.rules { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.rules li { padding: 8px 0; border-top: 1px solid var(--border); font: 400 13px/1.5 var(--font-sans); color: var(--ink-700); }
.rules li:first-child { border-top: 0; }
.rules a { color: var(--accent); }
.rel { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.rel a { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: 500 12.5px var(--font-sans); color: var(--ink-800); box-shadow: var(--shadow-xs); background: var(--surface-100); }
.rel a:hover { background: var(--hover-surface); }
.warn { background: var(--warning-subtle); border: 1px solid var(--warning); color: var(--warning-ink); padding: 8px 12px; border-radius: var(--radius-sm); margin: 12px 0; max-width: 880px; }

/* markdown */
.md { max-width: 760px; }
.md h1 { font: var(--h1); margin: 0 0 8px; }
.md h2 { font: var(--h2); margin: 28px 0 8px; }
.md h3, .md h4 { font: var(--h3); margin: 18px 0 6px; }
.md p, .md li { color: var(--ink-700); }
.md ul, .md ol { padding-left: 20px; margin: 0 0 10px; }
.md li { margin: 3px 0; }
.md blockquote { margin: 0 0 12px; padding: 6px 12px; border-left: 2px solid var(--line-300); color: var(--fg-secondary); }
.md table { margin: 8px 0 14px; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

/* outline + implementation box */
.toc { position: sticky; top: 32px; font: var(--hint); }
.toc b { display: block; font: var(--label); color: var(--fg-secondary); margin-bottom: 4px; }
.toc a { display: block; padding: 3px 0; color: var(--fg-muted); }
.toc a:hover { color: var(--ink-900); }
.toc .impl { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.toc .impl div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; color: var(--ink-700); }
@media (max-width: 1100px) { .main { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }
/* Telefon (ds.atsl.cz, FA368 5. 11. 2026): katalog nesmí přetékat do šířky. Strom jde nad obsah
   jako nízký rolovací blok, obsah dostane celou šířku. Plné mobilní menu je samostatný návrh. */
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; max-height: 40vh; border-right: 0; border-bottom: 1px solid var(--border); }
  .main { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
  .roles, .dd, .tiles { grid-template-columns: minmax(0, 1fr); }
  .main img, .main table, .main pre { max-width: 100%; }
  .main pre { overflow-x: auto; }
  .acrm-tabs, .table-wrap { overflow-x: auto; }
}

/* Ukázka je vložená přímo do stránky (ne iframe): picker na ni dosáhne, layout se chová jako zbytek
   stránky. Styl komponent je izolovaný přes @scope (.ds-ex) v /ds/example-css/*.css (AD 2. 9. 2026). */
.ds-ex { position: relative; padding: var(--sp-5); overflow: auto; color: var(--fg); font: 400 13px/1.5 var(--font-sans); }
.ds-ex::selection { background: transparent; }
/* Dok minimalizovaných oken patří do rámu ukázky, ne do rohu webu (UX-1) — balíček ukázek ho sem
   přestěhuje z <body> (ds-examples-build.mjs), tady ho rám drží. */
.ds-ex .acrm-dialog-dock { position: absolute; }
/* Počet lišt v doku visí na :root a kompaktní okno se o něj zvedá — v rámu bez doku není nad čím. */
.ds-ex .ds-stage:not(:has(.acrm-dialog-dock)), .ds-ex:not(:has(.acrm-dialog-dock)) { --acrm-dialog-dock-n: 0; }