/* ČOS Digital Library — UI kit (prototype-only chrome).
   Builds on colors_and_type.css. REBUILT Jun 2026 on the shared design-system
   components: everything that exists as a canonical preview/_*.css partial is
   LINKED from index.html, not mirrored here. This file keeps only what is
   genuinely app-specific — header / footer / hero / page layout / detail &
   request-form scaffolding / catalogue page chrome.

   Dropped in the rebuild (now consumed shared):
     chips → _chips.css · buttons → _buttons.css · search field → _field.css
     filter groups → _filter-group.css · filter pills → _filter-pills.css
     segmented → _segmented.css · sort combobox → _select.css
     theme switch → _switch.css · table (+ code-cell) → _table.css
     collection motion → _collection.css · pagination → _pagination.css
     pager pin/dock → _pindock.css · quick tiles → _quick-tile.css
     doc card → _doc-card.css · covers → _cover.css · library card/cover →
     _lib-card.css/_lib-cover.css · favourite ★ → _favourite.css
     metabox → _metabox.css · related → _related.css · notices → _notices.css
     toast → _toast.css · region nav → _region-nav.css · status → _status.css */

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--color-bg-page); }

/* ========================================================
   LAYOUT
   ======================================================== */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.app { min-height: 100vh; display: flex; flex-direction: column; }
main.page { flex: 1; padding-bottom: var(--space-16); }

/* ========================================================
   SITE HEADER — mirrors preview/brand-header.html
   ========================================================
   Structure:  <header.site-header>
                 <div.bar>            ← full-width gov.cz strip
                 <div.container.hdr-main-wrap>   ← container-query host
                   <div.main>         ← grid: "lockup nav actions"
   Demotion ladder (single container, named queries):
     ≤ 1060 — tabs wrap onto their own row (login CTA stays top-right)
     ≥  980 + .signed-in — short user CTA frees space, tabs return to row 1
     ≤  720 — login button collapses to icon-only
     ≤  500 — tab labels collapse to icons (tooltip preserves name)         */
.site-header {
  background: white;
  border-bottom: 1px solid var(--color-border-default);
  /* NOT sticky (user-decided Jun 2026) — scrolls away with the page. A
     collapsible reveal-on-scroll-up header may come later. position:relative
     + z-index keep the old sticky stacking behaviour (combo dropdown over
     page content) without the pinning. */
  position: relative; z-index: 40;
  box-shadow: 0 1px 0 rgba(12,24,56,0.02);
}
/* Gov.cz top strip — full-width black bar. The theme switch (.tsw--on-dark)
   and the language combobox (.tb-select--on-dark) are the SHARED components
   (_switch.css / _select.css) in their dark-bar variants — no local port. */
.bar {
  background: var(--gov-color-neutral-900);
  color: white; font-size: 12.5px;
}
.bar__inner { display: flex; justify-content: space-between; align-items: center; height: 32px; }
.bar a { color: white; text-decoration: none; opacity: 0.85; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* Underline rides the label span, never the icon (system-wide rule — the
   anchor is a flex container, so decoration would propagate into the globe). */
.bar a:hover { opacity: 1; }
.bar a:active { opacity: 0.7; }
.bar a:is(:hover, :active) .bar__lbl { text-decoration: underline; }
.bar i { font-size: 13px; }
/* Collapsed short forms (≤380px viewport — the bar is full-width, so a media
   query stands in for brand-header.html's @container 380 rule). */
.bar__short { display: none; }
.lockup .inst__short { display: none; }
@media (max-width: 380px) {
  .bar__full,  .lockup .inst__full  { display: none; }
  .bar__short { display: inline; }
  .lockup .inst__short { display: inline; }
}
.bar__right { display: inline-flex; align-items: center; gap: 10px; }

/* Container-query host — width of .container drives the demotion ladder. */
.hdr-main-wrap { container-type: inline-size; }

/* Main row — grid keeps lockup (left) and actions (right) anchored. */
.main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "lockup nav actions";
  align-items: center;
  padding: var(--space-3) 0;
  gap: 8px 16px;
}

