*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#0a0b0d;
  --ink-2:#101216;
  --ink-3:#171a1f;
  --ink-4:#1d2127;
  --line:#252a31;
  --line-2:#333944;
  --text:#e9e5dd;
  --text-dim:#9aa1ab;
  --text-faint:#6a717c;
  --gold:#c9a227;
  /* Sekce Path of Exile 2 — karmín z palety oficiálního loga PoE 2.
     Vlastní tokeny, ne přebarvený `--gold`: kdyby se zlatá v sekci jen
     přepsala, změnilo by to KAŽDÉ zlaté místo webu, které v ní jednou
     přibude, aniž by o tom kdo věděl. Takhle je karmín tam, kde ho
     někdo vědomě napsal, a `.sec-poe1` zůstává beze změny.

     Deklarace jsou na `:root` (tokeny musí existovat všude, aby se daly
     použít), ale POUŽITÍ je bez výjimky scopované pod `.sec-poe2` —
     hlídá to tools/routing-tests/run.php.

     --poe2-pale je táž hodnota jako --text; je tu vlastním jménem,
     protože popisuje popředí na karmínové ploše, ne text stránky. */
  --poe2:#c65a50;
  --poe2-line:#b84a42;
  --poe2-deep:#671616;
  --poe2-pale:#e9e5dd;
  /* Karmín pro MALÝ TEXT. `--poe2` na tmavém podkladu vychází 4,67:1
     na `--ink` a jen **4,36:1** na gradientu mastheadu (#12141a) —
     tedy pod hranicí 4,5:1, kterou WCAG AA žádá po běžně velkém textu.
     Report ze zakládající fáze tvrdil, že 4,4:1 projde; neprojde.

     Tohle NENÍ nová barva palety, je to světlejší odstín téhož akcentu
     pro jedinou roli: text pod 18,66 px. Změřeno 5,18:1 na mastheadu
     a 5,55:1 na `--ink`. `--poe2` zůstává na rámečky, ohnisko a plochy,
     kde platí jen 3:1 pro netextové prvky. */
  --poe2-text:#d06a60;
  --r:#c8484a;
  --g:#5fa055;
  --b:#4a72c4;
  --w:#d8d4cb;
  --danger:#c2503f;
  --ok:#5c9e6a;
  --radius:3px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter","Segoe UI",system-ui,sans-serif;
}

html,body{margin:0;padding:0;height:100%}
/* Scrollbary bere celý web z jednoho místa: `scrollbar-color` se dědí, takže
   jedna deklarace na `html` obarví viewport, `.scroller`, seznamy gemů,
   beastů, implicitů i modů, `.out-code`, modaly, `.tbl-wrap` i textarey na
   vloženou mapu. Palec je `--line-2`, tedy táž barva jako rámečky karet;
   dráha je průhledná schválně — kontejnery mají různá pozadí (--ink, --ink-2
   i --ink-3) a jedna pevná barva by na některých svítila. Šířka zůstává
   systémová: `thin` by zúžením scrollbaru rozšířilo obsah `.scroller` o pár
   pixelů a rozešly by se změřené šířky karet a tabulek. `.prof-list` si
   scrollbar na mobilu dál schovává sám, dědí se jen barva. */
html{scrollbar-color:var(--line-2) transparent}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--sans);font-size:17.5px;line-height:1.52;
  -webkit-font-smoothing:antialiased;
}
#root{display:flex;flex-direction:column;height:100vh;min-height:0}

/* masthead */
.masthead{flex:0 0 auto;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#12141a,#0a0b0d)}
.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 18px}
.wordmark{display:flex;flex-direction:column;justify-content:center;gap:1px}
/* margin:0 a font:inherit ruší výchozí styl h1 (margin .67em, 2em, bold).
   Bez nich by nadpis rozhodil výšku mastheadu a .wordmark-text span by
   zezlátl tučně — potomci si velikost i váhu nastavují sami níž. */
.wordmark-text{margin:0;font:inherit}
/* Wordmark je odkaz na rozcestník, takže zarovnání drží <a> uvnitř h1.
   Barvy si b a span nastavují samy níž — dědí se do nich přes color:inherit. */
.wordmark-link{display:flex;align-items:baseline;gap:6px;color:inherit;text-decoration:none}
.wordmark-link:hover b{color:var(--gold)}
.wordmark-sub{margin:0;font-size:11.5px;line-height:1.2;color:var(--text-faint);white-space:nowrap}
/* pod 900 px se vedle záložek nevejde — wordmark web identifikuje sám */
@media (max-width:900px){.wordmark-sub{display:none}}
.wordmark-text b{font-size:19px;font-weight:600;letter-spacing:.14em}
.wordmark-text span{font-size:13px;color:var(--gold);text-transform:uppercase;letter-spacing:.22em}
.mast-meta{display:flex;gap:8px}

.ghost-btn{
  background:none;border:1px solid var(--line);color:var(--text-dim);
  font:inherit;font-size:15px;padding:9px 17px;border-radius:var(--radius);
  cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s;
}
.ghost-btn:hover{border-color:var(--line-2);color:var(--text)}
/* `a` je ve výčtu od rozcestníku: záložky, wordmark i dlaždice jsou
   odkazy, takže bez něj by je klávesnice procházela beze stopy. */
button:focus-visible,input:focus-visible,a:focus-visible,.out-code:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* Text jen pro odečítač obrazovky. `display:none` by ho schoval i před ním,
   proto výřez o nulové ploše. Používá ho chip vybraného modu: na obrazovce
   je zkrácený na první řádek, do přístupného jména jde celý. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* layout */
.scroller{flex:1 1 auto;overflow-y:auto;min-height:0}
.grid{
  display:grid;gap:12px;padding:14px 18px 18px;
  /* min() drží minimum pod šířkou stopy — bez něj se sloupec odmítne zúžit
     pod 336 px a pod 382px displejem obsah vodorovně přeteče */
  grid-template-columns:repeat(auto-fit,minmax(min(336px,100%),1fr));
  align-items:start;max-width:1500px;margin:0 auto;
}
/* the four option cards keep their reading order in one row */
.top-cards{
  grid-column:1/-1;
  display:grid;gap:12px;
  /* min() drží minimum pod šířkou stopy — bez něj se sloupec odmítne zúžit
     pod 336 px a pod 382px displejem obsah vodorovně přeteče */
  grid-template-columns:repeat(auto-fit,minmax(min(336px,100%),1fr));
  align-items:start;
}
/* Vendor: tři karty (Typ zbraně a 2-linky / Linky / Affixy) mají různě
   dlouhý obsah, takže se `start` shora drželo u každé zvlášť a spodní
   hrany se rozcházely — schod nad kartou Gemy pod nimi. `stretch`
   dorovná všechny na výšku nejvyšší karty v řádku; obsah zůstává nahoře,
   protože `.card` je normální blokový element bez svislého centrování,
   jen se dole přidá prázdné místo v rámci paddingu karty.

   Scopováno na `#view-regex`, ne globálně na `.top-cards` — tu sdílí
   i Mercenary (dvojice karet, `.gemxp .top-cards`) a Recombinator má
   vlastní `stretch` řešení s flex zónou níž; globální změna by potichu
   přepsala jejich layout. Bez media query: `auto-fit` samo sesype karty
   do jednoho sloupce, jakmile se nevejdou vedle sebe, a tam je každá
   karta jediná ve svém řádku — `stretch` pak nemá s čím dorovnávat
   a žádnou výšku nevynucuje. */
#view-regex .top-cards{align-items:stretch}
.card{
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:4px;padding:15px 16px 16px;
}
/* Položky gridu mají min-width:auto, takže se sloupec nezúží pod min-content
   karty. Vnitřní šířku inputu (~170 px) by pak grid protlačil ven a pod 382 px
   by obsah vodorovně přetékal. Přetečení je uvnitř .scroller, takže ho
   body.scrollWidth neukáže. */
.grid > .card{min-width:0}

/* consistent vertical rhythm inside every card:
   one spacing value between blocks, nothing stretched */
