/* onlycodes.cz */

/* --ink-faint nese SKUTECNY text, ne jen ozdobu: popisek pod nadpisem
   nastroje (.tool .hint, .82rem), podnadpisy skupin, drobecky, paticku
   a popisky poli. Do 3. 9. mel kontrast 3,30 v tmavem rezimu a 3,09 ve
   svetlem (na --surface), tedy pod hranici WCAG AA 4,5:1 pro bezny text
   — a .82rem se za "velky text" nepocita (ten zacina na 24 px, nebo
   18,66 px tucne). Zmereno, ne odhadnuto.

   Nove #7b8496 / #6a7385: 4,63 a 4,77 na --surface, 5,02 a 4,65 na --bg.
   Odstin a sytost zustaly, posunul se jen jas — proto to na strance
   nevypada jinak, jen se to da precist. Kdyby to nekdo chtel vratit
   zpatky "at je to jemnejsi", tohle je duvod, proc ne. */
:root {
  --bg: #0f1115;
  --surface: #171a21;
  --border: #262b35;
  --ink: #e8eaf0;
  --ink-soft: #98a0b0;
  --ink-faint: #7b8496;
  --accent: #5eead4;
  /* Tmavsi odstin akcentu pro DROBNY text na svetlem pozadi. Ve svetlem
     rezimu ma `--accent` (#0d9488) na `--surface` (#fff) kontrast 3.74,
     tedy pod prahem 4.5 — zmereno 6. 9. v 17:26 na `.card .st.live`
     (0.64rem, verzalky). V tmavem rezimu je akcent v poradku, proto se
     tady `--accent-strong` rovna `--accent`. */
  --accent-strong: #5eead4;
  /* `--accent-dim` nese ve svetlem rezimu #0f766e, coz je 5,34 na
     `--bg` a 5,47 na `--surface`. Od 16. 9. je to barva DROBNEHO textu
     vsude, kde drive stal `--accent`: ten ma ve svetlem rezimu jen
     3,65 na `--bg` (zmereno pres vsech 8 stylu, propadaly dva).
     `--accent-strong` na to nestaci — 4,46 na `--bg`, tedy pod prahem.
     Pozadi, ramecky a obrysy zustavaji na `--accent`: prah 4,5 se jich
     netyka a zmena by byla prekreslenim vzhledu, ne opravou citelnosti.
     Vyjimka je `.hero h1 em` — velky text ma prah 3,0, takze 3,65
     prochazi a akcent tam zustava. */
  --accent-dim: #2dd4bf;
  /* Barva CHYBOVEHO textu. Do 16. 9. tu stalo #fca5a5 natvrdo
     v pravidlech `.out.err` a `.hl.err` — svetle cervena navrzena
     pro tmavy rezim. Ve SVETLEM rezimu mela na `--bg` kontrast 1,85
     a na `--surface` 1,90, tedy hluboko pod prahem 4,5: hlaska
     o chybe byla to nejhur citelne na cele strance, prestoze je to
     text, ktery clovek potrebuje precist nejvic. Ramecek `#7f1d1d`
     zustava — u ramecku prah pro text neplati. */
  --err: #fca5a5;
  --glow: rgba(94, 234, 212, .09);
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

/* Svetla varianta se do 2. 9. **nemohla nikdy projevit**: selektor cekal
   atribut `data-theme="light"`, ktery na onlycodes.cz nic nenastavuje —
   ani generator, ani JavaScript (overeno grepem nad celym /srv/www).
   Sest radku mrtveho CSS a navstevnik se svetlym systemem dostal tmavou
   stranku. Ridi to ted **nastaveni systemu**, jako na onlycodes.eu
   a nevyprsi.*; atribut zustava jako rucni prepis, kdyby byl potreba. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fcfcfd; --surface: #fff; --border: #e3e6ec;
    --ink: #14161a; --ink-soft: #545c6b; --ink-faint: #6a7385;
    --accent: #0d9488; --accent-strong: #0c8479; --accent-dim: #0f766e; --err: #b91c1c; --glow: rgba(13,148,136,.07);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(ellipse 70% 45% at 50% -10%, var(--glow), transparent);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 44rem; margin-inline: auto; padding: 0 1.25rem; }

header.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-block: 1.5rem;
}

.brand {
  font-family: var(--mono); font-weight: 600; font-size: .95rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
.brand b { color: var(--accent-dim); font-weight: 600; }

header.top nav { display: flex; gap: 1.1rem; font-size: .85rem; }
header.top nav a { color: var(--ink-soft); text-decoration: none; }
header.top nav a:hover { color: var(--accent-dim); }

.hero { padding-block: 4rem 3rem; }

.hero h1 {
  font-size: clamp(2rem, 7vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin: 0 0 1rem;
  font-weight: 640;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero .lead {
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 0 2rem;
}

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .74rem;
  padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-soft); margin-bottom: 1.5rem;
}
.badge::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}

.card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 1.1rem 1.15rem;
}
.card h3 {
  margin: 0 0 .35rem; font-size: .95rem; font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
}
.card p { margin: 0; font-size: .875rem; color: var(--ink-soft); line-height: 1.5; }
.card .st {
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .06em; padding: .1rem .4rem; border-radius: 4px;
  border: 1px solid var(--border); color: var(--ink-faint); font-weight: 500;
}
.card .st.live { color: var(--accent-strong); border-color: var(--accent-dim); }

footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem; padding-block: 1.75rem 3rem;
  color: var(--ink-faint); font-size: .85rem;
}
footer a { color: var(--ink-soft); }
footer p { margin: 0 0 .3rem; }

code {
  font-family: var(--mono); font-size: .87em;
  background: var(--surface); border: 1px solid var(--border);
  padding: .1em .35em; border-radius: 4px;
}

/* ---- stranky nastroju ---------------------------------------------- */

.tool { border:1px solid var(--border); background:var(--surface);
        border-radius:10px; padding:1.15rem; margin-bottom:1rem; }
.tool h2 { margin:0 0 .2rem; font-size:1rem; font-weight:600; letter-spacing:-.01em; }
.tool .hint { margin:0 0 .9rem; font-size:.82rem; color:var(--ink-faint); }
.io { display:grid; gap:.55rem; }
.grid2 { display:grid; gap:.55rem; grid-template-columns:1fr auto; align-items:start; }
@media (max-width:32rem) { .grid2 { grid-template-columns:1fr; } }

textarea, .tool input[type=text], .tool input[type=number] {
  width:100%; padding:.6rem .7rem; font-family:var(--mono); font-size:.85rem;
  background:var(--bg); color:var(--ink); border:1px solid var(--border);
  border-radius:7px; resize:vertical; }
textarea:focus, .tool input:focus { outline:2px solid var(--accent);
  outline-offset:1px; border-color:transparent; }

.btns { display:flex; gap:.45rem; flex-wrap:wrap; }
button { font:inherit; font-size:.82rem; padding:.42rem .8rem; cursor:pointer;
  background:var(--bg); color:var(--ink-soft); border:1px solid var(--border);
  border-radius:7px; }
button:hover { border-color:var(--accent); color:var(--accent-dim); }
button.primary { background:var(--accent); color:#06201c; border-color:var(--accent);
  font-weight:600; }
button.primary:hover { filter:brightness(1.1); color:#06201c; }

/* Nativni `input[type=file]` si nese vlastni popisek („Choose File",
   anglicky bez ohledu na jazyk stranky) a sirku, kterou nejde nastavit.
   Na /znaky to bylo jedine anglicke misto na cele strance a roztahovalo
   to radku pres pul panelu (videno na snimku z 1200 px, 15. 9.).
   Vstup proto zustava v DOM a klika se do `<label for>`, ktery vypada
   jako tlacitko. Schovava se posunem, ne `display:none` — schovany
   `display:none` by vypadl z poradi tabulatoru a ke ctecce by se nikdo
   neproklikal klavesnici. */
.souborvstup { position:absolute; width:1px; height:1px; opacity:0;
  overflow:hidden; }
label.jakobutton { font:inherit; font-size:.82rem; padding:.42rem .8rem;
  cursor:pointer; background:var(--bg); color:var(--ink-soft);
  border:1px solid var(--border); border-radius:7px; }
label.jakobutton:hover, .souborvstup:focus + label.jakobutton {
  border-color:var(--accent); color:var(--accent-dim); }

/* `word-break:break-all` tu bylo do 1. 9. 23:36 a lámalo i obyčejná
   slova uprostřed — na 390 px z toho vycházelo „běžný tex / t AA" nebo
   „je / bílá". Bylo to kvůli dlouhým řetězcům bez mezer (base64, hash),
   jenže to umí i `overflow-wrap:anywhere`, a ten navíc láme jen tehdy,
   když se řádek jinak nevejde. Viděno na snímku z chromia, ne v kódu. */
.out { font-family:var(--mono); font-size:.85rem; overflow-wrap:anywhere;
  white-space:pre-wrap; background:var(--bg); border:1px solid var(--border);
  border-radius:7px; padding:.6rem .7rem; min-height:2.4rem; }
.out.err { color:var(--err); border-color:#7f1d1d; }
/* Prazdny vypis se neukazuje. `min-height` s rameckem z nej jinak
   udela prazdnou bublinu, ktera vypada jako vysledek, co se nepovedl
   — na /status to bylo videt hned: panel s povinnymi hlavickami je
   u 204 prazdny pravem, zadne povinne nema. Tataz uvaha jako
   u `.pozn:empty` niz; tam to platilo od zacatku, tady se to
   prehledlo, protoze vetsina nastroju vypise vzdycky neco. */
.out:empty { display:none; }

/* Vypis zarovnany do sloupcu (IPv6). Adresa ma 39 znaku a s popiskem
   se na uzky displej nevejde — `pre-wrap` ji zalomil doprostred a
   sloupec se rozsypal tak, ze nebylo poznat, co k cemu patri. Na siroko
   se nemeni nic, na uzko se misto zalamovani posouva do strany. */
@media (max-width: 640px) {
  .out.sloupce { white-space:pre; overflow-x:auto; overflow-wrap:normal; }
}

/* Tabulka s vic sloupci (/znaky). Na rozdil od `.sloupce` se neláme ani
   na siroko: radek ma ~90 znaku a do bloku se pri .85rem vejde ~70, takze
   posledni sloupec padal pod radek a zarovnani se rozsypalo. Zjisteno
   15. 9. ze snimku chromia, ne z kodu. Vodorovny posuv je tu spravna
   odpoved — sloupce maji drzet vedle sebe v kazde sirce okna. */
.out.tabulka { white-space:pre; overflow-x:auto; overflow-wrap:normal; }

/* Posuv je spravna odpoved (dva komentare vyse), ale NENI NA NEM VIDET,
   ze tam je: na telefonu neni jak poznat, ze vypis pokracuje o 300 px
   doprava. Zmereno 23. 9. ve 23:0x pres `uzke.py --posuv`: 11 bloku
   na 8 z 28 stranek onlycodes.cz, nejvic `/znaky` +319 px, `/razitko`
   +311 px, `/ipv6` +303 px. Polozka v IDEAS navrhovala misto toho
   zalamovat — to by otocilo rozhodnuti z 1. 9., jehoz duvod stoji
   o dva komentare vyse. Posuv zustava, jen se oznaci.

   Zapsano STEJNE jako `pre` na hkhk.cloud (od 1. 9. 23:33) — tentyz
   trik i tyz duvod. Nevedel jsem o nem a 23. 9. jsem ho napsal
   podruhe s vlastnimi promennymi; sjednoceno tehoz vecera.
   `color-mix` s `--ink` misto dvou barev: na svetlem motivu vyjde
   tmavy stin, na tmavem svetly, a nepise se to dvakrat.

   Ctyri vrstvy pozadi, zadny JavaScript. Kryci vrstvy (barva `--bg`)
   jsou `local`, tedy jedou s obsahem; stiny jsou `scroll`, tedy stoji
   u okraje bloku. Kdyz je obsah dojety na kraj, kryci vrstva stin
   prekryje. Stin je proto videt PRAVE TEHDY, kdyz je kam posouvat —
   a na siroko, kde se `.sloupce` zalamuje, nesviti vubec. */
.out.sloupce, .out.tabulka {
  background:
    linear-gradient(to right, var(--bg) 40%, transparent)
      0 0 / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--bg) 40%, transparent)
      100% 0 / 2rem 100% no-repeat local,
    linear-gradient(to right,
      color-mix(in srgb, var(--ink) 30%, transparent), transparent)
      0 0 / .9rem 100% no-repeat scroll,
    linear-gradient(to left,
      color-mix(in srgb, var(--ink) 30%, transparent), transparent)
      100% 0 / .9rem 100% no-repeat scroll;
  background-color: var(--bg);
}

/* Poznamky pod vypisem. Souvisly text, ktery se zalamovat MA — proto
   stoji mimo blok se sloupci. */
.pozn { font-size:.85rem; color:var(--ink-soft); margin:.7rem 0 0;
  line-height:1.55; }
.pozn:empty { display:none; }

/* Lista s odkazy na ostatni nastroje, pod nastrojem na jeho strance. */
.toolnav { border-top:1px solid var(--border); margin-top:2rem; padding-top:1.25rem; }
.toolnav h2 { font-size:.8rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-faint); margin:0 0 .7rem; }
.toolnav ul { list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem; }
.toolnav a { display:inline-block; font-family:var(--mono); font-size:.8rem;
  padding:.3rem .65rem; border:1px solid var(--border); border-radius:7px;
  color:var(--ink-soft); text-decoration:none; background:var(--surface); }
