/* Reakce - sjednoceny vstupni formular (jako hero na titulce) + levy bocni panel
 * s historii (drawer / rail, vzor Gemini). W3-D, mockup-vstup-sidebar.html.
 *
 * JEDEN zdroj pravdy vzhledu vstupu (audit B6): vstupni karta i dropzone jsou
 * definovane sem, entry.html uz nedrzi zadny duplikat techto stylu. House tokeny
 * (--accent/--ink/--muted/--line...) prichazeji z avalanche/_tokens.html.
 *
 * --accent-ink drzi K1 kontrast (primarni vypln #d35400 pumpkin pod bilym textem, AA-large);
 * v _tokens.html neni, doplnujeme lokalne jako fallback.
 */
:root { --accent-ink: #d35400; --accent-deep: #b34700; }

/* ===================== LAYOUT: panel + obsah ===================== */
/* Stranka reakce ma dva sloupce: bocni panel (historie) + obsah (formular/vysledek).
   .ab-shell drzi max-width a padding; layout ho zaporne odsazuje, aby panel sedel
   az k okraji ramce (jako v mockupu) a mel vlastni hairline hranu. */
/* #rkRoot stoji v DOM mezi .ab-shell a .rk-layout - jako obycejny block by
   prerusil retez vysky (rostl by s obsahem a .rk-main by nemel co scrollovat,
   pretek by orizl overflow:hidden na .ab-shell). Flex sloupec s min-height:0
   vyskove omezeni jen propousti dal. */
#rkRoot { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.rk-layout { display: flex; align-items: stretch; gap: 0;
  /* base_app_shell dava .ab-shell edge-to-edge (padding 0, bez max-width) a na
     desktopu zamyka vysku na viewport minus lista - layout ji jen vyplni.
     ZADNE zaporne marginy (drive kompenzovaly padding .ab-shell; po jeho
     zruseni posouvaly obsah pod navbar a sidebar za levy okraj). */
  flex: 1 1 auto;
  min-height: calc(100vh - var(--header-height, 60px));
  margin: 0; }
/* Obsah (formular, nadpis, progress karta) vertikalne vycentrovany
   (rozhodnuti majitele 2026-07-12). Auto-marginy misto justify-content:
   center - u obsahu vyssiho nez viewport se srazi na 0 a nic se neusekne
   (vysledkovy stav tak zustava normalne scrollovatelny odshora). */
.rk-main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  /* Scroll obsahu se deje TADY (viewport lock v base_app_shell vypnul scroll
     cele stranky) - sidebar/rail stoji, scrolluje jen sloupec s obsahem.
     Pod 992px base zamek uvolni a stranka scrolluje normalne (bez vyskoveho
     omezeni tu auto nic nemeni). */
  min-height: 0; overflow-y: auto; }

/* Obsah vycentrovany jako hero (mockup .content). Sirka 720px drzi vstup
   i vysledek. Drive se pri zapnutem srovnani prepinala trida .wide
   (~1080px) kvuli dvema sloupcum - dvousloupcovy rezim byl zrusen
   2026-07-28 (srovnani se zobrazuje POD reakci), takze se sirka uz nemeni. */
.rk-main-inner { max-width: 720px; width: 100%; margin: 0 auto;
  /* bocni padding VZDY - bez nej se obsah lepi na sidebar/okraj, jakmile je
     sloupec uzsi nez max-width */
  padding: 1.5rem 2rem 2rem;
  width: 100%; transition: max-width .25s ease; }