.card > * + *{margin-top:14px}
.card > .card-title + *{margin-top:0}
/* a heading sits close to the group it labels */
.card > .sub + *{margin-top:8px}
/* explanatory note belongs to the control above it */
.card > .chips + .note{margin-top:8px}
/* note followed by its control stays tight */
.card > .note + .chips{margin-top:8px}
/* consecutive socket rows read as one group */
.card > .sockrow + .sockrow{margin-top:7px}
/* the divider carries its own breathing room */
.card > .divider{margin-top:16px}
.card > .divider + *{margin-top:16px}
.card > *:last-child{margin-bottom:0}
.card-wide{grid-column:1/-1}
.card-title{
  margin:0 0 14px;font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;color:var(--gold);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.sub{
  margin:0;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;color:var(--text-faint);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.divider{height:1px;background:var(--line);margin:0}
.note{margin:0;font-size:14.5px;color:var(--text-faint);line-height:1.45}
.note.warn{color:#a4823a}

/* Atribut `hidden` je jen `display:none` z prohlížečové šablony, takže ho
   přebije jakékoli pravidlo s třídou, které si `display` nastaví samo — a to
   dělá `.seg`, `.frow`, `.sub`, `.gem-search`, `.gem-list` i `.gem-controls`.
   Prvek pak zůstane vidět, i když ho JS „schová": měřeno na 320 px, sbalený
   seznam buildů si dál držel svých 224 px. Web to dosud řešil případ od
   případu (`.modal[hidden]`, `.picked-gems[hidden]`, `.clear-q[hidden]`…),
   tohle je totéž pro zbylé komponenty. Prázdný `.seg` navíc kreslil rámeček
   i bez tlačítek — přepínač varianty u buildu bez druhé varianty. */
.seg[hidden],.frow[hidden],.sub[hidden],
.gem-search[hidden],.gem-list[hidden],.gem-controls[hidden],
.rc-mwrap[hidden]{display:none}

/* socket rows */
.sockrow{display:flex;align-items:center;gap:11px}
.sock-lbl{
  flex:0 0 124px;font-size:14.5px;color:var(--text-faint);
  line-height:1.3;
}
.sock-set{display:flex;gap:5px;flex-wrap:wrap}
.sock{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 12px;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.sock:hover{border-color:var(--line-2);background:var(--ink-4)}
.sock.is-on{border-color:var(--gold);background:#221d10}
.sock.wide{padding:10px 14px}

.s{
  width:13px;height:13px;border-radius:50%;display:block;
  border:1px solid rgba(0,0,0,.5);
}
.s.r{background:var(--r)}
.s.g{background:var(--g)}
.s.b{background:var(--b)}
.s.a{background:transparent;border:1px dashed var(--text-faint)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.chip-btn{
  background:var(--ink-3);border:1px solid var(--line);color:var(--text-dim);
  font:inherit;font-size:15px;padding:10px 15px;border-radius:var(--radius);
  cursor:pointer;transition:border-color .12s,background .12s,color .12s;
  white-space:nowrap;
}
.chip-btn:hover{border-color:var(--line-2);color:var(--text)}
.chip-btn.is-on{border-color:var(--gold);background:#221d10;color:var(--gold)}
/* damage-type colours, matching how the game presents each element */
.chip-btn.gem-fire.is-on{border-color:#c2452f;background:#231110;color:#e8836d}
.chip-btn.gem-cold.is-on{border-color:#7fc4e8;background:#111c22;color:#a8dcf5}
.chip-btn.gem-light.is-on{border-color:#d6c33a;background:#221f10;color:#ecdc72}
.chip-btn.gem-chaos.is-on{border-color:#9a52c4;background:#1c1224;color:#c894e8}
.chip-btn.gem-phys.is-on{border-color:#9a6b3f;background:#1f1610;color:#c99c6b}

/* mini toggle */
.mini-toggle{
  width:40px;height:22px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--ink-3);position:relative;cursor:pointer;padding:0;flex:0 0 auto;
  transition:background .14s,border-color .14s;
}
.mini-toggle .knob{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--text-faint);transition:transform .14s,background .14s;
}
.mini-toggle[aria-checked="true"]{background:#221d10;border-color:var(--gold)}
.mini-toggle[aria-checked="true"] .knob{transform:translateX(18px);background:var(--gold)}

/* gems */
.gem-controls{display:flex;gap:9px;flex-wrap:wrap}
.gem-search{
  flex:1 1 200px;display:flex;align-items:center;gap:7px;
  background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 14px;color:var(--text-faint);
}
.gem-search input{
  flex:1;background:none;border:none;color:var(--text);
  font:inherit;font-size:16px;outline:none;min-width:0;
}
.gem-search input::placeholder{color:var(--text-faint)}
.seg{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;flex:0 0 auto}
.seg-btn{
  background:var(--ink-3);border:none;color:var(--text-dim);
  font:inherit;font-size:15px;padding:10px 17px;cursor:pointer;
  border-right:1px solid var(--line);
}
.seg-btn:last-child{border-right:none}
.seg-btn:hover{color:var(--text)}
.seg-btn.is-on{background:var(--gold);color:#1a1508;font-weight:600}

.gem-count{font-size:14.5px;color:var(--text-faint);font-weight:400;letter-spacing:.04em;text-transform:none}

.gem-list{
  display:grid;gap:4px;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  max-height:340px;overflow-y:auto;padding-right:3px;
}
.gem{
  display:flex;align-items:center;gap:7px;
  background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 12px;cursor:pointer;
  font-size:15px;color:var(--text-dim);text-align:left;
  font-family:inherit;transition:border-color .1s,background .1s,color .1s;
  min-width:0;
}
.gem:hover{border-color:var(--line-2);color:var(--text)}
.gem.is-on{border-color:var(--gold);background:#221d10;color:var(--text)}
.gem .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.5)}
.gem .dot.r{background:var(--r)}
.gem .dot.g{background:var(--g)}
.gem .dot.b{background:var(--b)}
.gem .dot.w{background:var(--w)}
.gem .gname{
  flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gem .sup{
  font-size:11px;color:var(--text-faint);text-transform:uppercase;
  letter-spacing:.1em;flex:0 0 auto;
}
.gem-empty{
  grid-column:1/-1;text-align:center;padding:26px;
  font-size:14.5px;color:var(--text-faint);
}
/* Odděluje "viděné u tohoto skillu" od zbytku v Mercenary pickeru — jen
   pořadí, ne filtr, takže obě skupiny zůstávají v témž `.gem-list`. */
.gem-sep{
  grid-column:1/-1;font-size:11px;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;
  padding:7px 2px 3px;margin-top:2px;border-top:1px solid var(--line);
}
mark{background:rgba(201,162,39,.26);color:inherit;border-radius:2px;padding:0 1px}

/* Desecration picker (PoE 2 Fracturing) — pětice voleb (Bez Desecration
   + čtyři Preserved bones), každá s jménem, krátkým popisem a cenou.
   Multi-line obsah, proto vlastní komponenta místo jednořádkových
   `.chip-btn`/`.seg-btn`. `role="radiogroup"`/`role="radio"` dělá z pětice
   vzájemně vylučující se výběr — přesně jeden je vždycky `.is-on`. */
.desec-picker{
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.desec-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;cursor:pointer;text-align:left;font:inherit;width:100%;
  transition:border-color .12s,background .12s;
}
.desec-opt:hover{border-color:var(--line-2)}
.desec-opt.is-on{border-color:var(--gold);background:#221d10}
.desec-opt .note{font-size:12px}
/* `.desec-head` je jen vodorovné zarovnání ikony + jména na jednom
   řádku uvnitř téhož svislého tlačítka — přidáno kvůli ikonám
   (Preserved bones, 23. 9. 2026), rozměr a pořadí zbytku `.desec-opt`
   (tag, cena) se nemění. Bez ikony (volba "Bez Desecration") zůstává
   `<img>` prázdný a `.desec-head` nese jen jméno stejně jako dřív. */
.desec-head{display:flex;align-items:center;gap:8px}
.desec-ico{width:22px;height:22px;flex:0 0 auto;box-sizing:border-box;padding:2px;background:var(--ink-4);border-radius:50%}
.desec-name{font-size:14.5px;font-weight:600;color:var(--text)}
.desec-opt.is-on .desec-name{color:var(--gold)}
.desec-price{font-family:var(--mono);font-size:14px;color:var(--text)}

/* output */
/* sits directly under the masthead: the separating rule and the gradient
   both run downward now that the bar is at the top */
.output{flex:0 0 auto;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#12141a,#0a0b0d)}
.out-inner{padding:11px 18px 12px;max-width:1500px;margin:0 auto}
.out-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:7px}
.out-label{font-size:12.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-faint);font-weight:600}
.meter{display:flex;align-items:center;gap:8px}
.meter-track{width:150px;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.meter-fill{height:100%;width:0;background:var(--ok);transition:width .16s ease,background .16s ease}
.meter-fill.warn{background:#e07b28}
.meter-fill.over{background:var(--danger)}
.meter-num{font-family:var(--mono);font-size:13.5px;color:var(--text-faint);min-width:80px;text-align:right}
.meter-num.warn{color:#e07b28}
.meter-num.over{color:var(--danger)}

.out-body{display:flex;gap:9px;align-items:stretch}
/* Výška je pevná, ne jen omezená shora. Regex se s délkou výběru přelévá mezi
   jedním, dvěma a u plných 250 znaků třemi řádky, a všechno pod výstupem tím
   poskakovalo při každém kliknutí. Rezerva na dva řádky nestačí — 249 znaků
   se na běžné šířce zalomí na tři. Delší obsah scrolluje uvnitř. */
.out-code{
  flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:15px;line-height:1.5;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;color:var(--text);word-break:break-all;
  min-height:90px;max-height:90px;overflow-y:auto;
}
.out-code.is-empty{color:var(--text-faint);font-family:var(--sans)}
.out-code.is-warn{border-color:#e07b28}
.out-code.is-over{border-color:var(--danger)}
.copy-btn{
  flex:0 0 auto;background:var(--gold);color:#1a1508;border:none;
  border-radius:var(--radius);font:inherit;font-size:16px;font-weight:600;
  padding:0 30px;cursor:pointer;transition:background .12s,opacity .12s;
}
.copy-btn:hover:not(:disabled){background:#dbb42e}
.copy-btn:disabled{opacity:.3;cursor:default}
.copy-btn.done{background:var(--ok);color:#0c1a0f}
.out-warn{margin:9px 0 0;font-size:14px;color:var(--danger)}
/* Vysvětlivka pod výstupem — sekundární, ne varování: barvu má faint,
   ne danger, ať se nepřetahuje s .out-warn o pozornost. */
.out-hint{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--text-faint)}

/* modal */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-card{
  background:var(--ink-2);border:1px solid var(--line-2);border-radius:4px;
  padding:22px 24px;max-width:520px;width:100%;max-height:82vh;overflow-y:auto;
}
.modal-card h2{margin:0 0 13px;font-size:21px;font-weight:600}
.modal-card h3{margin:18px 0 6px;font-size:13.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
/* Druhá úroveň nadpisů má jen nápověda Map — je dost dlouhá na to, aby se
   dělila na tři části, a bez ní by se ty tři utopily mezi tématy. Odlišuje
   se váhou a barvou, ne velikostí: verzálky patří té úrovni nad ní. */
.modal-card h4{margin:14px 0 4px;font-size:15px;font-weight:600;color:var(--text)}
.modal-card h3 + h4{margin-top:8px}
.modal-card p{margin:0 0 10px;font-size:16px;color:var(--text-dim);line-height:1.6}
.solid-btn{
  margin-top:18px;width:100%;background:var(--gold);color:#1a1508;border:none;
  border-radius:var(--radius);font:inherit;font-size:16px;font-weight:600;
  padding:12px;cursor:pointer;
}
.solid-btn:hover{background:#dbb42e}

/* ---------- output bar buttons ---------- */
.out-reset{flex:0 0 auto;align-self:stretch;padding:0 18px;font-size:15px}
.out-reset:hover{border-color:var(--danger);color:#d9776a}
/* Trade odkaz v output boxu je <a>, ne <button>: musí si vzít svislé
   vystředění (button ho dělá sám) a zrušit podtržení — stejná lekce jako
   .solid-btn na 404. Hover zlatě, ne červeně: otevírá, nic neruší. */
.out-trade{
  flex:0 0 auto;align-self:stretch;padding:0 18px;font-size:15px;
  display:inline-flex;align-items:center;text-decoration:none;
}
.out-trade:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- gem card ---------- */
.gem-head-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ghost-btn.tiny{font-size:13px;padding:5px 11px;letter-spacing:0;text-transform:none;font-weight:400}

.picked-gems{
  display:flex;flex-wrap:wrap;gap:6px;padding:10px 11px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);
}
.picked-gems[hidden]{display:none}
.pg{
  display:inline-flex;align-items:center;gap:7px;
  background:#221d10;border:1px solid var(--gold);color:var(--text);
  border-radius:var(--radius);padding:6px 9px;font:inherit;font-size:14px;
  cursor:pointer;transition:border-color .12s,background .12s;
}
.pg:hover{background:#2b2413;border-color:#e0b93a}
.pg .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.5)}
.pg .dot.r{background:var(--r)}
.pg .dot.g{background:var(--g)}
.pg .dot.b{background:var(--b)}
.pg .dot.w{background:var(--w)}
.pg .x{color:var(--text-faint);font-size:17px;line-height:1;margin-left:1px}
.pg:hover .x{color:var(--danger)}

.clear-q{
  flex:0 0 auto;background:none;border:1px solid var(--line-2);
  color:var(--text-faint);font:inherit;font-size:13px;
  padding:4px 10px;border-radius:var(--radius);cursor:pointer;
  transition:border-color .12s,color .12s;
}
.clear-q:hover{border-color:var(--line-2);color:var(--text)}
.clear-q[hidden]{display:none}

/* the help button carries a long and a short label */
.lbl-short{display:none}

/* ---------- site footer ---------- */
.site-foot{
  max-width:1500px;margin:0 auto;padding:14px 18px 22px;text-align:center;
}
.site-foot p{
  margin:0 auto;font-size:12.5px;line-height:1.6;color:var(--text-faint);max-width:640px;
}
.site-foot a{color:var(--text-dim);text-decoration:none;border-bottom:1px solid var(--line-2)}
.site-foot a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* branding — jméno jednou, pak řádek ikon; název kanálu nese title/aria-label */
.foot-me{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:2px 10px;margin:0 0 6px;
}
.foot-name{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
}
/* wrap je pojistka: na 320 px zbývá řádku jen ~13 px a jiný fallback fontu než
   Segoe UI to sní — pak radši ať tlačítko spadne pod ikony, než aby přeteklo */
.socials{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 2px}
/* .site-foot a dává odkazům podtržení — u ikon ho přebíjíme, proto ta scope */
.site-foot .social{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--radius);border-bottom:0;
  color:var(--text-faint);transition:color .12s,background-color .12s;
}
.site-foot .social svg{display:block;width:19px;height:19px;fill:currentColor}
.site-foot .social:hover,.site-foot .social:focus-visible{background:var(--ink-3)}
/* v hoveru barvy platforem — jinak by se všechny tři slily do zlaté */
.site-foot .s-yt:hover,.site-foot .s-yt:focus-visible{color:#ff3b30}
.site-foot .s-tw:hover,.site-foot .s-tw:focus-visible{color:#9146ff}
.site-foot .s-ki:hover,.site-foot .s-ki:focus-visible{color:#53fc18}

/* Discord má popisek, protože se po něm něco chce — u ostatních jde jen o
   „tady mě najdeš". Logo drží blurple i v klidu, ať je značka poznat bez hoveru
   (na dotyku se hover stejně nezobrazí a title se neukáže vůbec). */
.site-foot .social-cta{
  display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;margin-left:4px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text-dim);font-size:12px;white-space:nowrap;
  transition:border-color .12s,color .12s,background-color .12s;
}
.site-foot .social-cta svg{flex:0 0 auto;display:block;width:17px;height:17px;fill:#5865f2}
.site-foot .social-cta:hover,.site-foot .social-cta:focus-visible{
  border-color:#5865f2;color:var(--text);background:rgba(88,101,242,.11);
}

/* Ko-fi stojí na vlastním řádku, ne v .socials — je to dobrovolná podpora, ne
   kanál, a vedle Discordu by se četl jako druhé rovnocenné CTA. Menší a bez
   barvy v klidu, aby byl o stupeň tišší než on. */
/* .site-foot p výš nastavuje margin:0 auto, a to je (0,1,1) — jednotřídová
   .foot-support by na to nestačila a mezera pod tlačítkem by tiše zmizela */
.site-foot .foot-support{margin:0 0 8px}
.site-foot .kofi-btn{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text-faint);font-size:11.5px;white-space:nowrap;
  transition:border-color .12s,color .12s,background-color .12s;
}
.site-foot .kofi-btn svg{flex:0 0 auto;display:block;width:15px;height:15px;fill:currentColor}
.site-foot .kofi-btn:hover,.site-foot .kofi-btn:focus-visible{
  border-color:#72a4f2;color:#a8c6f7;background:rgba(114,164,242,.10);
}

/* ---------- saved profiles ---------- */
.profiles{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
}
.prof-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--gold);font-weight:600;flex:0 0 auto;
  border:1px solid rgba(201,162,39,.4);border-radius:var(--radius);
  padding:4px 9px;line-height:1.1;
}
.prof-list{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0;
}
.prof-list:empty{display:none}
.prof-empty{
  flex:1 1 auto;font-size:12.5px;color:var(--text-faint);
}
.prof-empty[hidden]{display:none}
.prof-btns{display:flex;gap:6px;flex:0 0 auto}
.prof-save,.prof-new{font-size:13px;padding:6px 12px}
/* Import / export je záložní krok, ne běžná práce — v Mapách je proto
   tišší než uložit a načíst. Odsazení zůstává stejné jako u sousedů, ať se
   nezmenší plocha na klik; ustupuje jen barva. Scoped na #mapsOut schválně:
   .prof-xfer sdílí Vendor i Bestiary a těch se to netýká. */
#mapsOut .prof-xfer{font-size:13px;padding:6px 12px;border-color:transparent;color:var(--text-faint)}
#mapsOut .prof-xfer:hover{border-color:var(--line);color:var(--text-dim)}
.prof-new[hidden]{display:none}
.prof-save.done{border-color:var(--ok);color:var(--ok)}

.prof{
  display:inline-flex;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--ink-3);
}
.prof-open{
  background:none;border:none;color:var(--text-dim);
  font:inherit;font-size:13px;padding:5px 10px;cursor:pointer;
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .12s,background .12s;
}
.prof-open:hover{color:var(--text);background:var(--ink-4)}
.prof.is-active{border-color:var(--gold);background:#221d10}
.prof.is-active .prof-open{color:var(--gold)}
.prof-del{
  background:none;border:none;border-left:1px solid var(--line);
  color:var(--text-faint);font:inherit;font-size:15px;line-height:1;
  padding:0 8px;cursor:pointer;transition:color .12s,background .12s;
}
.prof-del:hover{color:var(--danger);background:rgba(194,80,63,.12)}

/* naming dialog */
.modal-narrow{max-width:400px}
.name-input{
  width:100%;margin-top:6px;background:var(--ink-3);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:10px 12px;font:inherit;font-size:15px;
}
.name-input::placeholder{color:var(--text-faint)}
.name-err{margin:8px 0 0;font-size:13px;color:var(--danger)}
.name-err[hidden]{display:none}
.name-err.ok{color:var(--ok)}

/* ---------- Profily webu (assets/site-profiles.js) ----------
   Vlastní modal na KAŽDÉ adrese webu, PoE 1 i PoE 2 — proto je
   STRUKTURA (layout, rozestupy, velikosti) tady BEZ `.sec-poe1`/
   `.sec-poe2` scope, stejná pro obě sekce. Sdílí `.modal`/`.modal-card`
   se zbytkem webu, jen je širší (`.wp-card`), ať se do řádku vejde
   jméno i pět ovládacích tlačítek. **Barvy jsou jiná otázka** — čtyři
   místa tu byla do 11. 9. 2026 natvrdo zlatá (`.wp-row.is-active`,
   `.wp-row.is-active .wp-row-main`, `.wp-badge`, `.wp-cross-tab`) a
   svítila zlatě i v karmínové sekci PoE 2; `.sec-poe2` přepis pro ně
   je u bloku sdílených komponent PoE 2 níž (u `.prof.is-active`, jeho
   nejbližšího analogu), ne tady — ať se to nerozejde s ostatními
   přebarveními, která taky žijí v tom bloku. */
.wp-card{max-width:640px}
.wp-status{margin:0 0 10px;font-size:13.5px;color:var(--text-dim)}
.wp-status[hidden]{display:none}
.wp-status.is-ok{color:var(--ok)}
.wp-status.is-err{color:var(--danger)}
.wp-cross-tab{
  margin:0 0 10px;padding:8px 11px;font-size:13.5px;color:var(--text);
  background:#221d10;border:1px solid rgba(201,162,39,.4);border-radius:var(--radius);
}
.wp-cross-tab[hidden]{display:none}
.wp-unavailable{margin:0 0 10px;font-size:14px;color:var(--text-dim)}
.wp-unavailable[hidden]{display:none}

.wp-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.wp-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-3);
  padding:6px 8px;
}
.wp-row.is-active{border-color:var(--gold);background:#221d10}
.wp-row-main{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;
  background:none;border:none;color:var(--text-dim);font:inherit;font-size:15px;
  text-align:left;padding:8px 6px;cursor:pointer;border-radius:var(--radius);
}
.wp-row-main:hover{color:var(--text);background:var(--ink-4)}
.wp-row.is-active .wp-row-main{color:var(--gold);cursor:default}
.wp-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wp-badge{
  flex:0 0 auto;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--gold);border:1px solid rgba(201,162,39,.4);border-radius:var(--radius);
  padding:2px 6px;line-height:1.3;
}
.wp-row-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
/* Obě šipky mají 44px dotykový cíl i vypnuté a zabírají místo dál — ať
   se řádky mezi sebou nemění výškou/šířkou podle pozice v seznamu
   (první/poslední/prostřední), stejné pravidlo jako u chipů jinde na webu. */
.wp-icon-btn{
  min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);color:var(--text-dim);
  border-radius:var(--radius);font:inherit;font-size:15px;cursor:pointer;
}
.wp-icon-btn:hover:not(:disabled){color:var(--text);border-color:var(--line-2)}
.wp-icon-btn:disabled{opacity:.35;cursor:default}
.wp-text-btn{
  min-height:38px;background:none;border:1px solid var(--line);color:var(--text-dim);
  border-radius:var(--radius);font:inherit;font-size:13px;padding:6px 10px;cursor:pointer;
  white-space:nowrap;
}
.wp-text-btn:hover:not(:disabled){color:var(--text);border-color:var(--line-2)}
.wp-text-btn:disabled{opacity:.35;cursor:default}
/* Mazání profilu je SAMOSTATNÉ tlačítko, které si nese celý svůj vzhled
   a stojí běžným tokem v `.wp-row-actions` vedle ostatních akcí řádku.

   Do 12. 9. 2026 sdílelo třídu `.row-x` (křížek uvnitř pole kalkulaček)
   a bylo tím na produkci prakticky nedostupné: `.row-x` je v tomhle
   souboru NÍŽ při stejné specificitě (0,0,1,0), takže přebíjela
   `position:absolute`, `opacity:0`, `border` i `border-radius`,
   a odkrytí visí na `.frow:hover`/`.frow:focus-within` — profilový
   řádek je ale `.wp-row`, ne `.frow`. Tlačítko proto zůstávalo
   průhledné a kreslilo se MIMO modal (změřeno: modal končil na
   x≈1001,5, tlačítko na x 1320–1358).

   `opacity:1` je tu VÝSLOVNĚ jako pojistka, ne dekorace: je to přesně
   ta vlastnost, kterou cizí třída přebila, a testy ji čtou
   z `getComputedStyle`. Nikdy sem nevracej `.row-x` ani žádnou jinou
   sdílenou utilitu, která si sama nastavuje `position` nebo `opacity`.

   Tvar je záměrně týž jako `.wp-text-btn` (stejná výška, stejný rytmus
   řádku); liší se jen tím, že hover je destruktivní `--danger`, jako
   u ostatních mazacích prvků webu. */
.wp-del-btn{
  min-height:38px;background:none;border:1px solid var(--line);color:var(--text-dim);
  border-radius:var(--radius);font:inherit;font-size:13px;padding:6px 10px;cursor:pointer;
  white-space:nowrap;position:static;opacity:1;
}
.wp-del-btn:hover:not(:disabled){color:var(--danger);border-color:var(--danger)}
.wp-del-btn:disabled{opacity:.35;cursor:default}

.wp-rename{display:flex;flex-direction:column;gap:6px;flex:1 1 100%;padding:4px 2px}
.wp-rename-err{margin:0;font-size:13px;color:var(--danger)}
.wp-rename-err[hidden]{display:none}
.wp-rename-btns{display:flex;gap:6px}

.wp-limit{margin:0 0 10px;font-size:13.5px;color:var(--text-faint)}
.wp-limit[hidden]{display:none}
.wp-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.wp-toolbar[hidden]{display:none}
.wp-hint{margin:0;font-size:13px;color:var(--text-faint)}

@media (max-width:480px){
  .wp-row{flex-direction:column;align-items:stretch}
  .wp-row-actions{justify-content:flex-end;flex-wrap:wrap}
}

/* mazací tlačítko sedí nad polem, ne v něm — kód se láme přes celou šířku
   a pod absolutně umístěným tlačítkem by se schoval první řádek */
.xfer-tools{display:flex;justify-content:flex-end}

/* přenos profilů — kód je dlouhý řetězec, ať se láme a jde označit */
.xfer-box{
  width:100%;margin-top:6px;background:var(--ink-3);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:10px 12px;font:inherit;font-family:var(--mono);font-size:12.5px;
  line-height:1.45;resize:vertical;word-break:break-all;
}
.xfer-box::placeholder{color:var(--text-faint);font-family:var(--sans)}
/* tři tlačítka v dialogu importu se na úzkém displeji do řádku nevejdou */
.name-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* width:100% ze základního .solid-btn by po povolení zalomení zabralo celý
   řádek a ostatní tlačítka shodilo dolů i tam, kde je místa dost */
.name-actions .solid-btn{margin-top:0;flex:1 1 auto;width:auto}
.name-actions .ghost-btn{flex:0 0 auto;padding:11px 18px;font-size:15px}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .grid{padding:11px 12px 14px;gap:10px}
  .site-foot{padding:2px 12px 18px}
  .site-foot p{font-size:11.5px}
  .mast-inner{padding:8px 12px;gap:8px}
  .meter-track{width:70px}
  .sock-lbl{flex-basis:80px;font-size:10.5px}
  .gem-list{max-height:220px}
  .ci-list{max-height:260px}
  .gem-head-right{gap:7px}
  .picked-gems{padding:8px 9px}

  /* the bar sits above the fold on phones: shrink the code box and put
     both buttons on one row beneath it */
  .out-inner{padding:8px 12px 10px}
  .out-head{margin-bottom:5px}
  .out-body{flex-wrap:wrap;gap:7px}
  /* na mobilu je box nižší, takže i rezerva na dva řádky musí být menší —
     min-height by jinak přebilo max-height a box by se roztáhl */
  .out-code{flex:1 1 100%;min-height:52px;max-height:52px;font-size:13.5px;padding:8px 10px;order:1}
  .copy-btn{flex:1 1 0;order:2;padding:9px 0;font-size:14px}
  .out-reset{flex:1 1 0;order:3;align-self:auto;padding:9px 0;font-size:14px}
  .out-trade{flex:1 1 0;order:3;align-self:auto;padding:9px 0;font-size:14px;justify-content:center}
  /* výstupní lišta je na telefonu nad ohybem, takže vysvětlivka drží drobné písmo */
  .out-hint{margin-top:6px;font-size:11.5px}

  /* one compact row: the hint disappears once a profile exists */
  .profiles{margin-top:7px;padding-top:7px;gap:5px;flex-wrap:nowrap}
  .prof-label{display:none}
  .prof-empty{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .prof-btns{gap:5px}
  .prof-save,.prof-new{font-size:12.5px;padding:5px 9px}
  .prof-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .prof-list::-webkit-scrollbar{display:none}
  .prof{flex:0 0 auto}
  .prof-open{font-size:12.5px;max-width:110px;padding:4px 8px}
  .prof-del{padding:0 6px;font-size:14px}

  /* keep the masthead on one line */
  .tool-badge{font-size:10px;padding:3px 6px;margin-left:8px;letter-spacing:.08em}
  .tool-badge::before{left:-8px;height:13px}
  .wordmark-text b{font-size:16px}
  .wordmark-text span{font-size:11px}
}

@media (max-width:520px){
  .lbl-long{display:none}
  .lbl-short{display:inline}
  .mast-inner{padding-left:10px;padding-right:10px}
  .ghost-btn{font-size:13px;padding:7px 11px}
}

@media (max-width:400px){
  .tool-badge{font-size:9.5px;padding:2px 5px}
  .wordmark-text b{font-size:15px}
}

/* below this width the wordmark alone identifies the site */
@media (max-width:365px){
  .tool-badge{display:none}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ==================================================================
   ZÁLOŽKY — sdílená navigace v mastheadu
   ================================================================== */
.mast-left{display:flex;align-items:center;gap:0;min-width:0}
.tabs{display:flex;align-items:stretch;gap:2px;margin-left:18px;position:relative}
.tabs::before{
  content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:1px;height:20px;background:var(--line-2);
}
/* Záložky jsou <a href>, ne <button>. Crawler po odkazu projde a pozná
   tím pět adres; tlačítko nenásleduje. Hráč navíc může otevřít nástroj
   v nové záložce prostředním tlačítkem, což u buttonu nešlo.
   display:flex a text-decoration si <a> žádá — button si zarovnání
   i podtržení řešil sám. */
.tab{
  background:none;border:none;color:var(--text-dim);font:inherit;font-size:13px;
  padding:6px 12px;border-radius:var(--radius);cursor:pointer;white-space:nowrap;
  transition:color .12s,background .12s;
  display:flex;align-items:center;text-decoration:none;
}
.tab:hover:not(.is-on){color:var(--text);background:var(--ink-3)}
.tab.is-on{color:var(--gold);font-weight:600;background:#221d10;box-shadow:inset 0 -2px 0 var(--gold)}

/* Mobilní náhrada za `.tabs` — schovaná na desktopu úplně, ne jen
   vizuálně, ať tam nefiguruje ve výpočtu layoutu ani v přístupnostním
   stromu (viz breakpoint 1320 px níž, kde se role obrací). */
.tabs-mobile{display:none}
.tm-active{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  padding:6px 10px;border-radius:var(--radius);
  color:var(--gold);font-weight:600;font-size:13px;
  background:#221d10;box-shadow:inset 0 -2px 0 var(--gold);
}
/* <details>/<summary>: nativní disclosure, žádné vlastní ARIA není
   potřeba — prohlížeč sám hlásí otevřený/zavřený stav. `display:flex`
   na summary je zároveň jediný způsob, jak zbavit Firefox jeho
   trojúhelníkového markeru (mizí spolu s `display:list-item`).

   Zavřené `<details>` je shrink-to-fit (jen tak široké jako summary),
   ať sedí kompaktně vedle odznaku. `.tm-menu[open]{flex:0 0 100%}`
   dole ho donutí zalomit na vlastní řádek přes celou šířku — summary
   (tlačítko „Nástroje") si tam s sebou vezme i seznam pod sebou.

   Zkoušelo se místo toho `.tm-menu[open]{display:contents}` (aby
   tlačítko zůstalo v řádku vedle odznaku a zalomil se jen samotný
   seznam) — v praxi ale `flex-basis:100%` na `.tm-list` přestalo
   fungovat, jakmile mu `display:contents` na rodiči vzalo box, který
   by procenta měl proti čemu počítat: seznam se smrskl na obsahovou
   šířku prvního odkazu a zaklínil se vedle tlačítka, zbytek položek
   pod ním ve stejném úzkém sloupci. Měřeno, ne odhad — `flex-basis`
   napočítaná přes `display:contents` rodiče nespoléhej. */
.tm-menu{min-width:0}
.tm-summary{
  display:flex;align-items:center;justify-content:center;gap:6px;list-style:none;cursor:pointer;
  padding:6px 12px;min-height:44px;box-sizing:border-box;border-radius:var(--radius);
  background:none;border:1px solid var(--line);color:var(--text-dim);
  font:inherit;font-size:13px;white-space:nowrap;
  transition:color .12s,background .12s;
}
.tm-summary::-webkit-details-marker{display:none}
.tm-summary:hover{color:var(--text);background:var(--ink-3)}
.tm-summary::after{content:"▾";font-size:10px;transition:transform .12s}
.tm-menu[open] .tm-summary::after{transform:rotate(180deg)}
/* `display:none` explicitně, ne spoléhání na výchozí chování zavřeného
   <details> — ten defaultně schová obsah, ale kdyby tahle pravidla
   nastavovala `display:flex` bez podmínky na `[open]`, přebila by ho
   (vlastní pravidlo má vyšší specificitu než UA selektor pro zavřený
   stav) a menu by bylo vždycky rozbalené. Stalo se to při psaní. */
.tm-list{display:none;flex-direction:column;gap:2px;margin-top:8px}
.tm-menu[open] .tm-list{display:flex}
/* Řádky v rozbaleném menu jsou přes celou šířku a vyšší než na
   desktopu — 44 px je minimální dotykový cíl. */
.tm-list .tab{width:100%;box-sizing:border-box;justify-content:flex-start;padding:12px 14px;min-height:44px;font-size:14px}


/* ==================================================================
   PŘEPÍNAČ HER — navigace SEKCÍ, ne nástrojů
   ==================================================================
   Sedí mezi wordmarkem a záložkami, takže se čte hierarchie
   „značka → hra → nástroje té hry". Vlastní oddělovač jako `.tabs`,
   ale menší písmo a verzálky: je to přepínač dvou stavů, ne seznam.

   Nesmí vypadat jako `.tab` do té míry, aby se to spletlo — proto
   verzálky a rámeček kolem celé dvojice místo podtržení aktivního.
   Aktivní stav nese `aria-current`, ne jen barva.
   ================================================================== */
.game-switch{
  display:flex;align-items:stretch;gap:2px;margin-left:13px;position:relative;
  padding:2px;border:1px solid var(--line);border-radius:var(--radius);
}
.game-switch::before{
  content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:1px;height:20px;background:var(--line-2);
}
.game-btn{
  display:flex;align-items:center;white-space:nowrap;text-decoration:none;
  padding:4px 8px;border-radius:2px;
  font:inherit;font-size:11px;font-weight:600;letter-spacing:.06em;
  /* `--text-dim`, ne `--text-faint`: faint vychází na tmavém podkladu
     4,0:1, tedy pod hranicí 4,5:1 pro běžně velký text. Změřeno
     v prohlížeči, ne odhadnuto. Neaktivní stav zůstává tlumený —
     odliší ho velikost a plná plocha aktivního, ne nečitelnost. */
  color:var(--text-dim);transition:color .12s,background .12s;
}
.game-btn:hover:not(.is-on){color:var(--text);background:var(--ink-3)}
.game-btn.is-on{color:var(--gold);background:#221d10}
/* Sekce PoE 2 (upraveno 31. 8. 2026): TÝŽ vzor jako u zlatého
   `.game-btn.is-on` výš — tmavý tint podkladu + barevný text, jen
   karmínem místo zlaté — ne plná plocha. Do té doby tu byla plná
   karmínová plocha s bledým popředím; to byl JINÝ jazyk než PoE 1
   (tint vs. plná plocha), ne totéž „jen jinou barvou", jak tvrdil
   komentář. `#2a1013` je vlastní tmavý tint (analog `#221d10` u zlaté,
   změřeno stejným postupem): kontrast `--poe2-text` na něm je 5,00:1,
   tedy nad 4,5:1 pro tenhle 11px tučný text (`--poe2` samo je pod
   4,5:1, viz komentář u tokenu, proto text nese `--poe2-text`). Žádné
   podtržení — base `.game-btn.is-on` ho taky nemá, jen `.tab.is-on`
   níž. */
.sec-poe2 .game-btn.is-on{color:var(--poe2-text);background:#2a1013}
.sec-poe2 .game-switch{border-color:var(--poe2-line)}

/* Zbytek identity PoE 2. Je to výčet konkrétních míst, ne plošné
   přebarvení: karmín nese značka, přepínač her, spodní linka mastheadu
   a stav „Připravujeme" — text stránky zůstává v `--text`, jinak by
   se z akcentu stal šum. */
.sec-poe2 .masthead{border-bottom-color:var(--poe2-deep)}
/* Malý text -> `--poe2-text`, ne `--poe2`: viz komentář u tokenu. */
.sec-poe2 .wordmark-text span{color:var(--poe2-text)}
.sec-poe2 .wordmark-link:hover b{color:var(--poe2-text)}
.sec-poe2 .site-foot a:hover{color:var(--poe2-text);border-bottom-color:var(--poe2-text)}
/* Ohnisko musí být vidět i tady — dvě třídy v selektoru přebijí
   jednotřídové pravidlo se zlatou nahoře v souboru. */
.sec-poe2 a:focus-visible,
.sec-poe2 button:focus-visible,
.sec-poe2 input:focus-visible{outline-color:var(--poe2)}

/* ==================================================================
   NAVIGACE NÁSTROJŮ SEKCE PoE 2
   ==================================================================
   Vlastní komponenta, ne `.tabs`: ta patří nástrojům PoE 1 a má
   vlastní oddělovač i breakpoint (1320 px se ale sdílí, viz media
   query níž — schválně, i když by PoE 2 samo o sobě potřebovalo víc
   místa). Sdílí se jen `.tab`/`.tm-active`/`.tm-menu` kvůli vzhledu
   a chování; PoE 2 od 31. 8. 2026 pod breakpointem používá TÝŽ
   „odznak aktivního nástroje + rozbalovací <details>" vzor jako PoE 1
   (viz index.php), i když má zatím jediný skutečný nástroj.

   Aktivní stav se kreslí stejnou řečí jako `.tab.is-on` u PoE 1 (tmavý
   tint podkladu + barevný text + spodní linka), jen karmínem místo
   zlaté — do 31. 8. 2026 tu byla plná karmínová plocha, což byl jiný
   JAZYK než PoE 1 (plná plocha vs. tint), ne „totéž jen jinou barvou".
   Selektor je `.sec-poe2 .tab.is-on` (ne `.p2-tabs .tab.is-on`), aby
   sedl i na `.tm-list`/`.tm-active` v mobilním menu — jsou to všechno
   stejné `.tab` prvky, jen v jiném kontejneru. */
.p2-tabs{display:flex;align-items:stretch;gap:2px;margin-left:16px;position:relative}
.p2-tabs::before{
  content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);
  width:1px;height:20px;background:var(--line-2);
}
/* `#2a1013` je vlastní tmavý karmínový tint, analog `#221d10` u zlaté
   (viz komentář u `.sec-poe2 .game-btn.is-on` výš) — měřeno stejným
   postupem: `--poe2-text` na něm dává 5,00:1, nad 4,5:1 pro 13px
   tučný text. Podtržení zůstává `--poe2-line` (3,47:1 na tomtéž
   podkladu, nad 3:1 pro netextové prvky). */
.sec-poe2 .tab.is-on{
  color:var(--poe2-text);background:#2a1013;
  box-shadow:inset 0 -2px 0 var(--poe2-line);
}
/* Odznak aktivního nástroje v mobilním menu (`.tm-active`) je
   samostatný prvek, ne `.tab` — stejná barevná dvojice, bez podtržení
   (base `.tm-active` ho taky nemá). */
.sec-poe2 .tm-active{color:var(--poe2-text);background:#2a1013}

/* ==================================================================
   PoE 2 FLIPPER
   ==================================================================
   Od 31. 8. 2026 kreslí celou kartu (stav, kategorie, živé ověření,
   tabulku) `assets/poe2/flip.js` přes ZNOVUPOUŽITÍ sdílených tříd
   `.gemxp`/`.api-bar`/`.lv-rate`/`.lv-cell` z PoE 1 Flipperu — cíl je
   vizuální shoda, ne vlastní obdoba téhož. Zůstávají proto jen scopované
   přebarvení tam, kde by sdílená komponenta jinak přinesla zlatou barvu
   PoE 1 do karmínové sekce, a věci, které jsou u PoE 2 doopravdy jiné
   (modal, dlaždice rozcestníku). Bez vlastního `.p2-state`/`.p2-sub`/
   `.p2-tbl`/`.p2-in`/`.p2-rate`/`.p2-name` — ty patřily ke starému,
   vlastnímu markupu a jsou pryč spolu s ním. */
/* Segmentový přepínač je sdílená komponenta `.gemxp .seg`, která má
   aktivní stav ve zlaté. V karmínové sekci by to byla jediná zlatá
   plocha na stránce, takže se přebarvuje — pale na `--poe2-deep`,
   tedy táž dvojice jako u přepínače her (změřeno 9,8:1). */
.sec-poe2 .seg-btn.is-on{background:var(--poe2-deep);color:var(--poe2-pale)}
/* `.gemxp td.n.is-manual` a `.gemxp .lv-in.is-manual` jsou u PoE 1
   zlaté (viz Gem EXP výš) — hráčem zadaná hodnota je tam barva hodnoty.
   V karmínové sekci nesmí zlatá přebít, takže obojí jde na
   `--poe2-text` stejně jako `.p2-gone` níž. */
.sec-poe2 .gemxp td.n.is-manual{color:var(--poe2-text)}
.sec-poe2 .gemxp .lv-in.is-manual{border-color:rgba(198,90,80,.5);color:var(--poe2-text)}
/* `.note.warn` je sdílený amber (`#a4823a`) napříč celým webem — v
   karmínové sekci nahrazuje `--poe2-text`, stejný princip jako u
   ostatních přebarvení v tomhle bloku. */
.sec-poe2 .note.warn{color:var(--poe2-text)}
/* `tr.is-best td` (Fracturing Orb: nejlevnější platební strana a
   nejvýhodnější nabídka k vypsání) je do 1. 9. 2026 zůstalo poslední
   neošetřenou zlatou plochou — `.gemxp tr.is-best td` je sdílené se
   všemi kalkulačkami PoE 1 a Flipper (jediný jiný nástroj PoE 2) tenhle
   stav vůbec nepoužívá, takže to předchozí audit se stránkou v chybovém
   stavu (bez načtených cen, žádná tabulka) nemohl zachytit. `--poe2-text`
   je TÁŽ barva jako zbytek karmínových přebarvení v tomhle bloku;
   `.warn` (`.res-stat .v.warn`, amber) se nemění — je to jiný, závažnostní
   odstín, ne značka hodnoty. */
.sec-poe2 .gemxp tr.is-best td{color:var(--poe2-text)}
.sec-poe2 .gemxp tr.is-best td.nm{color:var(--poe2-text);font-weight:600}

/* Kup/Prodej na mobilu (navazující oprava 15. 9. 2026). Do té doby byl
   celý sloupec „Ověřit živou cenou" pod 720 px schovaný sdíleným
   pravidlem `.gemxp th.lv-h, .gemxp td.lv-cell{display:none}` (viz jeho
   komentář výš v souboru) — u PoE 1 Flipperu to zůstává, protože o jeho
   mobilní chování tenhle úkol nešel. PoE 2 Flipper svoje dvě pole zase
   ukazuje, SCOPOVANĚ jen pod `.sec-poe2`, aby se PoE 1 nedotklo ani
   z jednoho bajtu.

   Kup a Prodej jsou od stejné opravy DVĚ SAMOSTATNÉ buňky tabulky
   (`td.lv-buy`/`td.lv-sell`, viz assets/poe2/flip.js), ne jedna sdílená
   se dvěma poli — takže se ani nemusí nic skládat pod sebe ani zvlášť
   layoutovat pro mobil: nechává se na NATIVNÍM chování `<table>`, které
   tahle stránka má už dávno OVĚŘENÉ a PŘIJATÉ pro celou zbylou tabulku
   (viz CLAUDE.md, „Rozložení karet" — na 375 px se přirozeně širší
   tabulka vodorovně scrolluje UVNITŘ `.tbl-wrap`, ne v `.scroller` ani
   v `body`). Přidáním dvou dalších sloupců se přirozená šířka jen o něco
   zvětší a scroll uvnitř `.tbl-wrap` se o to prodlouží — týž mechanismus,
   žádný nový. Vstupy si tak drží plnou šířku 74 px (`.gemxp .lv-in`) beze
   zkracování jednotky a beze zmenšování na nepoužitelnou šířku. */
@media (max-width:720px){
  .sec-poe2 .gemxp th.lv-h, .sec-poe2 .gemxp td.lv-cell{display:table-cell}
}

/* Vysvětlující text v sekci PoE 2. `.note` je sdílená komponenta celého
   webu a na kartě má `--text-faint`, tedy 3,81:1 — pod hranicí AA.
   Přebarvit ji globálně by znamenalo sáhnout na každou stránku PoE 1,
   což do tohohle úkolu nepatří; scopovaná oprava spraví novou sekci
   a PoE 1 nechá bajt po bajtu stejné. Totéž u štítku druhu dlaždice
   a od 31. 8. 2026 i u CTA šipky na dlaždici rozcestníku (`.tile-go`,
   týž `--text-faint` a týž 3,81:1 problém, jen se to do 30. 8. 2026
   přehlédlo — je to STEJNÁ oprava, ne nová). */
.sec-poe2 .note,
.sec-poe2 .tile-kind,
.sec-poe2 .tile-go{color:var(--text-dim)}

/* Nápověda „Jak to funguje" sdílí `.modal-card` s celým webem, ale
   jeho `h3` je natvrdo `--gold` — v karmínové sekci by to byla další
   stray zlatá plocha vedle `.seg-btn.is-on` výš. `--poe2` na malý text
   nesmí (viz token výš), takže `--poe2-text`: změřeno 5,28:1 na
   `--ink-2`, tedy na skutečném pozadí `.modal-card`. */
.sec-poe2 .modal-card h3{color:var(--poe2-text)}
/* `.card-title` je do 31. 8. 2026 zůstal poslední neošetřenou zlatou
   plochou na kartě PoE 2 Flipperu — `.card` má stejné pozadí `--ink-2`
   jako `.modal-card`, takže platí TÝŽ změřený poměr, 5,28:1. */
.sec-poe2 .card-title{color:var(--poe2-text)}
/* `.solid-btn` je jinak natvrdo zlaté — v modalu „Jak to funguje" by to
   byla přesně ta stray zlatá plocha jako u `.seg-btn.is-on` výš, jen
   zdola. Pale na `--poe2-deep` je TÁŽ dvojice (9,82:1, změřeno tam).
   Hover NENÍ karmínový odstín — `pale` na `--poe2-line` vychází jen
   4,08:1, pod AA — proto neutrální `--ink-3`, stejný hover, jaký má
   `.game-btn:hover:not(.is-on)` (13,88:1). */
.sec-poe2 .solid-btn{background:var(--poe2-deep);color:var(--poe2-pale)}
.sec-poe2 .solid-btn:hover{background:var(--ink-3)}

/* `.copy-btn` ma natvrdo `background:var(--gold)` — v karminove sekci by
   to byla bludna zlata plocha, uplne stejne jako driv `.solid-btn`
   a `.modal-card h3`. Prebarvuje se STEJNOU dvojici tokenu, ktera je
   u `.solid-btn` vys uz zmerena (9,82:1), takze se nezavadi novy odstin
   ani novy kontrastni pripad. Hover je neutralni `--ink-3` (13,88:1) —
   `--poe2-line` jako hover pozadi PADA na 4,08:1, proto se nepouzil. */
.sec-poe2 .copy-btn{background:var(--poe2-deep);color:var(--poe2-pale)}
.sec-poe2 .copy-btn:hover:not(:disabled){background:var(--ink-3)}

/* `.out-trade:hover` ma natvrdo `--gold` na ramecku i textu — tataz bludna
   zlata v karminove sekci jako u `.copy-btn` vys. Ramecek je NETEXTOVY
   prvek (staci 3:1), takze bere `--poe2`; text je 15px, tedy plnych 4,5:1,
   proto `--poe2-text` — presne to deleni, ktere popisuje komentar u tokenu.
   Klidovy stav se NEMENI: zustava neutralni `.ghost-btn` jako na /mapy. */
.sec-poe2 .out-trade:hover{border-color:var(--poe2);color:var(--poe2-text)}

/* Picker modu je sdilena komponenta a jeji „chci" strana je zlata
   (`.mpick-w .mpick-h`, `.mchip.w`, `.mod.is-want`). V karminove sekci
   by to byly dalsi bludne zlate plochy — prebarvuji se stejnym zpusobem
   jako `.solid-btn` a `.copy-btn` vys. Strana „nechci" uz je `--danger`,
   coz je semanticka barva chyby a v obou sekcich znamena totez, takze
   se nemeni. */
.sec-poe2 .mpick-w .mpick-h{color:var(--poe2-text)}
.sec-poe2 .mchip.w{border-color:var(--poe2);color:var(--poe2-text);background:#2a1013}
.sec-poe2 .mod.is-want{border-color:var(--poe2-line)}
/* Odznak stavu mel prebarveny JEN text — zmereno 7. 9. 2026: ramecek
   `#c9a227` a tint `#221d10`, tedy zlata dvojice PoE 1 uvnitr karminove
   sekce. Doplnuje se cely, touz dvojici jako `.mchip.w` vys, aby odznak
   a chip tehoz modu nemluvily dvema barvami.

   `.mod.is-want{background:#16150c}` se NEMENI a neni to opomenuti: je to
   temer neviditelny tint sdileneho tmaveho podkladu, ne zlaty akcent, a
   jeho karminovy protejsek `#1a0f0e` uz patri `.mod.is-ban` — prebarvit ho
   by obe strany prestalo rozlisovat. Aktivni stav „chci" nese v sekci
   karmin pres RAMECEK radku a pres odznak, coz je tataz rec jako u chipu. */
.sec-poe2 .mod-state.w{border-color:var(--poe2);background:#2a1013;color:var(--poe2-text)}

/* Trojstavove chipy (`Rozsah`, `Pridavam do`, `Pozadovane mody`) a aktivni
   profil zustavaly ZLATE i v karminove sekci — `.chip-btn.is-on`
   (`border/bg/color` na `--gold` + tint `#221d10`) a `.prof.is-active`
   nemely zadny `.sec-poe2` prepis, na rozdil od `.mchip.w`, `.mod.is-want`
   a `.mod-state.w` hned vys nebo `.seg-btn.is-on` u Flipperu.

   ZMERENO 7. 9. 2026 pred opravou na /poe2/tablet i /poe2/waystone:
   aktivni chip mel `rgb(201,162,39)` = `#c9a227` = `--gold` a podklad
   `rgb(34,29,16)` = `#221d10`, tedy presne zlatou dvojici PoE 1. Nebyl to
   `:focus` ani `:focus-visible` — stav 2 (aktivni BEZ fokusu) uz byl zlaty
   a stav 4 (jen fokus, neaktivni) zustaval neutralni, takze slo o
   PERZISTENTNI SELECTED stav.

   Prebarvuje se TOUTEZ dvojici, jakou uz sekce pouziva pro aktivni chip
   `.mchip.w` o tri radky vys — zadny novy odstin ani token nevznika:
   ramecek `--poe2` (netextovy prvek, staci 3:1), text `--poe2-text`
   (5,00:1 na `#2a1013`, nad 4,5:1) a tint `#2a1013`.

   Scope je `.sec-poe2`, tedy TYZ mechanismus, jaky CLAUDE.md pro sekci
   predepisuje („kazde jeji pouziti sedi pod `.sec-poe2`"). Zasah se proto
   NEMUZE dotknout PoE 1 — overeno merenim na /mapy, kde chip zustava
   zlaty. Krome Tabletu to spravuje i /poe2/waystone, ktery mel touz
   mezeru; /poe2/flipper ani /poe2/fracturing `.chip-btn` nepouzivaji
   (maji `.seg-btn`, ten svuj prepis uz ma).

   Fokus se NEMENI: `.sec-poe2 :focus-visible` ma vlastni `outline-color:
   var(--poe2)` o kus vys, takze aktivni a zamereny stav se navzajem
   nezneviditelni. */
.sec-poe2 .chip-btn.is-on{border-color:var(--poe2);background:#2a1013;color:var(--poe2-text)}
/* `.desec-opt` (Fracturing Desecration picker, 16. 9. 2026) je TATÁŽ
   dvojice tokenů jako `.chip-btn.is-on` výš — nový vzhled ani nový
   kontrastní případ nevzniká. */
.sec-poe2 .desec-opt.is-on{border-color:var(--poe2);background:#2a1013}
.sec-poe2 .desec-opt.is-on .desec-name{color:var(--poe2-text)}
.sec-poe2 .prof.is-active{border-color:var(--poe2);background:#2a1013}
.sec-poe2 .prof.is-active .prof-open{color:var(--poe2-text)}
/* Popisek sekce „Moje regexy" je u PoE 1 zlaty verzalkovy stitek. V sekci
   PoE 2 by po pridani profilu k Tabletum zustal JEDINOU zlatou plochou na
   strance — zmereno sweepem pres vsechny prvky. Prebarvuje se stejne jako
   `.card-title` a `.mpick-h` vys, tedy na `--poe2-text`. */
.sec-poe2 .prof-label{color:var(--poe2-text);border-color:rgba(198,90,80,.4)}

/* KOLO 6, nález R6-1 — `Profily webu` (`assets/site-profiles.js`) je
   JEDINÝ modal, který se vykresluje na KAŽDÉ adrese webu včetně celé
   sekce PoE 2 (viz jeho vlastní hlavička v style.css), a jeho aktivní
   řádek/odznak byl do 11. 9. 2026 stejná bludná zlatá jako `.prof.is-active`
   výš — `.wp-row.is-active`, `.wp-row.is-active .wp-row-main` a
   `.wp-badge` neměly ŽÁDNÝ `.sec-poe2` přepis, ačkoli precedens pro
   přesně tenhle vzor (aktivní řádek profilu) už existuje o tři řádky
   výš (`.prof.is-active`). Přebarvuje se TOUTÉŽ dvojicí — žádný nový
   odstín ani token nevzniká:
   rámeček `--poe2` (netextový prvek, 4,21:1 na `#2a1013`, nad 3:1),
   text `--poe2-text` (5,00:1 na `#2a1013`, nad 4,5:1) a tint `#2a1013`,
   stejný analog `#221d10` jako všude v tomhle bloku.
   `.wp-cross-tab` (hláška „Aktivní profil byl změněn v jiné kartě.")
   měla stejnou zlatou dvojici na pozadí/rámečku; text zůstává
   `var(--text)` (beze změny v pravidle výš) — `#e9e5dd` na `#2a1013`
   dá 14,14:1, tedy žádný nový kontrastní případ. */
.sec-poe2 .wp-row.is-active{border-color:var(--poe2);background:#2a1013}
.sec-poe2 .wp-row.is-active .wp-row-main{color:var(--poe2-text)}
.sec-poe2 .wp-badge{color:var(--poe2-text);border-color:var(--poe2)}
.sec-poe2 .wp-cross-tab{background:#2a1013;border-color:var(--poe2)}

/* Ruční pole (`.lv-in`) mají u PoE 2 stejnou šířku jako u PoE 1
   (`.gemxp .lv-in{width:74px}`) — vlastní `.p2-in` šířka 88px je pryč.
   `[data-p2f]` je PoE 2 obdoba `[data-id]` u PoE 1: rezervuje místo pro
   křížek uvnitř pole (`.row-x`), stejné číslo, stejný důvod. */
.gemxp .lv-in[data-p2f]{padding-right:19px}
.p2-ok{color:var(--ok)}
.sec-poe2 .p2-gone{color:var(--poe2-text)}

.view{display:none}
.view.is-on{display:block}
.output[hidden]{display:none}

/* ==================================================================
   GEM XP
   ================================================================== */
.grid.gemxp{grid-template-columns:repeat(auto-fit,minmax(272px,1fr));max-width:1060px}

.frow{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.frow:last-child{margin-bottom:0}

.frow label{flex:0 0 132px;font-size:12px;color:var(--text-faint);line-height:1.3}
.num{
  flex:1 1 auto;min-width:0;background:var(--ink-3);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:7px 9px;font:inherit;font-family:var(--mono);font-size:13px;
}
.num:hover{border-color:var(--line-2)}
.num:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.num.is-live{border-color:rgba(92,158,106,.55)}
.unit{flex:0 0 auto;font-size:11.5px;color:var(--text-faint);font-family:var(--mono);min-width:18px}

/* Křížek smaže obsah pole a leží **uvnitř pole** u jeho pravého okraje.
   `<input>` do sebe dítě nepustí, takže potřebuje obalit pozicovacím rámcem;
   tím je `.fbox`. Text pod křížek zajet nesmí, o to se stará padding-right
   na poli — proto to číslo musí sedět se šířkou a odsazením křížku. */
.fbox{position:relative;flex:1 1 auto;min-width:0}
.fbox .num{display:block;width:100%;padding-right:30px}

/* Ukazuje se po najetí na řádek nebo když je v něm focus: na dotyku hover
   neexistuje, takže bez :focus-within by se na mobilu nedal použít vůbec. */
.row-x{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:19px;height:19px;padding:0;border:none;border-radius:50%;
  background:none;color:var(--text-faint);font:inherit;font-size:16px;line-height:1;
  cursor:pointer;opacity:0;transition:opacity .12s,color .12s;
}
.row-x[hidden]{display:none}
.frow:hover .row-x,.frow:focus-within .row-x{opacity:1}
.row-x:hover{color:var(--danger);background:var(--ink-3)}
.row-x:focus-visible{opacity:1}

.readout{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.readout .k{font-size:11.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.12em}
.readout .v{font-family:var(--mono);font-size:17px;color:var(--gold)}
.readout .v.dim{color:var(--text-faint);font-size:14px}

.status{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.45;color:var(--text-faint);margin:0 0 10px}
.status.bad{color:var(--danger)}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;margin-top:5px;background:var(--text-faint)}
.dot.ok{background:var(--ok)}
.dot.err{background:var(--danger)}
.dot.load{background:var(--gold)}

.card.result{border-color:rgba(201,162,39,.55);background:linear-gradient(180deg,#14130d,var(--ink-2))}
.res-combo{font-family:var(--mono);font-size:16px;line-height:1.6;color:var(--gold);word-break:break-word;margin-bottom:13px}
.res-stats{display:flex;flex-wrap:wrap;gap:0}
.res-stat{flex:1 1 150px;padding:0 15px;border-left:1px solid var(--line)}
.res-stat:first-child{padding-left:0;border-left:none}
.res-stat .k{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--text-faint);margin-bottom:3px}
.res-stat .v{font-family:var(--mono);font-size:16px;color:var(--text)}
.res-stat .v.big{font-size:20px;color:var(--gold)}
.res-stat .v.warn{color:#d09a3c}
.res-stat .v.over{color:var(--danger)}

/* Na úzkých displejích se do tabulky nevejde delší buňka (třeba „100 orbů za
   187 Div"). Ať se scrolluje uvnitř svého rámce a neroztahuje kartu ven. */
.tbl-wrap{max-width:680px;margin:0 auto;overflow-x:auto}
/* Flipper má šest sloupců a v každém ještě druhý řádek s kontextem, takže
   680 px je málo — text se láme na tři řádky a tabulka pak měří půl metru
   na výšku. Karta je široká, ať ji tabulka využije celou. */
.tbl-wrap.tbl-wide{max-width:100%}
.gemxp table{width:100%;border-collapse:collapse;font-size:13px}
.gemxp th{
  text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--text-faint);padding:0 6px 7px;border-bottom:1px solid var(--line);
}
.gemxp td{padding:8px 6px;border-bottom:1px solid var(--line);color:var(--text-dim);vertical-align:top}
.gemxp tr:last-child td{border-bottom:none}
.gemxp td.nm{color:var(--text)}
.gemxp tr.is-best td{color:var(--gold)}
.gemxp tr.is-best td.nm{color:var(--gold);font-weight:600}
.gemxp td.n,.gemxp th.n{text-align:right}
.gemxp td.n{font-family:var(--mono);white-space:nowrap}
.gemxp td.rank{color:var(--text-faint);width:20px;font-family:var(--mono);font-size:11.5px}
.gemxp td.delta{color:var(--danger)}

/* Druhý řádek v buňce tabulky „Co teď levelit" — proč je gem v tabulce, kolik
   stojí prizmata, kolik je nabídek. Nese to kontext, bez kterého je číslo nad
   ním k ničemu, ale sloupec navíc by tabulku rozšířil přes displej.
   `font-family:inherit` přebíjí mono z `td.n`: číslice tam nejsou, tak ať se
   text nesází strojopisem. */
.gemxp .flip-sub{
  display:block;margin-top:2px;font-family:inherit;font-size:11px;
  font-weight:400;line-height:1.35;color:var(--text-faint);white-space:normal;
}
.gemxp td.nm .flip-sub{max-width:22ch}

/* Flipper, buňka s currency: ikona vlevo, jméno a druh vpravo. Ikona je
   uložená ve 48 px a zobrazuje se ve 24, takže je ostrá i na displejích
   s dvojnásobnou hustotou. `min-width:0` na textu drží zalamování dlouhých
   jmen uvnitř buňky, jinak by flex položku roztáhl přes sloupec. */
.gemxp td.nm .cur{display:flex;align-items:center;gap:8px}
/* Kolečko pod ikonou: herní arty jsou tmavé a na `--ink-2` karty se některé
   ztrácely (Eldritch Ember, Tainted Oil). `--ink-4` je o krok světlejší ve
   stejné rodině, stejně jako to má .seg-btn. `border-box` drží vnější rozměr
   na 24 px, takže se šířka sloupce nehne a obrázek se jen zmenší dovnitř. */
.gemxp .cur-ico{
  width:24px;height:24px;flex:0 0 auto;box-sizing:border-box;padding:2px;
  background:var(--ink-4);border-radius:50%;
}
.gemxp .cur-txt{min-width:0}

/* Flipper, ruční kontrola živým kurzem. Je to doplněk, ne hlavní vstup —
   prázdná pole proto splývají s pozadím a všimneš si jich, až když je
   potřebuješ. Placeholder nese hodnotu z poslední uzavřené hodiny, takže je
   vidět, od čeho se hráč odchyluje. */
/* Blok „Živé ověření" stojí těsně nad tabulkou a má vlastní podklad: bez něj
   to byl čtvrtý řádek drobného textu pod dvěma poznámkami a četl se jako další
   kus úvodu, ne jako ovládání. Podklad ho zároveň spojuje s poli v řádcích,
   která dělají totéž pro jeden pár. */
.gemxp .lv-rate{
  /* Nad blokem 12 px, pod ním 6: menší mezera dolů ho přiváže k tabulce,
     ke které patří, místo aby splýval s poznámkami nad sebou. */
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
  margin:12px 0 6px;
  padding:9px 11px;background:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:13.5px;color:var(--text-dim);
}
.gemxp .lv-rate label{display:flex;align-items:center;gap:6px}
/* Nadpis a vysvětlivka mají vlastní řádek, mezi nimi je řádek s ovládáním. */
.gemxp .lv-rate .sub{flex:1 0 100%;font-size:11.5px}
.gemxp .lv-rate .flip-sub{flex:1 0 100%;margin-top:0}
/* Nad 721 px (přesně tam, kde se objevuje sloupec s ručními cenami u řádků,
   viz breakpoint 720 px níž) jde pole Kurz Divine k pravému okraji bloku,
   ať leží nad ním — obě ruční pole tak tvoří jeden vizuální shluk vpravo
   a hráč mezi nimi nemusí přeskakovat pohledem přes celou tabulku. Pod
   721 px sloupec s cenami mizí, takže by zarovnání doprava nemělo k čemu
   patřit — pole zůstává na svém přirozeném místě vlevo. */
@media (min-width:721px){
  .gemxp .lv-rate label{margin-left:auto}
}
.gemxp .lv-in{
  width:74px;background:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--text);font:inherit;
  font-family:var(--mono);font-size:12.5px;padding:3px 5px;text-align:right;
}
.gemxp .lv-in:focus{outline:none;border-color:var(--line-2);color:var(--text)}
.gemxp .lv-in::placeholder{color:var(--text-faint)}
/* Pole vedle sebe, ne pod sebou: naskládaná zvedla řádek na desktopu ze 53
   na 74 px a na 320 px ze 107 na 151. Vedle sebe je sloupec širší, ale
   tabulka na to místo má a řádek zůstane nízký. */
.gemxp td.lv-cell{white-space:nowrap;position:relative}
.gemxp .lv{display:inline-flex;align-items:center;gap:3px}
.gemxp .lv + .lv{margin-left:6px}
/* Křížek je uvnitř pole (`.fbox`/`.row-x`, tentýž pattern jako u ostatních
   cenových polí na webu), ne vedle dvojice jako dřív — proto pole potřebuje
   o něco víc místa než původních 56 px, ať zůstane čitelný i pětimístný
   zápis jako „23,22" po vyhrazení místa na křížek. */
.gemxp .lv-in[data-id]{width:74px;padding-right:19px}
.gemxp .lv-u{font-size:11px;color:var(--text-faint);min-width:26px;text-align:left}
/* Menší varianta `.row-x` pro tuhle úzkou tabulkovou buňku — základní
   19×19 px by z vyhrazených 19 px padding-right nenechalo skoro nic pro
   text. `:hover`/`:focus-within` na `.frow` (viz základní pravidlo výš)
   tu neplatí, protože `.lv` není `.frow` — proto vlastní odkrytí. */
.gemxp .lv .row-x{width:14px;height:14px;right:2px;font-size:12px}
.gemxp .lv:hover .row-x,.gemxp .lv:focus-within .row-x{opacity:1}
/* Přepočtený rozdíl se odliší, ať se nesplete s číslem z Currency Exchange. */
.gemxp td.n.is-manual{color:var(--gold)}
/* Totéž u pole, do kterého to hráč zadal: zlatá je na webu barva hodnoty od
   hráče, kdežto zelený rámeček (.num.is-live) v kalkulačkách značí hodnotu
   z API. Prázdné pole žádnou značku nemá — to je stav „z posledního načtení". */
.gemxp .lv-in.is-manual{border-color:rgba(201,162,39,.5);color:var(--gold)}

/* Flipper, sloupec Obchod: nahoře směr, pod ním kurzy obou trhů. Směr je to,
   podle čeho hráč jedná, takže nese váhu textu; kurzy zůstávají v `.flip-sub`.
   Mono jen na kurzech — směr je slovo, ne číslo. */
.gemxp td.trade{color:var(--text);white-space:nowrap}
.gemxp td.trade .flip-sub{font-family:var(--mono);white-space:nowrap}

@media (max-width:820px){
  .tabs{margin-left:12px}
  .tabs::before{left:-6px}
  .tab{padding:6px 9px;font-size:12.5px}
}
/* segmenty v Gem XP se roztáhnou na celou šířku karty */
.gemxp .seg{flex:1 1 auto;width:100%}
.gemxp .seg-btn{flex:1 1 0;padding:8px 10px;font-size:13.5px;text-align:center}
.gemxp .seg-btn:last-child{border-right:none}

/* pravá polovina nadpisu karty je popisek, ne další nadpis */
.gemxp .card-title{font-size:13px;margin-bottom:12px}
.gemxp .card-title .hint{
  color:var(--text-faint);letter-spacing:.05em;font-weight:400;
  text-transform:none;font-size:12px;
}
.gemxp .sub{margin-top:0}

/* nejvyšší level nejde zvolit — cíl je vždy max, tak ať to nevypadá jako tlačítko */
.gemxp .seg-btn:disabled,
.gemxp .seg-btn.is-max{
  opacity:1;cursor:default;background:var(--ink-2);
  color:var(--text-faint);box-shadow:none;font-style:normal;
}
.gemxp .seg-btn.is-max:hover{background:var(--ink-2);color:var(--text-faint)}
.xp-list{margin:10px 0 12px}
.xp-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--line);
}
.xp-row:last-child{border-bottom:none}
.xp-row span{font-size:13px;color:var(--text-dim)}
.xp-row em{
  font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin-left:7px;
}
.xp-row b{font-family:var(--mono);font-size:13.5px;color:var(--gold);font-weight:400;white-space:nowrap}

.gemxp .conv{
  margin:-3px 0 8px;padding-left:141px;font-size:11px;color:var(--text-faint);
  font-family:var(--mono);
}
/* karta jde přes celou mřížku, ale pole v ní se nemají roztáhnout na metr */
.buy-fields{max-width:430px}
/* sbalená karta je jen nadpis — spodní mezera pod ním by visela naprázdno */
.card.is-closed .card-title{margin-bottom:0}
/* popisek drží u přepínače, ať je jasné, co se vypíná */
.title-aside{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.unit-btn{
  background:none;border:none;padding:0 0 1px;font:inherit;font-family:var(--mono);
  font-size:11.5px;color:var(--text-dim);cursor:pointer;
  border-bottom:1px dotted var(--line-2);
}
.unit-btn:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* --- Corruption: výběr slotu a seznam implicitů --- */
.ci-select{
  width:100%;margin-bottom:4px;padding:9px 11px;
  background:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);font:inherit;font-size:15px;cursor:pointer;
}
.ci-select:hover{border-color:var(--line-2)}
.ci-select:focus-visible{outline:none;border-color:var(--gold)}

/* Text implicitu je dlouhý a občas dvouřádkový, takže sloupce musí být širší
   než u gemů a řádky se nesmí ořezávat na jeden řádek. */
.ci-list{
  display:grid;gap:4px;
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  max-height:400px;overflow-y:auto;padding-right:3px;
}
.ci{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--ink-3);border:1px solid var(--line);
  border-radius:var(--radius);padding:9px 12px;cursor:pointer;
  font:inherit;font-size:14.5px;color:var(--text-dim);text-align:left;
  transition:border-color .1s,background .1s,color .1s;min-width:0;
}
.ci:hover{border-color:var(--line-2);color:var(--text)}
.ci.is-on{border-color:var(--gold);background:#221d10;color:var(--text)}
.ci-txt{line-height:1.35}
.ci-meta{
  font-family:var(--mono);font-size:11px;color:var(--text-faint);letter-spacing:.02em;
}
/* Nedostupné se schválně nechává vidět — hráč má vědět, že ten implicit
   existuje a co pro něj musí udělat, ne aby zmizel beze stopy. */
.ci.is-locked{opacity:.42;cursor:not-allowed}
.ci.is-locked:hover{border-color:var(--line);color:var(--text-dim)}
.ci.is-locked .ci-meta{color:#a4823a}

/* Box se stavem cen z API. Do 3.31 řádek drobného textu v různých kartách,
   pak celá karta první v mřížce — jenže mezi kartami s ovládáním vypadala
   jako obsah, kterým není. Teď je to malý box vpravo nahoře nad kartami,
   u všech záložek s cenami na stejném místě, hned pod tlačítkem nápovědy
   v mastheadu. Vysvětlivka tlačítka se vešla už jen do title; plné znění
   nese nápověda záložky. */
.api-bar{
  grid-column:1/-1;justify-self:end;max-width:100%;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:6px 12px;
}
/* .status nese odsazení a zarovnání pro víceřádkové stavy v kartách —
   v jednořádkovém boxu obojí překáží */
.api-bar .status{margin:0;align-items:center}
.api-bar .dot{margin-top:0}
.api-bar .api-when{font-size:11.5px;color:var(--text-faint);white-space:nowrap}
.api-bar .api-when b{color:var(--text-dim);font-weight:600}
.api-btn:disabled{opacity:.45;cursor:default}
.api-btn:disabled:hover{border-color:var(--line);color:var(--text-dim)}

/* Karty v jedné buňce mřížky, pod sebou. Mezera musí sedět s gapem mřížky,
   jinak se stoh opticky rozejde se sousedními sloupci. */
.card-stack{display:flex;flex-direction:column;gap:12px;min-width:0}

/* Horní část kalkulaček jsou **dva** stohy, ne čtyři samostatné karty. Ve
   třech sloupcích zbyla čtvrtá karta sama na druhém řádku a vedle ní dvě
   prázdné buňky; ve dvou se karty spárují tak, aby sloupce vyšly stejně
   vysoké. Konkrétní páry a čísla jsou v CLAUDE.md, „Rozložení karet".

   Napevno `1fr 1fr`, ne `auto-fit`: to počítá stopy z šířky, takže by při
   mřížce širší než 1032 px mlčky vyrobilo třetí stopu — a ta by zela
   prázdnotou, protože stohy jsou dva. */
.gemxp .top-cards{grid-template-columns:1fr 1fr}

/* Varianty počtu sloupců. Guardy přes min-width jsou nutné: tahle pravidla
   jsou specifičtější než `.gemxp .top-cards` v mobilním breakpointu níž,
   takže bez guardu by na telefonu přebila jeden sloupec.

   `.cols3` — Gem EXP a Fracturing mají po zrušení karty Ceny z API tři
   karty, ne čtyři, takže se obejdou bez stohů. Mezi 641 a 1070 px se tři
   sloupce nevejdou (pole potřebuje ~336 px) — jedou dva a třetí karta jde
   přes celou šířku.

   `.wide-right` — Bestiary: filtr je nízká karta a seznam beastů vysoká,
   třetina/dvě třetiny dá seznamu širší řádky dlaždic než půl na půl.

   `.wide-left` — Mapy: obráceně než u Bestiary, protože širší je tady první
   karta. Seznam modů je hlavní pracovní plocha záložky a minimální hodnoty
   jsou sedm úzkých polí, kterým na třetině nic nechybí. Pořadí karet drží
   postup hráče (mody → od kolika), takže se prohodit nedá — proto vlastní
   třída a ne `.wide-right`. */
@media (min-width:1071px){
  .gemxp .top-cards.cols3{grid-template-columns:1fr 1fr 1fr}
  .gemxp .top-cards.wide-right{grid-template-columns:1fr 2fr}
  .gemxp .top-cards.wide-left{grid-template-columns:1.7fr 1fr}
}
@media (min-width:641px) and (max-width:1070px){
  .gemxp .top-cards.cols3 > .card:last-child{grid-column:1/-1}
}

/* Gem EXP: Gem / Beast craft / Facetor's Lens mají různě dlouhý obsah
   (beast craft ztratil svůj mezivýpočet, takže na shodnou výšku nejde
   spoléhat náhodou), takže se spodní hrany rozcházely — stejný problém
   jako u tří karet ve Vendoru. Reuse téhož řešení (`#view-regex
   .top-cards{align-items:stretch}` výš): `.card` je obyčejný blokový box,
   `stretch` jen dorovná výšku boxu na nejvyšší v řádku a obsah zůstává
   nahoře. Scopováno na `#view-gemxp`, ne na `.cols3` globálně — tu sdílí
   i Fracturing, které má od 16. 8. 2026 vlastní obdobné pravidlo níž.
   Bez media query: pod 641 px jde `.top-cards` na jeden sloupec, kde má
   každá karta svůj vlastní řádek, takže `stretch` nemá s čím dorovnávat. */
#view-gemxp .top-cards.cols3{align-items:stretch}

/* Fracturing: Fracture / Fracturing Orb / Base item mají stejný problém
   jako Gem EXP výš, ale equal-height samotné by tu jen roztáhlo popisek,
   ovládání a vysvětlující text po celé výšce karty — to je přesně to, co
   nemá dělat. Fracture a Base item proto mají svůj výsledek zabalený do
   `.fr-result` a ukotvený dole (`margin-top:auto`), takže přebytečná výška
   z `stretch` padne mezi vstupní skupinu a výsledek, ne do nich — stejný
   trik jako `.rc-mwrap > .frow:last-child` u Recombinatoru níž. `padding-top`
   vedle `margin-top:auto` drží minimální mezeru i tam, kde `stretch` nic
   nepřidává (karta sama v řádku na 641–1070 px, jeden sloupec pod 641 px) —
   bez něj by `auto` na nulové volné ploše slilo výsledek s textem nad ním.
   Fracturing Orb žádné ukotvení nepotřebuje: zůstává obyčejný blok a
   přebytek jde do paddingu karty dole, jako u ostatních toolů. */
#view-fracture .top-cards.cols3{align-items:stretch}
#view-fracture .fr-fracture,
#view-fracture .fr-base{display:flex;flex-direction:column}
#view-fracture .fr-result{margin-top:auto;padding-top:16px}
#view-fracture .fr-result > .divider + *{margin-top:16px}

/* PoE 2 Fracturing (assets/poe2/fracture.js) používá TYTÉŽ třídy
   `.fr-fracture`/`.fr-base`/`.fr-result` jako PoE 1 výš — stejný důvod
   ukotvení dole, jen jiné view id.

   `.card-title`, `.note`, `.note.warn`, `.seg-btn.is-on`, `.solid-btn`
   a `.modal-card h3` mají svůj `.sec-poe2` přepis definovaný jinde
   v tomhle souboru. `.readout .v`, `.res-stat .v.big` a `.card.result`
   ho ale NEMAJÍ: do sekce PoE 2 se dostaly až s touhle záložkou (Flipper
   je nepoužívá), takže se vykreslovaly ZLATĚ — a jsou to zrovna hlavní
   čísla stránky a rámeček výsledkové karty. Přebarvují se proto tady,
   scopovaně pod `.sec-poe2`; PoE 1 ani sdílené selektory se nemění.
   Změřeno v prohlížeči: `--poe2-text` na `.readout .v` 5,28:1, na
   `.res-stat .v.big` nad karminově tónovaným podkladem 5,54:1, rámeček
   karty 4,67:1 (netextový prvek, práh 3:1). */
#view-poe2fracture .top-cards.cols3{align-items:stretch}
.sec-poe2 .readout .v{color:var(--poe2-text)}
.sec-poe2 .res-stat .v.big{color:var(--poe2-text)}
.sec-poe2 .card.result{border-color:rgba(198,90,80,.55);
  background:linear-gradient(180deg,#170f0f,var(--ink-2))}
#view-poe2fracture .fr-fracture,
#view-poe2fracture .fr-base{display:flex;flex-direction:column}
#view-poe2fracture .fr-result{margin-top:auto;padding-top:16px}
#view-poe2fracture .fr-result > .divider + *{margin-top:16px}

/* PoE 2 Tablety (24. 9. 2026, report Price Layout): „Typ tabletu" a
   „Další podmínky" mají od zavedení ceny různě dlouhý obsah (uses pole
   + divider + cena + měna vs. jen výběr rozsahu), takže se spodní hrany
   rozcházely — stejný problém a stejné řešení jako `#view-regex`
   (`.card` je obyčejný blok bez svislého centrování, `stretch` jen
   dorovná výšku a obsah zůstává nahoře). Bez media query ze stejného
   důvodu jako tam: pod 641 px `.top-cards` sesype karty do jednoho
   sloupce, kde nemá stretch s čím dorovnávat. */
#view-poe2tablet .top-cards{align-items:stretch}

/* PoE 2 Waystony (24. 9. 2026, report Price Layout): pravý sloupec NENÍ
   jedna karta, ale DVĚ pod sebou (Stav waystonu, Cena u obchodníka) —
   ani jedna sama nemá dost obsahu na výšku levé karty „Další podmínky".
   `.p2w-side` je grid položka `.top-cards`, takže ji `stretch` roztáhne
   na výšku řádku stejně jako běžnou kartu; uvnitř je to flex sloupec se
   dvěma kartami a `justify-content:space-between` pošle VEŠKEROU
   přebytečnou výšku do mezery MEZI ně (dvě položky = jedna mezera), ne
   do žádné z karet — přesně zadaný požadavek „volný prostor může
   zůstat mezi kartou stavu a kartou ceny", ne obří prázdná karta.
   `gap:12px` drží stejný rytmus jako `.top-cards` samo, pro případ, že
   `stretch` nic nepřidává (karty na 641–1070 px v užší stopě). Bez
   media query stejně jako výš — pod 641 px je `.p2w-side` samo ve svém
   řádku, `stretch` ho nenatáhne a `justify-content` nemá co
   rozdělovat, takže obě karty prostě sednou pod sebe s `gap`. */
#view-poe2waystone .top-cards{align-items:stretch}
#view-poe2waystone .top-cards > .p2w-side{min-width:0}
.p2w-side{display:flex;flex-direction:column;gap:12px;justify-content:space-between}

/* Desecration picker má od 16. 9. 2026 VLASTNÍ panel na celou šířku, ne
   místo uvnitř karty „Fracture".

   PROČ: v třísloupcové stopě (333 px) zkolabuje sdílené
   `repeat(auto-fit,minmax(150px,1fr))` na JEDEN sloupec, takže pět
   dlaždic pod sebou vyrostlo na 436 px a karta „Fracture" na 767 px;
   `align-items:stretch` o řádek výš tu výšku přeneslo i na zbylé dvě
   karty a `.fr-result{margin-top:auto}` z nich udělalo skoro pět set
   pixelů prázdna nad výsledkem (změřeno controllerem ve skutečném
   prohlížeči na produkci, 1280×900).

   Na celé šířce panelu (~1024 px na 1280px displeji) se pětice do
   jednoho řádku vejde: 5 × 170 + 4 × 8 = 882 px. Pod tím se dlaždice
   zalomí samy (`auto-fit`), takže se nikde nic nepřetéká — tenhle
   panel žádnou vlastní minimální šířku nevynucuje. */
#view-poe2fracture .desec-card .desec-picker{
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
/* Cena vybraného bonu je jeden běžný `.frow` řádek pod pěticí. Bez
   stropu by se popisek a pole na celé šířce panelu rozjely na opačné
   konce monitoru. */
#view-poe2fracture .desec-price-row{max-width:440px}

/* Rozdělený výsledek: dvě STEJNĚ ŠIROKÉ poloviny — `1fr 1fr`, ne
   `auto-fit`, protože se šířka polovin nesmí lišit podle obsahu.
   `min-width:0` je nutné: bez něj protlačí min-content tabulky
   percentilů sloupec ven z mřížky. Pod 760 px jdou poloviny pod sebe
   v pořadí DOM, tedy 4mod cesta první. */
#view-poe2fracture .fr-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#view-poe2fracture .fr-half{
  min-width:0;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;background:rgba(0,0,0,.22);
}
/* Levnější polovina nese zelený stav NA CELÉ polovině (rámeček +
   podklad) PLUS textový štítek „Levnější" — nikdy jen barvu. `--ok` je
   zavedený zelený token webu. Kontrast je SPOČÍTANÝ z tokenů podle
   WCAG vzorce, ne změřený v prohlížeči: štítek `--ok` na podkladu
   poloviny (#1e1d18 po kompozici) 5,3:1, rámeček proti ploše karty
   5,9:1 (netextový prvek, práh 3:1). Měření na skutečném prvku zbývá
   controllerovi.
   Na REMÍZE nedostane `is-win` ANI JEDNA polovina, takže mezi nimi
   nezůstane žádný rozdíl v rámečku, podkladu, štítku ani velikosti. */
#view-poe2fracture .fr-half.is-win{border-color:var(--ok);background:rgba(92,158,106,.10)}
/* Uvnitř poloviny neplatí rytmus `.card > * + *` (poloviny nejsou přímí
   potomci karty) a `.note`/`.divider` mají `margin:0`, takže by se řádky
   slily na sebe. Vlastní rytmus je proto nutný, ne kosmetika. */
#view-poe2fracture .fr-half > * + *{margin-top:12px}
#view-poe2fracture .fr-half > .divider + *{margin-top:12px}
#view-poe2fracture .fr-half-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
#view-poe2fracture .fr-half-title{
  margin:0;font-size:13.5px;font-weight:600;color:var(--text);letter-spacing:0;
}
#view-poe2fracture .fr-win-tag{
  flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--ok);
  text-transform:uppercase;letter-spacing:.1em;
}
/* Tři statistiky v polovině (šance / pokusy / cena) se do ~490 px vejdou
   na jeden řádek jen s menším základem, než má sdílených 150 px. */
#view-poe2fracture .fr-half .res-stat{flex:1 1 110px}
#view-poe2fracture .fr-half .tbl-wrap{max-width:100%}
@media (max-width:760px){
  #view-poe2fracture .fr-split{grid-template-columns:1fr}
}

/* Corruption: Co corruptím + Base item a Jak to dopadne + Kurzy jsou dva
   stohy (`.card-stack`), ne karty vedle sebe — `.gemxp .top-cards` je
   proto pořád `1fr 1fr` z pravidla o pár řádků výš. Bez dorovnání končily
   stohy na různé spodní hraně (Kurzy jsou jen dvě pole, kdežto levý stoh
   nese i Item level a cenu za pokus) a napravo od kratšího zela prázdná
   plocha až po „Jaký implicit chci". `align-items:stretch` dorovná oba
   stohy na výšku vyššího — tady je to levý, protože Kurzy zůstávají
   schválně kompaktní.

   Stoh samotný přebytek nepohltí (`.card-stack` je flex sloupec, ale bez
   `flex-grow` na dítěti zůstává volná plocha po posledním prvku, ne
   uvnitř karty) — musí ho převzít jedna konkrétní karta. `Jak to dopadne`
   je na to nejvhodnější kandidát (má vlastní shrnutí, které jde ukotvit
   dole), `Kurzy` schválně ne. `.co-result` (divider + readout „Item vyjde
   beze změny statů") je stejný trik jako `.fr-result` u Fracturing výš:
   `margin-top:auto` ho tlačí ke dnu karty, `padding-top` drží minimální
   mezeru i tam, kde `stretch` nic nepřidává (karty pod sebou na mobilu,
   nebo kdyby byl pravý stoh náhodou vyšší). */
#view-corrupt .top-cards{align-items:stretch}
#view-corrupt .co-outcomes{display:flex;flex-direction:column;flex:1 1 auto}
#view-corrupt .co-result{margin-top:auto;padding-top:16px}
#view-corrupt .co-result > .divider + *{margin-top:16px}

/* Zisk (záporný interní net cost, viz moneyOrProfit v corrupt.js) se barví
   stejně jako jiné zvýrazněné hodnoty v kalkulačkách — gold, žádná nová
   paleta. Stejný účel jako `td.n.is-manual` u Gem EXP výš. */
.gemxp .is-profit{color:var(--gold)}

/* odkaz na trade web v popisku pole — musí být poznat, že se dá kliknout,
   ale nesmí přebít samotné pole vedle */
.tr-link{color:inherit;border-bottom:1px dotted var(--line-2);text-decoration:none}
.tr-link:hover,.tr-link:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}

.gemxp .num::placeholder{color:var(--text-faint);opacity:.5;font-style:italic}
.gemxp .max-tag{
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);opacity:.75;margin-left:3px;vertical-align:1px;
}

@media (max-width:640px){
  .gemxp .conv{padding-left:127px}
  .grid.gemxp{grid-template-columns:1fr}
  /* pod 640 px by dva sloupce vyšly po 300 px a pole v nich by se srazila */
  .gemxp .top-cards{grid-template-columns:1fr}
  .frow label{flex-basis:118px;font-size:11.5px}
  .res-stat{flex-basis:100%;padding:9px 0 0;border-left:none;border-top:1px solid var(--line)}
  .res-stat:first-child{padding-top:0;border-top:none}
  .res-combo{font-size:14px}
  /* Delve: čtyři metriky dostávají vlastní mezistupeň 2×2 místo rovnou
     jednoho sloupce — Fracturing a Corruption mají nejvýš tři metriky
     v řadě a tam skok na jeden sloupec (pravidlo `.res-stat` výš) stačí.
     Scoped na #view-delve, sdílené pravidlo se nemění. Delve má vždycky
     PRÁVĚ čtyři metriky (viz assets/delve.js), takže napevno nth-child
     na pozice 1–2 / 3–4 je bezpečné. */
  #view-delve .res-stats .res-stat{
    flex-basis:50%;padding:0 15px;border-left:1px solid var(--line);
    border-top:none;box-sizing:border-box;
  }
  #view-delve .res-stats .res-stat:nth-child(odd){border-left:none;padding-left:0}
  #view-delve .res-stats .res-stat:nth-child(n+3){
    border-top:1px solid var(--line);padding-top:9px;margin-top:9px;
  }
}
@media (max-width:460px){
  /* Pod touhle šířkou by dva sloupce po polovině vyšly moc úzké na
     „Azuritu za 1 Divine" — sráží se na jeden sloupec jako zbytek webu. */
  #view-delve .res-stats .res-stat{flex-basis:100%;border-left:none;padding-left:0}
  #view-delve .res-stats .res-stat:nth-child(n+2){
    border-top:1px solid var(--line);padding-top:9px;margin-top:0;
  }
  #view-delve .res-stats .res-stat:nth-child(1){border-top:none;padding-top:0;margin-top:0}
}
/* Na úzkých displejích záložky na vlastní řádek, jinak se překryjí s tlačítky.
   Číslo je změřené, ne odhadnuté.

   Historie: 700 px do čtyř záložek, 920 px s pátou a s trojicí tlačítek
   „Smazat ceny", 780 px od 3.31, kdy je nahradil křížek u pole a tlačítko
   v kartě Ceny z API, 920 px se šestou záložkou, 980 px se sedmou
   („Mapy" — mezera k tlačítku nápovědy vyšla nulová už na ~932 px,
   980 nechává rezervu ~48 px), 1050 px s osmou („Flipper" — nulová
   mezera na ~998 px, změřeno 282 px na 1280 px a 52 px na 1050 px)
   1150 px s devátou („Recombinator" — nulová mezera na ~1105 px,
   změřeno 175 px mezery na 1280 px a 45 px na 1150 px) a 1210 px s desátou
   („Delve" — nulová mezera změřena PŘESNĚ na 1162 px, tedy dvanáct pixelů
   NAD původním breakpointem: při 1150 px by se záložky s tlačítkem nápovědy
   už překrývaly. Změřeno 118 px mezery na 1280 px a 48 px na 1210 px).

   1320 px od 29. 8. 2026, kdy do `.mast-left` přibyl přepínač her (PoE 1 /
   PoE 2). **Hranici neposunul další nástroj, ale prvek v mastheadu** — což
   je totéž měření a stejně povinné: přepínač je 100 px široký a s odsazením
   ubral z mezery ~129 px, takže se na 1280 px záložky s tlačítkem nápovědy
   PŘEKRÝVALY o 12 px. Nulová mezera je změřená na ~1276 px (po zúžení
   přepínače z původních 113 px), 1320 nechává rezervu ~44 px — táž rezerva
   jako u předchozích hranic.

   Cena je vědomá: displeje 1280 px teď dostanou mobilní navigaci místo řádku
   se záložkami. Šetřit na tom se nedá — přepínač her musí být vidět v obou
   sekcích, a menší už moc nebude.

   Pozor na past při měření: záložky se pod 820 px zmenšují, takže hranici je
   nutné hledat NAD tím, kde mají plnou velikost.

   **Číslo drží délka nejdelšího názvu, ne počet záložek.** Se šestou záložkou
   pojmenovanou „Mercenary" vycházelo 880 px (rezerva 37 px), ale přejmenování
   na „Nacenění merců" ubralo 32 px a zbylo 6. Když se záložka přejmenuje,
   tohle se měří znovu.

   Podtitul wordmarku mizí pod 900 px, ale na šířku nesahá: `.wordmark` je
   širší kvůli h1.

   Když se prvky překryjí, stránka se **nerozšíří**, takže `body.scrollWidth`
   ani `.scroller` to nezachytí. Odhalí to jedině průnik obdélníků — a měřit se
   musí jednotlivé `.tab`, ne `#tabs`: nav se smrskne a odkazy přetečou ven
   z jeho rámce, takže jeho vlastní obdélník o překryvu nic neví.

   Pod týmž breakpointem se `#tabs` (devět záložek v řadě) vyměňuje za
   `.tabs-mobile` (odznak aktivního nástroje + rozbalovací menu) —
   do 16. 8. 2026 tu bylo `flex-wrap`, které devět záložek přelilo na dva
   až tři řádky permanentně viditelné nad obsahem. Tehdy se hranice neměnila,
   jen se změnilo, co se pod ní ukáže; posunula se až s desátou záložkou.

   **1450 px od 11. 9. 2026, kdy do `.mast-meta` přibylo tlačítko
   „Profily webu" (`#wpBtn`).** Stejná past jako u přepínače her výš —
   nový prvek v mastheadu, ne nová záložka, ale platí pro něj STEJNÉ
   pravidlo „breakpoint se přeměřuje při KAŽDÉ změně obsahu mastheadu".
   Tahle hodnota je ale **dopočítaná, ne změřená v prohlížeči** (session,
   která `#wpBtn` přidala, prohlížeč neměla) — nezávislý audit reálně
   naměřil (skutečný prohlížeč, 1321 px šířky okna) překryv tabu Delve
   o 81 px a tabu Flipper o 23 px, tedy novou nulovou mezeru **~1402 px**
   (`#wpBtn` je 118 px + 8 px `.mast-meta{gap:8px}` navíc oproti stavu
   před ním, 1276 + 126 ≈ 1402 — sedí na měřený rozdíl). 1450 px je
   1402 px + ~48 px rezervy, tedy horní konec rozpětí rezervy (44–48 px),
   které si tenhle breakpoint držel u všech předchozích posunů výš.
   **Nejde o naměřenou hodnotu ani o novou politiku** — je to dopočet
   ze skutečně naměřeného čísla stejným vzorcem, jaký tahle sekce
   používá už popáté; skutečné přeměření v prohlížeči (nulová mezera,
   rezerva, i to, že se `#tabs`/`.tabs-mobile` přepnou přesně na 1450 px)
   musí ještě potvrdit někdo se skutečným prohlížečem.

   **1520 px od 30. 9. 2026 — jedenáctá záložka „Crafting", ZMĚŘENO
   v prohlížeči** (na záložce nástroje, tedy s viditelnou nápovědou):
   záložky končí pevně na 1200,6 px (šířky se nad breakpointem nemění,
   Crafting má 72 px), levá hrana `#helpBtn` leží 272,75 px od pravého
   okraje. Na 1600 px mezera 126,6 px, na 1460 px PŘEKRYV 13–14 px
   (tedy původních 1450 px už nestačilo), nulová mezera 1473,4 px —
   sedí na dopočet 1402 + 72. 1520 = nula + ~47 px rezervy, v rozpětí
   44–48 px jako u všech předchozích posunů. */
@media (max-width:1520px){
  .mast-inner{flex-wrap:wrap;row-gap:8px}
  .mast-left{display:contents}
  .wordmark{order:1}
  /* Táž `order` jako wordmark: při shodě rozhoduje pořadí v DOM, takže
     přepínač zůstane hned vedle značky a nemusí se přečíslovat nic,
     co tu bylo dřív. Oddělovač `::before` mizí — v zalomeném řádku
     by visel v prázdnu. */
  .game-switch{order:1;margin-left:0}
  .game-switch::before{display:none}
  /* 44 px je minimální dotykový cíl — týž práh, jaký si pod tímhle
     breakpointem berou `.tm-summary` i položky rozbaleného menu.
     Přepínač her je hlavní navigace mezi sekcemi, takže na mobilu
     nesmí zůstat na 25 px, i když se tím horní řádek mastheadu
     o kus zvýší. */
  .game-btn{min-height:44px;padding-left:14px;padding-right:14px}
  .mast-meta{order:2}
  /* Od 31. 8. 2026 se `.p2-tabs` pod breakpointem schovává úplně —
     stejně jako `.tabs` — a nahrazuje ji TÝŽ `.tabs-mobile` vzor jako
     u PoE 1 (viz komentář u `.sec-poe2 .tab.is-on` výš). Do té doby
     tu byl vlastní tvar (`.p2-tabs{order:3;width:100%;...}`), protože
     měla „jen dvě položky, ne deset" — po odebrání „Přehled" z navigace
     má PoE 2 položku jedinou, a schválně se přesto drží stejný
     rozbalovací vzor jako PoE 1, ne zvláštní zjednodušení pro málo
     položek. */
  .p2-tabs{display:none}
  .tabs{display:none}
  /* align-items:flex-start, ne center — `.tm-menu` v otevřeném stavu
     naroste na výšku celého seznamu a `center` by podle ní svisle
     vycentrovalo i krátký odznak vedle sebe, takže by „uplaval"
     doprostřed rozbaleného menu místo aby zůstal nahoře v řádku. */
  .tabs-mobile{
    display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;
    order:3;width:100%;margin-left:0;padding-top:8px;border-top:1px solid var(--line);
  }
  /* Viz komentář u `.tm-menu` výš: `flex:0 0 100%` na `<details>` samotném
     (ne `display:contents`+seznam) je tvar, který procenta doopravdy
     resolvne proti šířce `.tabs-mobile`. */
  .tm-menu[open]{flex:0 0 100%}
}
@media (max-width:520px){
  .wordmark-text span{display:none}
}
@media (max-width:420px){
  .gemxp table{font-size:12px}
  .gemxp td,.gemxp th{padding-left:4px;padding-right:4px}
  .col-drop{display:none}
}
/* Na úzkém displeji smí sloupec Obchod zalomit — kurzy pod směrem i samotná
   věta „Kup za Chaos → Prodej za Divine". S `nowrap` byla tabulka Flipperu
   na 320 px široká 556 px místo 484 a scrollovalo se v ní víc, než kolik
   ušetřilo sloučení sloupců. Zalomí se to na šipce, takže „Kup za Chaos →"
   a „Prodej za Divine" zůstanou celé na svých řádcích. */
@media (max-width:720px){
  .gemxp td.trade,
  .gemxp td.trade .flip-sub{white-space:normal}
  /* Sloupec s ověřením živou cenou se na úzkém displeji schovává. Tabulka
     má width:100%, takže si těch ~190 px vzal na úkor sloupce Obchod: ten
     spadl na 60 px a věta o směru se lámala na pět řádků, čímž řádek
     narostl ze 107 na 151 px. Pole nad tabulkou (kurz Divine) zůstává —
     je to jeden vstup a vejde se. */
  .gemxp th.lv-h, .gemxp td.lv-cell{display:none}
  /* PoE 2 Flipper od 31. 8. 2026 znovupoužívá TÝŽ `.lv-h`/`.lv-cell`
     pattern jako PoE 1 (viz assets/poe2/flip.js), takže tohle pravidlo
     platilo i pro něj — do 15. 9. 2026, kdy ho sekce „PoE 2 FLIPPER"
     níž zase odkrývá SCOPOVANĚ pod `.sec-poe2` (viz tam, „Kup/Prodej
     na mobilu"). PoE 1 Flipper (`assets/flip.js`) je beze změny. */
}

/* ==================================================================
   BESTIARY
   Seznam beastů stojí na .gem/.gem-list z Kampaň vendor — je to týž
   prvek (klikací dlaždice s vybraností), jen nese cenu místo barvy
   soketu. Tady je jen to, co navíc.
   ================================================================== */
.beast-list{grid-template-columns:repeat(auto-fill,minmax(252px,1fr));max-height:420px}
.beast{font-size:14px}

/* Ručně přebitý beast musí být poznat od toho, co vybrala cena — jinak
   hráč nevidí, proč mu tam něco drží navzdory filtru. */
.beast.is-manual{border-style:dashed}
.beast.is-manual.is-on{border-color:var(--gold)}

.btag{
  flex:0 0 auto;font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--text-faint);border:1px solid var(--line);border-radius:3px;
  padding:1px 4px;line-height:1.5;
}
.btag.bm{color:var(--gold);border-color:rgba(201,162,39,.5)}

.bp{flex:0 0 auto;font-family:var(--mono);font-size:12.5px;color:var(--text-dim);text-align:right}
/* Cena ze záložního snapshotu, ne z API — ať se netváří jako čerstvá. */
.bp.is-snap{color:var(--text-faint);font-style:italic}

/* Převod na Divine jen u toho, co stojí přes jeden Divine. Obchoduje se
   v Chaosu, tohle je pomůcka na druhý řádek, ne druhá měna. */
.bd{display:block;font-style:normal;font-size:10.5px;color:var(--text-faint);line-height:1.3}

/* ==================================================================
   ROZCESTNÍK
   ==================================================================
   Homepage na `/`. Dlaždice stojí na stejných tokenech jako .card
   (stejné pozadí, linka i rádius), ale nejsou to karty: karta drží
   ovládací prvky, tohle je odkaz. Proto vlastní třída a ne .card —
   rytmus `.card > * + *` by se do dlaždice pletl.

   Šířka 1060 px je táž jako u kalkulaček a s minimem 300 px vyjde na
   tři sloupce, takže šest nástrojů sedne 3 + 3. Při lichém počtu se
   poslední dlaždice roztáhnou přes zbytek řádku, což je záměr: nejsou
   to prázdná místa, ale plné dlaždice. */
.home{max-width:1060px;margin:0 auto;padding:26px 18px 22px}
.home-head{max-width:640px;margin-bottom:22px}
.home-head h2{margin:0 0 9px;font-size:26px;font-weight:600;line-height:1.25}
.home-head p{margin:0;font-size:16px;line-height:1.55;color:var(--text-dim)}
/* Že se nic neinstaluje, je důvod zůstat, ne důvod přijít — patří pod
   hlavní větu a drobným. Dvě třídy jsou nutné: v breakpointu níž je
   `.home-head p{font-size:15px}`, které by jednotřídový selektor
   přebilo. */
.home-head .home-note{margin-top:10px;font-size:13.5px;color:var(--text-faint)}

/* min() drží minimum pod šířkou stopy, jinak by sloupec na 320px
   displeji vodorovně přetekl — táž past jako u .grid */
.tiles{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.tile{
  display:flex;flex-direction:column;gap:7px;min-width:0;
  background:var(--ink-2);border:1px solid var(--line);border-radius:4px;
  padding:15px 16px 14px;text-decoration:none;color:inherit;
  transition:border-color .12s,background .12s;
}
.tile:hover{border-color:var(--gold);background:var(--ink-3)}

/* Vlajková dlaždice (Recombinator). Drží se stejné řeči jako `.is-on`
   u chipů a soketů — zlatý rámeček a teplý podklad #221d10 — ale
   ztlumeně: v klidu je rámeček tmavší zlatá (#5f5122) a podklad sotva
   znatelný, teprve hover jde na plný `--gold`. Kdyby dlaždice měla
   plnou zlatou hned, vypadala by jako trvale najetá myš a hover by
   neměl kam vystoupit.

   Emphasis je jen barva: rozměr, mřížka ani pořadí v tabulátoru se
   nemění, takže se tím nic nestává nedostupným a ostatní dlaždice
   nevypadají zašedle. Odznak („Doporučeno") tu schválně není — hráči
   neřekne nic, co by z prvního místa a textu nevyčetl sám. */
.tile.is-feat{border-color:#5f5122;background:#14130e}
.tile.is-feat:hover{border-color:var(--gold);background:#221d10}
.tile.is-feat .tile-kind{color:var(--gold)}

.tile-kind{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--text-faint)}
.tile-name{margin:0;font-size:19px;font-weight:600;line-height:1.25;transition:color .12s}
.tile:hover .tile-name{color:var(--gold)}
/* Věta, kvůli které si hráč dlaždici přečte: co mu nástroj vyřeší.
   Odliší se jasnější barvou a tučností, ne další velikostí písma —
   ta by v dlaždici se štítkem, názvem, popisem a CTA byla čtvrtá. */
.tile-head{margin:0;font-size:15px;font-weight:600;line-height:1.35;color:var(--text)}
/* flex:1 sráží CTA na dno dlaždice, ať je ten řádek zarovnaný
   napříč mřížkou i tam, kde je popisek o řádek kratší */
.tile-desc{margin:0;flex:1 1 auto;font-size:14.5px;line-height:1.45;color:var(--text-dim)}
.tile-go{margin-top:3px;font-size:13px;color:var(--text-faint);letter-spacing:.04em;transition:color .12s}
.tile-go::after{content:"→";margin-left:6px}
.tile:hover .tile-go{color:var(--gold)}

/* Rozcestník sekce PoE 2 má zatím jen dva nástroje, ale musí použít
   TUTÉŽ šířku sloupce jako PoE 1 rozcestník, ne se roztáhnout na dva
   široké sloupce. Základní `.tiles` používá `auto-fit`, který PRÁZDNÉ
   stopy zahodí — se dvěma dlaždicemi ve třísloupcové šířce displeje
   z toho vzniknou dvě dlaždice ~507px místo tří ~333px. `auto-fill`
   naproti tomu stopu podle `minmax()` PONECHÁ, i když je prázdná, takže
   sloupce vyjdou stejně široké jako na PoE 1 a třetí buňka zůstane
   prázdná sama od sebe — žádná umělá dlaždice, žádný „Připravujeme".
   Gap, `minmax()` i breakpoint `@media(max-width:640px)` zůstávají
   sdílené s PoE 1, mění se jen `auto-fit` -> `auto-fill`. */
.sec-poe2 .tiles{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}

/* Base `.tile:hover`/`.tile:hover .tile-name`/`.tile:hover .tile-go` výš
   jsou natvrdo zlaté a nejsou scopované — do 31. 8. 2026 tak i na PoE 2
   při najetí myší na fungující dlaždici (Flipper) svítil zlatý rámeček
   a zlatý text, jediná zlatá plocha, která v karmínové sekci zbyla.
   Klávesový fokus scopovaný byl už dřív (`.sec-poe2 a:focus-visible`
   výš, `--poe2` jako obrys, 4,14–4,45:1 na obou pozadích `.tile`, nad
   3:1 pro netextové prvky) — chybělo jen myší hover. `--poe2-text` na
   `--ink-3` (pozadí hoveru) je 4,91:1, `--poe2-line` jako rámeček na
   témže pozadí 3,40:1. Rozměr, geometrie ani chování se nemění, jen
   barva. */
.sec-poe2 .tile:hover{border-color:var(--poe2-line);background:var(--ink-3)}
.sec-poe2 .tile:hover .tile-name{color:var(--poe2-text)}
.sec-poe2 .tile:hover .tile-go{color:var(--poe2-text)}

/* Dlaždice nástroje, který ještě neexistuje. Je to `<div>`, ne `<a>`,
   takže nemá kam vést — a nesmí to ani vypadat, že má: hover se vypíná
   (`.tile:hover` výš sedí na každé dlaždici) a kurzor zůstává šipka.
   Místo CTA nese štítek stavu, aby bylo nahlas řečeno, že se to teprve
   chystá. Slabší rámeček ji odliší od dlaždic, které fungují.
   Specifičtější selektor (`.is-soon` navíc) přebije `.sec-poe2 .tile:hover`
   výš bez ohledu na pořadí, takže neexistující nástroj hoverem dál
   nenabízí nic. */
.sec-poe2 .tile.is-soon{cursor:default;border-style:dashed}
.sec-poe2 .tile.is-soon:hover{border-color:var(--line);background:var(--ink-2)}
/* Do 31. 8. 2026 byl štítek PLNÁ karmínová plocha (9,8:1) — na
   dlaždici bez fungujícího CTA (`.tile-go` vedle vychází jen 3,81:1
   bez opravy výš) to byl nejsilnější prvek na celé stránce, tedy
   přesně obráceně, než co je hráči k užitku: neexistující nástroj
   křičel hlasitěji než ten, který funguje. Štítek proto zůstává
   čitelný a jednoznačně „nedostupné" (rámeček, verzálky, prostrkání),
   ale bez vyplněné plochy — obrys, ne plný blok. `--poe2-text` na
   `--ink-2` (pozadí `.tile`) je 5,28:1, `--poe2-line` jako rámeček na
   témže pozadí 3,66:1 (nad 3:1 pro netextové prvky). */
.sec-poe2 .tile-soon{
  margin-top:3px;align-self:flex-start;
  padding:2px 8px;border-radius:var(--radius);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--poe2-text);background:transparent;border:1px solid var(--poe2-line);
}

@media (max-width:640px){
  .home{padding:18px 12px 16px}
  .home-head{margin-bottom:16px}
  .home-head h2{font-size:22px}
  .home-head p{font-size:15px}
  .tiles{gap:10px}
}

/* ==================================================================
   Záložka Mercenary
   ==================================================================
   Strom skillů: každý skill je box a jeho supporty chipy uvnitř. Vazba
   support→skill je tu podstatná (trade web ji umí filtrovat), takže se
   nesmí zplošťovat do jednoho seznamu chipů jako u vendoru.

   Barva chipu je atribut jako ve hře, ne stav. Proto se bere z tokenů
   --r/--g/--b/--w a tier musí nést text — na barvu už nezbylo místo. */
/* Přepínač vstupní cesty stojí nad kartami, ne v nich: mění to, čím se
   začíná. Je to položka mřížky přes celou šířku, stejně jako `.api-bar`
   u kalkulaček — jen zarovnaná doleva, protože je to první krok, ne stav. */
.merc-modes{grid-column:1/-1;display:flex}
/* Odkaz na druhou cestu. Je to tlačítko (přepíná režim, nikam nevede), ale
   vypadat musí jako odkaz — jinak by soupeřilo s CTA v kartě. */
.merc-swap{
  background:none;border:none;padding:0;font:inherit;font-size:14px;
  color:var(--gold);cursor:pointer;text-align:left;
  text-decoration:underline;text-underline-offset:2px;
}
.merc-swap:hover{color:#dbb42e}
/* Seznam buildů je krátký a je v úzké kartě, takže jeden sloupec a nižší
   strop než u `.gem-list`; 36 položek se jinak roztáhne přes celou stránku. */
.merc-build-list{grid-template-columns:1fr;max-height:224px}
/* Sbalený výběr — jméno buildu nese stejnou barvu jako v přehledu, ať je
   poznat, že je to hodnota, a ne popisek. */
.merc-picked{color:var(--gold);font-weight:600;font-size:15px}
/* Vyčerpaných šest slotů — položka zůstane vidět, jen na ni nejde kliknout.
   Stejný tvar jako `.chip-btn.is-dead` u supportu se dvěma hashi. */
.gem.is-dead{opacity:.4;cursor:not-allowed}
.gem.is-dead:hover{border-color:var(--line);color:var(--text-dim)}
/* Picker supportů uvnitř skillu. Odděluje se linkou, ať je vidět, že patří
   tomu skillu nad ním, a ne stromu jako celku. */
.merc-sup-pick{margin-top:9px;border-top:1px solid var(--line);padding-top:9px}
.merc-sup-pick .gem-list{margin-top:8px;max-height:236px}
/* Tlačítka pro práci se skillem drží pravý okraj řádku, aby se ve stromu
   zarovnala pod sebe a nemíchala se s popiskem o počtu supportů. */
.merc-head .merc-act{margin-left:auto}

.merc-paste{
  display:block;width:100%;min-height:104px;resize:vertical;
  background:var(--ink);border:1px solid var(--line);color:var(--text);
  border-radius:var(--radius);padding:9px 11px;
  font-family:var(--mono);font-size:13.5px;line-height:1.45;
}
.merc-paste:focus{outline:none;border-color:var(--line-2)}
/* Řádek s tlačítky se musí zalomit — na 320 px se dvě vedle sebe nevejdou. */
#view-merc .frow{flex-wrap:wrap}
/* `.gemxp .sub{margin-top:0}` je psané pro kalkulačky, kde `.sub` sedí hned
   na začátku karty (Recombinator „Jak to může dopadnout") a nulový odstup
   tam je záměr. V Mercenary ale `.sub` vždycky uvozuje NOVÝ pododdíl po
   dividru nebo po předchozím obsahu („Build merca", „Skilly merca",
   „Vybrané skilly") — obě pravidla mají stejnou specificitu (dvě třídy),
   `.gemxp .sub` je v souboru pozadu, takže vyhrávalo a nulovalo odstup,
   který `.card > .divider + *` jinde na webu dává (16px). Nadpisy pak
   visely přilepené k dividru nebo k textu nad sebou. Scoped na
   `#view-merc`, ať se nedotkne Recombinatoru, pro který `.gemxp .sub`
   vzniklo — hodnota je stejná, jakou `.card > .divider + *` používá
   všude jinde. */
#view-merc .sub{margin-top:16px}
/* Stejná past, jiná trasa: `.note{margin:0}` má se `.card > * + *` shodnou
   specificitu a je v souboru pozadu, takže vyhrává a nuluje i odstup, který
   by karetní rytmus jinak dal (14px). U `mercTreeNoteB` to nechávalo větu
   o šíři hledání přilepenou na spodní okraj poslední karty vybraného
   skillu, místo aby četla jako poznámka pod výběrem. */
#mercTreeNoteB{margin-top:14px}
/* Tři segmenty vedle sebe se na 320 px vejdou i bez zásahu, ale text se
   láme na tři řádky a tlačítka jsou zbytečně vysoká. Menší písmo a odsazení
   je stáhnou na dva řádky, aniž by cokoli oříznuly — `.seg` má
   `overflow:hidden` a `flex-wrap:nowrap`, takže ořezaný text by zmizel beze
   stopy, ne se zalomil. */
@media (max-width:360px){
  #mercQuick .seg-btn{padding:8px 4px;font-size:12.5px}
}
.merc-go{display:inline-block;text-decoration:none;text-align:center}

.merc-skill{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ink-3);padding:9px 11px;
}
.merc-skill + .merc-skill{margin-top:8px}
.merc-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.merc-name{
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--line);color:var(--text-faint);
  border-radius:var(--radius);padding:6px 12px;
}
.merc-name:hover{border-color:var(--line-2);color:var(--text)}
.merc-meta{font-size:13px;color:var(--text-faint)}
/* Vypnutý skill zůstane vidět i s chipy, jen se s ním nedá pracovat —
   zmizet nesmí, hráč má vědět, co na warrantu je. */
.merc-skill:not(.is-on) .chips{opacity:.35;pointer-events:none}
.merc-skill.is-cut{opacity:.55}
.merc-skill.is-on.k-r .merc-name{border-color:var(--r);background:#241113;color:#e8797b}
.merc-skill.is-on.k-g .merc-name{border-color:var(--g);background:#131f12;color:#8fd083}
.merc-skill.is-on.k-b .merc-name{border-color:var(--b);background:#111a26;color:#89b3e8}
.merc-skill.is-on.k-w .merc-name{border-color:var(--w);background:#1c1e22;color:#e4e7ec}

.chip-btn.c-r.is-on{border-color:var(--r);background:#241113;color:#e8797b}
.chip-btn.c-g.is-on{border-color:var(--g);background:#131f12;color:#8fd083}
.chip-btn.c-b.is-on{border-color:var(--b);background:#111a26;color:#89b3e8}
.chip-btn.c-w.is-on{border-color:var(--w);background:#1c1e22;color:#e4e7ec}
.merc-tier{font-size:11px;opacity:.75;margin-left:5px;font-weight:600}
.chip-btn.is-dead{opacity:.4;cursor:not-allowed}
.chip-btn.is-dead:hover{border-color:var(--line);color:var(--text-dim)}
/* Vyloučený skill je opak výběru, tak i vypadá. */
.chip-btn.merc-no.is-on{
  border-color:#8d4f52;background:#1e1214;color:#d98a8d;text-decoration:line-through;
}

/* Hodnocení vloženého merca — značka vlevo nese barvu, text zůstává čitelný. */
.merc-rate-row{margin:0;font-size:15px;line-height:1.5;display:flex;gap:9px;align-items:baseline}
.merc-rate-row + .merc-rate-row{margin-top:7px}
.merc-mark{flex:0 0 auto;font-weight:700;width:14px;text-align:center}
.merc-mark.is-top{color:var(--gold)}
.merc-mark.is-good{color:var(--ok)}
.merc-mark.is-bad{color:var(--danger)}
.merc-mark.is-miss{color:var(--text-faint)}

/* Přehled buildů. Jeden build = jeden blok: hlavička se jménem (a u buildu,
   který je cenný jako celek, i obecná akce), pod ní 0..N řádků, kde každý je
   JEDNA hodnotná kombinace s vlastním odkazem.

   Hierarchie musí být poznat bez čtení: build je oddělený linkou a nese zlaté
   jméno, vzory jsou odsazené a bez linky. Kdyby vzory měly linku taky,
   splynuly by se sousedním buildem a hráč by nepoznal, co ke komu patří. */
.merc-best{display:grid;gap:0}
.merc-best-build{padding:7px 0;border-top:1px solid var(--line)}
.merc-best-build:first-child{border-top:none}
.merc-best-head{display:flex;gap:10px;align-items:baseline}
.merc-best-row{display:flex;gap:10px;align-items:baseline;font-size:14.5px;
  padding:3px 0 3px 14px}
.merc-best-name{flex:0 0 auto;color:var(--gold);font-weight:600}
/* Věta pro build bez doloženého vzoru. Sedí na stejném odsazení jako vzory,
   protože zabírá jejich místo. */
.merc-best-none{color:var(--text-faint);font-size:13.5px;padding:3px 0 3px 14px}
/* „ZÁROVEŇ" spojuje skupiny UVNITR jednoho vzoru. Musí být čitelně slabší než
   jména skillů (ta nesou `strong`), ale ne tak slabé, aby se přehlédlo —
   jinak by se dva požadavky četly jako dvě alternativy. */
.merc-best-and{color:var(--text-faint);font-size:12px;letter-spacing:.06em;
  white-space:nowrap}
/* Obecná akce na celý build sedí v hlavičce a drží pravý okraj. */
.merc-best-podil{flex:0 0 42px;color:var(--ok);font-variant-numeric:tabular-nums;
  font-size:13.5px;text-align:right}
.merc-best-val{color:var(--text-dim);min-width:0}
.merc-best-val strong{color:var(--text);font-weight:600}
/* Skupina „častěji u levnějších" ustupuje do pozadí. Tlumená zlatá (#a4823a)
   tu byla dřív, jenže zlatá je na webu barva hodnoty — jméno buildu i odkaz
   „hledat" ji mají — takže slabší signál vypadal jako zvýrazněný. Červená
   z hodnocení (--danger) by zas v seznamu pěti řádků křičela; ten skill není
   chyba. Význam nese popisek v textu, barva ho jen nesmí popírat. */
.merc-best-bad{color:var(--text-faint)}
/* „Slabší signál" u sestavy, která prošla jen jednou branou. Kurzíva, protože
   barvu už nese `merc-best-bad` ve stejném řádku a dvě faint poznámky vedle
   sebe by splynuly — tohle je poznámka o síle dokladu, ne další skupina
   skillů. Sedí uvnitř `.merc-best-val`, takže nemění zarovnání sloupců. */
.merc-best-weak{color:var(--text-faint);font-style:italic}
/* Vylouceni u vzoru. Je to soucast ZADANI hledani, ne poznamka, takze se
   nesmi ztratit v sedi jako `merc-best-weak` — ma vlastni tlumenou barvu
   a verzalkove „BEZ" ho odlisi od pozitivnich skillu v tomtez radku.
   Sedi uvnitr `.merc-best-val`, takze nemeni zarovnani sloupcu. */
.merc-best-not{color:var(--text-faint);font-size:13px}
/* Odkaz drží pravý okraj řádku, aby se odkazy zarovnaly pod sebe a daly se
   proklikat bez hledání. `margin-left:auto` funguje i když hodnota přeteče
   na víc řádků. */
.merc-best-link{margin-left:auto;flex:0 0 auto;align-self:center;
  color:var(--gold);text-decoration:none;font-size:13.5px;
  border:1px solid var(--line);border-radius:var(--radius);padding:3px 10px}
.merc-best-link:hover{border-color:var(--gold);background:#221d10}

@media (max-width:640px){
  .merc-paste{min-height:88px;font-size:13px}
  .merc-name{font-size:14px;padding:5px 10px}
  .merc-best-row,.merc-best-head{flex-direction:column;gap:2px}
  .merc-best-name{flex-basis:auto}
  /* Ve sloupci by `margin-left:auto` odkaz odsunulo doprava mimo text. */
  .merc-best-link{margin-left:0;align-self:flex-start;margin-top:3px}
  /* Na mobilu se řádky stohují, takže odsazení samo hierarchii neudrží —
     text vzoru i jeho odkaz jsou pod sebou a sousední vzor začíná hned pod
     nimi. Drží to proto VÝRAZNĚJŠÍ levá linka (2 px) plus dýchání pod každým
     vzorem, aby bylo poznat, který odkaz patří kterému řádku. Změřeno na
     375 px: bez toho končí odkaz vzoru 6 px nad textem toho následujícího. */
  .merc-best-row,.merc-best-none{padding:4px 0 10px 10px;
    border-left:2px solid var(--line);margin-left:3px}
  .merc-best-row:last-child{padding-bottom:2px}
  /* Obecná akce se od vzorů oddělí mezerou — jinak vypadá jako první vzor. */
  .merc-best-head{padding-bottom:4px}
  /* Jména supportů jsou dlouhá („Greater Elemental Damage with Attacks") a
     `.chip-btn` má nowrap, takže na 320 px vyjde chip 311 px široký a přeteče
     ven ze `.scroller`. Ten má vlastní scrollovací kontext, takže se to do
     `body.scrollWidth` nepropíše a je to vidět jen na jeho scrollWidth. */
  .merc-sup{white-space:normal;text-align:left}
  /* Ze stejného důvodu se v pickeru nesmí jméno oříznout na tři znaky:
     `.gname` má ellipsis, takže by z „Greater Power Charge on Critical
     Strike" zbylo „Greater Po…". V úzkém sloupci se radši zalomí. */
  .merc-sup-pick .gname{white-space:normal;overflow:visible}
}

/* ==================================================================
   Odsazení — utility třídy
   ==================================================================
   Kalkulačky skládají HTML do řetězců a odsazení si dřív nesly
   v style="margin-top:12px". To je inline styl, a ten Content-Security-
   Policy blokuje: hlavička v .htaccess má style-src 'self', takže by
   se všech 31 míst tiše nevykreslilo se správnou mezerou.

   Povolit kvůli tomu 'unsafe-inline' by CSP z velké části zahodilo,
   takže radši tohle. Hodnoty jsou přesně ty původní, žádná se
   nesjednocovala — sjednocení mezer je jiná úloha než tahle.

   !important tu není z lenosti. Výš v souboru jsou pravidla o dvou
   třídách, tedy vyšší specificity než jedna utility třída:

     .card > .divider{margin-top:16px}
     .card > .divider + *{margin-top:16px}
     .card > .card-title + *{margin-top:0}
     .card > .sub + *{margin-top:8px}

   Inline styl je přebíjel všechny, protože inline vyhrává nad
   selektory. Bez !important by `class="divider mt-14"` dostalo 16px
   místo 14px a mezera by se tiše změnila. !important tady tedy
   nezavádí novou sílu — jen vrací tu, kterou to mělo předtím. */
.mt-6{margin-top:6px !important}
.mt-8{margin-top:8px !important}
.mt-9{margin-top:9px !important}
.mt-10{margin-top:10px !important}
.mt-11{margin-top:11px !important}
.mt-12{margin-top:12px !important}
.mt-14{margin-top:14px !important}
.mt-16{margin-top:16px !important}
.mb-12{margin-bottom:12px !important}

/* ==================================================================
   Záložka Mapy
   ==================================================================
   Seznam modů je vlastní (řádky s textem a dvojicí tlačítek), ne .gem —
   mod má dva stavy výběru (chci/nechci) a delší text, dlaždice z vendora
   by ho nesla špatně. Chipy voleb (corrupted, tier…) jsou .chip-btn
   z vendora — chovají se stejně (radio přes .is-on).

   `.card-wide` (karta přes celou šířku mřížky) tu byla taky, ale je
   společná s Flipperem, takže bydlí nahoře u ostatních pravidel `.card`.
   Vznikla dvakrát nezávisle ve dvou souběžných větvích — při merge se to
   projeví jako dvě identická pravidla, ne jako konflikt. */
/* Hledání má viditelný popisek, ne jen placeholder: v placeholderu jsou
   od 14. 8. 2026 příklady dotazů („reflect, regen, crit…"), takže by po
   prvním napsaném znaku nezůstalo nic, co pole pojmenuje. */
.mod-q-lbl{display:block;font-size:13px;color:var(--text-dim)}
.mod-q{width:100%;margin-top:10px}
.card > .mod-q-lbl + .mod-q{margin-top:5px}
/* Vysvětlivka pod jednou volbou (Druh mapy, Tier, Speciální mapy…) —
   patří k té volbě, ne ke kartě, takže drží menší mezeru než rytmus
   `.card > * + *`. */
.opt-note{margin-top:6px;font-size:13px}

/* Popisek a jeho volby na jednom řádku, popisky pod sebou zarovnané.
   Dřív byly všechny volby v jednom flexu s `flex-wrap`, takže se popisek
   odtrhl od svých tlačítek a zůstal viset na konci předchozí řádky. */
.opt-rows{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.opt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* `hidden` je jen `display:none` z prohlížečové šablony, takže ho vlastní
   `display:flex` výš přebije a prvek zůstane vidět. Týká se to přepínače
   Požadované mody, který se schovává pod dvěma Chci mody. */
.opt-row[hidden]{display:none}
.opt-lbl{flex:0 0 auto;font-size:13px;color:var(--text-dim)}
/* Zarovnaná šířka popisků jen tam, kde jsou řádky pod sebou (karta Mody).
   V úzké kartě by pevná šířka zbytečně tlačila chipy na další řádek. */
.opt-rows .opt-lbl{min-width:104px}
.opt-row .chips{margin:0;gap:6px}
/* .card > * + * dává 12px; uvnitř mřížky voleb si rytmus řídí .opt-rows */
.card > .opt-row + .opt-row{margin-top:9px}

/* Vkládání mapy ze hry je sbalené za tlačítkem hned nad seznamem modů.
   Otevřené odsouvá seznam dolů, což je v pořádku — je to vědomý krok
   hráče, ne trvalý stav. */
.paste-fold{margin-top:12px}
.paste-toggle{font-size:13.5px;padding:7px 13px}
.paste-toggle.is-on{border-color:var(--line-2);color:var(--text)}

.tier-box{display:flex;align-items:center;gap:7px}
.tier-box .num{width:100%;min-width:0;text-align:center}
.tier-dash{flex:0 0 auto;color:var(--text-faint)}
.num:disabled{opacity:.4;cursor:not-allowed}

/* Procházení celého seznamu je sbalené vedle vkládání mapy — obojí je
   volitelná cesta k výběru, hlavní vstup je hledání nad nimi. */
.browse-fold{margin-top:10px}

/* Vybrané mody ve dvou skupinách nad výsledky. Obě jsou vidět vždycky,
   i prázdné: mizející skupina by při prvním kliknutí posunula seznam pod
   sebou. Skupinu pojmenovává TEXT („Nechci (3)"), barva ji jen podpírá. */
.mpicks{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.mpick{display:flex;gap:9px;align-items:flex-start}
.mpick-h{flex:0 0 auto;min-width:78px;font-size:12.5px;padding-top:5px}
.mpick-b .mpick-h{color:#e8836d}
.mpick-w .mpick-h{color:var(--gold)}
.mpick-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1 1 auto}
.mpick-none{font-size:12.5px;color:var(--text-faint);padding-top:5px}
.mchip{
  font:inherit;font-size:12.5px;padding:5px 9px;border-radius:var(--radius);
  cursor:pointer;background:none;border:1px solid var(--line);
  display:inline-flex;align-items:baseline;gap:6px;
  /* Dlouhý text modu se zalomí uvnitř chipu, nepřeteče kartu vodorovně. */
  max-width:100%;text-align:left;white-space:normal;
  /* Chip je jediná cesta, jak mod z výběru odebrat, tedy plnohodnotný
     ovládací prvek — ne dekorace u seznamu jako dřív. Proto dotyková
     výška, ne jen tolik, kolik zabere text. */
  min-height:32px;
}
.mchip.w{border-color:var(--gold);color:var(--gold);background:#221d10}
.mchip.b{border-color:var(--danger);color:#e8836d;background:#231110}
.mchip-x{flex:0 0 auto;opacity:.75}
.mchip:hover .mchip-x{opacity:1}

/* Otevřený seznam modů (`Procházet mody`) je VLASTNÍ scrollbox, ne tok
   stránky — dřív se scrollovalo celou `.scroller`, takže na Mapách
   (78 položek) natáhlo otevření seznamu stránku na ~5000 px a levá karta
   ztratila jakoukoli souvislost s pravou vedle sebe (report „Modifier
   Browser Layout", 4. 9. 2026). Vzor je `.gem-list`/`.ci-list`: mřížka
   ohraničených dlaždic + `max-height` + `overflow-y:auto`, NE flat seznam
   se sdíleným `border-bottom` mezi řádky — ten by se u nesourodých výšek
   (jednořádkový mod vs. dvouřádkový s NM/shared/yield poznámkou) rozjel,
   protože grid dorovnává výšku řádku na nejvyšší buňku v něm.

   Šířka na dva sloupce se měří na reálném obsahu (viz report), ne
   odhaduje — nejdelší běžné texty modů se do jednoho sloupce prostě
   nevejdou dřív, než na to je místo. */
.mod-list{margin-top:12px}
.mod-list.is-hint{
  padding:11px;border:1px solid var(--line);border-radius:var(--radius);
}
.mod-list.is-open{
  display:grid;gap:8px;grid-template-columns:1fr;
  max-height:340px;overflow-y:auto;padding-right:3px;
}
@media (min-width:900px){
  .mod-list.is-open{grid-template-columns:1fr 1fr}
}
/* Nadpis „Mody Originator a Nightmare map" musí přes OBA sloupce —
   jinak by dvousloupcová mřížka vypadala, jako by patřil jen jednomu. */
.mod-t17-head{
  grid-column:1/-1;margin:10px 10px 4px;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint);
}

/* Řádek je `<button>`, ne div s posluchačem — Enter i mezerník ho vyvolají
   samy a `:focus-visible` z hlavičky souboru mu dá zlatý obrys. Dlaždice
   nese vlastní border na všech stranách (žádný sdílený `border-bottom`),
   takže nesourodá výška sousedů ve stejném řádku mřížky nevadí. */
.mod{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  width:100%;min-width:0;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ink-3);color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.mod:hover{background:var(--ink-4);border-color:var(--line-2)}
.mod.is-want{background:#16150c}
.mod.is-ban{background:#1a0f0e}
.mod.is-want:hover{background:#1c1a10}
.mod.is-ban:hover{background:#201312}
.mod-main{display:block;min-width:0}
.mod-txt{font-size:14px;line-height:1.4}
.mod-sub{display:block;font-size:12px;color:var(--text-faint);margin-top:1px}
.mod-shared{color:var(--gold);cursor:help}
/* Štítek stavu nese jméno skupiny textem, takže se stav pozná i bez barvy
   a přečte ho odečítač obrazovky. Prázdný u nevybraného modu nezabírá. */
.mod-state{
  flex:0 0 auto;font-size:12px;border-radius:var(--radius);white-space:nowrap;
}
.mod-state.w{border:1px solid var(--gold);color:var(--gold);background:#221d10;padding:3px 9px}
.mod-state.b{border:1px solid var(--danger);color:#e8836d;background:#231110;padding:3px 9px}
.paste-btns{display:flex;gap:8px;flex-wrap:wrap}
.paste-list{margin:4px 0 0;padding-left:18px;font-size:13.5px;color:var(--text-dim)}
.paste-list li{margin:2px 0}

@media (max-width:640px){
  .mod{flex-direction:column;align-items:flex-start;gap:6px}
  /* Užší scrollbox na mobilu — méně svislého místa nad ohybem a jeden
     sloupec širokých dlaždic stejně unese míň řádků najednou. */
  .mod-list.is-open{max-height:320px}
  /* popisek nad volbami — vedle sebe by na 320 px zbylo na chipy nic */
  .opt-row{gap:5px}
  .opt-lbl{flex-basis:100%;min-width:0}
  /* Totéž u skupin vybraných modů: na 320 px by na chipy vedle nadpisu
     zbylo pár desítek pixelů a každý by se lámal na tři řádky. */
  .mpick{flex-direction:column;gap:4px}
  .mpick-h,.mpick-none{padding-top:0}
  /* Na dotyku je odebrání chipu hlavní způsob práce s výběrem, tak dostane
     plnou dotykovou výšku — na myši by 44 px zbytečně roztahovalo skupiny. */
  .mchip{min-height:44px}
  /* Totéž pro obě rozbalovací tlačítka (Procházet mody, Vložit mapu ze hry).
     `.paste-toggle` nemá jiného konzumenta než tuhle záložku — ověřeno —
     takže se tím nikam jinam nesahá. */
  .paste-toggle{min-height:44px}
}

/* ---------- 404 ----------
   Jediná stránka mimo index.php (404.html, ErrorDocument v .htaccess).
   Má masthead (bez záložek) a patičku jako zbytek webu; obsah je karta.
   Vystředění jde přes min-height, ne přes flex na .scroller — ten je
   společný s index.php a globální změna by hnula rozložením záložek.
   Odečtených 150 px je zhruba masthead + patička. */
.err404{min-height:calc(100vh - 150px);display:flex;align-items:center;justify-content:center;padding:36px 18px}
.err404-card{max-width:430px;text-align:center;padding:26px 28px 28px}
.err404-code{margin:0;font-family:var(--mono);font-size:56px;line-height:1;color:var(--gold)}
.err404 h1{margin:0;font-size:22px;font-weight:600}
/* .solid-btn je psané pro tlačítka v modalech — jako odkaz potřebuje
   blokové chování a zrušené podtržení */
.err404 .solid-btn{display:block;text-decoration:none;text-align:center}

/* ---------- Recombinator ----------
   Řádky modů jsou klikací (výběr „chci zachovat") — vypadají jako
   chipy Map, ale nesou víc obsahu (badge, ambiguity select), takže mají
   vlastní třídu. Žádné inline styly, viz CSP. */
/* Cílová base — hledání místo seznamu. Nativní datalist vysypal u některých
   tříd přes sto jmen přes celou výšku okna; popup je proto stropovaný
   a scrolluje uvnitř. `.fbox` je už position:relative, takže kotva je
   hotová. Šířka je 100 % pole a min-width drží čitelnost jmen i v úzké
   kartě; překrytí sousedního pole je v pořádku, popup je nad ním. */
.rc-combo .rc-pop{
  position:absolute;z-index:30;top:calc(100% + 3px);left:0;
  width:100%;min-width:236px;max-height:288px;overflow-y:auto;
  margin:0;padding:3px;list-style:none;
  background:var(--ink-2);border:1px solid var(--line-2);
  border-radius:var(--radius);box-shadow:0 8px 22px rgba(0,0,0,.55);
}
.rc-combo .rc-pop[hidden]{display:none}
.rc-opt{
  display:flex;align-items:baseline;gap:8px;
  padding:7px 9px;border-radius:var(--radius);cursor:pointer;
  font-size:13.5px;color:var(--text-dim);
}
.rc-opt:hover{background:var(--ink-3);color:var(--text)}
.rc-opt.is-active{background:#221d10;color:var(--text);outline:1px solid var(--gold)}
.rc-opt[aria-selected="true"] .gname{color:var(--gold)}
.rc-opt .gname{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-fam{flex:0 0 auto;font-size:11px;color:var(--text-faint);white-space:nowrap}
.rc-empty{padding:16px 9px;text-align:center;font-size:13px;color:var(--text-faint)}
/* Lupa vysvětluje, že se do pole píše — stejná pobídka jako u .gem-search.
   Nesmí brát kliky, jinak by se pod ní seznam neotevřel. */
.rc-combo::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  margin-top:-7px;border:1.5px solid var(--text-faint);border-radius:50%;
  pointer-events:none;
}
.rc-combo::before{
  content:"";position:absolute;right:8px;top:50%;width:1.5px;height:5px;
  margin-top:2px;background:var(--text-faint);transform:rotate(-45deg);
  pointer-events:none;
}
/* S vybranou bází drží pravý okraj pole křížek `.row-x` (zrušit volbu),
   takže lupa ustoupí — obojí naráz by se překrývalo. Třídu přepíná
   recomb.js spolu s viditelností křížku. */
.rc-combo.is-picked::after,.rc-combo.is-picked::before{display:none}
/* Křížek u cílové base je vidět, jakmile je base vybraná — na rozdíl od
   číselných polí kalkulaček se neschovává do hoveru řádku. Zrušení volby
   je tu hlavní ústupová akce a `.frow` sdílí s polem ilvl, takže by
   hover-only ovládání bylo na dotyku i myší hůř k nalezení. */
.rc-combo .row-x{opacity:1}
/* Mobilní varianta MUSÍ stát tady, ne v hlavním bloku @media (max-width:640px)
   nahoře — ten je v souboru DŘÍV než sekce Recombinatoru, takže by ho
   stejně specifické `.rc-combo .rc-pop` níž přebilo a mobil by zůstal
   na desktopových hodnotách (změřeno: popup 236 px vyčuhoval z 375px
   displeje o 17 px a dělal vodorovný scroll ve `.scroller`). */
@media (max-width:640px){
  /* Cílová base a ilvl sdílí jeden `.frow`; bez zalomení se obě pole
     smrskla na 41 px a nedalo se do nich psát. */
  #rcGoalCard .frow{flex-wrap:wrap}
  #rcGoalCard .frow .fbox{flex:1 1 150px}
  .rc-combo .rc-pop{min-width:0;max-height:245px}
}

/* Nativní úchyt pro tažení kreslil v pravém dolním rohu šrafovaný trojúhelník
   pod posuvníkem — jediný kus nativního chromu v jinak vlastním UI. Výšku
   drží `min-height`, takže tažení nic nepřidávalo. Scrollování zůstává.
   Zúženo na Recombinator: `.merc-paste` sdílí i Mercenary a ten sem nepatří. */
#view-recomb .merc-paste{resize:none}

.rc-item{margin-top:10px}
.rc-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:14.5px}
.rc-meta{color:var(--text-faint);font-size:12.5px}
.rc-mod{
  display:flex;gap:8px;align-items:flex-start;width:100%;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 9px;margin-top:6px;background:var(--ink-3);
  color:var(--text-dim);font-size:13px;line-height:1.45;cursor:pointer;
}
.rc-mod:hover{border-color:var(--line-2)}
.rc-mod.is-want{border-color:var(--gold);background:#221d10;color:var(--text)}
.rc-mod.rc-dead,.rc-mod.rc-static{cursor:default}
.rc-mod.rc-dead:hover,.rc-mod.rc-static:hover{border-color:var(--line)}
.rc-side{
  flex:0 0 auto;min-width:18px;text-align:center;font-family:var(--mono);
  font-size:11px;color:var(--text-faint);border:1px solid var(--line);
  border-radius:6px;padding:1px 4px;margin-top:1px;
}
.rc-badge{
  display:inline-block;font-size:10.5px;padding:0 6px;border-radius:6px;
  border:1px solid var(--line-2);color:var(--text-faint);white-space:nowrap;
}
.rc-b-frac{color:#e8a33d;border-color:#8a6423}
.rc-b-warn{color:#e8836d;border-color:var(--danger)}
.rc-c-target{color:var(--ok);border-color:var(--ok)}
/* „mody ano, jiná base" leží mezi cílem a použitelným dál, tak i vypadá:
   jantar jako u fractured odznaku, ne zelená (není to cíl) a ne červená
   (item o nic nepřišel). */
.rc-c-wrongbase{color:#e8a33d;border-color:#8a6423}
.rc-c-reuse{color:#72a4f2;border-color:#3a5687}
.rc-c-dead{color:#e8836d;border-color:var(--danger)}
.rc-hint{margin-top:8px}

/* Simulace úspěšného úklidu (vložený item)
   ----------------------------------------
   Hypotetický stav se musí poznat na první pohled a nesmí vypadat jako
   chyba — proto ztlumení a přeškrtnutí, ne červená. `--danger` by
   z vratné simulace dělala poplach. Řádek zůstává na místě i s ovládáním
   „Vrátit", takže se nikam neztratí. */
.rc-mod.rc-simgone{opacity:.55;background:transparent;border-style:dashed}
.rc-mod.rc-simgone s{text-decoration-color:var(--text-faint)}
.rc-b-sim{color:var(--text-faint);border-color:var(--line-2)}
/* Akce se ukazuje jen na řádku, kde ji poradce doporučuje, takže se
   nemusí schovávat do hoveru — na dotyku by to stejně nefungovalo.

   Popisek je ale mnohem delší než „Fractured" a „×" v builderu, pro
   které je sdílená komponenta stavěná: `.rc-row-btn` má `white-space:
   nowrap` a `.rc-row-btns` je `flex:0 0 auto`, takže se na úzkém
   displeji nemá co zúžit a řádek vytlačí ven (změřeno: 32 px přetečení
   na 320 px). Tenhle jeden se proto smí zalomit a zúžit — ostatní
   ovládání řádku zůstává, jak bylo.

   POZOR: tenhle komentář měl do 22. 8. 2026 uzavírací značku UPROSTŘED
   (za slovem „bylo"), takže zbytek textu vypadl ven jako selektor —
   a parser spolkl NÁSLEDUJÍCÍ pravidlo jako jeho deklarační blok.
   Obětí byl `.rc-simbar`, který se tím vykresloval úplně bez stylů.
   Uzavírací značka se proto v textu komentáře nesmí objevit ani jako
   ukázka; když se sem přidává pravidlo, ověř, že ho prohlížeč doopravdy
   VIDÍ (`el.matches(r.selectorText)` nad `document.styleSheets`), ne
   jen že je v souboru.

   Vlastní pravidla tlačítka nejsou tady, ale AŽ ZA definicí
   `.rc-row-btn`/`.rc-row-btns` níž v souboru — jsou to jednotřídové
   selektory o téže síle, takže rozhoduje pořadí a tady výš by prohrály
   (změřeno: `white-space` zůstalo `nowrap`). Stejná past jako
   u utility tříd na konci souboru. */
/* Item, se kterým recombinovat nejde (Mirrored, Corrupted…). Hlavička
   itemu zůstává, mody a jejich ovládání se nekreslí vůbec — tohle je
   jediný obsah karty, takže potřebuje vlastní odsazení od hlavičky. */
.rc-blocked{margin-top:10px;color:var(--danger)}
.rc-bside-empty{margin-top:6px}
.rc-pick{
  display:block;margin-top:4px;max-width:100%;font-size:12px;
  background:var(--ink-2);color:var(--text);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:3px 6px;
}
.rc-warn{margin:6px 0 0;font-size:13px;line-height:1.45}
.rc-w-danger{color:#e8836d}
.rc-w-risk{color:#e8a33d}
.rc-w-opt{color:#72a4f2}
.rc-w-info{color:var(--text-dim)}
.rc-steps{margin:6px 0 0;padding-left:20px;font-size:13.5px;color:var(--text-dim)}
.rc-steps li{margin:4px 0}
/* Patičkový řádek karty výsledku („Pokračovat s výsledkem" +
   „Zobrazit detaily") přetékal pod ~410 px: oba `.ghost-btn` mají
   `white-space:nowrap` a `.frow` (base pravidlo výš) nezalamuje, takže
   jejich součet (≈181 + 9 + ≈138 = 329 px) nešel do ~230 px vnitřní
   šířky karty na 320 px — změřeno, karta přetékala o 83 px a druhé
   tlačítko bylo vizuálně useknuté (viz
   tools/reports/recombinator-ui-36m-mobile-overflow-focused-investigation.md).
   Stejný vzor jako `#view-merc .frow{flex-wrap:wrap}` níž — zalomení
   nic nemění, když se obě tlačítka vejdou vedle sebe, jen to dovolí,
   když se nevejdou. `#rcOutCard` má ještě `#rcDetailRow` (jedno
   tlačítko), na to `flex-wrap` nemá žádný efekt. */
#rcOutCard .frow{flex-wrap:wrap}
.rc-verdict{margin:0;font-size:15.5px;font-weight:600}
.rc-v-ok{color:var(--ok)}
.rc-v-mid{color:#e8a33d}
.rc-v-bad{color:#e8836d}
.rc-nums{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.rc-num{
  flex:1 1 220px;min-width:0;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--ink-3);padding:8px 11px;
}
.rc-num-l{display:block;font-size:12px;color:var(--text-faint)}
.rc-num-v{display:block;font-size:21px;font-weight:700;color:var(--text)}
.rc-num-n{display:block;font-size:11.5px;color:var(--text-faint);line-height:1.4}
.rc-nnn{margin-top:2px}
/* Řádek NNN kandidáta: essence je PRIMÁRNÍ informace (co jít koupit
   a použít), text modu je podpůrný (proč to funguje) — obrácené pořadí
   než u ostatních `.rc-mod` řádků, kde je hlavní věcí sám mod. Ikona
   sedí uprostřed výšky dvouřádkového textu, proto `align-items:center`
   místo zděděného `flex-start`. */
.rc-nnn-row{align-items:center}
.rc-nnn-icon{width:24px;height:24px;flex:0 0 auto;object-fit:contain}
.rc-nnn-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.rc-nnn-name{font-size:14px;font-weight:600;color:var(--text)}
.rc-nnn-mod{font-size:12px;color:var(--text-faint)}
.rc-nnn-tags{display:block;margin-top:2px}
/* „Doporučeno" — tichý odznak nejlepší volby, ne interaktivní chip.
   Tlumená zlatá stejně jako vlajková dlaždice rozcestníku (`.tile.is-feat`
   v klidu #5f5122): plná `--gold` by řádek vykreslila jako trvale
   najetý/vybraný, přesně ta záměna, které se tenhle odznak vyhýbá. */
.rc-b-rec{color:var(--gold);border-color:#5f5122}
/* Klidný protějšek `.rc-warn` pro epistemické poznámky o modelu — sedí
   u vysvětlení ≈ (`rcEstNote`), ne nad receptem, a nese barvu `.note`,
   ne barvu varování. */
.rc-model-note{margin-top:6px}
.rc-out-row{
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  border-top:1px solid var(--line);padding:5px 0;font-size:13px;
}
.rc-out-row:first-child{border-top:0}
.rc-prob{flex:0 0 auto;min-width:56px;font-family:var(--mono);font-weight:700;color:var(--text)}
.rc-out-base{flex:0 0 auto;color:var(--text-faint);font-size:12px}
.rc-out-mods{flex:1 1 200px;min-width:0;color:var(--text-dim)}
.rc-elig{flex:1 1 100%;color:var(--text-faint);font-size:12px}
.rc-base{min-width:0}

/* ---------- Recombinator: účetnictví výsledků a annul ----------
   Žádná nová komponenta: řádek třídy i větev annulu berou tvar
   `.rc-out-row` (odznak + číslo + text), takže se úpravou jednoho
   místa mění všechny tři výpisy naráz. Přibývají jen dva sloupce,
   které v původním řádku nebyly. */
.rc-cls-row{
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  border-top:1px solid var(--line);padding:5px 0;font-size:13px;
}
.rc-cls-row:first-child{border-top:0}
.rc-cls-tbl .rc-badge{flex:0 0 auto}
.rc-cls-n{flex:1 1 120px;min-width:0;color:var(--text-dim)}
/* Nevypsaný zbytek je fakt o VÝPISU, ne o pravděpodobnosti — proto
   nejtišší barva v řádku, aby nesoupeřil s procentem. */
.rc-cls-rest{flex:0 0 auto;color:var(--text-faint);font-size:12px}
/* „sundá X" u větve annulu. Je to identita větve, ne stav výsledku,
   takže stojí PŘED popisem itemu a nese barvu textu, ne dim. */
.rc-out-lead{flex:0 0 auto;color:var(--text);font-size:12px}

/* ---------- Recombinator: série recombinací (Session) ----------
   Žurnál skutečně provedených kroků — karta je `.card-wide` jako
   `rcGoalCard`/`rcOutCard` sousedící s ní, žádná nová komponenta.
   Řádek žurnálu bere tvar `.rc-out-row` (číslo kroku ~ `.rc-out-base`,
   procento ~ `.rc-prob`), protože je to znovu „malý štítek + text +
   číslo vpravo" — jen s vlastním jménem tříd, ať se úpravou `.rc-out-row`
   nerozjede omylem i žurnál. */
.rc-sess-rows{margin-top:2px}
.rc-sess-row{
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  border-top:1px solid var(--line);padding:5px 0;font-size:13px;
}
.rc-sess-row:first-child{border-top:0}
.rc-sess-n{flex:0 0 auto;min-width:22px;color:var(--text-faint);font-family:var(--mono);font-size:12px}
.rc-sess-bases{flex:1 1 200px;min-width:0;color:var(--text-dim)}
.rc-sess-p{flex:0 0 auto;font-family:var(--mono);font-weight:700;color:var(--text)}
@media (max-width:640px){
  /* Řádek akcí („Vrátit poslední krok" / „Ukončit sérii") na 320px displeji
     nevejde vedle sebe beze zalomení — obě tlačítka (167 + 117 px) přetékala
     z ~262px vnitřní šířky karty o ~31 px (změřeno). Zalomení se týká jen
     TOHOHLE `.frow`, ne `.frow` obecně — stejný vzor jako
     `#rcGoalCard .frow{flex-wrap:wrap}` výš v souboru. */
  #rcSessCard .frow{flex-wrap:wrap}
}

/* ---------- Recombinator: ruční sestavení itemu ----------
   Druhá vstupní cesta do téhož itemu. Řádky vybraných modů jsou `.rc-mod`,
   tedy tytéž chipy jako u vloženého itemu — klik na ně znamená „chci
   zachovat" úplně stejně; navíc nesou ovládání (fracture, odebrat). */
/* `flex:0 0 auto` vrací to, co má `.seg` v základu — `.gemxp .seg` ho výš
   v souboru přepisuje na `1 1 auto` kvůli segmentům v kalkulačkách, které
   se mají roztáhnout na šířku karty. Dokud byla karta `display:block`,
   bylo to na přepínači režimu mrtvé pravidlo; jakmile se karta stala flex
   sloupcem, začal přepínač soupeřit s `.rc-mwrap` o volné místo a v mixu
   režimů si ho vzal (změřeno: tlačítka 37 → 48 px, celý obsah pod nimi
   o 11 px níž). Roztahovat se má zóna zadání, ne přepínač. Selektor musí
   přebít `.gemxp .seg` (0,0,2,0), takže samotné `.rc-modes` nestačí. */
.rc-modes{margin-top:10px}
#view-recomb .rc-modes{flex:0 0 auto}
/* Dvojice karet nahoře je pár, ne dvě nezávislé karty. `.top-cards` má
   globálně `align-items:start`, takže si každá karta držela svou přirozenou
   výšku a spodní hrany se rozcházely podle toho, kolik řádků zabral úvodní
   text zrovna té které karty — změřeno na 1280 px: paste/paste 306 vs 327,
   build/build 309 vs 284, mixy 306 vs 284 a 309 vs 327. Nad prázdnou kartou
   „Jak to funguje" to dělalo zubatou hranu ve všech čtyřech kombinacích.
   Pod 640 px karty stojí ve sloupci, kde není co dorovnávat — a min-height
   by tam jen vyrobil prázdné místo (přirozené výšky jsou tam 187–297 px). */
@media (min-width:641px){
  #view-recomb .top-cards{align-items:stretch}
  /* Zóna pro zadání itemu je stejně vysoká ve všech čtyřech kombinacích,
     takže řádek s tlačítky sedí v obou kartách ve stejné výšce. 242 px je
     nejvyšší přirozená varianta (vložení: úvod 67 + 14 + textarea 104 +
     řádek akcí 57), takže se nic neořízne, jen se dorovnají nižší. Volné
     místo, které by `stretch` stejně nechal ležet pod kartou, se tím jen
     posune tam, kde je k něčemu. Mezi 641 a ~1040 px se karty zúží, texty
     se zalomí na víc řádků a zóna přeroste — tam min-height nezabírá
     a výšku karet srovnává samo `stretch`. */
  .rc-mwrap{min-height:242px}
}
/* Zóna se roztáhne do výšky, kterou karta dostala od `stretch`, takže dno
   zóny je v obou kartách na stejné hodnotě i tam, kde min-height nezabírá
   (úzké karty mezi 641 a ~1040 px, kde se texty zalomí na víc řádků).
   Výsledky pod ní (`rcMsg`, `rcItem`) si dál berou svou přirozenou výšku —
   roztahuje se jen vstup, ne výpis. */
#view-recomb .top-cards > .card{display:flex;flex-direction:column}
.rc-mwrap{display:flex;flex-direction:column;flex:1 1 auto}
/* Řádek s akcemi (Vložit ze schránky / Smazat, Vyprázdnit item) drží dno
   té zóny v obou režimech. `padding-top` místo `margin-top`, protože
   `margin-top:auto` v flexu spolkne mezeru, jakmile obsah zónu vyplní.
   14 px je rytmus `.card > * + *`, tedy tentýž odstup jako mezi kartami. */
.rc-mwrap > .frow:last-child{margin-top:auto;padding-top:14px}
/* Úvodní text je vlastní blok, ne volné odstavce, aby měl stabilní výšku:
   hlavní obsah obou karet pak začíná na stejné hodnotě. Bez toho startovala
   textarea v druhé kartě o 21 px níž (její text je na 1280 px třířádkový
   proti dvouřádkovému) a v builderu naopak base první karty o 25 px níž
   (má o odstavec navíc). 67 px je nejvyšší přirozený úvod, takže se nic
   neořízne. Pod 640 px karty stojí pod sebou a není co srovnávat. */
.rc-intro{margin-bottom:14px}
@media (min-width:641px){
  .rc-intro{min-height:67px}
}
/* Base + item level jako dvě svislé skupiny popisek→pole. `.frow` sází
   popisek vedle pole na 132 px, což u dvou polí v řadě znamenalo, že
   „Item level" viselo mezi base a svým vlastním polem a na base zbylo
   125 px — míň, než měl popisek vedle něj. Base je hlavní ovládání, tak
   bere zbytek šířky; ilvl je dvojciferné číslo a pevný úzký sloupec stačí.
   Styly popisku jsou tady, ne v `.flbl` — `.flbl` jinde na webu sedí
   uvnitř `.frow` a globální pravidlo by je rozhodilo. */
.rc-bform{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:9px;margin-bottom:7px}
.rc-bform .flbl{display:block;margin-bottom:4px;font-size:12px;color:var(--text-faint);line-height:1.3}
/* Křížek `.row-x` tu není (builder ho nepoužívá), takže rezerva 30 px
   z `.fbox .num` by v úzkém poli jen ukusovala z místa na číslo. U base
   zůstává — kreslí se do ní lupa `.rc-combo::after`. */
.rc-bform .fgrp-ilvl .num{padding-right:9px}
/* Vyprázdnit item je ústupová akce, ne hlavní: `tiny` ghost, nic
   destruktivního (žádná červená) — maže jen rozdělaný sestavený item,
   ne data. Odsazení od pole modů dělá sdílené `.rc-mwrap > .frow:last-child`,
   ať je v obou režimech stejné. */
.rc-breset .ghost-btn:disabled{cursor:default;opacity:.4}
.rc-breset .ghost-btn:disabled:hover{border-color:var(--line);color:var(--text-dim)}
.rc-bnote{margin-top:6px;font-size:13px}
.rc-bside{
  display:flex;align-items:baseline;gap:8px;
  margin:14px 0 2px;padding-top:10px;border-top:1px solid var(--line);
}
.rc-bside-t{font-size:12.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-faint);font-weight:600}
.rc-bside-n{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text-faint)}
.rc-bside-n.is-max{color:var(--gold)}
/* Ovládání řádku vpravo. Musí zůstat nad 40 px na výšku dohromady kvůli
   dotyku a nesmí brát klik na řádek (výběr modu) — o to se stará JS guard
   na `.rc-row-btn`, ne pointer-events: tlačítka klikací být musí. */
.rc-row-btns{flex:0 0 auto;margin-left:auto;display:flex;gap:5px;align-items:center}
.rc-row-btn{
  background:var(--ink-2);border:1px solid var(--line-2);color:var(--text-faint);
  font:inherit;font-size:11px;line-height:1;padding:6px 8px;min-height:32px;
  border-radius:var(--radius);cursor:pointer;white-space:nowrap;
}
.rc-row-btn:hover{color:var(--text);border-color:var(--text-faint)}
.rc-row-btn[aria-pressed="true"]{color:#e8a33d;border-color:#8a6423;background:#241c0c}
.rc-row-x{font-size:14px;padding:3px 9px}
/* Tlačítko simulace úspěšného úklidu. Musí stát ZA `.rc-row-btn(s)`,
   protože je přebíjí a oba selektory mají stejnou sílu — výš v souboru
   by se neuplatnilo. Sdílená komponenta je stavěná na krátké popisky
   („Fractured", „×"): `white-space:nowrap` + `flex:0 0 auto` znamená, že
   se nemá co zúžit, a delší popisek vytlačí řádek ven (změřeno: 30 px
   přetečení na 320 px). Tenhle jeden se proto smí zalomit i zúžit
   a jeho řádek se smí zalomit taky — ostatní ovládání zůstává, jak bylo. */
.rc-mod.has-sim,.rc-mod.rc-simgone{flex-wrap:wrap}
.rc-sim-btns{flex:0 1 auto;min-width:0}
.rc-sim-btn{white-space:normal;text-align:left;min-width:0}
/* Doporučený cíl úklidu vs. „jen to jde sundat". Annul si nevybírá,
   takže simulovat jde každý legální mod — ale který z nich poradce
   doporučuje, se nesmí ztratit. Rozdíl je JEN barva (zlatá = hodnota,
   stejná řeč jako u `.is-want` a vlajkové dlaždice), ne jiné ovládání:
   velikost, pořadí v tabulátoru ani plocha na klik se nemění, takže si
   tím ostatní cíle nezhoršují dostupnost. Odznak navíc se nepřidává —
   v pěti řádcích pod sebou by z toho byl šum. */
.rc-sim-btn.is-rec{color:#c9a227;border-color:#8a6423}
.rc-sim-btn.is-rec:hover{color:#e8c04a;border-color:#c9a227}
/* Odznak „simulovaně odstraněno" je dlouhý a `.rc-badge` je z principu
   `nowrap`, takže text s ním se musí smět zúžit — jinak přeteče řádek
   ven (změřeno: 6 px na 320 px). Cílí se na vlastní třídu, ne na
   `> span`, aby se nezúžilo i písmeno strany v `.rc-side`. */
.rc-simtext{min-width:0}
/* Influence itemu v builderu: šest přepínačů nad mody. Barevně drží
   rodinu influence badge (.rc-b-inf), ne zlatou fracture — jsou to dvě
   různé věci. Zamčený stisknutý = vliv odvozený z vybraného modu (zmizí
   s ním), zamčený nestisknutý = třetí vliv, který item mít nemůže. */
.rc-binf{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:8px 0 2px}
.rc-binf-t{font-size:12.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-faint);font-weight:600;margin-right:3px;cursor:help}
.rc-inf:disabled{cursor:default}
.rc-inf:disabled:not([aria-pressed="true"]){opacity:.45}
.rc-inf:disabled:hover{border-color:var(--line-2);color:var(--text-faint)}
.rc-inf[aria-pressed="true"]{color:#c07ad0;border-color:#6b3f77;background:#1d1322}
.rc-inf[aria-pressed="true"]:disabled:hover{color:#c07ad0;border-color:#6b3f77}
/* 44 px na dotyk — stejná hranice, na jakou jsou měřené chipy v Mapách.
   Řádek modu je vyšší kvůli textu, takže tím nic nenaroste. */
.rc-add{
  display:block;width:100%;margin-top:6px;padding:11px 10px;
  background:none;border:1px dashed var(--line-2);border-radius:var(--radius);
  color:var(--text-dim);font:inherit;font-size:13px;cursor:pointer;
}
.rc-add:hover{border-color:var(--gold);color:var(--text)}
.rc-add:disabled{cursor:default;opacity:.45}
.rc-add:disabled:hover{border-color:var(--line-2);color:var(--text-dim)}
/* Odsazení od pole s base — text pod ním je nápověda k němu, ne další pole. */
.rc-bempty{margin:10px 0 0;font-size:12.5px;color:var(--text-faint)}
/* Picker modů je vevnitř karty, ne plovoucí popup: seznam s dvouřádkovými
   texty by v absolutně pozicovaném popupu na mobilu vylezl z viewportu.
   Uvnitř karty je stropovaný kartou a scrolluje sám v sobě. */
.rc-picker{
  margin-top:8px;padding:9px;border:1px solid var(--gold);
  border-radius:var(--radius);background:var(--ink-2);
}
.rc-mod-list{
  list-style:none;margin:7px 0 0;padding:0;
  max-height:302px;overflow-y:auto;
}
.rc-mopt{
  display:block;padding:7px 9px;border-radius:var(--radius);
  cursor:pointer;font-size:13px;color:var(--text-dim);
}
.rc-mopt:hover{background:var(--ink-3);color:var(--text)}
.rc-mopt.is-active{background:#221d10;color:var(--text);outline:1px solid var(--gold)}
.rc-mopt-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.rc-mopt-h .gname{color:var(--text);font-size:13.5px}
.rc-mopt-t{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--text-dim)}
.rc-mopt-w{display:block;margin-top:2px;font-size:11.5px;color:var(--text-faint)}
.rc-mopt.is-off{cursor:default;opacity:.55}
.rc-mopt.is-off:hover{background:none;color:var(--text-dim)}
.rc-b-nn{color:#72a4f2;border-color:#3a5687}
.rc-b-inf{color:#c07ad0;border-color:#6b3f77}

/* Hranice je 820 px, ne obvyklých 640: karty stojí ve dvou sloupcích už
   od 641 px, takže na 641 px zbylo na base 150 px — míň, než je jeho
   placeholder. Skupiny proto jdou pod sebe všude, kde je karta úzká;
   popisek zůstává nalepený na svém poli a ilvl si drží úzkou šířku, ať
   se dvouciferné číslo netáhne přes celou kartu. Změřeno: na 821 px má
   base 238 px, pod tím se stohuje. */
@media (max-width:820px){
  .rc-bform{grid-template-columns:1fr;gap:10px}
  .rc-bform .fgrp-ilvl{max-width:124px}
}

@media (max-width:640px){
  .rc-mod-list{max-height:262px}
  /* Na dotyku jsou fracture a křížek jediné ovládání řádku — 25 px se
     trefuje špatně. Řádek modu je i tak vyšší (dva řádky textu), takže
     zvětšení tlačítek jeho výšku nemění. */
  .rc-row-btn{min-height:40px;padding:6px 10px}
  .rc-row-x{font-size:16px;padding:3px 12px}
}

/* Přepočet Recombinatoru běží na serveru, takže mezi změnou vstupu
   a novým výsledkem je krátká prodleva (~115 ms). Poslední platný
   výsledek proto zůstává na obrazovce a jen se ztlumí — mazat ho
   a znovu vykreslovat by při psaní blikalo. Rozměry se nemění, takže
   nic pod tím neposkakuje. */
#view-recomb .is-busy{opacity:.55;transition:opacity .12s}
@media (prefers-reduced-motion:reduce){
  #view-recomb .is-busy{transition:none}
}

/* ==================================================================
   DELVE — regex builder
   Vlastní třídy místo ohýbání sdílených komponent: dlaždice tu nesou
   ikonu, dva řádky textu a cenu, což `.chip-btn` (jednořádkový chip)
   ani `.gem` (mřížka gemů) nikdy nedělaly. Barvy, rámečky a `is-on`
   ale kopírují zavedený jazyk webu, takže nevzniká druhý design.
   Všechno je scopované do #view-delve.
   ================================================================== */

/* Karta výběru je na CELOU šířku — výsledný regex nese sdílený panel
   `#delveOut` nad `.scroller`, stejně jako u vendoru, Bestiary a Map,
   takže tu žádný druhý sloupec není. Skupiny jdou pod sebou. */
#view-delve .dv-h{
  margin:14px 0 7px;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--text-faint);
}

/* Mřížky skupin. Na plné šířce karty jsou tři sloupce: bossové vyjdou
   na jeden řádek a šest fosilních nod na 3×2. Změřeno na 1280 px —
   dlaždice drží jeden řádek a nic se neořezává. */
#view-delve .dv-grid{display:grid;gap:6px}
#view-delve .dv-grid-b,
#view-delve .dv-grid-f,
#view-delve .dv-grid-o{grid-template-columns:1fr}
@media (min-width:560px){
  #view-delve .dv-grid-b,
  #view-delve .dv-grid-f,
  #view-delve .dv-grid-o{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:860px){
  /* Všechny tři skupiny jedou na třech sloupcích: bossové i další hodnotné
     nody vyjdou na jeden řádek, šest fosilních nod na 3×2. */
  #view-delve .dv-grid-b,
  #view-delve .dv-grid-f,
  #view-delve .dv-grid-o{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Dlaždice. `min-width:0` je nutné: bez něj by dlouhé jméno rozšířilo
   grid stopu a builder by přetekl. Text se zkracuje ellipsisem, plné
   znění nese `title` u node jména. */
#view-delve .dv-tile{
  display:flex;align-items:center;gap:8px;min-width:0;width:100%;
  padding:7px 9px;text-align:left;cursor:pointer;
  background:var(--ink-3);border:1px solid var(--line);border-radius:7px;
  color:var(--text-dim);font:inherit;font-size:12.5px;line-height:1.3;
  transition:border-color .12s,background .12s,color .12s;
}
#view-delve .dv-tile:hover{border-color:var(--line-2);color:var(--text)}
#view-delve .dv-tile.is-on{border-color:var(--gold);background:#221d10;color:var(--gold)}
#view-delve .dv-tile:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

#view-delve .dv-ico{
  width:22px;height:22px;flex:0 0 auto;box-sizing:border-box;padding:2px;
  background:var(--ink-4);border-radius:50%;
}
#view-delve .dv-tx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
#view-delve .dv-node{
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-delve .dv-sub{
  font-size:11px;color:var(--text-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-delve .dv-tile.is-on .dv-sub{color:#a4823a}
#view-delve .dv-price{
  flex:0 0 auto;font-family:var(--mono);font-size:11.5px;color:var(--text-faint);
}
#view-delve .dv-tile.is-on .dv-price{color:var(--gold)}

/* Jméno fosílie s ikonou v tabulce. Výsledný regex má vlastní styly
   sdílené s ostatními generátory (.output nahoře v souboru) — Delve
   k nim schválně nic nepřidává, jinak by vznikla čtvrtá varianta téhož
   panelu. */
#view-delve .dv-fcell{display:flex;align-items:center;gap:8px}

/* ==================================================================
   PoE 2 EXPEDICE — regex na bonusy Grand Expedition
   Tentýž vizuální jazyk jako dlaždice Delve o kus výš (rámeček, `is-on`,
   dva řádky textu), ale VLASTNÍ třídy scopované do #view-poe2expedition.
   Ohýbat `.dv-*` se nesmí: ty jsou scopované do #view-delve a natvrdo
   berou `--gold`, takže by se rozšířením scope spřáhly dvě nesouvisející
   záložky a karmínová sekce by dostala zlatou dlaždici.

   Výsledný regex nese SDÍLENÝ panel `#p2eOut` nad `.scroller`. Tenhle
   blok ho NESMÍ přebíjet — žádné pravidlo na `.out-code`, `.meter`,
   `.copy-btn`, `.out-body` ani `.out-head`. Jinak by vznikla další
   varianta téhož panelu, která se dřív nebo později rozejde.
   ================================================================== */
/* Nadpis skupiny bere `--text-dim`, ne `--text-faint`. Naměřeno
   getComputedStyle na skutečném prvku: `--text-faint` (#6a717c) vychází
   na ploše karty (#101216) na 3,81:1, tedy pod AA pro drobné písmo —
   a 10,5px verzálky drobné písmo jsou. `--text-dim` (#9aa1ab) dává na
   téže ploše 7,20:1. Je to týž token a týž důvod, jakým už sekce
   opravuje `.note`, `.tile-kind` a `.tile-go` (viz `.sec-poe2` skupina
   výš) — nová barva ani nový token nevzniká. */
#view-poe2expedition .ex-h{
  margin:14px 0 7px;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.13em;color:var(--text-dim);
}

/* Skupiny 3 / 3 / 1. Nad 860 px vyjde každá skupina na jeden řádek,
   takže je dělení rodin vidět na první pohled. */
#view-poe2expedition .ex-grid{display:grid;gap:6px;grid-template-columns:1fr}
@media (min-width:560px){
  #view-poe2expedition .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:860px){
  #view-poe2expedition .ex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* `min-width:0` je nutné: bez něj by dlouhý anglický text modu rozšířil
   grid stopu a karta by přetekla. Text se zkracuje ellipsisem, plné
   znění nese `title`. Dva řádky drží dlaždici nad 44 px i na mobilu. */
#view-poe2expedition .ex-tile{
  display:flex;align-items:center;gap:8px;min-width:0;width:100%;
  padding:7px 9px;text-align:left;cursor:pointer;
  background:var(--ink-3);border:1px solid var(--line);border-radius:7px;
  color:var(--text-dim);font:inherit;font-size:12.5px;line-height:1.3;
  transition:border-color .12s,background .12s,color .12s;
}
#view-poe2expedition .ex-tile:hover{border-color:var(--line-2);color:var(--text)}
/* `#2a1013` je zavedená plocha vybraného stavu sekce (game-btn.is-on,
   .mchip.w, .mod-state.w, .chip-btn.is-on) — nová barva nevzniká.
   Text bere `--poe2-text`, ne `--poe2`: ten má na drobném písmu 4,37:1,
   tedy pod hranicí AA, a patří na rámečky a plochy.

   Selektor začíná `.sec-poe2`, i když `#view-poe2expedition` mimo sekci
   PoE 2 stejně nikdy neexistuje: CLAUDE.md žádá, aby KAŽDÉ použití
   karmínu sedělo pod `.sec-poe2`, a routing-tests to hlídají
   strukturálně nad selektorem. Scope má být dokazatelný, ne odvozený
   z toho, kde se to id náhodou vyskytuje. */
.sec-poe2 #view-poe2expedition .ex-tile.is-on{
  border-color:var(--poe2);background:#2a1013;color:var(--poe2-text);
}
.sec-poe2 #view-poe2expedition .ex-tile:focus-visible{outline:2px solid var(--poe2);outline-offset:1px}

#view-poe2expedition .ex-tx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
/* Obě barvy textu jsou ZMĚŘENÉ, ne zděděné od sousední záložky.
   `--text-faint` (jaký na druhém řádku používá Delve) vychází na
   `--ink-3` jen **3,54:1**, tedy pod AA pro drobné písmo. Naměřeno
   getComputedStyle na skutečném prvku: `--text` 13,88:1, `--text-dim`
   6,69:1 (a 6,82:1 na vybrané ploše #2a1013), `--poe2-text` 5,00:1 na
   vybrané ploše. Hierarchii tak drží dva PRŮCHOZÍ stupně plus velikost
   a řez, ne podkrocený kontrast.

   `--text-faint` proto v tomhle bloku nefiguruje ani jednou — ani na
   dlaždicích, ani na nadpisech skupin (ty ho nesly do 8. 9. 2026, viz
   komentář u `.ex-h` výš). Sdílené komponenty panelu (`.out-hint`,
   `.meter-num`) ho pořád berou; to je celosite'ový stav mimo tenhle
   nástroj a tenhle blok ho nepřebíjí. */
#view-poe2expedition .ex-name{
  font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Anglický řádek je doslovný herní text — hráč podle něj pozná mod na
   uzlu, takže se nepřekládá ani nezkracuje jinak než ellipsisem. Barvu
   při výběru NEMĚNÍ: `--text-dim` projde na obou plochách, takže se
   vybraný stav pozná rámečkem, plochou a karmínovým jménem. */
#view-poe2expedition .ex-mod{
  font-size:11px;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sec-poe2 #view-poe2expedition .ex-tile.is-on .ex-name{color:var(--poe2-text)}

/* ---- Recombinator: režim „Od cíle“ (Reverse V1) ----
   Viditelnost řídí JEDNA třída na #view-recomb (`rc-rev-on`, přepíná
   recomb.js), ne atribut `hidden` na každé kartě: karty párového režimu si
   `hidden` přepínají samy podle stavu a druhý zdroj pravdy by se s nimi
   přetahoval. `!important` přebíjí právě ty jejich vlastní přepínače. */
#view-recomb .rc-rev-only{display:none}
#view-recomb.rc-rev-on .rc-rev-only{display:block}
#view-recomb.rc-rev-on .top-cards,
#view-recomb.rc-rev-on #rcGoalCard,
#view-recomb.rc-rev-on #rcOutCard,
#view-recomb.rc-rev-on #rcSessCard,
#view-recomb.rc-rev-on #rcEmptyCard{display:none !important}
/* Dvě tlačítka vedle sebe se na 320 px nevejdou (změřeno: „Zrušit cíl“
   přečníval kartu o 37 px) — týž vzor jako `#rcOutCard .frow`. */
#view-recomb .rc-rev-only .frow{flex-wrap:wrap}
#view-recomb .rc-rev-list,#view-recomb .rc-rev-chips,#view-recomb .rc-rev-modlist,#view-recomb .rc-rev-goal{
  list-style:none;margin:0;padding:0;
}
#view-recomb ol.rc-rev-list{list-style:decimal;padding-left:20px;font-size:13.5px;color:var(--text-dim)}
#view-recomb .rc-rev-modlist{max-height:260px;overflow-y:auto;margin-top:7px}
#view-recomb .rc-rev-add{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:6px 8px;border-radius:var(--radius);font:inherit;font-size:13px;color:var(--text-dim);
}
#view-recomb .rc-rev-add:hover,#view-recomb .rc-rev-add:focus-visible{background:var(--ink-3);color:var(--text)}
#view-recomb .rc-rev-add:disabled{opacity:.5;cursor:default;background:none;color:var(--text-faint)}
#view-recomb .rc-rev-chip{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 8px;margin-top:4px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ink-3);font-size:13px;
}
#view-recomb .rc-rev-chip .row-x,#view-recomb .rc-rev-invh .row-x{position:static;flex:0 0 auto}
#view-recomb .rc-rev-side{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
#view-recomb .rc-rev-goal li{padding:3px 0;font-size:13.5px}
#view-recomb .rc-rev-inv{padding:8px 10px;margin-top:6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-3)}
#view-recomb .rc-rev-inv.is-bad{border-color:#5a4020}
#view-recomb .rc-rev-invh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--text)}
#view-recomb .rc-rev-mods{margin-top:4px;padding-left:10px;font-size:12.5px;color:var(--text-dim);line-height:1.5}
#view-recomb .rc-rev-prop{padding:12px 13px;margin-top:10px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--ink-3)}
#view-recomb .rc-rev-ph{margin:0 0 6px;font-weight:600;color:var(--gold)}
#view-recomb .rc-rev-in{margin-top:6px;font-size:13.5px}
#view-recomb .rc-rev-tag{
  display:inline-block;margin-right:4px;padding:1px 7px;border-radius:9px;
  font-size:11px;letter-spacing:.03em;border:1px solid var(--line-2);color:var(--text-dim);
}
#view-recomb .rc-rev-in.is-prep .rc-rev-tag{border-color:var(--gold);color:var(--gold)}
#view-recomb .rc-rev-prop .note,#view-recomb .rc-rev-prop .rc-warn{margin-top:8px}
#view-recomb .rc-rev-ducat{margin-top:10px;font-size:13px;color:#72a4f2;line-height:1.45}
#view-recomb .rc-rev-exec{margin-top:10px}
#view-recomb .rc-rev-exec textarea{margin-top:6px}
#view-recomb .rc-rev-steps{margin:6px 0 0;padding-left:20px;font-size:13.5px;color:var(--text-dim)}

/* ============ Plánovač craftu (assets/craft.js) ============ */
#view-craft .cr-out-card{grid-column:1/-1}
#view-craft .merc-paste{resize:vertical}
#view-craft .cr-own{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:13.5px;color:var(--text-dim);line-height:1.4}
#view-craft .cr-own input{margin-top:3px}
#view-craft .cr-lockin{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
#view-craft .cr-lockmax{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:6px;font-size:13.5px;color:var(--text-dim)}
#view-craft .cr-lockmax input{width:5.5em}
#view-craft .cr-lockmax input:disabled{opacity:.5}
#view-craft .cr-prog{color:var(--text)}
#view-craft .cr-lock{display:block;color:var(--text)}
#view-craft .cr-lock > span{display:block}
#view-craft .cr-lock-acc ul{margin:2px 0 2px;padding-left:18px;font-size:12.5px;color:var(--text-dim)}
#view-craft .cr-lockinfo{margin-top:10px;font-size:13.5px}
#view-craft .cr-branch{margin-top:10px;font-size:13.5px}
#view-craft .cr-branch summary{cursor:pointer;color:var(--gold)}
#view-craft #crRun{margin-top:12px}
#view-craft #crRun:disabled{opacity:.6;cursor:default}
#view-craft .cr-item{margin:0 0 8px;font-weight:600;color:var(--text)}
#view-craft .cr-err{margin:0 0 10px;color:#e0a060}
#view-craft .cr-warn{margin:8px 0;font-size:13px;color:#e0a060}
#view-craft .cr-targets{list-style:none;margin:0;padding:0}
#view-craft .cr-t{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line);font-size:13.5px}
#view-craft .cr-t-text{color:var(--text)}
#view-craft .cr-t-tag{font-size:12px;color:var(--text-dim)}
#view-craft .cr-t-keep{display:flex;gap:7px;align-items:baseline;cursor:pointer}
#view-craft .cr-t-keep input{margin:0;flex:0 0 auto;transform:translateY(2px)}
#view-craft .cr-t-skipped .cr-t-text{color:var(--text-dim)}
#view-craft .cr-t-unsupported .cr-t-text,#view-craft .cr-t-ambiguous .cr-t-text{color:var(--text-dim);text-decoration:line-through}
#view-craft .cr-choice{margin-top:8px}
#view-craft .cr-seg{flex-wrap:wrap;margin-top:14px}
#view-craft .cr-plan{margin-top:12px;padding:12px 13px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--ink-3)}
#view-craft .cr-contract{margin:0;font-weight:600;color:var(--gold)}
#view-craft .cr-class{margin-top:4px}
#view-craft .cr-big{margin:10px 0 0;font-size:15px}
#view-craft .cr-big strong{font-size:22px;color:var(--text)}
#view-craft .cr-hard{margin-top:4px;font-size:12.5px;color:var(--text-dim)}
#view-craft .cr-table{width:100%;margin-top:10px;border-collapse:collapse;font-size:13px}
#view-craft .cr-table th,#view-craft .cr-table td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:right}
#view-craft .cr-table th:first-child,#view-craft .cr-table td:first-child{text-align:left}
#view-craft .cr-h{margin:14px 0 4px;font-size:14px}
#view-craft .cr-mats{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}
#view-craft .cr-rules{margin:6px 0 0;padding-left:20px;font-size:13.5px}
#view-craft .cr-rules li{padding:5px 0;border-bottom:1px solid var(--line)}
#view-craft .cr-when{display:block;color:var(--text-dim);font-size:12.5px}
#view-craft .cr-do{display:block;color:var(--text)}
#view-craft .cr-models{margin-top:12px;font-size:13px;color:var(--text-dim)}
#view-craft .cr-models ul{padding-left:18px;margin:6px 0 0}
#view-craft .cr-models li{padding:2px 0;line-height:1.45}
@media (max-width:640px){
  #view-craft .cr-table{font-size:12px}
  #view-craft .cr-table th,#view-craft .cr-table td{padding:4px 3px}
}