/* Lockup */
.lockup { grid-area: lockup; display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.lockup__tile { width: 40px; height: 40px; background: var(--jvs-modra); color: white; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex: none; }
.lockup__tile svg { width: 60%; height: 60%; }
.lockup .name, .lockup .inst { white-space: nowrap; }
/* Czechia Sans Bold (700) crowds Czech diacritics below ~24px, so the
   logotype steps down to Semibold (600) at the header size. */
.lockup .name { font-weight: 600; font-size: 16px; color: var(--gov-color-neutral-900); line-height: 1.15; letter-spacing: -0.005em; font-feature-settings: var(--otf-logotype); }
.lockup .inst { font-size: 11.5px; color: var(--color-fg-secondary); }

/* Tabs — active indicator is the sliding ink (shared _nav-ink.js injects the
   .nav__ink / .nav--ink rules); the static border underline below is the
   no-JS fallback. */
.nav { grid-area: nav; display: flex; gap: 2px; align-items: stretch; min-width: 0; font-size: 14px; justify-content: flex-end; position: relative; }
.nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  color: var(--gov-color-neutral-900); text-decoration: none;
  white-space: nowrap; border-radius: 4px 4px 0 0;
  cursor: pointer;
  /* Reserve underline space so the baseline doesn't jump active↔inactive. */
  border-bottom: 3px solid transparent;
}
.nav a:hover { background: var(--gov-color-neutral-50); }
.nav a:active { background: var(--gov-color-neutral-100); }
.nav a i { font-size: 14px; color: currentColor; opacity: 0.85; }
/* Reserve the BOLD (active) width at all times so promoting a tab to 600
   doesn't widen it and nudge the following tabs — hidden bold ghost
   (brand-header.html pattern; data-text carries the label). */
.nav__lbl { display: inline-block; }
.nav__lbl::after {
  content: attr(data-text);
  display: block; height: 0; overflow: hidden;
  font-weight: 600; visibility: hidden;
}
.nav a.active {
  color: var(--gov-color-primary-500);
  font-weight: 600;
  border-bottom-color: var(--gov-color-primary-500);
  background: transparent;
}
.nav a.active i { opacity: 1; }

/* Action slot (login CTA) — the buttons are the CANONICAL _buttons.css
   components (.btn--primary / .btn--ghost + .btn--sm), so they obey the
   combined Tweaks panel's button style. Only layout + label nowrap live here
   (the old local re-implementation is GONE — brand-header.html decision). */
.nav-actions { grid-area: actions; display: flex; gap: 10px; align-items: center; justify-self: end; }
.nav-actions .btn i { font-size: 14px; }
.nav-actions .btn__lbl { white-space: nowrap; }

/* Container-query demotion */
@container (max-width: 1060px) {
  .main {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "lockup actions"
      "nav    nav";
  }
  .nav {
    justify-content: flex-start;
    border-top: 1px solid var(--color-border-default);
    padding-top: 6px; padding-bottom: 4px;
    margin: 4px calc(-1 * clamp(20px, 4vw, 40px)) -8px;
    padding-inline: clamp(20px, 4vw, 40px);
    overflow-x: auto;
    scrollbar-width: thin;
  }
}
@container (min-width: 980px) {
  .site-header.signed-in .main {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "lockup nav actions";
  }
  .site-header.signed-in .nav {
    justify-content: flex-end;
    border-top: none;
    padding: 0; margin: 0;
    overflow: visible;
  }
}
/* ≤620: top row is just lockup + CTA below the tab-wrap point — they fit side
   by side down to ~620px, so the label survives further than the old 720 cut. */
@container (max-width: 620px) {
  .nav-actions .btn .btn__lbl { display: none; }
  .nav-actions .btn { padding: 6px 9px; }
}
@container (max-width: 500px) {
  .nav a { padding: 10px 10px; gap: 0; }
  .nav a .nav__lbl { display: none; }
  .nav a i { font-size: 16px; opacity: 1; }
}

/* Buttons come from the shared _buttons.css; the only prototype-local need is
   killing the underline on anchor buttons (<a class="btn">). */
.btn { text-decoration: none; }

/* ========================================================
   FORM ELEMENTS (request form — prototype-local)
   ======================================================== */
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field .field__label { font-size: 13.5px; font-weight: 500; color: var(--color-fg-default); }
.form-field .field__help { font-size: 12.5px; color: var(--color-fg-secondary); }
.form-field .field__err  { font-size: 12.5px; color: var(--gov-color-error-600); display: flex; align-items: center; gap: 4px; }
.form-field .field__req  { color: var(--gov-color-error-500); }

