/* Landing, sekcja #journals — panel faktów i kafelki stron tematycznych.
   Osobny plik, żeby nie podbijać site.css (i generatorów legal) dla jednej sekcji.
   Kolory wyłącznie z tokenów site.css, więc ciemny motyw działa bez osobnych reguł. */

/* === Panel faktów: trzy równe komórki === */
.jr-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px; margin: 0 auto 28px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--export-strip-bg); box-shadow: var(--export-strip-shadow);
}
.jr-fact { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; }
.jr-fact + .jr-fact { border-left: 1px solid var(--border); }
.jr-fact p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.jr-fact p strong { color: var(--text); }
.jr-fact .jr-fact-label {
  display: flex; align-items: center; min-height: 26px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text);
}
.jr-fact .jr-fact-label .premium-tag { margin: 0; letter-spacing: normal; text-transform: none; }
/* Formaty eksportu to informacja, nie przyciski: sama ikona i nazwa,
   bez tła i obrysu, żeby nie zapraszały do kliknięcia. */
.jr-fact-chips { display: flex; flex-wrap: wrap; gap: 6px 18px; }
#journals .jr-fact-chips .export-badge {
  padding: 0; border-radius: 0; background: none;
  font-size: 0.92rem; font-weight: 700; color: var(--text);
}
#journals .jr-fact-chips .export-badge svg { width: 16px; height: 16px; color: var(--accent); }

/* === Kafelki stron tematycznych === */
.jr-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 16px;
  max-width: 980px; margin: 8px auto 36px;
}
.jr-link { text-decoration: none; gap: 8px; }
.jr-link .ring { margin-bottom: 6px; }
.jr-link-eyebrow { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.jr-link-title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; color: var(--accent-dark); }
.jr-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 760px) {
  .jr-facts { grid-template-columns: 1fr; }
  .jr-fact + .jr-fact { border-left: 0; border-top: 1px solid var(--border); }
}

/* === Kafelki szablonów: bez kolorowego paska u dołu. Kolor szablonu niesie
   sama ikona: obrys i delikatnie zabarwione wnętrze kółka. currentColor = kolor szablonu. === */
#journals .journal-template:not(.journal-template--add)::after { display: none; }
#journals .journal-template:not(.journal-template--add) .ring,
#journals .journal-template:not(.journal-template--add):hover .ring {
  background: color-mix(in srgb, currentColor 16%, transparent);
}

/* === #themes: kafelek + okienko z podglądem palet aplikacji (public/themes.js) === */
#themes .link-btn, #qr-card .link-btn, .jr-fact-links .link-btn {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--accent-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.modal-box--themes { max-width: 720px; }
.themes-preview { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; margin-top: 6px; }
.themes-phone { position: relative; width: 100%; aspect-ratio: 680 / 1388; }
.themes-screen {
  position: absolute; inset: 1.5% 4%;
  border-radius: 15% / 7.2%; border: 8px solid #18181b;
  transition: background var(--dur) ease;
}
.themes-screen[hidden] { display: none; }
.themes-shot { position: absolute; inset: 0; width: 100%; height: auto; }
.themes-shot[hidden] { display: none; }
.themes-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.themes-mode { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--subtle-fill); }
.themes-mode button {
  min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
  background: none; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); cursor: pointer;
}
.themes-mode button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-rest); }
.themes-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; width: 100%; }
.themes-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 2px; border: 0; background: none; font: inherit; cursor: pointer; color: var(--text-muted);
}
.themes-swatch[hidden] { display: none; }
.themes-dot { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.themes-swatch[aria-pressed="true"] .themes-dot { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent); }
.themes-swatch[aria-pressed="true"] .themes-name { color: var(--text); }
.themes-name { font-size: 0.78rem; font-weight: 600; line-height: 1.25; text-align: center; }
@media (max-width: 620px) {
  .themes-preview { grid-template-columns: 1fr; justify-items: center; }
  .themes-phone { width: min(170px, 44vw); }
  .themes-controls { align-items: center; }
}
.themes-dot--contrast { box-shadow: inset 0 0 0 3px #000; }
.themes-swatches { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .themes-swatches { grid-template-columns: repeat(4, 1fr); } }
.themes-swatch[aria-pressed="true"] .themes-dot--contrast { box-shadow: inset 0 0 0 3px #000, 0 0 0 2px var(--white), 0 0 0 4px var(--accent); }
/* Układ palet: 3 rzędy po 2 pod przełącznikiem; wysoki kontrast / czysta czerń osobno pod spodem */
.themes-controls { align-items: stretch; }
.themes-mode { align-self: flex-start; }
.themes-swatches { grid-template-columns: repeat(2, 1fr); gap: 6px 12px; }
.themes-swatch { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 6px 4px; text-align: left; }
.themes-name { text-align: left; font-size: 0.86rem; }
.themes-dot { flex: 0 0 36px; width: 36px; height: 36px; }
.themes-swatch[data-case="highContrast"], .themes-swatch[data-case="oled"] {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border);
}
@media (max-width: 620px) {
  .themes-swatches { grid-template-columns: repeat(2, 1fr); }
  .themes-mode { align-self: center; }
}

/* === Panel eksportu: podgląd przykładu (vet-preview.js) + link do przewodnika === */
.jr-fact-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px !important; font-size: 0.88rem !important; font-weight: 700; }
.jr-fact-links a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.jr-fact-links .link-btn[hidden] { display: none; }

