/* Vzhled je záměrně cizí: tokeny, písmo i pojmenování tříd jsou opsané
 * z klienta České digitální knihovny (trineracz/CDK-klient, public/styles),
 * aby se tenhle prohledávač dal do jejich tabu vložit bez redesignu.
 *
 * Barvy se proto nepíšou nikde přímo, vždycky jen `var(--…)`. Kdo tohle bude
 * převádět do Angularu, smaže blok :root a zbytek bude fungovat dál, protože
 * ty proměnné v jejich aplikaci existují.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  color-scheme: light;

  --font-family-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-headings: var(--font-family-body);

  --color-bg-base: #fff;
  --color-bg-light: #EFF2F5;
  --color-bg-bright: #DFE5EC;
  --color-bg-contrast: #BFCCD9;
  --color-bg-thumbnail: #EFF2F5;
  --color-bg-subdued-gray: rgba(128, 153, 179, 0.05);

  --color-primary: #0063CC;
  --color-primary-hover: #004D9E;
  --color-primary-pressed: #003A79;
  --color-subdued-blue: rgba(0, 123, 255, 0.1);
  --color-secondary: #fff;
  --color-secondary-hover: #f6f7f9;

  --color-text-base: #0A0D10;
  --color-text-secondary: #263340;
  --color-text-tertiary: #4C6580;
  --color-text-light: #4C6580;
  --color-text-on-color: #FFFFFF;
  --color-text-link: #0063CC;
  --color-text-error: #FF3A30;
  --color-text-warning: #8a5000;

  --color-border-light: #EFF2F5;
  --color-border-bright: #DFE5EC;
  --color-border-contrast: #BFCCD9;
  --color-border-tertiary-default: #DFE5EC;
  --color-border-tertiary-hover: #BFCCD9;

  --color-bg-tag-article: #0f434d;
  --color-bg-tag-page: #3c7ab9;
  --color-bg-tag-neutral: #4C6580;
  --accessibility-private-bg: #faeac8;
  --accessibility-private-text-color: #422400;

  --spacing-x1: 4px;
  --spacing-x2: 8px;
  --spacing-x3: 12px;
  --spacing-x4: 16px;
  --spacing-x5: 20px;
  --spacing-x6: 24px;
  --spacing-x8: 32px;
  --spacing-x10: 40px;
  --spacing-x12: 48px;
  --base-border-radius: 8px;
  --header-height: 56px;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
}

:root.dark {
  color-scheme: dark;
  --color-bg-base: #0E1216;
  --color-bg-light: #263340;
  --color-bg-bright: #263340;
  --color-bg-contrast: #4C6580;
  --color-bg-thumbnail: #263340;
  --color-primary: #0A85FF;
  --color-primary-hover: #3399FF;
  --color-primary-pressed: #66B2FF;
  --color-secondary: #171E26;
  --color-secondary-hover: #263340;
  --color-text-base: #FFFFFF;
  --color-text-secondary: #DFE5EC;
  --color-text-tertiary: #9FB2C6;
  --color-text-light: #8099b3;
  --color-text-link: #66b2ff;
  --color-border-light: #171E26;
  --color-border-bright: #263340;
  --color-border-contrast: #394C60;
  --color-border-tertiary-default: #394C60;
  --color-border-tertiary-hover: #4C6580;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family-body);
  background: var(--color-bg-base);
  color: var(--color-text-base);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── hlavička ─────────────────────────────────────────────────────────── */

.app-header {
  height: var(--header-height);
  display: flex; align-items: center; gap: var(--spacing-x4);
  padding: 0 var(--spacing-x5);
  border-bottom: 1px solid var(--color-border-bright);
  background: var(--color-bg-base);
  position: sticky; top: 0; z-index: 120;
}
.app-header__brand {
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: var(--spacing-x2);
}
.app-header__brand span { color: var(--color-text-tertiary); font-weight: 400; font-size: 13px; }
.app-header__brand, .app-header__brand:hover { color: inherit; text-decoration: none; }
.app-header__search { flex: 1; max-width: 720px; }
.app-header__actions { margin-left: auto; display: flex; gap: var(--spacing-x2); }

/* ── tlačítka a vstupy ────────────────────────────────────────────────── */

