/* Strona hasła słownika (/slownik-<slug>), rysowana przez slownik-strona.mjs.
   Osobny arkusz, bo z index.css potrzebowałaby dwóch klas na sto: strona
   ma być lekka jak karta, którą pokazuje. Kolory to te same tokeny, co
   w aplikacji (index.css :root), karta jest ZAWSZE biała — to ten sam
   obrazek, który krąży w unfurlu, tylko prawdziwym tekstem. */
:root {
  --bg: #fff; --surface: #fff; --container: #f0f4f9; --container-2: #e9eef6;
  --text: #1f1f1f; --text-2: #444746; --text-3: #5f6368;
  --outline: #c4c7c5; --outline-2: #dadce0;
  --primary: #0b57d0; --na-primary: #fff;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1b1b1b; --surface: #1f1f1f; --container: #2d2f31; --container-2: #35373a;
    --text: #e3e3e3; --text-2: #c4c7c5; --text-3: #9aa0a6;
    --outline: #5f6368; --outline-2: #3c4043;
    --primary: #a8c7fa; --na-primary: #062e6f;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
}
a { color: var(--primary); }
main { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }
h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 28px 0 10px; font-weight: 500; }

.pasek { max-width: 760px; margin: 0 auto; padding: 14px 16px 6px; }
.wroc { display: inline-block; text-decoration: none; font-size: 15px; padding: 8px 0; }
.wroc:hover { text-decoration: underline; }
.wroc .logo-mini { font-size: 17px; }
/* Kolorowy znak Korpo Tłumacz: stałe kolory, bo karta jest zawsze biała,
   a w „Wróć do…” ma się rzucać w oczy także w ciemnym motywie. */
.logo-mini { font-weight: 500; letter-spacing: -.3px; white-space: nowrap; }
.logo-mini .c1, .logo-mini .c4 { color: #4285f4; } .logo-mini .c2 { color: #ea4335; }
.logo-mini .c3 { color: #fbbc05; } .logo-mini .c5 { color: #34a853; }
.logo-mini .lm2 { color: #5f6368; font-weight: 400; }
.wroc .logo-mini .lm2 { color: var(--text-2); }

/* Karta: biała kartka, podwójna cienka rama (2 px, 6 px światła, 1 px) — jak
   defMarkup w og-karta.mjs, gdzie linie są divami, bo satori nie rysuje
   border; tu wystarczy box-shadow. Margines na zewnętrzną linię. */
.karta {
  background: #fff; color: #1f1f1f;
  margin: 12px 8px 0;
  padding: clamp(22px, 5vw, 40px) clamp(20px, 6vw, 56px) clamp(18px, 4vw, 28px);
  border: 1px solid #1f1f1f;
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px #1f1f1f;
  display: flex; flex-direction: column; min-height: 280px;
}
.nadruk { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #5f6368; margin: 0; }
.karta h1 {
  font-size: clamp(30px, 8vw, 64px); font-weight: 500; line-height: 1.1;
  margin: 12px 0 0; overflow-wrap: anywhere;
}
.karta h1.dlugie { font-size: clamp(24px, 5.5vw, 42px); }
/* Kreska w czterech kolorach znaku — jedyny akcent koloru na białej kartce,
   ten sam co na karcie PNG (og-karta.mjs). */
.kreska { width: 64px; height: 5px; margin-top: 16px;
  background: linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75%); }
.po-ludzku { font-size: 15px; line-height: 1.4; color: #5f6368; margin: 10px 0 0; }
.def { font-size: clamp(17px, 2.6vw, 21px); line-height: 1.5; margin: 16px 0 0; }
.karta footer {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: auto; padding-top: 28px; font-size: 13px; color: #5f6368;
}
.karta footer .nadruk { font-size: 11px; letter-spacing: .25em; color: #9aa0a6; text-align: right; }
.karta footer span:first-child { white-space: nowrap; }
.karta footer .logo-mini { font-size: 15px; }
@media (max-width: 480px) {
  .nadruk { letter-spacing: .2em; }
  /* Dwa podpisy obok siebie nie mieszczą się na 375 px — jeden pod drugim,
     do lewej, jak nagłówek karty. */
  .karta footer { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 22px; }
  .karta footer .nadruk { text-align: left; }
}

/* Przyciski: pigułki jak .dictbtn/.wys-btn w aplikacji. Pierwszy (Bielik)
   jest pełny, reszta obrysowana — kolejność jest tu treścią, nie ozdobą. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--outline-2); border-radius: 14px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.btn:hover { background: var(--container); }
.btn:active { background: var(--container-2); }
.btn .ico { width: 20px; height: 20px; flex: none; fill: currentColor; }
.btn.glowny { background: var(--primary); color: var(--na-primary); border-color: var(--primary); }
.btn.glowny:hover { filter: brightness(1.08); }
.btn.ok { border-color: var(--primary); color: var(--primary); }
.akcje, .rzad { display: flex; flex-wrap: wrap; gap: 10px; }
.akcje { margin-top: 28px; }
@media (max-width: 480px) {
  .akcje .btn { width: 100%; justify-content: center; }
  .rzad .btn { flex: 1 1 calc(50% - 5px); justify-content: center; }
}

/* Kafle sąsiadów i powiązanych: hasło i pierwsze zdanie definicji, całe
   pole klikalne. Dwie kolumny od 560 px, jedna na telefonie. */
.sasiedzi, .lista { display: grid; grid-template-columns: 1fr; gap: 10px; }
.sasiedzi { margin-top: 28px; }
@media (min-width: 560px) {
  .sasiedzi { grid-template-columns: 1fr 1fr; }
  .lista { grid-template-columns: 1fr 1fr; }
}
.kafel {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border: 1px solid var(--outline-2); border-radius: 16px;
  color: var(--text); text-decoration: none; background: var(--surface);
  transition: background-color 120ms ease;
}
.kafel:hover { background: var(--container); }
.kafel .kier { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.sasiedzi .kafel[rel="next"] { text-align: right; align-items: flex-end; }
.kafel strong { font-size: 18px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.kafel .pod { font-size: 14px; color: var(--text-2); line-height: 1.4; }

.stopka { margin-top: 32px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 24px; }