/* Vertikalni vycentrovani (hero) pro vstupni formular a PRECHODOVE stavy
   (zpracovani/chyba/paywall) - kratke karty maji stat v optickem stredu, ne
   viset nahore (rozsireni 2026-07-17; na verejne titulce to same resi #lp-root).
   U vygenerovane reakce (#rkStateResult) NEcentrovat - obsah zustava nahore,
   jinak nad nim visi prazdna mezera (rozhodnuti majitele 2026-07-12).
   Podminky:
   - aktivni je nektery z centrovanych stavu (u vysledku je aktivni jina sekce),
   - A NENI document_mode: v /avalanche/?document= JS reakce.js nebezi, takze
     #rkStateInput si drzi serverovou tridu .on i kdyz je videt vysledek
     dokumentu - proto rezim vyloucime pres #rkRoot[data-document-mode].
   margin-block:auto se u obsahu vyssiho nez viewport srazi na 0 - nic se
   neusekne, stav zustava normalne scrollovatelny odshora. */
#rkRoot:not([data-document-mode]) .rk-main:has(> .rk-main-inner > #rkStateInput.on) .rk-main-inner,
#rkRoot:not([data-document-mode]) .rk-main:has(> .rk-main-inner > #rkStateProc.on) .rk-main-inner,
#rkRoot:not([data-document-mode]) .rk-main:has(> .rk-main-inner > #rkStateError.on) .rk-main-inner,
#rkRoot:not([data-document-mode]) .rk-main:has(> .rk-main-inner > #rkStatePaywall.on) .rk-main-inner { margin-block: auto; }
/* .rk-main-inner.wide (siroky kontejner pro dvousloupcove srovnani) zrusen
   2026-07-28 - sirka stranky se pri zapnuti srovnani uz nemeni. */

/* ===================== BOCNI PANEL (drawer) ===================== */
.rk-sidebar { width: 280px; flex: none; background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-self: stretch;
  /* Plynule sbaleni/rozbaleni na desktopu (sirka 280<->0). overflow:hidden
     orizne obsah behem animace, aby se text nezalamoval. Transition se zapina
     az po nacteni (.rk-anim-ready), aby pocatecni stav neproblikl. */
  overflow: hidden; }
.rk-layout.rk-anim-ready .rk-sidebar {
  transition: width .26s cubic-bezier(.4, 0, .2, 1); }
/* Vnitrni sloupce necha flexbox roztahnout (align-items: stretch) presne na
   obsahovou sirku panelu - respektuje jeho padding, border-right, sve vlastni
   horizontalni marginy i scrollbar, takze z panelu NEPRETEKAJI (D1 - drive
   pevnych 280px + vlastni margin/padding delalo ~30px presah vpravo, obsah
   "vylezal" z panelu). Behem sbaleni je panel s overflow:hidden orizne.
   flex-shrink: 0 na svisle ose nechavame default; horizontalni sirku resi
   stretch, ne pevna hodnota. */
.rk-sidebar > * { width: auto; min-width: 0; box-sizing: border-box; }
/* Scrollbar seznamu si rezervuje misto predem, aby jeho vjezd/vyjezd nemenil
   sirku obsahu (jinak radky poskakuji a pri jeho zobrazeni obsah pretece). */
.rk-sb-scroll { scrollbar-gutter: stable; }
/* Respektuj systemove nastaveni "omezit pohyb" - zadne slide/prolinani. */
@media (prefers-reduced-motion: reduce) {
  .rk-layout .rk-sidebar, .rk-layout .rk-sb-backdrop { transition: none !important; }
}
.rk-sb-top { padding: .9rem .9rem .5rem; display: flex; align-items: center; gap: .5rem; }
.rk-sb-top .rk-sb-new { flex: 1; justify-content: center; }
.rk-sb-collapse { border: none; background: transparent; border-radius: 8px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted-2); flex: none; }
.rk-sb-collapse:hover { background: var(--line-soft); color: var(--ink); }

.rk-sb-search { margin: .2rem .9rem .45rem; display: flex; align-items: center; gap: .45rem;
  border: 1px solid var(--line); border-radius: 8px; padding: .4rem .6rem; }
.rk-sb-search i { color: var(--muted-2); font-size: .8rem; }
.rk-sb-search input { border: none; outline: none; background: transparent; font: inherit;
  font-size: .82rem; color: var(--ink); width: 100%; }