.button {
  border-radius: var(--base-border-radius);
  border: 1px solid transparent;
  padding: var(--spacing-x2) var(--spacing-x4);
  font-weight: var(--font-weight-medium);
  min-height: 40px;
}
.button.primary { background: var(--color-primary); color: var(--color-text-on-color); }
.button.primary:hover { background: var(--color-primary-hover); }
.button.outlined {
  background: var(--color-secondary); color: var(--color-text-secondary);
  border-color: var(--color-border-tertiary-default);
}
.button.outlined:hover { background: var(--color-secondary-hover); border-color: var(--color-border-tertiary-hover); }
.button.ghost { background: transparent; color: var(--color-text-tertiary); }
.button.ghost:hover { background: var(--color-bg-light); }
.button.small { min-height: 32px; padding: var(--spacing-x1) var(--spacing-x3); font-size: 13px; }

.input, select.input {
  width: 100%;
  border: 1px solid var(--color-border-contrast);
  border-radius: var(--base-border-radius);
  background: var(--color-bg-base);
  color: var(--color-text-base);
  padding: var(--spacing-x2) var(--spacing-x3);
  min-height: 40px;
}
.input:focus-visible, select.input:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary);
}

.search-row { display: flex; gap: var(--spacing-x2); align-items: flex-start; }
.search-row .search-field { flex: 1; }

/* Pole hledání je textarea, která roste s dotazem (výšku nastavuje JS), do
   čtyř řádků a pak roluje. Křížek sedí ve vyhrazeném pruhu vpravo, ať
   nezakrývá text. */
.search-field { position: relative; }
.search-input {
  display: block; resize: none; overflow-y: auto;
  font: inherit; line-height: 22px;
  padding: 8px 40px 8px var(--spacing-x3);
  max-height: calc(4 * 22px + 18px);
}
.search-clear {
  position: absolute; top: 4px; right: 4px;
  width: 32px; height: 32px;
  border: 0; border-radius: var(--base-border-radius);
  background: transparent; color: var(--color-text-tertiary);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.search-clear:hover { background: var(--color-bg-light); color: var(--color-text-base); }
.search-clear:focus-visible { outline: 2px solid var(--color-primary); }
.search-row--lg .search-input {
  min-height: 56px; font-size: 17px; line-height: 24px;
  padding: 15px 52px 15px var(--spacing-x5);
  max-height: calc(4 * 24px + 32px);
}
.search-row--lg .search-clear { top: 10px; right: 10px; width: 36px; height: 36px; }

/* V hlavičce má pole jeden řádek; rozepsaný dlouhý dotaz se rozbalí dolů
   přes stránku, výška hlavičky se nemění. */
.app-header__search .search-field { height: 40px; }
.app-header__search .search-input { position: absolute; inset: 0 0 auto 0; z-index: 1; }
/* Bez fokusu jeden řádek. Samotné overflow: hidden nestačí: ořezává až na
   okraji odsazení, takže v dolních 8 px vykukovaly vršky druhého řádku. */
.app-header__search .search-input:not(:focus) {
  height: 40px !important; overflow: hidden;
  white-space: nowrap;
}
/* Řádek bez zalomení přetéká doprava do pruhu pro křížek; ten ho zakryje.
   (text-overflow: ellipsis na textarea prohlížeče nedělají.) */
.app-header__search .search-clear {
  top: 1px; right: 1px; width: 38px; height: 38px;
  background: var(--color-bg-base);
  border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
}
.app-header__search .search-clear { z-index: 2; }
.search-row--lg .button { min-height: 56px; padding: 0 var(--spacing-x6); }

/* ── úvodní stránka ───────────────────────────────────────────────────── */

.search-hero {
  max-width: 780px; margin: 0 auto;
  padding: var(--spacing-x12) var(--spacing-x5) var(--spacing-x10);
  text-align: center;
}
.search-hero h1 {
  font-family: var(--font-family-headings);
  font-size: 32px; line-height: 1.2; margin: 0 0 var(--spacing-x3);
  letter-spacing: -0.02em;
}
.search-hero p { color: var(--color-text-tertiary); margin: 0 0 var(--spacing-x8); }
.search-hero .search-row { text-align: left; }

.examples { margin-top: var(--spacing-x8); }
.examples__label {
  font-size: 13px; color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--spacing-x3);
}
.examples__list { display: flex; flex-wrap: wrap; gap: var(--spacing-x2); justify-content: center; }
.example-chip {
  border: 1px solid var(--color-border-tertiary-default);
  background: var(--color-bg-base); color: var(--color-text-secondary);
  border-radius: 999px; padding: var(--spacing-x2) var(--spacing-x4); font-size: 14px;
}
.example-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }

.hero-corpus {
  margin-top: var(--spacing-x10); font-size: 13px; color: var(--color-text-tertiary);
  display: flex; gap: var(--spacing-x5); justify-content: center; flex-wrap: wrap;
}

/* ── rozvržení výsledků (page-layout / sidebar z ČDK) ─────────────────── */

.page-container__inner { display: flex; align-items: flex-start; }