.toolnav a:hover { border-color:var(--accent); color:var(--accent-dim); }

/* „Souvisi s timhle" — odkaz a k nemu veta, proc. Zamerne NE cipy jako
   `.toolnav`: tam je odkaz cela informace, tady je pulka informace ta
   veta za nim, a ta se do cipu nevejde. Proto svisly seznam. */
.pribuzni { border-top:1px solid var(--border); margin-top:2rem;
  padding-top:1.25rem; }
.pribuzni h2 { font-size:.8rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-faint); margin:0 0 .7rem; }
.pribuzni ul { list-style:none; margin:0; padding:0; }
.pribuzni li { font-size:.9rem; line-height:1.6; color:var(--ink-soft);
  margin:0 0 .45rem; }
.pribuzni li:last-child { margin-bottom:0; }
.pribuzni a { font-family:var(--mono); font-size:.85rem;
  color:var(--accent-dim); text-decoration:none;
  border-bottom:1px solid var(--border); }
.pribuzni a:hover { border-bottom-color:var(--accent); }
/* `.toolnav` hned za `.pribuzni` by mel dve linky nad sebou a mezi
   nimi jen mezeru — jedna staci. */
.pribuzni + .toolnav { border-top:0; margin-top:1.5rem; padding-top:0; }

/* Prehled vsech nastroju na /nastroje */
/* `align-items:start` (15. 9.): bez nej grid srovna vysku vsech karet
   v radku podle nejvyssi z nich. Ve skupine „Data a formaty" ma JWT
   o ctyri radky delsi popis nez SQL vedle, takze pod SQL zela mezera
   na tri radky (nalez ze snimku 14. 9. 21:10). Karta je odkaz, takze
   prazdno bylo soucasti klikaci plochy — vypadalo to jako chyba sazby.
   Cena: spodni hrany karet v radku uz nelici. To je u ruzne dlouhych
   popisu prirozenejsi nez prazdno uvnitr ramecku. */