.rk-sb-search input::placeholder { color: var(--muted-2); }

.rk-sb-scroll { flex: 1; overflow-y: auto; padding-bottom: .5rem; }
.rk-sb-group { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted-2); padding: .8rem .95rem .25rem; }
.rk-sb-item { display: block; padding: .5rem .95rem; text-decoration: none; color: var(--ink);
  border-left: 2px solid transparent; }
.rk-sb-item:hover { background: var(--line-soft); }
.rk-sb-item.active { background: var(--accent-soft); border-left-color: var(--accent); }
.rk-sb-item .trow { display: flex; align-items: baseline; gap: .5rem; }
.rk-sb-item .ago { flex: none; margin-left: auto; font-size: .62rem; color: var(--muted-2); white-space: nowrap; }
.rk-sb-item .t { flex: 1; min-width: 0; font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: block; }
.rk-sb-item .rx { flex: none; font-family: var(--mono); font-size: .6rem; color: var(--muted-2);
  white-space: nowrap; }
.rk-sb-item .rx i { font-size: .58rem; }
.rk-sb-item .m, .rk-doc .m { font-size: .66rem; color: var(--muted); display: flex; gap: .4rem; align-items: center; margin-top: .1rem; }
.rk-sb-item .m .pill, .rk-doc .m .pill { font-size: .56rem; padding: .08rem .45rem; }
.rk-doc .m[hidden] { display: none; }
.rk-sb-empty { padding: 1.2rem .95rem; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.rk-sb-noresult { padding: 1rem .95rem; font-size: .76rem; color: var(--muted-2); display: none; }

.rk-sb-foot { margin-top: auto; border-top: 1px solid var(--line-soft); padding: .6rem .95rem; }
.rk-sb-foot a { font-size: .74rem; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.rk-sb-foot a:hover { color: var(--accent-ink); }
.rk-sb-foot a i { color: var(--muted-2); }

/* ===================== PREPINAC MODU DRAWERU (W5-A) ===================== */
/* Jen ikony (hodiny / slozka) + tooltipy; ukazuje se jen s 2+ projekty klienta
   (server-side, viz sidebar_shows_project_mode). */
.rk-sb-modes { display: flex; margin: .2rem .9rem .45rem; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; }
/* pod prepinacem nasleduje skupina (DNES...) s vlastnim hornim paddingem .6rem,
   proto je margin-bottom jen .1rem - jinak byla mezera dole 2x vetsi nez nahore */
.rk-sb-mode { flex: 1; border: none; background: #fff; font-size: .82rem;
  padding: .34rem .3rem; color: var(--muted); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; }
.rk-sb-mode:hover { background: var(--line-soft); }
.rk-sb-mode.on { background: var(--ink); color: #fff; }
.rk-sb-mode + .rk-sb-mode { border-left: 1px solid var(--line); }

.rk-sb-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rk-sb-view[hidden] { display: none; }

/* ===================== MOD PROJEKTY: akordeon (W5-A) ===================== */
.rk-proj { border-left: 2px solid transparent; }
.rk-proj-head { display: flex; align-items: center; gap: .55rem; padding: .5rem .95rem;
  cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--ink); }
.rk-proj-head:hover { background: var(--line-soft); }
.rk-proj-head .fold { color: var(--muted-2); font-size: .68rem; width: .8rem;
  flex: none; transition: transform .15s; }
.rk-proj.open > .rk-proj-head .fold { transform: rotate(90deg); }
.rk-proj-head .fldr { color: var(--muted); flex: none; }
.rk-proj-head .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-proj-head .cnt { flex: none; font-family: var(--mono); font-size: .62rem;
  color: var(--muted-2); font-weight: 600; }
.rk-proj-docs[hidden] { display: none; }
.rk-proj-docs .rk-sb-empty { padding: .5rem .95rem .6rem 2.35rem; font-size: .74rem; }
/* Kratky skeleton mezi anti-FOUC otevrenim projektu a dotazenim dokumentu
   AJAX-em (viz anti-FOUC script v _sidebar.html) - jinak by otevreny projekt
   na okamzik vypadal prazdny. */
.rk-doc-skeleton .t { display: inline-block; width: 70%; height: .7rem;
  border-radius: 4px; background: var(--line-soft);
  animation: rk-skeleton-pulse 1.1s ease-in-out infinite; }
@keyframes rk-skeleton-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* Sjednoceno s .rk-sb-item (casova osa) - stejny .trow layout (nazev + rx +
   stari napravo), zadna ikonka dokumentu ani odsazeni vlevo (rozhodnuti
   majitele 2026-07-15: "neni to file system", zbytecne zabirala misto). */
.rk-doc { display: block; padding: .4rem .95rem; text-decoration: none;
  color: var(--ink-2); border-left: 2px solid transparent; }
.rk-doc:hover { background: var(--line-soft); }
.rk-doc.active { background: var(--accent-soft); border-left-color: var(--accent); color: var(--ink); }
.rk-doc .trow { display: flex; align-items: baseline; gap: .5rem; }
.rk-doc .t { flex: 1; min-width: 0; font-size: .76rem; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rk-doc .ago { flex: none; margin-left: auto; font-size: .6rem; color: var(--muted-2); white-space: nowrap; }
.rk-doc .rx { flex: none; font-family: var(--mono); font-size: .58rem; color: var(--muted-2);
  white-space: nowrap; }
.rk-doc .rx:empty { display: none; }
.rk-doc .rx i { font-size: .56rem; }

.rk-proj-more { display: block; padding: .35rem .95rem .5rem .95rem; font-size: .7rem;
  color: var(--muted); text-decoration: none; }
.rk-proj-more:hover { color: var(--accent-ink); }
.rk-proj-more i { font-size: .6rem; margin-left: .25rem; }

/* ===================== W5-B: CRUD menu + "+" + drag&drop ===================== */
/* Kotva pro absolutni "..." menu a jeho dropdown. */
.rk-proj-head, .rk-doc, .rk-sb-item { position: relative; }

/* Tlacitko "..." - skryte, objevi se pri hoveru radku (nebo kdyz je menu otevrene). */
.rk-menu-btn { flex: none; border: none; background: transparent; cursor: pointer;
  color: var(--muted-2); font-size: .8rem; padding: .1rem .3rem; border-radius: 6px;
  opacity: 0; transition: opacity .12s, background .12s; margin-left: .1rem; }
.rk-proj-head:hover .rk-menu-btn,
.rk-doc:hover .rk-menu-btn,
.rk-sb-item:hover .rk-menu-btn { opacity: 1; }
.rk-menu-btn:hover { background: var(--line); color: var(--ink); }
/* Radek (timeline i folder) je display:block (.trow uvnitr nese flex) - menu
   button proto musi byt absolutni, jinak by spadl na novy radek a rozbil
   layout. Sjednoceno 2026-07-15 - drive mel .rk-doc jiny (flex) layout. */
.rk-sb-item .rk-menu-btn, .rk-doc .rk-menu-btn { position: absolute; top: .45rem; right: .7rem; margin: 0; }
/* Pri hoveru schovej "stari"/pocet reakci vpravo, at "..." nekoliduje. */
.rk-doc:hover .ago, .rk-sb-item:hover .ago,
.rk-doc:hover .rx, .rk-sb-item:hover .rx { opacity: .25; }

/* Dropdown menu (Prejmenovat / Smazat). */
.rk-menu { position: absolute; top: 100%; right: .5rem; z-index: 40; min-width: 148px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12); padding: .3rem; margin-top: .1rem; }
.rk-menu[hidden] { display: none; }
.rk-menu button { display: flex; align-items: center; gap: .5rem; width: 100%;
  border: none; background: transparent; cursor: pointer; text-align: left;
  padding: .4rem .55rem; border-radius: 7px; font-size: .76rem; font-weight: 600;
  color: var(--ink-2); }
.rk-menu button:hover { background: var(--line-soft); }
.rk-menu button i { font-size: .72rem; width: 1rem; color: var(--muted-2); }
.rk-menu button.danger { color: var(--danger, #dc2626); }
.rk-menu button.danger:hover { background: rgba(220,38,38,.08); }
.rk-menu button.danger i { color: var(--danger, #dc2626); }

/* "+" Novy projekt (dole pod seznamem projektu) - jen "+" vycentrovane. */
.rk-proj-add { display: flex; align-items: center; justify-content: center;
  width: calc(100% - 1.9rem); margin: .5rem .95rem; padding: .45rem .6rem;
  border: 1px dashed var(--line); background: transparent; border-radius: 9px;
  cursor: pointer; color: var(--muted); transition: all .12s; }
.rk-proj-add:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.rk-proj-add i { font-size: .85rem; }

/* Drag&drop stavy (SortableJs). */
.rk-doc[draggable="true"] { cursor: grab; }
.rk-doc-ghost { opacity: .4; background: var(--accent-soft); }
.rk-doc-drag { opacity: .9; }
/* Cilovy projekt zvyrazni drop zonu, kdyz se nad nim tahne. */
.rk-proj-docs.sortable-over { background: var(--accent-soft); border-radius: 8px; }

/* Modal: textovy input nazvu + chybova hlaska. */
.rk-name-input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 9px; font-size: .9rem; color: var(--ink); }
.rk-name-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rk-name-err { margin-top: .5rem; font-size: .78rem; color: var(--danger, #dc2626); }
.rk-name-err[hidden] { display: none; }
/* Varovani v mazacim modalu (cervene - destruktivni akce). */
.rk-del-warn { display: flex; gap: .5rem; align-items: center; padding: .6rem .7rem;
  background: var(--danger-soft, #fee2e2); border: 1px solid #fecaca; border-radius: 9px;
  font-size: .82rem; font-weight: 600; color: var(--danger, #dc2626); }
.rk-del-warn i { color: var(--danger, #dc2626); }

/* ===================== RAIL (zuzeny panel, vzor Gemini) ===================== */
/* Sirka (ne display) je animovatelna vlastnost - rail proto NENI display:none,
   ale width:0 + overflow:hidden, aby mohl plynule "vyjet" na 56px stejnym
   zpusobem, jakym sidebar plynule "zajizdi" na 0 (viz rk-rail-visible nize).
   padding je 0 v zavrenem stavu, aby pri sirce 0 nevytvarel viditelny okraj. */
.rk-rail { width: 0; flex: none; background: #fff; border-right: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; padding: .8rem 0; gap: .35rem;
  align-self: stretch; overflow: hidden; }
/* Pevna vnitrni sirka - stejny vzorec jako .rk-sidebar > * (min-width 280px):
   bez ni by ikony pri width:0 nesly stlacit na nulu, misto toho by se pri
   animaci deformovaly/zalamovaly. */
.rk-rail > * { flex-shrink: 0; }
.rk-rail .ric { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--muted); border: none; background: transparent; cursor: pointer; font-size: .95rem; }
.rk-rail .ric:hover { background: var(--line-soft); color: var(--ink); }
.rk-rail .ric.primary { background: var(--accent-soft); color: var(--accent-ink); }
.rk-rail .ric.primary:hover { background: var(--accent-soft); color: var(--accent-ink); }
/* D2 (variant A): ovladac rozbaleni je prvni (nahore) a oddeleny hairline od
   ostatnich ikon, aby citelne patril k prepinaci sirky (jako « v draweru), ne
   k akcim. Byvaly .rk-rail-spacer uz neni potreba (tlacitko neni dole). */
.rk-rail .rk-rail-expand { margin-bottom: .35rem; padding-bottom: 0; position: relative; }
.rk-rail .rk-rail-expand::after { content: ""; position: absolute; left: 50%; bottom: -.2rem;
  transform: translateX(-50%); width: 24px; height: 1px; background: var(--line); }
.rk-rail .ric:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sbaleny stav: panel se plynule stahne na sirku 0 (misto display:none, ktere
   nejde animovat). localStorage drzi stav mezi navstevami.
   Rail NESMI zacit vyjizdet hned s rk-collapsed - dokud sidebar jeste ma
   sirku > 0, obe sirky by chvili rostly/klesaly soucasne a obsah by pri
   kazdem zabaleni na okamzik "poskocil" (rozhodnuti majitele 2026-07-14:
   zabaleni ma byt jeden plynuly pulz - nejdriv zajede sidebar, pak teprve
   vyjede rail). Rail se proto ridi vlastni tridou rk-rail-visible, kterou
   prida az JS po dobehnuti width-transition sidebaru (viz reakce_sidebar.js
   setCollapsed/onSidebarWidthTransitionEnd). */
.rk-layout.rk-collapsed .rk-sidebar { width: 0; border-right-color: transparent; }
/* Rail "vyjizdi" stejnym zpusobem jako sidebar "zajizdi" - width transition,
   ne pouhy fade. rk-anim-ready gating je analogicke k sidebaru (viz nize):
   bez nej (prvni render pred pripojenim JS) se sirka nastavi OKAMZITE bez
   prechodu - to chceme jen pri nacteni stranky (anti-FOUC inline script v
   entry.html uz nastavil finalni tridy pred vykreslenim), zadna animace tam
   nepatri. Animovany prechod nastava jen kdyz uzivatel klikne (rk-anim-ready
   uz je nastavene z predchoziho behu JS). */
.rk-layout.rk-anim-ready .rk-rail {
  transition: width .22s cubic-bezier(.4, 0, .2, 1); }
.rk-layout.rk-rail-visible .rk-rail { width: 56px; border-right-color: var(--line); }

/* ===================== SJEDNOCENY VSTUPNI FORMULAR (hero look) ===================== */
.rk-hero-h { text-align: center; margin-bottom: 1.4rem; }
.rk-hero-h h1 { font-size: clamp(1.45rem, 4vw, 1.9rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; color: var(--ink); }
.rk-hero-h p { color: var(--muted); margin-top: .45rem; font-size: 1rem; }

/* Vstupni karta = stejny vizual jako hero .hi (mockup) */
.rk-inputcard { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md); overflow: hidden; padding: 0;
  transition: border-color .15s ease, box-shadow .15s ease; }
/* Diktovaci tlacitko (dictate.js) ma zustat fixne v pravem hornim rohu karty,
   nezavisle na tom, jestli je nad textem radek s prilohami (rk-att-row).
   dictate.js ho jinak absolutne pozicuje vuci .dictate-wrap (obal jen kolem
   textarey), takze pri prilozeni souboru klesalo dolu - tady ho ukotvime k
   cele karte. */
.rk-inputcard .dictate-wrap { position: static; }
.rk-inputcard .dictate-btn { top: 10px; right: 10px; }
/* Focus: oranzovy zvyrazneny (selected) border + jemna zar - stejne jako hero
   na titulce (border --accent + halo --accent-soft). :focus-within = karta
   sviti, kdyz je fokus na textarea uvnitr. */
.rk-inputcard:focus-within { border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md); }
.rk-inputcard textarea { width: 100%; border: none; outline: none; resize: none; font: inherit;
  font-size: .95rem; line-height: 1.6; padding: 1.1rem 1.2rem .4rem; min-height: 170px;
  color: var(--ink); background: transparent; }
.rk-inputcard textarea::placeholder { color: var(--muted-2); }
.rk-in-foot { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem .8rem; flex-wrap: wrap; }
.rk-in-foot .rk-hint { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }
.rk-in-foot .rk-hint i { color: var(--muted-2); }
.rk-in-foot .rk-go { margin-left: auto; }
/* Obal tlacitka Reagovat: je to flex dite .rk-in-foot, drzi zarovnani vpravo.
   Kdyz je tlacitko disabled (viz nize pointer-events:none), obal zachyti klik a
   spusti mini turu s napovedou -> proto cursor:help. */
/* cursor:help se projevi jen kdyz je tlacitko disabled (pointer-events:none ->
   kurzor rid obal). Aktivni tlacitko ma pointer-events:auto a vlastni kurzor. */
.rk-in-foot .rk-go-wrap { margin-left: auto; display: inline-flex; cursor: help; }
/* Submit = zelene brandove tlacitko Reagovat (sdileny .av-btn-reagovat z base
   sablony). Na vstupu neni pokryti dokumentu, tak barvu nastavujeme napevno na
   plnou brand zelenou (nespolehame na --doc-coverage prepocet). Mensi velikost
   do listy akci vedle "+" prilohy. Hover/lesk/tvar dedi ze sdileneho stylu. */
.rk-in-foot .av-btn-reagovat.rk-go { width: auto;
  font-size: 1rem; padding: .6rem 1.5rem; border-radius: 10px;
  background: hsl(120, 100%, 38%); }
/* Disabled (dokud neni text): vybledla zelena, ne syta seda. Bez hover lesku.
   pointer-events:none pusti klik na obal (#rkSubmitWrap), ktery spusti napovedu. */
.rk-in-foot .av-btn-reagovat.rk-go:disabled { cursor: help; pointer-events: none;
  background: hsl(120, 42%, 62%); box-shadow: none; transform: none; }
/* Prepinac anonymizace (V1). Default ON = udaje se nahrazuji zastupci; klik
   vypne (po potvrzeni waiver modalem). Vzhled: pill switch v house stylu. */
.rk-anon-switch { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  user-select: none; }
.rk-anon-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 8px; }
.rk-anon-track { width: 38px; height: 22px; border-radius: 999px; background: var(--accent);
  position: relative; flex: none; transition: background .18s ease; }
.rk-anon-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s ease; }
.rk-anon-switch.is-off .rk-anon-track { background: var(--muted-2); }
.rk-anon-switch.is-off .rk-anon-knob { transform: translateX(16px); }
.rk-anon-label { display: flex; flex-direction: column; line-height: 1.25; }
.rk-anon-state { font-size: .78rem; font-weight: 700; color: var(--ink); }
.rk-anon-switch.is-off .rk-anon-state { color: var(--warn-text); }
.rk-anon-sub { font-size: .68rem; color: var(--muted); }
.rk-gate { margin-left: auto; font-size: .85rem; color: var(--muted); }
.rk-gate a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }

/* Prilohy ve vstupni karte (vzor Gemini, 2026-07-15) - "+" tlacitko v liste,
   drag&drop na celou kartu, chipy s nahledem nad textem. Samostatna dropzone
   pod kartou zrusena. */
.rk-att-plus { border: 1px solid var(--line); background: #fff; border-radius: 10px;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; flex: none; font-size: .95rem;
  transition: border-color .15s, color .15s, background .15s; }
.rk-att-plus:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.rk-inputcard.dragover { border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md); }
.rk-att-row { display: flex; flex-wrap: wrap; gap: .6rem; padding: .9rem 1.2rem 0; }
.rk-att-row[hidden] { display: none; }
.rk-att-chip { position: relative; display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: 10px; padding: .35rem .6rem;
  background: var(--bg-card); max-width: 230px; }
.rk-att-chip .thumb { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: none; }
.rk-att-chip .ficon { width: 34px; height: 34px; border-radius: 7px; background: var(--line-soft);
  display: flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
.rk-att-chip .name { font-size: .72rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-att-remove { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px;
  border: none; border-radius: 50%; background: var(--ink); color: #fff; font-size: .6rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(15,23,42,.3); }
.rk-att-remove:hover { background: var(--accent-ink); }

/* Ukazatel zbyvajici kvoty (pill vedle nadpisu) */
.rk-quota { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700;
  color: var(--ok-text); background: var(--ok-soft); border-radius: 999px; padding: .22rem .7rem; margin-left: .4rem;
  vertical-align: middle; }
.rk-quota-row { margin-bottom: .6rem; }
.rk-quota-row .rk-quota { margin-left: 0; }
.rk-quota i { color: var(--ok); }

/* ===================== MOBIL ===================== */
@media (max-width: 760px) {
  /* Varianta A (vzor Gemini): na mobilu ZADNY rail - panel se otevira levym
     hamburgerem v horni liste (#navSidebarToggle) a jede jako overlay pres
     obsah. Obsah tak dostane celou sirku. */
  .rk-layout .rk-rail { display: none; }
  /* Panel je stale v DOM (display:flex), ale vysunuty mimo obrazovku
     (translateX(-100%)); .rk-mobile-open ho zasune -> plynula slide animace
     dovnitr i ven (vzor Gemini). display:none nejde animovat, proto transform. */
  .rk-layout .rk-sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0;
    width: 300px; max-width: 86vw; z-index: 1085; box-shadow: var(--shadow-md);
    transform: translateX(-100%); }
  /* Prechod z desktopu se sbalenym panelem: trida rk-collapsed ma vyssi
     specificitu (3 tridy) nez mobilni pravidla vyse - bez techto overrides
     zustal na mobilu videt rail a panel se oteviral se sirkou 0 (JS ji sice
     pri zmene MQ odebira, ale CSS nesmi na JS spolehat). */
  .rk-layout.rk-collapsed .rk-rail { display: none; }
  .rk-layout.rk-collapsed .rk-sidebar { width: 300px; border-right-color: var(--line); }
  .rk-layout.rk-anim-ready .rk-sidebar {
    transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
  .rk-layout.rk-mobile-open .rk-sidebar { transform: translateX(0); }
  /* Backdrop je take stale v DOM, jen se prolina (opacity), aby slo animovat
     zavreni. pointer-events vypnuty, dokud neni panel otevreny. */
  .rk-sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.35);
    z-index: 1084; opacity: 0; pointer-events: none; }
  .rk-layout.rk-anim-ready .rk-sb-backdrop { transition: opacity .28s ease; }
  .rk-layout.rk-mobile-open .rk-sb-backdrop { opacity: 1; pointer-events: auto; }
  .rk-main-inner { padding: 1rem .9rem 2rem; } /* mobil: uzsi bocni odsazeni */
  /* iOS: inputy 16px (jinak zoom pri focusu), touch targety 44px */
  .rk-inputcard textarea { font-size: 16px; }
  .rk-in-foot .rk-go { min-height: 44px; }
  .rk-att-plus { width: 44px; height: 44px; }
  .rk-sb-item { padding: .7rem .95rem; }
  /* hint text pod sebe, ne vedle */
  .rk-in-foot .rk-hint { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .rk-hint-text { display: flex; align-items: center; gap: .35rem; }
  /* Mobil: prepinac anonymizace se nevejde vedle "+" a "Reagovat" (text se
     zmackne/orizne). Zalomime ho na VLASTNI radek POD tlacitka, ale porad
     UVNITR karty. "+" a "Reagovat" zustavaji v hornim radku (Reagovat vpravo
     pres margin-left:auto). Prepinac je v DOM mezi nimi, proto ho vizualne
     posuneme na konec pres order a dame mu celou sirku (flex-basis:100%). */
  .rk-in-foot { flex-wrap: wrap; }
  .rk-anon-switch { order: 3; flex: 1 0 100%; min-width: 0; margin-top: .2rem; }
  /* text prepinace se smi zalomit na vic radku a nesmi pretect kartu */
  .rk-anon-label { min-width: 0; }
  .rk-anon-state, .rk-anon-sub { white-space: normal; overflow-wrap: anywhere; }
  .rk-att-plus { order: 1; }
  .rk-in-foot .rk-go-wrap { order: 2; flex: none; }
}