.input { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--field-bg); font: 400 15px var(--font-sans); color: var(--color-fg-default); transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
.input > i { color: var(--color-fg-tertiary); flex: none; }
.input input, .input select, .input textarea { border: 0; outline: 0; flex: 1; font: inherit; color: inherit; background: transparent; min-width: 0; }
.input textarea { resize: vertical; min-height: 80px; padding: 0; }
.input:focus-within { border-color: var(--gov-color-primary-500); box-shadow: var(--shadow-focus); }
.input--error { border-color: var(--gov-color-error-500); }

.checkbox, .radio { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.checkbox input, .radio input { margin: 3px 0 0; accent-color: var(--gov-color-primary-500); width: 16px; height: 16px; }

/* ========================================================
   CARDS (generic panel)
   ======================================================== */
.card { background: var(--color-bg-surface, white); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-1); }
.card--flush { padding: 0; }

/* ========================================================
   PAGE PIECES
   ======================================================== */
.hero { background: var(--color-bg-surface, white); border-bottom: 1px solid var(--color-border-default); padding: var(--space-12) 0 var(--space-10); }
.hero__title { font-size: clamp(28px, 4.2vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--gov-color-neutral-900); margin: 0; }
.hero__sub { font-size: 17px; line-height: 1.55; color: var(--color-fg-secondary); max-width: 740px; margin: 12px 0 0; }
.hero__search { margin-top: var(--space-6); max-width: 760px; }
@media (max-width: 540px) {
  .hero { padding: var(--space-8) 0; }
}

/* Category quick-tiles (shared _quick-tile.css) — grid is page chrome. */
.qt-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: var(--space-8) 0 0;
}

/* breadcrumbs */
.crumbs { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--color-fg-secondary); padding: var(--space-4) 0; flex-wrap: wrap; }
.crumbs a { color: var(--color-fg-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--gov-color-primary-500); text-decoration: underline; }
.crumbs i { font-size: 10px; }

/* Catalogue layout — sidebar filter groups (shared _filter-group.css) +
   results column. .results is the size container the shared table /
   pagination respond to. */
.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.filters { display: flex; flex-direction: column; gap: var(--space-5); }
.results { min-width: 0; container: results / inline-size; }
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .filters { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
  .filters .filter-group { flex: 1 1 200px; }
}

/* ── Results toolbar — mirrors preview/comp-list-toolbar.html ──
   .tbar-wrap is the container-query host (named "tbar"). Demotion
   ladder is 4 graded steps, single row throughout:
     ≤ 720 — "Seřadit:" collapses to a bi-sort-down icon
     ≤ 600 — view-switch buttons drop text labels (icon-only)
     ≤ 500 — count drops "Nalezeno" prefix ("12 dokumentů")
     ≤ 420 — count → pill: [bi-files] 12; sort icon + sep hidden          */