.toollist { display:grid; gap:.8rem; align-items:start;
  grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
  margin-block:1rem 2rem; }
.toollist a.card { text-decoration:none; color:inherit; display:block; }
.toollist a.card:hover { border-color:var(--accent-dim); }
.toollist a.card h3 { color:var(--accent-dim); }

.crumb { font-size:.82rem; color:var(--ink-faint); margin:0 0 1.5rem; }
.crumb a { color:var(--ink-soft); }

/* Zaskrtavatka u generatoru hesel */
.opts { display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.82rem;
  color:var(--ink-soft); }
.opts label { display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
.opts input { accent-color:var(--accent); }

/* Hriste: regularni vyrazy (hriste.onlycodes.cz) */
.reline { display:flex; align-items:center; gap:.35rem; }
.reline input { flex:1 1 auto; min-width:0; }
.reline input:last-child { flex:0 0 5rem; }
.reline .slash { color:var(--ink-faint); font-family:var(--mono); }
.hl { font-family:var(--mono); font-size:.85rem; white-space:pre-wrap;
  word-break:break-word; background:var(--surface); border-radius:7px;
  border:1px solid var(--border); padding:.7rem .8rem; margin:0; }
.hl.err { color:var(--err); border-color:#7f1d1d; }
.hl mark { background:var(--accent-dim); color:var(--bg); border-radius:3px;
  padding:0 .1rem; }
.list { font-size:.85rem; }
.nalez { border-top:1px solid var(--border); padding:.5rem 0; }
.nalez:first-child { border-top:0; }
.grp { color:var(--ink-soft); padding-left:1.2rem; }
.pozn { color:var(--ink-faint); font-size:.8rem; margin:.3rem 0; }

/* Dve stejne siroka pole vedle sebe (bitove operace na /soustavy).
   `.grid2` se nehodi — ta je 1fr auto, takze druhe pole vyslo uzsi
   a nebylo poznat, ze jsou si rovnocenna. */
.pair { display:grid; gap:.55rem; grid-template-columns:1fr 1fr; }
.pair label { display:block; font-size:.8rem; color:var(--ink-faint);
  margin-bottom:.25rem; }
@media (max-width:32rem) { .pair { grid-template-columns:1fr; } }

/* Skupiny nastroju na prehledu a uvodni strance (od 2. 9., patnact
   nastroju uz jeden seznam neunese). */
.skupina { margin-block:1.6rem; }
.skupina h2 { font-size:.8rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.07em; color:var(--accent-dim); margin:0 0 .15rem; }
.skupina .podnadpis { margin:0; font-size:.82rem; color:var(--ink-faint); }
.skupina .toollist { margin-block:.7rem 0; }