/* === #qr-card: okienko z przełącznikami i podglądem karty (public/qr-card.js).
   Karta jak w iOS: zawsze jasna (biel, ciemny tekst), niezależnie od motywu strony. === */
.link-btn[data-qr-open][hidden] { display: none; }
.qr-preview { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; margin-top: 6px; }
.qr-left { display: flex; flex-direction: column; gap: 10px; }
.qr-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 20px 14px; border-radius: 18px; background: #fff; color: #1c1c1e;
  border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: var(--shadow-rest);
}
.qr-head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.qr-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; }
.qr-card p { margin: 0; }
.qr-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #1c1c1e; }
.qr-species { font-size: 0.8rem; color: #5c5c60; }
.qr-meta { display: flex; gap: 14px; margin-top: 4px !important; font-size: 0.86rem; color: #1c1c1e; }
.qr-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.qr-meta .znak { width: 16px; height: 16px; color: #3a3a3c; }
.qr-gender-mark { color: rgb(66, 165, 245); font-weight: 700; }
.qr-chip { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: #1c1c1e; }
.qr-chip .znak { width: 18px; height: 18px; color: #3a3a3c; }
.qr-label { color: #5c5c60; }
.qr-code { width: 150px; height: 150px; display: block; }
.qr-code path { fill: #000; }
.qr-finder { font-size: 0.74rem; line-height: 1.4; color: #5c5c60; text-align: center; }
.qr-sec { align-self: stretch; font-size: 0.86rem; }
.qr-sec-title { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700; color: #5c5c60; }
.qr-sec-title .znak { width: 20px; height: 20px; }
.qr-sec ul { list-style: none; margin: 2px 0 0; padding: 0 0 0 28px; }
.qr-sec li { display: flex; align-items: center; gap: 8px; color: #1c1c1e; }
.qr-sec li::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%; background: currentColor; color: var(--qr-c, #5c5c60); }
.qr-sec--allergen { --qr-c: #a86458; }
.qr-sec--med { --qr-c: #9c4f6e; }
.qr-sec--vacc { --qr-c: #4a8e4a; }
.qr-sec--owner { --qr-c: #3a3a3c; }
.qr-sec .qr-sec-title .znak { color: var(--qr-c); }
.qr-sec li::before { background: var(--qr-c); }
.qr-vacc-val { padding-left: 28px; color: #1c1c1e; }
.qr-brand { font-size: 0.72rem; color: #5c5c60; }
.qr-scan-hint { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); text-align: center; }

.qr-controls { display: flex; flex-direction: column; gap: 18px; }
.qr-group { display: flex; flex-direction: column; gap: 8px; }
.qr-group-title { margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text); }
.qr-langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 300px; }
.qr-lang {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: 10px; background: var(--subtle-fill); font: inherit; font-size: 0.8rem; font-weight: 700;
  color: var(--text); cursor: pointer;
}
.qr-lang[aria-pressed="true"] { background: var(--accent); color: var(--white); }
.qr-toggle { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 0.92rem; color: var(--text); cursor: pointer; }
.qr-toggle .znak { width: 20px; height: 20px; color: var(--accent); flex: 0 0 20px; }
.qr-toggle-label { flex: 1; }
.qr-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qr-switch { position: relative; flex: 0 0 46px; height: 28px; border-radius: 14px; background: var(--subtle-fill-hover); transition: background var(--dur) ease; }
.qr-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform var(--dur) ease;
}
.qr-toggle input:checked + .qr-switch { background: var(--accent); }
.qr-toggle input:checked + .qr-switch::after { transform: translateX(18px); }
.qr-toggle input:focus-visible + .qr-switch { outline: 2px solid var(--accent); outline-offset: 2px; }
.qr-owner-fields { display: flex; flex-direction: column; gap: 6px; padding-left: 30px; }
.qr-owner-fields[hidden] { display: none; }
.qr-input {
  min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font: inherit; font-size: 0.88rem; color: var(--text);
}
.qr-actions { display: flex; gap: 10px; margin: 0; }
.qr-action {
  flex: 1; display: inline-flex; justify-content: center; align-items: center; min-height: 40px;
  border: 2px solid var(--accent); border-radius: 12px; font-size: 0.86rem; font-weight: 700; color: var(--accent-dark);
}
.qr-action--primary { background: var(--accent); color: var(--white); }
@media (max-width: 680px) {
  .qr-preview { grid-template-columns: 1fr; }
  .qr-left { order: 2; }
  .qr-card { max-width: 320px; width: 100%; margin: 0 auto; }
}

/* === #features: link „Zobacz…” zawsze na dole kafelka, w jednej linii we wszystkich kafelkach === */
#features .feat-more { margin: auto 0 0; padding-top: 14px; font-weight: 700; }
#features .feat-more a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
#features .feat-more .link-btn { line-height: inherit; }
.qr-sample-note { margin-top: 8px; }

/* === Kafelki szablonów w jasnym motywie: pełna śliwka marki (decyzja Agnieszki 2026-10-15).
   Ikona w kolorze szablonu na białym kółku, „Twój własny” z przerywanym białym kółkiem.
   Ciemny motyw: tokeny --jtp-* = initial, więc działają dotychczasowe wartości (grafit). === */
:root {
  --jtp-bg: #8a4579; --jtp-bg-hover: #7a3b6b; --jtp-ink: #fff; --jtp-meta: rgba(255, 255, 255, 0.84);
  --jtp-ring: #fff; --jtp-add-ring: rgba(255, 255, 255, 0.8);
  --jtp-shadow: 0 10px 24px -12px rgba(107, 47, 92, 0.55);
  --jtp-shadow-hover: 0 16px 30px -12px rgba(107, 47, 92, 0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jtp-bg: initial; --jtp-bg-hover: initial; --jtp-ink: initial; --jtp-meta: initial;
    --jtp-ring: initial; --jtp-add-ring: initial; --jtp-shadow: initial; --jtp-shadow-hover: initial;
  }
}
:root[data-theme="dark"] {
  --jtp-bg: initial; --jtp-bg-hover: initial; --jtp-ink: initial; --jtp-meta: initial;
  --jtp-ring: initial; --jtp-add-ring: initial; --jtp-shadow: initial; --jtp-shadow-hover: initial;
}
#journals .journal-template {
  background: var(--jtp-bg, var(--jt-bg, var(--ground-warm)));
  box-shadow: var(--jtp-shadow, var(--shadow-rest));
}
#journals .journal-template:hover,
#journals .journal-template:focus-visible {
  background: var(--jtp-bg-hover, var(--jt-bg-hover, var(--ground-warm-hover)));
  box-shadow: var(--jtp-shadow-hover, var(--shadow-lift-sm));
}
#journals .journal-template--add { border-color: var(--jtp-bg, var(--jt-add-edge, var(--accent-a55))); }
#journals .journal-template .journal-template-name,
#journals .journal-template::before { color: var(--jtp-ink, var(--text)); }
#journals .journal-template .journal-template-meta { color: var(--jtp-meta, var(--jt-meta, var(--text-muted))); }
#journals .journal-template:not(.journal-template--add) .ring,
#journals .journal-template:not(.journal-template--add):hover .ring {
  background: var(--jtp-ring, color-mix(in srgb, currentColor 16%, transparent));
  border-color: var(--jtp-ring, currentColor);
}
#journals .journal-template--add .ring {
  background: transparent; border-style: dashed;
  border-color: var(--jtp-add-ring, currentColor); color: var(--jtp-ink, inherit);
}
#journals .journal-template .journal-template-max { margin-top: -10px; }