.filter-sidebar {
  flex: 0 0 300px; width: 300px;
  border-right: 1px solid var(--color-border-bright);
  padding: var(--spacing-x4);
  position: sticky; top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
}
.page-content { flex: 1; min-width: 0; padding: var(--spacing-x4) var(--spacing-x5) var(--spacing-x12); }

.filter-group { padding-bottom: var(--spacing-x5); margin-bottom: var(--spacing-x5); border-bottom: 1px solid var(--color-border-light); }
.filter-group:last-child { border-bottom: 0; }
.filter-group__title {
  font-size: 13px; font-weight: var(--font-weight-semi-bold);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-tertiary); margin-bottom: var(--spacing-x3);
}
.filter-group__hint { font-size: 12px; color: var(--color-text-light); margin-top: var(--spacing-x2); }

.check-row { display: flex; align-items: center; gap: var(--spacing-x2); padding: var(--spacing-x1) 0; min-height: 28px; }
.check-row input { accent-color: var(--color-primary); width: 16px; height: 16px; }
.check-row__count { margin-left: auto; font-size: 12px; color: var(--color-text-light); }
.facet__title { margin: var(--spacing-x3) 0 var(--spacing-x1); font-size: 12px; font-weight: 600;
  color: var(--color-text-light); text-transform: uppercase; letter-spacing: .04em; }
.facets .check-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Vlastní dropdown místo <select>: rozbalený nativní seznam kreslí operační
   systém, takže vypadá na každém prohlížeči jinak a náš styl na něj nedosáhne. */
.dropdown { position: relative; margin-top: var(--spacing-x2); }
.dropdown__toggle {
  display: flex; align-items: center; gap: var(--spacing-x2);
  text-align: left; font: inherit; cursor: pointer;
}
.dropdown__toggle::after {
  content: ''; flex: none; margin-left: auto;
  width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid var(--color-text-tertiary);
  border-bottom: 2px solid var(--color-text-tertiary);
  transform: rotate(45deg);
}
.dropdown__toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
.dropdown__toggle:hover:not(:disabled) { border-color: var(--color-border-tertiary-hover); }
.dropdown__toggle:disabled { opacity: 0.5; cursor: default; }
.dropdown__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__menu {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + var(--spacing-x1));
  margin: 0; padding: var(--spacing-x1); list-style: none;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-contrast);
  border-radius: var(--base-border-radius);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-text-base) 14%, transparent);
}
.dropdown__menu:focus { outline: none; }
.dropdown__option {
  display: flex; flex-direction: column; line-height: 1.35;
  padding: var(--spacing-x2) var(--spacing-x3);
  border-radius: calc(var(--base-border-radius) - 2px);
  cursor: pointer;
}
.dropdown__option small { color: var(--color-text-light); font-size: 12px; }
.dropdown__option.is-active { background: var(--color-bg-light); }
.dropdown__option[aria-selected="true"] { color: var(--color-primary); font-weight: var(--font-weight-medium); }

.year-row { display: flex; gap: var(--spacing-x2); align-items: center; }
.year-row .input { min-height: 36px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: var(--spacing-x3);
  border: 1px solid var(--color-border-tertiary); border-radius: 8px; overflow: hidden; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 6px var(--spacing-x2); text-align: center; font-size: 14px;
  color: var(--color-text-tertiary); }