.tbar-wrap {
  background: var(--color-bg-surface, white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 0 16px;
  container-type: inline-size;
  container-name: tbar;
}
.toolbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 0;
  margin: 0;
  min-width: 0;
}
.toolbar__left  { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.toolbar__right { display: flex; flex-wrap: nowrap; gap: 8px 12px; align-items: center; font-size: 13px; min-width: 0; flex: 0 0 auto; }

/* Count — wide form (default) + pill form (≤ 420). */
.toolbar__count { font-size: 14px; color: var(--color-fg-secondary); white-space: nowrap; display: inline-flex; align-items: center; }
.toolbar__count strong { color: var(--color-fg-default); font-weight: 600; font-variant-numeric: tabular-nums; }
.count-wide { display: inline; }
.count-pill {
  display: none;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 11px 0 10px;
  border-radius: 999px;
  background: var(--gov-color-neutral-100);
  color: var(--color-fg-default);
  font-size: 13px;
  line-height: 1;
}
.count-pill i      { font-size: 14px; line-height: 1; display: inline-block; color: var(--color-fg-secondary); }
.count-pill strong { font-size: 13px; line-height: 1; display: inline-block; color: var(--color-fg-default); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Sort label — text form (default) + bi-sort-down icon (≤ 720). */
.toolbar__sort { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.toolbar__sort-label {
  font-size: 13px;
  color: var(--color-fg-secondary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.toolbar__sort-label .sort-text { display: inline; }
.toolbar__sort-label .sort-icon { display: none; font-size: 15px; line-height: 1; }

/* Separator — sibling, not a border on the view-switch. */
.toolbar__sep {
  display: inline-block;
  width: 1px; height: 22px;
  background: var(--color-border-default);
  align-self: center;
  margin: 0 2px;
  flex: none;
}

/* Toolbar demotion ladder (the .seg / .tb-select it styles are shared). */
@container tbar (max-width: 720px) {
  .toolbar__sort-label .sort-text { display: none; }
  .toolbar__sort-label .sort-icon { display: inline-block; }
}
@container tbar (max-width: 600px) {
  .toolbar .seg button .seg__lbl { display: none; }
  .toolbar .seg button { padding: 6px 9px; }
}
@container tbar (max-width: 500px) {
  .count-wide .count-prefix { display: none; }
}
@container tbar (max-width: 420px) {
  .count-wide { display: none; }
  .count-pill { display: inline-flex; }
  .toolbar__sort-label { display: none; }
  .toolbar__sep { display: none; }
  .toolbar__right { gap: 8px; }
}

/* Compact synced search in the toolbar (mirrors the hero #q — catalog.js
   bridges both ways). The left cluster grows so the field can breathe;
   drops out of the ladder ≤640. */
.toolbar__left { flex: 1 1 auto; }
.toolbar__q { flex: 1 1 150px; min-width: 130px; max-width: 320px; margin-left: 14px; }
.toolbar__q .field { flex: 1; min-width: 0; }
@container tbar (max-width: 640px) {
  .toolbar__q { display: none; }
}

/* Query pill — own row above the filter pills (#qfp). Reuses the shared
   .filter-pill vocabulary; the row height-animates in/out (catalog.js).
   [hidden] must beat the class display (see pitfalls "CSS specificity") —
   without it the pill ghost-shows on fresh load + after clearing. */
.qfp { display: flex; margin-top: 12px; }
.qfp[hidden] { display: none; }
/* Vertical centring: with pills below, both gaps are 12px; without pills the
   results follow (afp collapses to 0 height) — trim its margin so the gap
   below the pill (4 + res-slide 8) matches the 12px above. */
.qfp:not([hidden]) + .afp:not(.has-pills) { margin-top: 4px; }
.qfp .filter-pill .key i { font-size: 11px; }
.qfp .filter-pill .val { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Active-filter pills row (shared _filter-pills.js compound) ──────────
   Spacing is a JS-toggled class (NOT :has) so renderPills can flip it to the
   FINAL state synchronously and measure the exact curtain-slide distance. */
.afp { display: flex; flex-wrap: wrap; row-gap: 8px; align-items: center; margin: 12px 0 0; position: relative; }
.afp.has-pills { margin-bottom: 14px; }

/* ── Results curtain-slide wrapper ───────────────────────────────────────
   When the pill row changes height the OPAQUE results block SLIDES to its
   new position (shared FilterPills.slideCurtain), revealing/covering the row.
   The slide lives on this OUTER wrapper — the inner view containers are the
   Collection compound's catWrap, whose subtree-animation cancels would kill a
   slide placed on them. box-shadow transition = the fp26 curtain feather. */
.res-slide { position: relative; z-index: 1; margin-top: 8px; transition: box-shadow 220ms ease; }
/* Curtain feather backdrop — this page's body paints --color-bg-page in both
   themes (the shared default), so no override needed; kept explicit for the
   dark body which paints surface (see dark-mode.css). */

/* View containers (one visible at a time) */
.view[hidden] { display: none; }
/* Card list view (shared .doc/.dc) gets an opaque backing so the curtain
   reads — cards are discrete surfaces on the page bg, so the curtain idiom
   only needs the page bg behind them (the feather matches it). */
.cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 28px 22px;
  align-items: start;
}

/* Row focus ring: .tbl-wrap clips overflow (rounded corners + container
   query), which would CUT the system box-shadow bloom on the row's sides.
   Use an INSET outline and suppress the clipped base ring. */
.tbl tbody tr[tabindex] { outline-offset: -2px; }
.tbl tbody tr[tabindex]:focus-visible { outline: 2px solid var(--gov-color-primary-500); box-shadow: none; }
/* Empty state (shared _empty-state.css) — results-area embeddings only.
   The table empty row hosts the BARE variant inside the table's own frame;
   in the cover wall the empty spans the full grid row. */
.tbl .tbl-empty-cell { padding: 8px 12px !important; }
.cv-grid .empty { grid-column: 1 / -1; }

/* ── Pagination footer (shared _pagination.js + _pindock.js) ─────────────
   #pager is the MOVED node (dock<->float, FLIP-animated by PinDock). Keep it
   a transparent positioning box; the VISIBLE shell + the show/hide fade-slide
   live on the inner __panel so they never collide with PinDock's transform
   FLIP (getAnimations() on #pager is non-subtree). */
.pager-dock { margin-top: 20px; }
.pager-bar { display: block; }
.pager-bar:empty { display: none; }
.pager-bar__panel {
  padding: 9px 14px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(12,24,56,0.10), 0 2px 6px rgba(12,24,56,0.06);
  transform-origin: center bottom;
}
.pager-bar .pag { width: 100%; }

/* DETAIL PAGE */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start; }
.detail__header { padding: var(--space-6) 0 var(--space-4); border-bottom: 1px solid var(--color-border-default); margin-bottom: var(--space-6); }
.detail__title { font-size: clamp(24px, 3.4vw, 30px); font-weight: 700; line-height: 1.25; color: var(--gov-color-neutral-900); letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.detail__title .dc-chip { flex: none; font-size: 12.5px; padding: 4px 11px; align-self: center; }
.detail__title-text { min-width: 0; }
.detail__title-en { font-size: 16px; color: var(--color-fg-secondary); font-style: italic; margin-top: 8px; }
.detail__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
@media (max-width: 940px) {
  .detail { grid-template-columns: 1fr; gap: var(--space-6); }
  .cta-panel { position: static; }
}
/* The shared .cta-panel (_cta-panel.css) is static; the detail page pins it.
   Header is non-sticky now, so the offset is just breathing room. */
.detail .cta-panel { position: sticky; top: 16px; }
/* .cta-panel__fav moved to the shared _cta-panel.css (Jun 2026);
   .req-card + .req-flash moved to the shared _request-card.css. */

.section-title { font-size: 20px; font-weight: 600; color: var(--gov-color-neutral-900); margin: 0 0 var(--space-4); }

/* REQUEST FORM — document summary block (mirrors the doc-card heading + sub) */
.req-doc { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-default); flex-wrap: wrap; }
.req-doc__main { min-width: 0; flex: 1 1 240px; }
.req-doc__heading { margin: 0; line-height: 1.4; font-size: 17px; font-weight: 600; }
.req-doc__heading .dc-chip { display: inline-block; margin: 0 10px 0 0; vertical-align: baseline; }
.req-doc__title { color: var(--color-fg-default); }
.req-doc__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.req-doc__sub .sep { color: var(--gov-color-neutral-300); font-size: 12px; }
.req-doc__owner { font-size: 13px; color: var(--color-fg-secondary); margin-top: 8px; }

/* MY REQUESTS — the request card is the shared _request-card.css/.js compound
   (RequestCard.render); no local chrome left. */

/* FOOTER — mirrors preview/brand-footer.html. */
.site-footer { background: var(--gov-color-neutral-900); color: rgba(255,255,255,0.85); margin-top: auto; }
.site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; cursor: pointer; }
.site-footer a:hover { color: white; text-decoration: underline; }
.ftr-wrap { container-type: inline-size; }

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding: var(--space-12) 0 var(--space-8);
}
.footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: white;
  margin: 0 0 14px;
  font-weight: 600;
}
.footer-col ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
}
.footer-col a i { font-size: 11px; opacity: 0.7; margin-left: 2px; }

