/*
  tyk.pl — nakładka (override) na wygenerowany serwis.
  Wstrzykiwana przez nginx (sub_filter) po /assets/style.css, więc przy równej
  specyficzności wygrywa. Nie rusza typografii: krojów, stopni, interlinii,
  rytmu i wiszących markerów. Zmienia kolory, układ list i strony głównej.
  Klasa .tyk-js na <html> ustawiana jest skryptem w <head> — reguły, które
  zakładają działający override.js, są pod nią schowane.
*/

/* ── kolory: chłodny granat + akcent turkusowy z logo ─────────────── */
:root {
  --primitive-neutral-950: #0a0e13;
  --primitive-neutral-925: #0d1218;
  --primitive-neutral-900: #11171f;
  --primitive-neutral-850: #161e28;
  --primitive-neutral-800: #1b2531;
  --primitive-neutral-750: #233041;
  --primitive-neutral-700: #283443;
  --primitive-neutral-500: #64768a;
  --primitive-neutral-400: #94a4b5;
  --primitive-neutral-200: #d9e1e8;
  --primitive-neutral-100: #f2f6f9;

  --primitive-teal-500: #4fd3c4;
  --primitive-teal-400: #86e3d8;
  --primitive-teal-600: #2fb4a6;
  --primitive-sky-300: #8fd3ea;

  --color-accent: var(--primitive-teal-500);
  --color-accent-2: var(--primitive-teal-400);
  --color-accent-3: var(--primitive-teal-600);
  --color-link: var(--primitive-sky-300);

  --page-bg: radial-gradient(circle at 10% -14%, rgba(79, 190, 230, .09), transparent 34rem), linear-gradient(180deg, #0f151c, var(--color-bg-2) 40%, var(--color-bg));
  --panel-bg-soft: rgba(255, 255, 255, .03);
  --notice-bg: rgba(79, 211, 196, .07);
  --notice-border: 1px solid rgba(79, 211, 196, .26);
  --notice-text: #cfeee9;
  --shadow-card: 0 14px 32px rgba(0, 0, 0, .28);
}
::selection { background: rgba(79, 211, 196, .32); color: var(--color-text-strong); }

/* ── listy materiałów: wiersze zamiast kafli ─────────────────────────
   Tytuł pierwszy, pod nim kanał i fakty, potem streszczenie; miniatura
   po prawej. Stopnie pisma te same co w dotychczasowej liście
   „Pozostałe materiały” (24 / 20 / 18 px). */
.section .grid,
.home-page .grid-featured,
.home-page .editorial-list { display: block; max-width: 880px; margin: 0; }

.card.card {
  display: block;
  height: auto;
  background: transparent;
  border: 0;
  border-bottom: var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.card.card > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 192px;
  gap: 0 32px;
  align-items: start;
  padding: 26px 0;
}
.card.card .thumb {
  grid-column: 2;
  grid-row: 1;
  width: 192px;
  height: 108px;
  flex: none;
  border-radius: var(--radius-sm);
}
.card.card .card-body { grid-column: 1; grid-row: 1; padding: 0; min-width: 0; }
.card.card .card-title {
  order: -1;
  font-size: var(--size-lead);
  line-height: 1.25;
  text-wrap: pretty;
  margin: 0 0 8px;
}
.card.card .meta { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 12px; }
.card.card .meta .meta-channel { order: -1; }
.card.card .card-tldr {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  max-width: 75ch;
  margin: 0;
}
.card.card .card-foot { display: none; }
.card.card.is-read .card-title { color: var(--color-text); }

/* Przycisk „Oznacz jako przeczytane” — poza linkiem karty (button w <a>
   byłby niepoprawny). Telefon: w przepływie pod streszczeniem, zawsze
   widoczny. Szerzej: w prawym dolnym rogu wiersza, pod miniaturą. */
.card.tyk-has-mark > a { padding-bottom: 8px; }
.tyk-mark {
  display: inline-block;
  margin: 0 0 18px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--size-caption);
  line-height: 1.4;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tyk-mark:hover { color: var(--color-text-strong); text-decoration-style: dotted; }
.tyk-mark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (min-width: 48.01em) {
  .card.tyk-has-mark { position: relative; }
  .card.tyk-has-mark > a { padding-bottom: 26px; }
  .card.tyk-has-mark .card-body { min-height: 150px; }
  .card.tyk-has-mark .tyk-mark { position: absolute; right: 0; bottom: 22px; margin: 0; }
}
@media (min-width: 48.01em) and (hover: hover) {
  .card .tyk-mark { opacity: 0; transition: opacity .12s ease; }
  .card:hover .tyk-mark,
  .card:focus-within .tyk-mark { opacity: 1; }
}
.card.tyk-leaving { opacity: .25; transition: opacity .15s ease; }

/* Przełącznik „Ukryj przeczytane” na stronach archiwum (kategorie, kanały, dni). */
.tyk-toggle {
  margin: 0 0 0 14px;
  padding: 2px 10px;
  border: var(--border-subtle);
  border-radius: 999px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  vertical-align: 1px;
}
.tyk-toggle[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.tyk-hide-read main:not(.home-page) .card.is-read { display: none; }

/* ── strona główna: bez wstępu, od razu treść ─────────────────────── */
.home-page .section-first { padding-top: 0; }
.home-page #najnowsze > .wrap > p.label,
.home-page #najnowsze .hero-date,
.home-page #najnowsze .hero-stats,
.home-page #najnowsze h2.section-label { display: none; }
/* h1 zostaje dla czytników ekranu, wizualnie znika. */
.home-page #najnowsze h1.home-hero-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Do czasu przebudowy przez skrypt: przeczytane i synteza nie zajmują góry. */
.tyk-js .home-page #najnowsze .grid-featured .card.is-read,
.tyk-js .home-page #najnowsze .editorial-list .card.is-read,
.tyk-js .home-page #najnowsze > .wrap > .homepage-topic-panel { display: none; }

.tyk-feed { max-width: 880px; }
.section h2.tyk-day {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-caption);
  line-height: var(--lh-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: var(--color-muted);
  margin: calc(2 * var(--rhythm)) 0 0;
  padding: 0 0 8px;
  border-bottom: var(--border-subtle);
}
.tyk-status { margin: var(--rhythm) 0 0; color: var(--color-muted); }
.tyk-status[hidden], .tyk-more[hidden], .tyk-readbox[hidden] { display: none; }
.tyk-more {
  display: inline-flex;
  margin: var(--rhythm) 0 0;
  padding: 12px 20px;
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font: inherit;
  font-size: var(--size-small);
  cursor: pointer;
}
.tyk-more:hover { border-color: var(--color-accent); }
.tyk-more[disabled] { opacity: .6; cursor: progress; }
.tyk-readbox { margin-top: calc(2 * var(--rhythm)); border-top: var(--border-subtle); }
.tyk-readbox > summary {
  cursor: pointer;
  padding: 16px 0;
  font-size: var(--size-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: var(--color-text);
  list-style: none;
}
.tyk-readbox > summary::-webkit-details-marker { display: none; }
.tyk-readbox > summary::before {
  content: "›";
  display: inline-block;
  width: 1em;
  margin-right: 6px;
  font-size: 1.4em;
  line-height: 1;
  text-align: center;
  vertical-align: -1px;
  transition: transform .16s ease;
}
.tyk-readbox[open] > summary::before { transform: rotate(90deg); }
.tyk-readbox[open] > summary { border-bottom: var(--border-subtle); }

/* Synteza: świeża ląduje na górze listy, stara schodzi pod listę. */
.tyk-feed > .homepage-topic-panel { margin: 26px 0 0; }
.tyk-topic-section .homepage-topic-panel { max-width: 880px; margin: 0; }
.home-page .source-reading { max-width: 880px; }

/* ── artykuł: treść od razu pod tytułem ──────────────────────────── */
/* Pierwszy śródtytuł ma własną linię — kreska pod nagłówkiem ją dublowała. */
.article-header { border-bottom: 0; padding-bottom: 0; }
.article { padding-top: 0; }
.tyk-js .article-header .article-cover { display: none; }
/* Osobna reguła: przeglądarka bez :has() odrzuci tylko ją, nie okładkę. */
.tyk-js .article-header .notice:has(a[href*="youtube.com/"], a[href*="youtu.be/"]) { display: none; }
.toc a.tyk-cover { display: block; padding: 0; margin: 0 0 14px; border-bottom: 0; text-decoration: none; }
.toc .tyk-cover .article-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0;
  border-radius: var(--radius-sm);
}
.toc .tyk-cover-cap { display: block; margin-top: 8px; font-size: var(--size-caption); color: var(--color-text); }
.toc a.tyk-cover:hover .tyk-cover-cap { text-decoration: underline; }

.tyk-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; }
.tyk-progress > span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* Na końcu artykułu: następny nieprzeczytany materiał. */
.article-main .tyk-next {
  margin: calc(3 * var(--rhythm)) 0 0;
  padding-top: var(--rhythm);
  border-top: var(--border-subtle);
  hyphens: manual;
}
.tyk-next-label {
  display: block;
  margin: 0 0 12px;
  font-size: var(--size-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: var(--color-muted);
}
.tyk-next a.tyk-next-link {
  display: block;
  padding: 18px 20px;
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel-bg-soft);
  text-decoration: none;
}
.tyk-next a.tyk-next-link:hover { border-color: var(--color-accent); }
.tyk-next-title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-lead);
  line-height: 1.25;
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-text-strong);
  text-wrap: pretty;
}
.tyk-next-meta { display: block; margin-top: 8px; font-size: var(--size-caption); color: var(--color-muted); }
.tyk-next-cta {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-accent);
}
.tyk-next-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: var(--size-caption); }
.tyk-next-actions .tyk-mark { margin: 0; opacity: 1; }

/* ── telefony i wąskie okna ──────────────────────────────────────── */
@media (max-width: 48em) {
  /* Miniatura tylko obok tytułu; metadane i streszczenie na pełną szerokość. */
  .card.card > a {
    grid-template-columns: minmax(0, 1fr) 112px;
    grid-template-areas: "title thumb" "meta meta" "tldr tldr";
    gap: 0 18px;
    padding: 22px 0;
  }
  .card.card .card-body { display: contents; }
  .card.card .card-title { grid-area: title; }
  .card.card .thumb { grid-area: thumb; width: 112px; height: 63px; margin-top: 4px; }
  .card.card .meta { grid-area: meta; }
  .card.card .card-tldr { grid-area: tldr; }
  .card.card .card-title { font-size: 20px; }
  .tyk-next-title { font-size: 20px; }
}
@media (max-width: 22.5em) {
  .card.card > a { grid-template-columns: minmax(0, 1fr) 88px; gap: 0 14px; }
  .card.card .thumb { width: 88px; height: 50px; }
  .card.card .card-title { font-size: 18px; }
}