.segmented label + label span { border-left: 1px solid var(--color-border-tertiary); }
.segmented input:checked + span { background: var(--color-subdued-blue); color: var(--color-primary); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.when-rows { display: grid; gap: var(--spacing-x2); }
.when-row { position: relative; display: grid; grid-template-columns: 2em 1fr auto; align-items: center;
  gap: var(--spacing-x2); color: var(--color-text-tertiary); font-size: 14px; }
.when-row .input { min-height: 36px; width: 100%; min-width: 0; }
.when-row .input[aria-invalid] { border-color: var(--color-error, #c62828); }
.when-cal { width: 36px; height: 36px; border: 1px solid var(--color-border-tertiary); border-radius: 8px;
  background: transparent center / 18px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  cursor: pointer; }
.when-cal:hover { background-color: var(--color-bg-light); }
.when-picker { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filter-group__hint.is-error { color: var(--color-error, #c62828); }

/* ── lišta nad výsledky a čipy ────────────────────────────────────────── */

.results-bar {
  display: flex; align-items: center; gap: var(--spacing-x3);
  flex-wrap: wrap; margin-bottom: var(--spacing-x4);
}
.results-bar__count { color: var(--color-text-tertiary); font-size: 14px; }
.results-bar__spacer { margin-left: auto; }
/* Panel s filtry je na širokém displeji pořád vidět, takže se nemá čím
 * přepínat. Tlačítko patří jen k té úzké variantě, kde je panel schovaný. */
.sidebar-toggle, .sidebar-close { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-x2); align-items: center; }
.chips__note { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--color-text-tertiary); }
.chips__label { font-size: 13px; color: var(--color-text-tertiary); }
.chip {
  display: inline-flex; align-items: center; gap: var(--spacing-x2);
  border: 1px solid var(--color-border-tertiary-default);
  background: var(--color-bg-base); color: var(--color-text-secondary);
  border-radius: 999px; padding: var(--spacing-x1) var(--spacing-x3); font-size: 13px;
}
.chip.is-active { border-color: var(--color-primary); background: var(--color-subdued-blue); color: var(--color-primary); }
.chip__cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
.chip__x { font-weight: var(--font-weight-bold); opacity: 0.6; }
/* „Zrušit vše" vypadá jako odkaz, ne jako další čip — není to jméno
   z dotazu, ale akce nad nimi. */
.chips__clear {
  border: 0; background: none; padding: var(--spacing-x1) var(--spacing-x2);
  font-size: 13px; color: var(--color-primary); cursor: pointer; text-decoration: underline;
}
.chips__clear:hover { color: var(--color-primary-hover); }

.tag {
  display: inline-block; border-radius: var(--spacing-x1);
  padding: 1px var(--spacing-x2); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-on-color); background: var(--color-bg-tag-neutral);
}
.tag--article { background: var(--color-bg-tag-article); }
.tag--title { background: var(--color-bg-tag-page); }
.tag--private { background: var(--accessibility-private-bg); color: var(--accessibility-private-text-color); }

/* ── výsledek ─────────────────────────────────────────────────────────── */

.result {
  display: flex; align-items: flex-start; gap: var(--spacing-x4);
  flex-wrap: wrap; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--color-border-light);
  background: transparent; color: inherit;
  padding: var(--spacing-x4) var(--spacing-x3);
}
.result { cursor: pointer; }
.result:hover { background: var(--color-bg-subdued-gray); }
.result:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.result__rank {
  min-width: 22px; height: 22px; padding: 0 var(--spacing-x1);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 12px; font-weight: var(--font-weight-medium);
  background: var(--color-bg-light); color: var(--color-text-secondary);
}
.result__head { display: flex; align-items: center; gap: var(--spacing-x2); flex-wrap: wrap; margin-bottom: var(--spacing-x2); }
.result__title { font-weight: var(--font-weight-semi-bold); }
.result__meta { color: var(--color-text-tertiary); font-size: 13px; }
/* AI shrnutí pod textem z novin: menší a tlumené, je to pomůcka, ne zdroj. */
.result__summary { margin: var(--spacing-x2) 0 0; font-size: 14px; color: var(--color-text-secondary); }
.result__summary-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-tertiary); margin-right: var(--spacing-x2);
}
.result__pending { font-size: 13px; color: var(--color-text-tertiary); }
/* Text z novin: hlavní obsah výsledku, zkrácený na tři řádky. */
.result__snippet { margin: 0; color: var(--color-text-base); white-space: pre-line; }
.result__snippet.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.result__more {
  display: inline-block; margin-top: var(--spacing-x1); font-size: 13px;
  color: var(--color-primary); cursor: pointer;
}
.result__more:hover { text-decoration: underline; }
.result__more[hidden] { display: none; }
/* Náhradní výřez, když IIIF nejde: posunutá a zvětšená celá strana v rámu. */
.crop-fallback { overflow: hidden; aspect-ratio: 3 / 2; }
.crop-fallback img { display: block; max-width: none; }

/* Kolečko „něco se děje" u výřezu, než dorazí shrnutí. */
.spinner {
  display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid var(--color-border-bright); border-top-color: var(--color-primary);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.result__entities { display: flex; flex-wrap: wrap; gap: var(--spacing-x2); margin-top: var(--spacing-x3); }

/* Hlavička (číslo + nadpis) a řádek s novinami jdou přes celou šířku,
 * text a náhled vedle sebe pod nimi. */
.result__head { flex-basis: 100%; align-items: baseline; flex-wrap: nowrap; margin-bottom: var(--spacing-x1); }
.result__metaline {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--spacing-x1) var(--spacing-x2); margin-bottom: var(--spacing-x2); font-size: 13px;
}
.result__metaline .result__title { font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }
.result__kind { color: var(--color-text-tertiary); font-size: 12px; }
.result__kind:empty { display: none; }

