/* rymy.css — wygląd stron słownika rymów (/rymy/<słowo>/, /en/rhymes/<word>/).
   Osobny, mały plik zamiast styles.css: tamten waży setki kilobajtów i cały jest o edytorze,
   a te strony mają się otwierać natychmiast także na słabym telefonie z wyników wyszukiwania.
   Zmienne kolorów są przepisane z web/styles.css — jeśli tam zmienisz paletę, zmień i tu. */
:root {
  --bg:      #070708;
  --panel:   #131316;
  --panel2:  #1a1a1e;
  --line:    #26262b;
  --text:    #f1f1f3;
  --muted:   #9a9aa3;
  --yellow:  #fff312;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans);
  font-size: 17px; line-height: 1.6;
}
a { color: var(--yellow); text-decoration: none; }
a:hover { text-decoration: underline; }

.ry-top { display: flex; align-items: center; padding: 18px 20px 6px; max-width: 1000px; margin: 0 auto; }
.ry-brand img { display: block; height: 40px; width: auto; }
.ry-crumbs { max-width: 1000px; margin: 0 auto; padding: 0 20px 10px; color: var(--muted); font-size: 14px; }
.ry-crumbs span { opacity: .5; margin: 0 4px; }

main { max-width: 1000px; margin: 0 auto; padding: 8px 20px 40px; }
h1 { font-size: clamp(28px, 6vw, 42px); line-height: 1.15; margin: 12px 0 14px; letter-spacing: -.02em; }
h2 { font-size: clamp(20px, 3.4vw, 26px); margin: 34px 0 6px; letter-spacing: -.01em; }
h3 { font-size: 15px; margin: 18px 0 8px; color: var(--muted); font-weight: 600; text-transform: lowercase; }
.ry-lead { font-size: 19px; color: #d8d8de; margin: 0 0 18px; }
.ry-lead strong { color: var(--text); }
.ry-d { color: var(--muted); margin: 0 0 8px; font-size: 15px; }
.ry-n {
  display: inline-block; min-width: 34px; text-align: center; font-size: 14px; vertical-align: middle;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--muted);
}

.ry-cta { margin: 18px 0 4px; }
.ry-cta a {
  display: inline-block; background: var(--yellow); color: #14140a; font-weight: 700;
  padding: 12px 22px; border-radius: 999px; text-decoration: none;
}
.ry-cta a:hover { filter: brightness(1.08); text-decoration: none; }

.ry-grp, .ry-lines, .ry-rel, .ry-how, .ry-prod {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 6px 20px 22px; margin: 22px 0;
}
.ry-syl { margin-top: 6px; }
/* koncentrator: naglowki tematow i liter sa nazwami wlasnymi, wiec bez lowercase z h3 */
.ry-h { text-transform: none; font-size: 17px; color: var(--text); margin-top: 22px; }
ul.ry-words { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
ul.ry-words li a, ul.ry-words li span {
  display: block; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 12px; font-size: 16px;
}
ul.ry-words li span { color: #d8d8de; }
ul.ry-words li a { color: var(--yellow); }
ul.ry-words li a:hover { border-color: var(--yellow); text-decoration: none; }

.ry-lines figure { margin: 16px 0 0; }
.ry-lines blockquote {
  margin: 0; padding: 12px 16px; background: var(--panel2); border-left: 3px solid var(--yellow);
  border-radius: 0 10px 10px 0;
}
.ry-lines blockquote span { display: block; }
.ry-lines figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; }
.ry-lines cite { font-style: normal; }

.ry-how p { color: #d8d8de; }
.ry-back { margin: 26px 0 0; }

.ry-foot {
  max-width: 1000px; margin: 0 auto; padding: 22px 20px 40px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 16px;
}
.ry-foot a { color: var(--muted); }
.ry-foot a:hover { color: var(--text); }

/* Druga akcja przy KAZDYM rymie: olowek otwiera edytor z ta para slow. Chip jest jednym,
   segmentowanym klockiem (slowo po lewej, akcja po prawej), zeby lista nie rozjechala sie
   na dwa razy wiecej elementow. Listy bez olowka (koncentrator, podobne slowa) maja jedno
   dziecko i zostaja zaokraglone z obu stron. */
ul.ry-words li { display: inline-flex; }
ul.ry-words li a, ul.ry-words li span { border-radius: 10px 0 0 10px; }
ul.ry-words li a:only-child, ul.ry-words li span:only-child { border-radius: 10px; }
ul.ry-words li a.ry-g {
  display: flex; align-items: center; padding: 6px 10px; font-size: 15px;
  border-left: 0; border-radius: 0 10px 10px 0; color: var(--muted);
}
ul.ry-words li a.ry-g:hover { color: var(--yellow); border-color: var(--yellow); text-decoration: none; }
.ry-hint { margin-bottom: 10px; opacity: .85; }

/* Sekcja produktowa: podglad edytora + cztery zdania o tym, czym Barzly jest w srodku.
   Podglad jest STATYCZNY (zero JS, nasz wlasny tekst z landinga) - te strony maja sie otwierac
   natychmiast na telefonie z wynikow wyszukiwania. */
.ry-plead { font-size: 17px; color: #d8d8de; margin: 0 0 16px; }
.ry-plead strong { color: var(--text); }
.ry-scr { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ry-bar {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line);
  font: 500 12px/1 var(--mono); letter-spacing: .03em; color: var(--muted);
}
.ry-dots { display: inline-flex; gap: 6px; flex: none; }
.ry-dots i { width: 9px; height: 9px; border-radius: 50%; }
.ry-dots i:nth-child(1) { background: #ff5f57; }
.ry-dots i:nth-child(2) { background: #febc2e; }
.ry-dots i:nth-child(3) { background: #28c840; }
.ry-blive { margin-left: auto; white-space: nowrap; }
.ry-code { padding: 14px 16px 6px; font-size: 16px; line-height: 1.85; }
.ry-code p { margin: 0; }
.ry-code em { font-style: normal; box-shadow: inset 0 -2px 0 var(--c); }
.ry-leg { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 16px 12px; color: var(--muted); font-size: 13px; }
.ry-leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.ry-plist { list-style: none; padding: 0; margin: 18px 0 0; }
.ry-plist li { color: #d8d8de; margin: 0 0 10px; padding-left: 18px; position: relative; }
.ry-plist li:before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--yellow); }
.ry-plist strong { color: var(--text); }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .ry-grp, .ry-lines, .ry-rel, .ry-how, .ry-prod { padding: 4px 14px 18px; border-radius: 14px; }
  main { padding: 8px 14px 30px; }
  .ry-top, .ry-crumbs, .ry-foot { padding-left: 14px; padding-right: 14px; }
}