.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand .lockup__tile { background: white; color: var(--jvs-modra); width: 48px; height: 48px; }
.footer-brand .nm {
  color: white;
  font-weight: 600; font-size: 16px;
  font-feature-settings: var(--otf-logotype);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.footer-brand .desc {
  font-size: 12.5px;
  opacity: 0.7;
  margin-top: 4px;
  line-height: 1.45;
  max-width: 280px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--space-4) 0;
  font-size: 12.5px;
  display: flex; flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  opacity: 0.7;
}
.footer-bottom .left, .footer-bottom .right { display: inline-flex; align-items: center; gap: 10px; }

@container (max-width: 880px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding: var(--space-8) 0 var(--space-6);
  }
  .footer-col:first-child { grid-column: 1 / -1; }
}
@container (max-width: 520px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .footer-col:first-child { grid-column: auto; }
  .footer-brand .desc { max-width: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* TOAST — the shared _toast.css surface; the prototype hosts it fixed. */
.toast-host { position: fixed; right: 24px; bottom: 24px; z-index: 100; }

/* MY LIBRARY — view grids; the cards themselves are the shared
   _lib-card.css / _lib-cover.css + _cover.css components. */
/* MY LIBRARY — the toolbar rides the shared .tbar-wrap card + @container tbar
   ladder (sort text → icon ≤720, view-seg labels → icons ≤600, same as the
   catalogue). Lib specifics: the row may WRAP (more controls than the
   catalogue), search grows on the left, the sort trigger is .tb-select--fit
   (width follows the selected order), type chips drop to their short form. */
.lib-tbar { margin: 0 0 20px; }
.lib-tbar .toolbar { flex-wrap: wrap; row-gap: 10px; }
.lib-tbar .toolbar__right { flex-wrap: wrap; row-gap: 10px; flex: 0 1 auto; }
.lib-tbar .toolbar__left { flex: 1 1 200px; }
.lib-q { flex: 1 1 170px; min-width: 150px; max-width: 360px; }
.lib-q .field { flex: 1; min-width: 0; }
/* Document-type chip toggles — shared .dc-chip inside reset buttons; resting
   state is dimmed, pressed shows the chip at full strength. */
.lib-types { display: flex; gap: 6px; align-items: center; }
@container tbar (max-width: 760px) {
  .lib-types .dc-chip__full { display: none; }
  .lib-types .dc-chip__short { display: inline; }
}
.lib-tf {
  appearance: none; -webkit-appearance: none;
  border: 0; padding: 2px; margin: 0; background: transparent;
  border-radius: 6px; cursor: pointer; display: inline-flex;
  user-select: none; -webkit-user-select: none;
  opacity: 0.45;
  transition: opacity 160ms ease, box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lib-tf:hover { opacity: 0.8; }
.lib-tf[aria-pressed="true"] { opacity: 1; }
.lib-tf:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Filtered-empty spans the full grid row in both library grids. */
.lib-cv-grid .empty, .lib-grid .empty { grid-column: 1 / -1; }
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.lib-cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 26px 22px;
  align-items: stretch;
}
/* Library access badge (granted / public / pending) — app-specific. */
.lib-access { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; line-height: 1; }
.lib-access i { font-size: 12px; }
.lib-access--granted { background: var(--gov-color-success-50); color: var(--gov-color-success-700); }
.lib-access--public  { background: var(--avail-public-bg);      color: var(--gov-color-success-700); }
.lib-access--pending { background: var(--gov-color-warning-50); color: var(--gov-color-warning-700); }
/* Pending lib-card status line */
.lib-pending-note { font-size: 12.5px; color: var(--gov-color-warning-700); }

/* ========================================================
   REGION NAVIGATION (F6 + skip links) — app-level chrome driven by the local
   region-nav.js (the DELEGATED, re-render-safe variant for the React shell;
   the shared preview/_region-nav.js wires static [data-region-nav] pages and
   its _region-nav.css styles the demo's .region cards — different contract).
   ======================================================== */
.skip-links { position: absolute; top: 0; left: 0; z-index: 60; }
.skip-link {
  position: fixed;
  left: 12px; top: -200px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  font: 600 13px var(--font-sans);
  color: #fff; background: var(--gov-color-primary-600);
  border: none; border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  transition: top 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-link:nth-of-type(2) { left: 196px; }
.skip-link:nth-of-type(3) { left: 360px; }
.skip-link:focus-visible { top: 0; outline: none; box-shadow: var(--shadow-focus), var(--shadow-2); }

[data-region] { outline: none; scroll-margin-top: 16px; border-radius: var(--radius-md); transition: box-shadow 900ms cubic-bezier(0.16, 1, 0.3, 1); }
/* Ring shows ONLY on deliberate keyboard region nav (F6 / skip link). */
[data-region].rn-flash { box-shadow: var(--shadow-focus); transition: box-shadow 160ms ease-out; }

.region-announcer {
  position: fixed; top: 64px; right: 20px; z-index: 2147483000;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  font: 600 12.5px var(--font-sans);
  /* LITERAL navy — neutral-900 inverts to near-white in dark (known pitfall),
     which made the pill white-on-white. Same fix as the gov.cz bar. */
  color: #fff; background: #0c1838;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  pointer-events: none;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.region-announcer.show { opacity: 1; transform: none; }
.region-announcer__count { font-family: var(--font-mono); opacity: 0.7; }

/* utilities */
.hstack { display: flex; gap: var(--space-3); align-items: center; }
.vstack { display: flex; flex-direction: column; gap: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media print {
  .site-header, .site-footer, .nav, .nav-actions, .toolbar__right, .pag { display: none; }
}