/* Nadpis článku od modelu: hlavní řádek výsledku. Šedý pruh drží místo,
 * než nadpis dorazí, ať výsledek neposkočí. */
.result__headline {
  flex: 1; min-width: 0;
  font-size: 16px; line-height: 1.35; font-weight: var(--font-weight-semi-bold);
  color: var(--color-text-base);
}
.result__headline.is-loading .skeleton { width: 55%; height: 16px; margin: 3px 0; }
.result:hover .result__headline { color: var(--color-primary); text-decoration: underline; }
/* Bez nadpisu (vypnuté nebo nevyšlo) jsou hlavním řádkem noviny. */
.result:has(.result__headline[hidden]) .result__metaline .result__title {
  font-size: 15px; font-weight: var(--font-weight-semi-bold); color: var(--color-text-base);
}
.result__body { flex: 1; min-width: 0; }

/* Náhled výřezu ze skenu. Zaříznutý schválně: má napovědět, jak pasáž vypadá
 * na stránce, ne nabídnout ji ke čtení. Proto i to stmívání dole — ať je
 * vidět, že text pokračuje, a nevypadá to jako oříznutý omylem. */
.result__scan {
  flex: none; width: 150px; max-height: 170px; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--spacing-x1);
  border: 1px solid var(--color-border-bright); border-radius: var(--base-border-radius);
  background: var(--color-bg-thumbnail); padding: var(--spacing-x1);
  /* Maska, ne barva — `black` je tu jen „plně viditelné", takže se nemá
   * o čem přebarvovat a pravidlo „barvy jen přes var(--…)" se jí netýká. */
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
.result__scan img { width: 100%; height: auto; display: block; }
.ent-chip {
  font-size: 12px; border-radius: 999px; padding: 0 var(--spacing-x2);
  border: 1px solid var(--color-border-bright); color: var(--color-text-tertiary);
}
.ent-chip--person { border-color: #a046ce; color: #a046ce; }
.ent-chip--place { border-color: #228aa2; color: #228aa2; }
.ent-chip--org { border-color: #894607; color: #b16a1f; }
.ent-chip--work { border-color: #6c5ed7; color: #6c5ed7; }

.state { padding: var(--spacing-x10) var(--spacing-x5); text-align: center; color: var(--color-text-tertiary); }
.state--error { color: var(--color-text-error); }
.state--empty strong { display: block; font-size: 17px; color: var(--color-text-base); }
.state--empty p { margin: var(--spacing-x2) auto 0; max-width: 46ch; }
.state__detail {
  display: block; margin-top: var(--spacing-x2);
  font-size: 13px; color: var(--color-text-tertiary); overflow-wrap: anywhere;
}

.skeleton {
  height: 14px; border-radius: var(--spacing-x1);
  background: linear-gradient(90deg, var(--color-bg-light), var(--color-bg-bright), var(--color-bg-light));
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.loading-status {
  padding: var(--spacing-x3) var(--spacing-x3) var(--spacing-x1);
  font-size: 14px; color: var(--color-text-tertiary);
}
.loading-status.is-fresh, .answer__pending.is-fresh { animation: status-in 320ms ease-out; }
@keyframes status-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .loading-status.is-fresh, .answer__pending.is-fresh { animation: none; }
}
.skeleton-row { padding: var(--spacing-x4) var(--spacing-x3); border-bottom: 1px solid var(--color-border-light); }
.skeleton-row .skeleton + .skeleton { margin-top: var(--spacing-x2); }

/* ── detail ───────────────────────────────────────────────────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(38, 51, 64, 0.6);
  display: flex; justify-content: center; align-items: stretch;
  padding: var(--spacing-x5);
}
/* Na velkém monitoru se detail roztáhne: sken novinové strany je vysoký a
   úzké okno znamená, že se v něm musí posouvat i tam, kde by se text vešel.
   Strop zůstává, aby se řádky textu vedle skenu nerozjely do nečitelné délky. */
.detail {
  background: var(--color-bg-base); border-radius: var(--base-border-radius);
  width: min(1760px, 100%); display: flex; flex-direction: column; overflow: hidden;
}
.detail__head {
  display: flex; align-items: center; gap: var(--spacing-x3);
  padding: var(--spacing-x3) var(--spacing-x4);
  border-bottom: 1px solid var(--color-border-bright);
}
.detail__title { font-weight: var(--font-weight-semi-bold); }
.detail__body { display: flex; gap: 0; flex: 1; min-height: 0; }
.detail__scan {
  flex: 1 1 62%; background: var(--color-bg-thumbnail);
  min-height: 0; display: flex;
}
/* Text dostane zbytek, ale nejvýš tolik, aby se dal číst — nad ~56 znaků na
   řádek oko ztrácí začátek dalšího řádku. */
.detail__text {
  flex: 1 1 38%; max-width: 46rem; min-height: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--color-border-bright);
}
/* Text článku roluje, shrnutí nad ním stojí. */
.detail__chunks { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--spacing-x4) var(--spacing-x4); }

/* Výřez je okno do strany: `.scan` se v něm posouvá a přibližuje jedním
 * `transform`, takže se s ním rámečky (v procentech) zvětšují samy. */
.scan-viewport {
  position: relative; flex: 1; min-width: 0; overflow: hidden;
  cursor: grab; touch-action: none;
}
.scan-viewport.is-grabbing { cursor: grabbing; }
.scan { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.scan.is-animating { transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.scan img { display: block; width: 100%; height: auto; pointer-events: none; }
/* Zhasnuté vyznačení: rámečky zůstávají v DOMu kvůli přibližování na pasáž,
   jen nejsou vidět. */
.scan--plain .scan__box { opacity: 0; }
.scan-controls__toggle { margin-left: var(--spacing-x2); }

.scan-controls {
  position: absolute; right: var(--spacing-x3); bottom: var(--spacing-x3);
  display: flex; gap: var(--spacing-x1); flex-wrap: wrap; justify-content: flex-end;
}
.scan-controls .button { background: var(--color-bg-base); }
/* Zvýrazněné tlačítko říká, na co je zrovna přiblíženo. */
.scan-controls .button.is-active {
  background: var(--color-primary); color: var(--color-text-on-color);
  border-color: var(--color-primary);
}
/* Na skenu se vysvěcuje text, ne plocha kolem něj: nalezená pasáž výrazně,
   zbytek článku slabě. Obkresluje se po částech článku — jeden obdélník přes
   celý článek by u sazby do sloupců zabral i cizí text mezi nimi.
   Barvy přes `color-mix` z tokenu, ať sedí i v tmavém tématu. */
.scan__box { position: absolute; border-radius: 2px; }
.scan__box--article {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
}
/* Ostatní články strany jsou klikatelné, ale neviditelné — ukážou se až při
   najetí, aby bylo vidět, co se rozklikne. Jinak by přes stranu ležela mřížka
   obdélníků a sken by se nedal číst. */
.scan__box--other { background: transparent; border: 0; }
/* Článek otevřený v textu vpravo — obkreslený stejně jako nalezený. */
.scan__box--other.is-selected {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.scan__box { cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease; }
.scan__box.is-hovered {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.scan__box.is-flash { animation: scan-flash 1.2s ease-out; }
@keyframes scan-flash {
  0%, 40% { background: color-mix(in srgb, var(--color-primary) 40%, transparent); }
  100% { background: color-mix(in srgb, var(--color-primary) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .scan__box.is-flash { animation-duration: 0.01s; }
}

/* Strana po článcích: nalezený rozbalený, ostatní sbalené na jeden řádek. */
.page-article { border-bottom: 1px solid var(--color-border-bright); }
.page-article__head {
  display: flex; align-items: center; gap: var(--spacing-x2);
  width: 100%; padding: var(--spacing-x3) 0;
  border: 0; background: none; color: var(--color-text-base);
  font: inherit; text-align: left; cursor: pointer;
}
.page-article__head:hover { color: var(--color-text-link); }
.page-article__excerpt {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--color-text-secondary); font-size: 13px;
}
.page-article__badge {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-primary);
}
.page-article__body { display: none; padding: 0 var(--spacing-x3) var(--spacing-x3); }
.page-article.is-open > .page-article__body { display: block; }
/* Šipka říká, co se rozbalí; otevřený článek má rámeček a modrý okraj vlevo,
   ať je jasné, kde začíná a končí. Otevřený je vždy jen jeden. */
.page-article__chevron {
  flex: none; width: 8px; height: 8px; margin: 0 var(--spacing-x1);
  border-right: 2px solid var(--color-text-tertiary);
  border-bottom: 2px solid var(--color-text-tertiary);
  transform: rotate(-45deg); transition: transform 150ms ease;
}
.page-article.is-open > .page-article__head .page-article__chevron { transform: rotate(45deg); }
.page-article.is-open {
  border: 1px solid var(--color-border-bright); border-left: 3px solid var(--color-primary);
  border-radius: var(--base-border-radius);
  margin: var(--spacing-x2) 0; background: var(--color-bg-base);
}
.page-article.is-open > .page-article__head {
  position: sticky; top: 0; z-index: 1;
  padding-left: var(--spacing-x2); padding-right: var(--spacing-x2);
  background: var(--color-bg-light); font-weight: var(--font-weight-medium);
}
@media (prefers-reduced-motion: reduce) { .page-article__chevron { transition: none; } }

.chunk { cursor: pointer; border-radius: var(--spacing-x1); padding: var(--spacing-x1) var(--spacing-x2); }
.chunk.is-hovered { background: var(--color-bg-light); }
.chunk.is-flash { animation: chunk-flash 1.6s ease-out; }
@keyframes chunk-flash {
  0%, 40% { background: var(--color-subdued-blue); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .chunk.is-flash { animation-duration: 0.01s; }
}
.scan__box--chunk {
  background: color-mix(in srgb, var(--color-primary) 26%, transparent);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Shrnutí je vlastní část okna, ne panel plovoucí nad textem: text článku
 * roluje pod ním a nic se nepřekrývá. U článku o jedenácti částech se jinak
 * schovalo nahoře a ten, kdo sjel na nalezenou pasáž, o něm nevěděl. */
.summary {
  flex: none; padding: var(--spacing-x4) var(--spacing-x4) var(--spacing-x3);
  border-bottom: 1px solid var(--color-border-bright);
  background: var(--color-bg-light);
}
.summary__body { max-height: 26vh; overflow-y: auto; }
.summary__text { margin: 0; }
.summary__toggle {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--color-text-link); font: inherit; font-size: 12px;
}
.summary__toggle:hover { text-decoration: underline; }
.summary__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-tertiary); margin-bottom: var(--spacing-x2);
  display: flex; align-items: center; gap: var(--spacing-x2);
}
.summary__ai { color: var(--color-primary); }
.chunk { padding: var(--spacing-x3) 0; border-top: 1px solid var(--color-border-light); }
.chunk.is-match { background: var(--color-subdued-blue); border-radius: var(--base-border-radius); padding: var(--spacing-x3); }
.chunk__label { font-size: 12px; color: var(--color-text-tertiary); margin-bottom: var(--spacing-x1); }
.chunk__text { margin: 0; color: var(--color-text-secondary); }

/* Odpověď s citacemi a doptávání ─────────────────────────────────────────
 * Vrstva nad seznamem výsledků, ne náhrada za něj: proto je odsazená
 * a orámovaná, aby bylo poznat, kde končí odpověď a začínají nálezy. */
.answer-panel {
  border: 1px solid var(--color-border-bright);
  border-radius: var(--base-border-radius);
  background: var(--color-bg-subdued-gray);
  padding: var(--spacing-x4);
  margin: var(--spacing-x3) 0 var(--spacing-x5);
}
.answer-panel__history:not(:empty) {
  margin-bottom: var(--spacing-x3); padding-bottom: var(--spacing-x3);
  border-bottom: 1px solid var(--color-border-light);
}
.turns__label { font-size: 12px; color: var(--color-text-tertiary); margin-bottom: var(--spacing-x1); }
.turns { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 2px; }
.turns__item { font-size: 14px; color: var(--color-text-tertiary); }
.turns__back {
  text-align: left; background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--color-text-secondary); font: inherit;
}
.turns__back:hover { color: var(--color-primary); text-decoration: underline; }
.turns__item.is-current { color: var(--color-text-base); font-weight: var(--font-weight-semi-bold); }

.answer { padding: var(--spacing-x1) 0 0; }
.answer__pending { font-size: 13px; color: var(--color-text-tertiary); margin-bottom: var(--spacing-x2); }
.answer__warning { font-size: 13px; color: var(--color-text-warning); margin-bottom: var(--spacing-x2); }
/* Souvislý text, ne seznam. Tvrzení jsou inline `span`y, takže věty tečou za
 * sebou jako v odstavci; podbarví se jen při najetí na zdroj, aby bylo vidět,
 * která věta se o něj opírá. Rámeček ani odsazení nemají — z toho vznikal
 * dojem odrážek. */
.answer__text {
  margin: 0; color: var(--color-text-secondary); line-height: 1.65;
}
.answer__claim {
  border-radius: var(--spacing-x1);
  padding: 1px 0;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.answer__claim.is-linked {
  background: var(--color-subdued-blue);
  box-shadow: 0 0 0 2px var(--color-subdued-blue);
}

.cite {
  display: inline-block; min-width: 18px; margin: 0 1px; padding: 0 var(--spacing-x1);
  border: 0; border-radius: var(--spacing-x1); cursor: pointer;
  background: var(--color-subdued-blue); color: var(--color-primary);
  font: inherit; font-size: 11px; font-weight: var(--font-weight-semi-bold);
  vertical-align: super; line-height: 1.4;
}
.cite:hover, .cite.is-linked { background: var(--color-primary); color: var(--color-text-on-color); }

.sources { margin-top: var(--spacing-x4); display: flex; flex-direction: column; gap: var(--spacing-x2); align-items: stretch; }
.sources__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-tertiary); width: 100%;
}
.source {
  display: flex; align-items: baseline; gap: var(--spacing-x2); text-align: left;
  border: 1px solid var(--color-border-bright); border-radius: var(--base-border-radius);
  background: var(--color-bg-base); color: var(--color-text-tertiary);
  padding: var(--spacing-x1) var(--spacing-x3); cursor: pointer; font: inherit; font-size: 13px;
}
.source:hover, .source.is-linked { border-color: var(--color-primary); color: var(--color-text-base); }
.source__index {
  min-width: 18px; text-align: center; border-radius: var(--spacing-x1);
  background: var(--color-primary); color: var(--color-text-on-color); font-size: 11px;
  flex: none; align-self: flex-start; margin-top: 2px;
}
/* Karta říká, co v článku je, ne jen kam vede. Citát je ověřený proti textu
 * z indexu — nepodložený se nezobrazuje vůbec. */
.source__quote { color: var(--color-text-light); font-style: italic; }

.followups { margin-top: var(--spacing-x4); }
.followups__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-tertiary); margin-bottom: var(--spacing-x2);
}
.followups__list { display: flex; flex-wrap: wrap; gap: var(--spacing-x2); }

.ask-row { display: flex; gap: var(--spacing-x2); margin-top: var(--spacing-x4); align-items: flex-start; }
.ask-row .search-field { flex: 1; }
.ask-row.is-busy { opacity: 0.6; pointer-events: none; }

@media (max-width: 853px) {
  .sidebar-toggle { display: inline-flex; align-items: center; }
  .filter-sidebar.is-open .sidebar-close {
    display: block; width: 100%; margin-bottom: var(--spacing-x4);
    position: sticky; top: 0; z-index: 1;
  }
  .filter-sidebar { display: none; }
  .filter-sidebar.is-open {
    display: block; position: fixed; inset: var(--header-height) 0 0 0;
    width: 100%; max-height: none; z-index: 150; background: var(--color-bg-base);
  }
  /* Na úzkém displeji je náhled to první, co zabere místo textu. */
  .result__scan { display: none; }
  .detail__body { flex-direction: column; }
  .detail__text { border-left: 0; border-top: 1px solid var(--color-border-bright); }
  .app-header__search { display: none; }
}

/* Odpověď se vztahuje k nastavení, za kterého vznikla. Když se změní, je to
   vidět a přepočítat se dá jedním klikem — automaticky ne, stojí to volání
   modelu, a kdo odklikává čtyři automatické entity, zaplatil by čtyři. */
.answer__stale {
  display: flex; align-items: center; gap: var(--spacing-x2); flex-wrap: wrap;
  margin-bottom: var(--spacing-x3);
  padding: var(--spacing-x2) var(--spacing-x3);
  border: 1px solid var(--color-border-tertiary-default);
  border-radius: var(--spacing-x1);
  background: var(--color-bg-light);
  font-size: 13px; color: var(--color-text-secondary);
}

.answer__regenerate {
  margin-left: auto;
  border: 1px solid var(--color-border-tertiary-default);
  background: var(--color-bg-base); color: var(--color-text-link);
  border-radius: 999px;
  padding: var(--spacing-x1) var(--spacing-x3);
  font-family: inherit; font-size: 13px; cursor: pointer;
}

.answer__regenerate:hover {
  border-color: var(--color-primary);
  background: var(--color-subdued-blue);
  color: var(--color-primary);
}

/* Krátké zvýraznění výsledku, na který se přišlo kliknutím na zdroj pod
   odpovědí. Zhasne samo — je to ukazovátko „tenhle to je", ne stav. */
.result.is-focused {
  animation: result-focus 2.4s ease-out;
}
@keyframes result-focus {
  0%, 55% {
    background: var(--color-subdued-blue);
    border-color: var(--color-primary);
  }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .result.is-focused { animation-duration: 0.01s; }
}

/* Kurzor, dokud text teče — ať je poznat, že shrnutí ještě není celé a nemá
   smysl ho zatím brát jako hotové. */
.answer__text--streaming::after,
.summary__text--streaming::after {
  content: '';
  display: inline-block; width: 0.5em; height: 1em;
  margin-left: 2px; vertical-align: text-bottom;
  background: var(--color-primary); opacity: 0.6;
  animation: summary-caret 1s steps(2, start) infinite;
}
@keyframes summary-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .summary__text--streaming::after { animation: none; }
}