/* ============================================================
   BATRACHOS DESIGN SYSTEM — consolidated build
   Generated from the modular sources (tokens/, base/, components/).
   Ship as batrachos/static/css/batrachos.css. Do not hand-edit.
   ============================================================ */


/* ====== tokens/colors.css ====== */
/* ============================================================
   BATRACHOS — COLOR TOKENS
   Ukrainian academic palette. Ukraine blue is the single
   brand accent; navy anchors chrome; yellow is a sparing
   flag-detail (thin rules only, never large fills).
   Legacy token names are preserved so existing templates
   keep resolving. New semantic aliases sit on top.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --ukraine-blue: #0057b7;       /* primary brand accent */
  --ukraine-yellow: #ffd700;     /* flag detail — thin rules only */
  --academic-navy: #1a365d;      /* chrome / headers / dark surfaces */
  --scientific-green: #2d5016;   /* nature / biology accent */
  --science-green: #2d5016;      /* legacy alias */
  --sage-green: #68d391;

  /* ---- Blue scale (built around #0057b7) ---- */
  --blue-50:  #eef4fb;
  --blue-100: #d6e6f6;
  --blue-200: #aecdec;
  --blue-300: #79a9dd;
  --blue-400: #3d80cb;
  --blue-500: #0057b7;
  --blue-600: #004a9e;
  --blue-700: #003d82;
  --blue-800: #002f64;
  --blue-900: #001f42;

  /* Legacy primary aliases (referenced widely in page CSS) */
  --primary-color: #0057b7;
  --primary-50:  rgba(0, 87, 183, 0.05);
  --primary-300: rgba(0, 87, 183, 0.30);
  --primary-500: #0057b7;
  --primary-600: #004a9e;
  --primary-700: #003d82;
  --ukraine-blue-light: rgba(0, 87, 183, 0.10);
  --accent-color: #ffd700;

  /* ---- Neutral slate scale ---- */
  --slate-50:  #f7fafc;
  --slate-100: #edf2f7;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e0;
  --slate-400: #a0aec0;
  --slate-500: #718096;
  --slate-600: #4a5568;
  --slate-700: #2d3748;
  --slate-800: #1a202c;
  --slate-900: #171923;

  /* ---- Semantic text ---- */
  --text-primary: #2d3748;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-dark: #1a202c;
  --text-light: #a0aec0;
  --text-on-dark: #ffffff;
  --text-on-dark-soft: rgba(255, 255, 255, 0.72);
  --warm-gray: #4a5568;

  /* ---- Surfaces & backgrounds ---- */
  --bg-white: #ffffff;
  --bg-light: #f7fafc;
  --bg-gray: #edf2f7;
  --bg-dark: #1a365d;
  --light-bg: #f7fafc;
  --surface-card: #ffffff;
  --surface-sunken: #f7fafc;
  --surface-band: #f7fafc;     /* alternating section band */
  --overlay: rgba(15, 27, 45, 0.62);

  /* ---- Borders ---- */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e0;
  --border-strong: #a0aec0;

  /* ---- State / semantic ---- */
  --success-green: #38a169;
  --warning-orange: #ed8936;
  --error-red: #e53e3e;
  --info-blue: #0057b7;

  /* ---- Accent aliases (preferred in new code) ---- */
  --accent: var(--ukraine-blue);
  --accent-hover: var(--blue-700);
  --accent-soft: rgba(0, 87, 183, 0.06);
  --accent-mid: rgba(0, 87, 183, 0.12);
  --accent-line: rgba(0, 87, 183, 0.20);

  /* ---- Link colors ---- */
  --link: var(--ukraine-blue);
  --link-hover: var(--academic-navy);

  /* ---- Brand flag rule (unifying motif) ---- */
  --flag-rule: linear-gradient(90deg,
      var(--ukraine-blue) 0%,
      var(--ukraine-blue) 55%,
      var(--ukraine-yellow) 55%,
      var(--ukraine-yellow) 100%);
}


/* ====== tokens/typography.css ====== */
/* ============================================================
   BATRACHOS — TYPOGRAPHY TOKENS
   Cyrillic + Latin must both look good. Reading content uses a
   Cyrillic-native serif (PT Serif); chrome/UI use a humanist
   sans with full Cyrillic (Manrope). JetBrains Mono for code,
   numerals and index labels.
   NOTE: the previous heading font (Poppins) has NO Cyrillic, so
   Ukrainian/Russian headings fell back inconsistently — fixed here.
   Fonts are loaded via the <link> in base_unified.html.
   ============================================================ */

:root {
  /* ---- Font families ---- */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-serif: 'PT Serif', Georgia, 'Times New Roman', 'Noto Serif', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Semantic roles */
  --font-display: var(--font-sans);   /* headings, UI */
  --font-ui: var(--font-sans);        /* nav, cards, meta, buttons */
  --font-reading: var(--font-serif);  /* long-form article / intro prose */

  /* ---- Type scale (rem, 16px base) ---- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  /* Fluid display sizes for heroes / page titles */
  --text-hero: clamp(2rem, 1.4rem + 2.6vw, 3rem);          /* @kind spacing */
  --text-page-title: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); /* @kind spacing */

  /* ---- Font weights ---- */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ---- Line heights ---- */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;   /* long-form reading */
  --leading-loose: 1.85;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-label: 0.12em;   /* mono eyebrow labels */

  /* ---- Reading measure ---- */
  --measure: 68ch;            /* comfortable prose line length */
}


/* ====== tokens/spacing.css ====== */
/* ============================================================
   BATRACHOS — SPACING & LAYOUT TOKENS
   4px base step. Layout widths tuned for scholarly reading.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ---- Layout widths ---- */
  --content-max: 1200px;   /* grids / listings shell */
  --prose-max: 760px;      /* single-column reading measure */
  --wide-max: 1320px;      /* full-width hero containers */
  --gutter: 1.5rem;        /* page side padding (desktop) */
  --gutter-sm: 1rem;       /* page side padding (mobile) */

  /* ---- Article layout ---- */
  --article-sidebar: 300px;
  --article-gap: 3rem;
  --header-height: 68px;   /* sticky nav offset for anchors */
}


/* ====== tokens/elevation.css ====== */
/* ============================================================
   BATRACHOS — RADII, SHADOWS, MOTION, Z-INDEX
   Academic restraint: lean on 1px borders; shadows are soft
   and reserved mostly for hover/raised states.
   ============================================================ */

:root {
  /* ---- Border radius ---- */
  --radius-sm: 0.125rem;   /* 2px — chips, tags */
  --radius-md: 0.375rem;   /* 6px — inputs, small controls */
  --radius-lg: 0.5rem;     /* 8px — cards, buttons */
  --radius-xl: 0.75rem;    /* 12px — large panels */
  --radius-2xl: 1rem;      /* 16px — hero media */
  --radius-full: 9999px;   /* pills, avatars */

  /* ---- Shadows (soft, cool-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 27, 45, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 27, 45, 0.06), 0 1px 2px rgba(15, 27, 45, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 27, 45, 0.08), 0 2px 4px -1px rgba(15, 27, 45, 0.05);
  --shadow-lg: 0 12px 24px -6px rgba(15, 27, 45, 0.12), 0 4px 8px -4px rgba(15, 27, 45, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(15, 27, 45, 0.16);
  --shadow-focus: 0 0 0 3px rgba(0, 87, 183, 0.22);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border: 1px solid var(--border-light);
  --border-2: 2px solid var(--border-light);

  /* ---- Motion ---- */
  --transition-fast: 0.15s ease;   /* @kind other */
  --transition-normal: 0.3s ease;  /* @kind other */
  --transition-slow: 0.5s ease;    /* @kind other */
  --duration-fast: 0.15s;          /* @kind other */
  --duration-normal: 0.3s;         /* @kind other */
  --duration-slow: 0.5s;           /* @kind other */
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */

  /* ---- Z-index scale ---- */
  --z-base: 1;              /* @kind other */
  --z-dropdown: 1000;       /* @kind other */
  --z-sticky: 1020;         /* @kind other */
  --z-fixed: 1030;          /* @kind other */
  --z-modal-backdrop: 1040; /* @kind other */
  --z-modal: 1050;          /* @kind other */
  --z-tooltip: 1070;        /* @kind other */
}


/* ====== base/reset.css ====== */
/* ============================================================
   BATRACHOS — RESET & ELEMENT BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { border-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

ul, ol { margin: 0; padding: 0; }

hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-8) 0;
}

::selection { background: var(--accent-mid); color: var(--academic-navy); }

/* FOUC guard used by base_unified.html */
html.loading { opacity: 0; }
html.ready { opacity: 1; transition: opacity .15s ease; }

/* Accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-tooltip);
  padding: var(--space-3) var(--space-5);
  background: var(--academic-navy);
  color: #fff;
  border-radius: 0 0 var(--radius-lg) 0;
  font-weight: var(--font-semibold);
}
.skip-link:focus { left: 0; }

.toast-container {
  position: fixed; top: 80px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem; max-width: 360px;
}
.bx-toast {
  display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between;
  padding: .75rem 1rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15);
  background: #fff; border-left: 4px solid var(--ukraine-blue); font-size: .9rem;
  animation: bxslide .25s ease;
}
.bx-toast--success { border-left-color: #28a745; }
.bx-toast--error { border-left-color: #dc3545; }
.bx-toast--warning { border-left-color: #ffc107; }
.bx-toast__close {
  background: none; border: none; font-size: 1.2rem; line-height: 1;
  cursor: pointer; color: #888;
}
@keyframes bxslide {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}

:focus-visible {
  outline: 2px solid var(--ukraine-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.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 (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ====== base/typography.css ====== */
/* ============================================================
   BATRACHOS — ELEMENT TYPOGRAPHY
   Sans for headings/UI; serif reserved for long-form `.prose`.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); font-weight: var(--font-extrabold); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); font-weight: var(--font-semibold); }
h4 { font-size: var(--text-xl); font-weight: var(--font-semibold); }
h5 { font-size: var(--text-lg); font-weight: var(--font-semibold); }
h6 {
  font-size: var(--text-sm); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

p { margin: 0 0 var(--space-4); color: var(--text-secondary); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--link-hover); }

strong, b { font-weight: var(--font-semibold); color: var(--text-primary); }
small { font-size: var(--text-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-gray);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--academic-navy);
}
pre {
  background: var(--slate-800);
  color: #e8edf4;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  line-height: var(--leading-normal);
  font-size: var(--text-sm);
}
pre code { background: none; padding: 0; color: inherit; }

blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-2) var(--space-6);
  border-left: 3px solid var(--ukraine-blue);
  color: var(--text-secondary);
  font-style: italic;
}

/* Eyebrow / mono label motif */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ====== components/layout.css ====== */
/* ============================================================
   BATRACHOS — LAYOUT SHELL
   Page container, main grid (sidebar + content), breadcrumbs,
   sidebar accordion. Targets base_unified.html structure.
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Main content region ---- */
.main-content { min-height: 60vh; }

.main-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-8) var(--gutter) var(--space-16);
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--article-gap);
  align-items: start;
}
.main-container.no-sidebar { grid-template-columns: minmax(0, 1fr); }
/* Auto-collapse to a single column when no sidebar is actually rendered, so pages
   that empty {% block sidebar %} but forget the .no-sidebar class don't keep a
   reserved 264px column (narrow content + dead whitespace). */
.main-container:not(:has(> .sidebar)) { grid-template-columns: minmax(0, 1fr); }

.page-content { min-width: 0; }

/* Pages that paint their own full-bleed hero (home, article, tag)
   opt out of shell padding via .no-sidebar + section backgrounds. */

/* ---- Sidebar (course navigation accordion) ---- */
.sidebar { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.sidebar-content {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}
.sidebar-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.accordion-menu { display: flex; flex-direction: column; }
.accordion-item { border-top: 1px solid var(--border-light); }
.accordion-item:first-child { border-top: none; }
.accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding: var(--space-3) 0; cursor: pointer;
}
.accordion-link {
  font-weight: var(--font-medium); color: var(--text-primary);
  font-size: var(--text-sm);
}
.accordion-link:hover { color: var(--ukraine-blue); }
.accordion-icon {
  font-size: 0.7rem; color: var(--text-muted);
  transition: transform var(--transition-fast);
}
.accordion-item[data-expanded="true"] .accordion-icon { transform: rotate(180deg); }
.accordion-content {
  display: none; padding: 0 0 var(--space-2) var(--space-3);
  border-left: 2px solid var(--border-light);
  margin-left: 2px;
}
.accordion-item[data-expanded="true"] .accordion-content { display: block; }
.accordion-content a {
  display: block; padding: var(--space-2) 0;
  font-size: var(--text-sm); color: var(--text-secondary);
}
.accordion-content a:hover { color: var(--ukraine-blue); }

/* ---- Breadcrumbs ---- */
.breadcrumbs { border-bottom: 1px solid var(--border-light); background: var(--bg-white); }
.breadcrumbs-container {
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--space-3) var(--gutter);
}
.breadcrumbs-list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); list-style: none;
  font-size: var(--text-sm);
}
.breadcrumbs-item a { color: var(--text-muted); font-weight: var(--font-medium); }
.breadcrumbs-item a:hover { color: var(--ukraine-blue); }
.breadcrumbs-item.current { color: var(--text-primary); font-weight: var(--font-semibold); }
.breadcrumbs-separator { color: var(--border-medium); font-size: 0.6rem; display: flex; }

/* ---- Secondary nav (second-line bar under the top menu) ---- */
.secondary-nav {
  position: sticky; top: var(--header-height); z-index: calc(var(--z-fixed) - 1);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
}
.secondary-nav-container {
  max-width: var(--wide-max); margin-inline: auto; padding-inline: var(--gutter);
}
.secondary-nav-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  list-style: none; padding: 0;
  font-size: var(--text-sm);
}
.secondary-nav-list > li { display: flex; }
.secondary-nav-list a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-3) var(--space-3);
  color: var(--text-secondary); font-weight: var(--font-medium);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.secondary-nav-list a:hover { color: var(--ukraine-blue); }
.secondary-nav-list a.active,
.secondary-nav-list li.active a { color: var(--ukraine-blue); border-bottom-color: var(--ukraine-blue); }
.secondary-nav-list a i { font-size: 0.8em; color: var(--text-muted); }
.secondary-nav-list a:hover i { color: var(--ukraine-blue); }
@media (max-width: 720px) { .secondary-nav { display: none; } }

/* ---- Generic page header / "major" header (editorial compat) ---- */
.page-header, header.major { margin-bottom: var(--space-8); }
.page-header h1, header.major h1 {
  font-size: var(--text-page-title);
  margin-bottom: var(--space-3);
}
header.major h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.intro-text {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--measure);
}
.intro-text p { color: inherit; }

@media (max-width: 960px) {
  .main-container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .sidebar { position: static; }
}
@media (max-width: 640px) {
  .container, .main-container { padding-inline: var(--gutter-sm); }
  .main-container { padding-top: var(--space-5); }
}


/* ====== components/navigation.css ====== */
/* ============================================================
   BATRACHOS — NAVIGATION (header, search, menus, mobile, footer)
   ============================================================ */

/* ---- Top bar ---- */
.batrachos-nav {
  position: sticky; top: 0; z-index: var(--z-fixed);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  transition: box-shadow var(--transition-normal);
}
.batrachos-nav.scrolled { box-shadow: var(--shadow-sm); }
/* Brand flag rule under the header — Ukrainian motif */
.batrachos-nav::after {
  content: ''; display: block; height: 2px;
  background:
    linear-gradient(90deg, var(--ukraine-yellow) 0 25%, transparent 25% 100%),
    var(--ukraine-blue);
}
.nav-container {
  max-width: var(--wide-max); margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) var(--gutter);
  min-height: var(--header-height);
}

.nav-brand { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.nav-brand img { height: 36px; width: auto; }
.nav-brand .brand-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--academic-navy);
}

/* ---- Search ---- */
.nav-search { flex: 1 1 auto; max-width: 440px; }
.nav-search-form { position: relative; display: flex; align-items: center; }
.nav-search .search-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--text-sm); line-height: 1; pointer-events: none; z-index: 1;
}
/* [type] bumps specificity above the later global input[type="text"] rule, which
   would otherwise win on equal specificity + source order and reset the icon
   clearance to 0.85rem (icon overlaps the placeholder). */
.nav-search input[type="text"] {
  width: 100%;
  padding: 0.6rem 5.25rem 0.6rem 2.75rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-full);
  background: var(--bg-light);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.nav-search input:focus {
  outline: none; background: var(--bg-white);
  border-color: var(--ukraine-blue); box-shadow: var(--shadow-focus);
}
.nav-search .search-button {
  position: absolute; right: 5px;
  padding: 0.35rem 0.9rem;
  background: var(--ukraine-blue); color: #fff;
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  transition: background var(--transition-fast);
}
.nav-search .search-button:hover { background: var(--blue-700); }

/* ---- Primary menu ---- */
.nav-menu { flex-shrink: 0; }
.main-nav-menu > ul, .nav-menu ul { display: flex; align-items: center; gap: var(--space-1); list-style: none; }
.nav-menu-item { position: relative; }
.nav-menu-item > a, .main-nav-menu a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: var(--text-secondary); border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-menu-item > a:hover, .main-nav-menu a:hover,
.nav-menu-item.active > a {
  color: var(--ukraine-blue); background: var(--accent-soft);
}
.nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px; padding: var(--space-2);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-dropdown);
}
.nav-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: block; padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); color: var(--text-secondary);
  border-radius: var(--radius-md);
}
.nav-dropdown a:hover { background: var(--accent-soft); color: var(--ukraine-blue); }

/* ---- Actions (lang toggle, user, mobile) ---- */
.nav-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex-shrink: 0; }

.lang-toggle {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-medium); border-radius: var(--radius-full);
  overflow: hidden; background: var(--bg-light);
}
.lang-btn {
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: var(--font-medium); color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.lang-btn:hover { color: var(--ukraine-blue); }
.lang-btn.active { background: var(--ukraine-blue); color: #fff; }

.nav-btn {
  padding: 0.45rem 0.95rem;
  background: var(--ukraine-blue); color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  transition: background var(--transition-fast);
}
.nav-btn:hover { background: var(--blue-700); color: #fff; }

.user-menu { position: relative; }
.user-menu-trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.3rem 0.5rem; border-radius: var(--radius-full);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.user-menu-trigger:hover { background: var(--bg-light); }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--academic-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--font-bold); font-size: var(--text-sm); overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 200px; padding: var(--space-2);
  background: var(--bg-white); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--transition-fast); z-index: var(--z-dropdown);
}
.user-menu.open .user-menu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.user-menu-item:hover { background: var(--accent-soft); color: var(--ukraine-blue); }
.user-menu-item .icon { width: 1.1em; text-align: center; }

.mobile-nav-toggle {
  display: none; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-md); color: var(--academic-navy);
  font-size: var(--text-xl);
}
.mobile-nav-toggle:hover { background: var(--bg-light); }

/* ---- Mobile drawer ---- */
.mobile-nav-overlay {
  position: fixed; inset: 0; background: var(--overlay);
  opacity: 0; visibility: hidden; transition: all var(--transition-normal);
  z-index: var(--z-modal-backdrop);
}
.mobile-nav-overlay.open { opacity: 1; visibility: visible; }
.mobile-nav-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 86vw);
  background: var(--bg-white); z-index: var(--z-modal);
  transform: translateX(100%); transition: transform var(--transition-normal);
  display: flex; flex-direction: column; overflow-y: auto;
  box-shadow: var(--shadow-xl);
}
.mobile-nav-menu.open { transform: translateX(0); }
.mobile-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light);
}
.mobile-nav-close { font-size: var(--text-xl); color: var(--text-muted); }
.mobile-nav-content { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-6); }
.mobile-nav-section-title {
  font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-muted); margin: 0 0 var(--space-3);
}
.mobile-nav-item, .mobile-nav-menu-section a {
  display: block; padding: var(--space-2) 0;
  font-size: var(--text-base); font-weight: var(--font-medium);
  color: var(--text-primary);
}
.mobile-nav-item:hover { color: var(--ukraine-blue); }

@media (max-width: 1100px) {
  .nav-menu { display: none; }
  .mobile-nav-toggle { display: flex; }
}
@media (max-width: 720px) {
  .nav-search { display: none; }
  .user-name { display: none; }
}
@media (max-width: 560px) {
  /* keep the header on one row so the hamburger stays on-screen */
  .nav-container { gap: var(--space-2); padding-inline: var(--gutter-sm); }
  .nav-actions { gap: var(--space-2); }
  .nav-brand img { height: 30px; }
  .nav-brand .brand-text { font-size: var(--text-base); }
  .lang-btn { padding: 0.22rem 0.4rem; }
  .nav-btn { padding: 0.38rem 0.66rem; }
}
@media (max-width: 430px) {
  /* very small phones: drop the wordmark (keep the frog logo) so it all fits */
  .nav-brand .brand-text { display: none; }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--academic-navy); color: var(--text-on-dark-soft);
  margin-top: var(--space-20);
}
.footer-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-16) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
}
.footer-content {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-10); padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer-brand img { height: 32px; }
.footer-brand .brand-text {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--font-extrabold); color: #fff;
}
.footer-description { font-size: var(--text-sm); line-height: var(--leading-relaxed); max-width: 320px; color: var(--text-on-dark-soft); }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.social-link {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff;
  transition: background var(--transition-fast);
}
.social-link:hover { background: var(--ukraine-blue); color: #fff; }
.footer-title {
  font-size: var(--text-sm); font-weight: var(--font-bold); color: #fff;
  text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0 0 var(--space-4);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-links a { font-size: var(--text-sm); color: var(--text-on-dark-soft); }
.footer-links a:hover { color: #fff; }
.footer-bottom { padding-top: var(--space-5); }
.footer-bottom-content {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
}
.copyright { font-size: var(--text-sm); margin: 0; color: var(--text-on-dark-soft); }
.footer-bottom-links { display: flex; gap: var(--space-5); }
.footer-bottom-links a { font-size: var(--text-sm); color: var(--text-on-dark-soft); }
.footer-bottom-links a:hover { color: #fff; }

@media (max-width: 860px) {
  .footer-content { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 520px) {
  /* Keep two columns so the footer doesn't become an over-long single stack;
     the brand block spans full width. Explicit side padding + safe-area insets
     so content never touches the screen edge or the bottom browser/home bar. */
  .footer-content { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .footer-content > .footer-section:first-child { grid-column: 1 / -1; }
  .footer-container {
    padding-top: var(--space-9);
    padding-left: max(var(--space-5), env(safe-area-inset-left));
    padding-right: max(var(--space-5), env(safe-area-inset-right));
    padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
  }
  .footer-links { gap: var(--space-1); }
}


/* ====== components/buttons.css ====== */
/* ============================================================
   BATRACHOS — BUTTONS
   Unified `.button` (editorial compat) + `.btn` (bootstrap compat).
   ============================================================ */

.button, .btn,
button.button, a.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  line-height: 1; text-align: center; white-space: nowrap;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.button:active, .btn:active { transform: translateY(1px); }

/* Default = outline/secondary */
.button, .btn, .btn-outline-primary {
  background: var(--bg-white);
  color: var(--ukraine-blue);
  border-color: var(--border-medium);
}
.button:hover, .btn:hover, .btn-outline-primary:hover {
  border-color: var(--ukraine-blue);
  background: var(--accent-soft);
  color: var(--ukraine-blue);
}

/* Primary */
.button.primary, .btn-primary, .button.fit.primary {
  background: var(--ukraine-blue); color: #fff; border-color: var(--ukraine-blue);
}
.button.primary:hover, .btn-primary:hover {
  background: var(--blue-700); border-color: var(--blue-700); color: #fff;
}

/* Sizes */
.button.small, .btn-sm { padding: 0.4rem 0.85rem; font-size: var(--text-xs); }
.button.large, .btn-lg { padding: 0.8rem 1.6rem; font-size: var(--text-base); }
.button.fit, .w-100 { width: 100%; }

.button:disabled, .btn:disabled, .button.disabled {
  opacity: 0.5; cursor: not-allowed; transform: none;
}

/* Ghost / link button */
.button.ghost {
  background: transparent; border-color: transparent; color: var(--text-secondary);
}
.button.ghost:hover { background: var(--bg-light); color: var(--ukraine-blue); }


/* ====== components/badges.css ====== */
/* ============================================================
   BATRACHOS — BADGES, TAGS, CHIPS, PILLS
   ============================================================ */

/* Type / category badge (uppercase mono-ish label) */
.badge, .meta .type, .meta .difficulty {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.18rem 0.55rem;
  font-size: var(--text-xs); font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border-radius: var(--radius-sm);
  color: var(--ukraine-blue); background: var(--accent-soft);
  white-space: nowrap; line-height: 1.4;
}
.badge.bg-primary, .badge-info { background: var(--accent-soft); color: var(--ukraine-blue); }
.badge.bg-secondary { background: var(--bg-gray); color: var(--text-secondary); }
.badge.bg-success { background: rgba(56,161,105,0.12); color: var(--success-green); }

/* Difficulty levels */
.meta .difficulty, .badge--diff {
  background: rgba(45,80,22,0.10); color: var(--scientific-green);
}
.badge--beginner { background: rgba(56,161,105,0.12); color: var(--success-green); }
.badge--intermediate { background: rgba(237,137,54,0.14); color: var(--warning-orange); }
.badge--advanced { background: rgba(229,62,62,0.10); color: var(--error-red); }

/* Tags (clickable hashtags) */
.tag, .tags .tag {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: var(--text-xs); font-weight: var(--font-medium);
  color: var(--ukraine-blue); background: var(--accent-soft);
  border-radius: var(--radius-full);
  text-decoration: none; transition: background var(--transition-fast);
}
.tag:hover { background: var(--accent-mid); color: var(--blue-700); }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Pill row */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.35rem 0.9rem;
  font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--text-secondary); background: var(--bg-white);
  border: 1px solid var(--border-light); border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.pill:hover { background: var(--accent-soft); color: var(--ukraine-blue); border-color: var(--ukraine-blue); }

/* Alerts */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-6);
}
.alert h3 { margin-top: 0; font-size: var(--text-lg); }
.alert-error { background: rgba(229,62,62,0.06); border-color: rgba(229,62,62,0.3); color: #9b2c2c; }
.alert-error h3, .alert-error p { color: #9b2c2c; }


/* ====== components/forms.css ====== */
/* ============================================================
   BATRACHOS — FORMS & FILTERS
   ============================================================ */

label, .form-label {
  display: block; font-size: var(--text-sm);
  font-weight: var(--font-semibold); color: var(--text-primary);
  margin-bottom: var(--space-2);
}

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], select, textarea, .form-select, .form-control {
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-white);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus, .form-select:focus, .form-control:focus {
  outline: none; border-color: var(--ukraine-blue); box-shadow: var(--shadow-focus);
}
select, .form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center;
  background-size: 12px; padding-right: 2.2rem;
}

/* Search form (editorial / listing) */
.search-form { margin: var(--space-5) 0; }

/* Filter groups (sidebar filters) */
.filter-group { margin-bottom: var(--space-6); }
.filter-group h4 {
  font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-muted); margin: 0 0 var(--space-3);
}
.filter-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.filter-list a {
  display: block; padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); color: var(--text-secondary);
  border-radius: var(--radius-md);
}
.filter-list a:hover { background: var(--accent-soft); color: var(--ukraine-blue); }
.filter-list a.active { background: var(--accent-soft); color: var(--ukraine-blue); font-weight: var(--font-semibold); }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }


/* ====== components/cards.css ====== */
/* ============================================================
   BATRACHOS — CARDS
   One card visual shared across all listing display modes
   (grid / cards / list) plus Bootstrap `.card` compatibility.
   ============================================================ */

/* ---- Grid containers ---- */
.features, .posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  list-style: none;
}

/* ---- Base material card (grid + cards modes) ---- */
.material-card, .posts > article, .features > article {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  position: relative;
}
.material-card:hover, .posts > article:hover, .features > article:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card media */
.material-card .image, .posts > article > .image, .features > article > .image,
.card-img-top {
  display: block; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--bg-gray);
}
.material-card .image img, .posts .image img, .features .image img,
.card-img-top {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-slow);
}
.material-card:hover .image img, .posts > article:hover .image img { transform: scale(1.03); }

/* Card body padding for grid/cards */
.material-card > .content,
.posts > article > h3, .posts > article > p, .posts > article > .meta,
.posts > article > .tags, .posts > article > .actions,
.features > article > .content {
  padding-inline: var(--space-5);
}
.posts > article > h3 { padding-top: var(--space-5); margin-bottom: var(--space-2); }
.material-card > .content { padding-block: var(--space-5); }
.features > article > .content { padding: var(--space-5); }

.material-card h3, .posts > article h3, .features > article h3 {
  font-size: var(--text-lg); font-weight: var(--font-semibold);
  line-height: var(--leading-snug); margin: 0 0 var(--space-2);
}
.material-card h3 a, .posts h3 a, .features h3 a { color: var(--text-primary); }
.material-card h3 a:hover, .posts h3 a:hover, .features h3 a:hover { color: var(--ukraine-blue); }

.material-card p, .posts > article p, .features > article p {
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: var(--leading-normal); margin: 0 0 var(--space-3);
}

/* Card meta row */
.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2);
}
.meta .date, .meta .author, .meta .category { display: inline-flex; align-items: center; gap: 4px; }
.meta time { color: var(--text-muted); }

/* Actions row */
.actions { list-style: none; display: flex; gap: var(--space-2); padding-block: var(--space-4); margin-top: auto; }
.posts > article > .actions { padding-bottom: var(--space-5); }

/* Empty / no-results */
.no-results, .no-results h3 {
  text-align: center; color: var(--text-muted);
}
.no-results {
  grid-column: 1 / -1;
  padding: var(--space-12) var(--space-4);
  font-style: italic;
}

/* ---- List / row mode ---- */
.material-list { display: flex; flex-direction: column; }
.material-item {
  display: flex; gap: var(--space-6); align-items: flex-start;
  padding: var(--space-6) 0; border-bottom: 1px solid var(--border-light);
}
.material-item:first-child { padding-top: 0; }
.material-item .content { flex: 1; min-width: 0; }
.material-item .content h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.material-item .content h3 a { color: var(--text-primary); }
.material-item .content h3 a:hover { color: var(--ukraine-blue); }
.material-item .content > p {
  font-family: var(--font-reading);
  font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.material-item .image {
  flex: 0 0 220px; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--bg-gray);
}
.material-item .image img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Bootstrap card compatibility (topic pages) ---- */
.card {
  background: var(--surface-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.card.material-card.shadow-sm:hover, .card:hover { box-shadow: var(--shadow-md); }
.card-body { padding: var(--space-5); }
.card-title { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-2); }
.card-text { font-size: var(--text-sm); color: var(--text-secondary); }

/* ---- Editorial "features" icon cards (static_page sub-sections) ---- */
.features > article .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  background: var(--accent-soft); color: var(--ukraine-blue);
  font-size: var(--text-xl); margin: var(--space-5) var(--space-5) 0;
}

@media (max-width: 640px) {
  .material-item { flex-direction: column; gap: var(--space-4); }
  .material-item .image { flex-basis: auto; width: 100%; }
}


/* ====== components/tables.css ====== */
/* ============================================================
   BATRACHOS — SCHOLARLY DATA TABLES
   Must scroll horizontally on mobile (.table-wrapper).
   ============================================================ */

.table-wrapper {
  width: 100%; overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
}
.table-wrapper table { border: none; }

thead th {
  position: sticky; top: 0;
  background: var(--bg-light);
  text-align: left; font-weight: var(--font-bold);
  color: var(--academic-navy);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--border-medium);
  white-space: nowrap;
  font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--slate-50); }
tbody tr:hover { background: var(--accent-soft); }
tbody td strong a { color: var(--text-primary); font-weight: var(--font-semibold); }
tbody td strong a:hover { color: var(--ukraine-blue); }

/* Numeric columns tabular */
td .num, td.num, .tabular { font-variant-numeric: tabular-nums; }

caption {
  caption-side: bottom; padding-top: var(--space-3);
  font-size: var(--text-xs); color: var(--text-muted); text-align: left;
}

/* Article-body tables get the same treatment, wrapped automatically */
.prose table {
  display: block; overflow-x: auto; white-space: nowrap;
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
}
@media (min-width: 720px) {
  .prose table { white-space: normal; }
}


/* ====== components/article.css ====== */
/* ============================================================
   BATRACHOS — ARTICLE / MATERIAL PAGE
   Hero + two-column body with sticky sidebar (TOC/details/related)
   and long-form serif `.prose`. Replaces material-page.css.
   ============================================================ */

.mat { width: 100%; }

/* ---- Hero ---- */
.mat__hero { position: relative; background: var(--academic-navy); }
.mat__hero-img-wrap { position: relative; height: clamp(220px, 34vw, 420px); overflow: hidden; }
.mat__hero-img-wrap--empty { height: clamp(120px, 16vw, 200px); }
.mat__hero-img { width: 100%; height: 100%; object-fit: cover; }
.mat__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,27,45,0.25) 0%, rgba(15,27,45,0.82) 100%);
}
.mat__hero-content {
  position: relative;
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--space-8) var(--gutter) var(--space-10);
  margin-top: clamp(-180px, -22vw, -120px);
  color: #fff; z-index: 1;
}
.mat__hero-img-wrap--empty + .mat__hero-content { margin-top: calc(-1 * clamp(120px,16vw,200px) + var(--space-6)); }

.mat__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.mat__badge {
  display: inline-flex; align-items: center;
  padding: 0.22rem 0.7rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  backdrop-filter: blur(4px);
  /* keep label legible when a badge sits over a busy hero image */
  text-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.mat__badge--type { background: var(--ukraine-blue); color: #fff; }
.mat__badge--cat { background: rgba(255,255,255,0.16); color: #fff; }
.mat__badge--diff { background: rgba(255,255,255,0.16); color: #fff; }
.mat__badge--beginner { background: var(--success-green); color: #fff; }
.mat__badge--intermediate { background: var(--warning-orange); color: #fff; }
.mat__badge--advanced { background: var(--error-red); color: #fff; }

.mat__title {
  font-size: var(--text-hero); font-weight: var(--font-extrabold);
  line-height: var(--leading-tight); color: #fff;
  margin: 0 0 var(--space-4); max-width: 22ch;
}
.mat__summary {
  font-family: var(--font-reading);
  font-size: var(--text-xl); line-height: var(--leading-snug);
  color: rgba(255,255,255,0.9); margin: 0 0 var(--space-5); max-width: var(--measure);
}
.mat__meta { display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--text-sm); color: rgba(255,255,255,0.8); }
.mat__meta-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.mat-views { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: rgba(255,255,255,0.72); }
.mat-views i { opacity: 0.9; }
.mat__author-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
}

.mat-series {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-lg);
  background: rgba(12, 24, 42, 0.72);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.mat-series__course {
  display: grid;
  gap: var(--space-1);
}
.mat-series__eyebrow,
.mat-series__step-label {
  color: rgba(255,255,255,0.66);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.mat-series__course a,
.mat-series__course span {
  color: #fff;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  text-decoration: none;
}
.mat-series__course a:hover,
.mat-series__step:hover {
  color: var(--ukraine-yellow);
}
.mat-series__context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  color: rgba(255,255,255,0.82);
  font-size: var(--text-sm);
}
.mat-series__context strong {
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.12);
  color: #fff;
  padding: 0.18rem 0.55rem;
}
.mat-series__nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.mat-series__step {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  color: #fff;
  padding: var(--space-3);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mat-series__step--next {
  justify-content: flex-end;
  text-align: right;
}
.mat-series__step--disabled {
  opacity: 0.42;
}
.mat-series__step strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 680px) {
  .mat-series__nav {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Body grid ---- */
.mat__grid {
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--space-10) var(--gutter) var(--space-16);
  display: grid; grid-template-columns: minmax(0,1fr) var(--article-sidebar);
  gap: var(--article-gap); align-items: start;
}
.mat__main { min-width: 0; max-width: var(--prose-max); }

/* ---- Long-form prose ---- */
.prose {
  font-family: var(--font-reading);
  font-size: 1.075rem; line-height: var(--leading-relaxed);
  color: var(--slate-700);
}
.prose > * + * { margin-top: var(--space-5); }
.prose p { color: inherit; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display); color: var(--text-primary);
  margin-top: var(--space-10); scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.prose h2 { font-size: var(--text-2xl); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-light); }
.prose h3 { font-size: var(--text-xl); }
.prose a { color: var(--ukraine-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--academic-navy); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-top: var(--space-2); }
/* Migrated body images were registered with placeholder width=1 height=1 attrs,
   which collapse them to a dot. Override to natural size (capped to container) so
   they actually show — also fixes the "empty body whitespace" the QA flagged. */
.prose img, .image-block img, .block-image img {
  display: block; width: auto; height: auto; max-width: 100%;
  border-radius: var(--radius-lg); margin: var(--space-6) auto; box-shadow: var(--shadow-sm);
}
/* Responsive embeds: YouTube oembed returns a tiny 200x113 iframe — make body
   embeds full-width 16:9 instead. */
.prose iframe, .image-block iframe, .block-image iframe, .mat__body iframe {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 16 / 9; margin: var(--space-6) auto; border: 0;
}
/* Google Docs / document embeds are NOT 16:9 video — the aspect-ratio above
   clips them to ~425px. Give document iframes a tall, scrollable box. TASK-0088 D2. */
.prose iframe[src*="docs.google"], .mat__body iframe[src*="docs.google"],
.prose iframe[src*="/document/"], .mat__body iframe[src*="/document/"],
.prose iframe[src*="spreadsheets"], .mat__body iframe[src*="spreadsheets"],
.prose iframe[src*="/forms/"], .mat__body iframe[src*="/forms/"] {
  aspect-ratio: auto; height: 80vh; min-height: 640px;
}
.prose figure { margin: var(--space-6) 0; }
.prose figcaption { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); text-align: center; margin-top: var(--space-2); }
.prose blockquote {
  font-family: var(--font-reading); font-size: var(--text-lg);
  border-left: 3px solid var(--ukraine-blue);
  background: var(--bg-light); padding: var(--space-4) var(--space-6);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.prose hr { margin: var(--space-10) 0; }

.mat__empty {
  text-align: center; padding: var(--space-16) var(--space-4);
  color: var(--text-muted); border: 1px dashed var(--border-medium);
  border-radius: var(--radius-xl);
}
.mat__empty i { font-size: 2rem; opacity: 0.4; display: block; margin-bottom: var(--space-3); }

/* Article tags */
.mat__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-light); }
.mat__tag {
  font-size: var(--text-sm); color: var(--ukraine-blue);
  background: var(--accent-soft); padding: 0.25rem 0.7rem; border-radius: var(--radius-full);
}
.mat__tag:hover { background: var(--accent-mid); }

/* Share bar */
.mat__share { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.mat__share-label {
  font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-muted);
}
.mat__share-buttons { display: flex; gap: var(--space-2); }
.mat__share-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-light); color: var(--text-secondary);
  border: 1px solid var(--border-light); transition: all var(--transition-fast);
}
.mat__share-btn:hover { background: var(--ukraine-blue); color: #fff; border-color: var(--ukraine-blue); }
.mat__share-btn--copy.copied { background: var(--success-green); color: #fff; border-color: var(--success-green); }

/* ---- Sidebar cards ---- */
.mat__aside { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.aside-card {
  background: var(--surface-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); padding: var(--space-5);
}
.aside-card__heading {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-muted); margin: 0 0 var(--space-4);
}
.aside-card__heading i { color: var(--ukraine-blue); }

.aside-author { display: flex; align-items: center; gap: var(--space-3); }
.aside-author__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--academic-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.aside-author__name { display: block; color: var(--text-primary); font-size: var(--text-sm); }
.aside-author__inst { display: block; font-size: var(--text-xs); color: var(--text-muted); }

.aside-details { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.aside-details__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.aside-details__row dt { color: var(--text-muted); }
.aside-details__row dd { margin: 0; color: var(--text-primary); font-weight: var(--font-semibold); text-align: right; }

.aside-related, .aside-popular {
  display: flex; gap: var(--space-3); padding: var(--space-3) 0;
  border-top: 1px solid var(--border-light);
}
.aside-card .aside-related:first-of-type, .aside-card .aside-popular:first-of-type { border-top: none; padding-top: 0; }
.aside-related { flex-direction: column; gap: 2px; }
.aside-related__title { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--font-medium); line-height: var(--leading-snug); }
.aside-related:hover .aside-related__title { color: var(--ukraine-blue); }
.aside-related__type { font-size: var(--text-xs); color: var(--text-muted); }
.aside-popular { align-items: baseline; }
.aside-popular__rank { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ukraine-blue); font-weight: var(--font-bold); }
.aside-popular__title { font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-snug); }
.aside-popular:hover .aside-popular__title { color: var(--ukraine-blue); }

/* ---- In-sidebar TOC ---- */
.toc { list-style: none; display: flex; flex-direction: column; }
.toc__item { line-height: var(--leading-snug); }
.toc__item--h3 { padding-left: var(--space-3); }
.toc__item--h4 { padding-left: var(--space-5); }
.toc__link {
  display: block; padding: var(--space-2) 0;
  font-size: var(--text-sm); color: var(--text-secondary);
  border-left: 2px solid transparent; padding-left: var(--space-3); margin-left: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.toc__link:hover { color: var(--ukraine-blue); }
.toc__link--active { color: var(--ukraine-blue); border-left-color: var(--ukraine-blue); font-weight: var(--font-semibold); }

@media (max-width: 960px) {
  .mat__grid { grid-template-columns: minmax(0,1fr); }
  .mat__main { max-width: none; }
  .mat__aside { position: static; flex-direction: column; }
}


/* ====== components/listing.css ====== */
/* ============================================================
   BATRACHOS — LISTING PAGES
   Content-view (grid/cards/toc/list), results count, editorial
   banner, tag index, pagination. Consolidates per-page styles.
   ============================================================ */

/* ---- Results summary / count ---- */
.content-view-container { margin-top: var(--space-6); }
.results-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-6); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}
.results-count {
  margin: 0; font-family: var(--font-mono);
  font-size: var(--text-sm); color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* ---- Editorial banner (#banner) → unified page header ---- */
#banner {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-8);
  align-items: center; margin-bottom: var(--space-10);
  padding-bottom: var(--space-8); border-bottom: 1px solid var(--border-light);
}
#banner .content { min-width: 0; }
#banner h1 { font-size: var(--text-page-title); margin-bottom: var(--space-3); }
#banner .image.object { flex: 0 0 auto; max-width: 380px; }
#banner .image.object img { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
@media (max-width: 760px) {
  #banner { grid-template-columns: 1fr; }
  #banner .image.object { display: none; }
}

/* ---- TOC display mode (content_view) — academic index ---- */
.cv-toc {
  list-style: none; margin: var(--space-4) 0;
  border-top: 2px solid var(--ukraine-blue);
}
.cv-toc__link {
  display: grid; grid-template-columns: 2.8rem 1fr 1.5rem;
  align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary); position: relative;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cv-toc__link::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--ukraine-blue); transition: width var(--transition-fast);
}
.cv-toc__link:hover { background: var(--accent-soft); color: var(--ukraine-blue); }
.cv-toc__link:hover::before { width: 3px; }
.cv-toc__num {
  font-family: var(--font-mono); font-size: var(--text-sm);
  font-weight: var(--font-medium); color: var(--text-muted); text-align: right;
}
.cv-toc__link:hover .cv-toc__num { color: var(--ukraine-blue); }
.cv-toc__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cv-toc__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-snug); }
.cv-toc__desc {
  font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.cv-toc__arrow { font-size: 0.75rem; color: transparent; align-self: center; transition: all var(--transition-fast); }
.cv-toc__link:hover .cv-toc__arrow { color: var(--ukraine-blue); transform: translateX(2px); }
.cv-toc__empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-12); color: var(--text-muted); font-style: italic; list-style: none;
}
.cv-toc__empty i { font-size: 1.5rem; opacity: 0.3; }
@media (max-width: 720px) {
  .cv-toc__link { grid-template-columns: 2rem 1fr 1rem; gap: var(--space-2); padding: var(--space-3) var(--space-2); }
  .cv-toc__desc { display: none; }
}

/* ---- Tag materials — editorial index ---- */
.tag-page__hero {
  position: relative; overflow: hidden;
  padding: var(--space-16) var(--gutter) var(--space-10);
  background: linear-gradient(135deg, var(--academic-navy) 0%, #0a1628 75%);
  margin-bottom: var(--space-10);
}
.tag-page__hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--flag-rule);
}
.tag-page__hero-content { position: relative; max-width: var(--content-max); margin-inline: auto; z-index: 1; }
.tag-page__label {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: var(--font-medium); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ukraine-yellow); margin-bottom: var(--space-3);
}
.tag-page__title { font-size: var(--text-hero); font-weight: var(--font-extrabold); color: #fff; line-height: var(--leading-tight); margin: 0 0 var(--space-3); }
.tag-page__count { font-family: var(--font-mono); font-size: var(--text-sm); color: rgba(255,255,255,0.6); margin: 0; }

.tag-page__list { max-width: 820px; margin-inline: auto; }
.tag-mat { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-light); }
.tag-mat:last-child { border-bottom: none; }
.tag-mat__index { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-muted); text-align: right; padding-top: 2px; }
.tag-mat__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: var(--leading-snug); }
.tag-mat__title a { color: var(--text-primary); }
.tag-mat__title a:hover { color: var(--ukraine-blue); }
.tag-mat__summary { font-family: var(--font-reading); margin: 0 0 var(--space-3); font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.tag-mat__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.tag-mat__meta i { opacity: 0.6; margin-right: 3px; }
.tag-mat__type { padding: 1px 8px; font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ukraine-blue); background: var(--accent-soft); border-radius: var(--radius-full); }
.tag-mat__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.tag-mat__tag { padding: 2px 8px; font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--ukraine-blue); background: var(--accent-soft); border-radius: var(--radius-full); }
.tag-mat__tag:hover { background: var(--accent-mid); }
.tag-mat__tag--current { background: var(--ukraine-blue); color: #fff; }
.tag-page__empty { text-align: center; padding: var(--space-16) var(--space-4); color: var(--text-muted); }
.tag-page__empty i { font-size: 2rem; opacity: 0.3; display: block; margin-bottom: var(--space-4); }

/* ---- Pagination (unified) ---- */
.pagination-wrapper { display: flex; justify-content: center; margin-top: var(--space-10); }
.pagination, .tag-page__pagination {
  display: inline-flex; align-items: center; gap: var(--space-2); list-style: none;
}
.tag-page__pagination { justify-content: center; padding: var(--space-10) 0 var(--space-6); }
.pagination .button, .pagination .page-link, .tag-page__pg-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.45rem 0.9rem; font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--ukraine-blue); background: var(--bg-white);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
}
.pagination .button:hover, .pagination .page-link:hover, .tag-page__pg-btn:hover {
  background: var(--accent-soft); border-color: var(--ukraine-blue);
}
.pagination .current, .pagination .page-item.active .page-link, .pagination .button.primary,
.tag-page__pg-current {
  background: var(--ukraine-blue); color: #fff; border-color: var(--ukraine-blue);
  padding: 0.45rem 0.9rem; border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.tag-page__pg-current { background: transparent; color: var(--text-muted); border: none; }
.pagination .page-item { list-style: none; }
.pagination .page-link { text-decoration: none; }

/* Static page body */
.static-content { font-family: var(--font-reading); font-size: 1.075rem; line-height: var(--leading-relaxed); color: var(--slate-700); max-width: var(--measure); }
.static-content > * + * { margin-top: var(--space-5); }
.static-content h2 { font-family: var(--font-display); color: var(--text-primary); margin-top: var(--space-8); }

/* Gated download (legacy book PDF/DJVU) — surface as a button, not a buried link.
   Anonymous users see the locked "sign in to download" prompt. */
.gated-download {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0.4rem 0; padding: 0.6rem 1.1rem;
  background: var(--academic-navy, #1a365d); color: #fff !important;
  border-radius: var(--radius-md, 8px); font-weight: 600;
  text-decoration: none; line-height: 1.3; transition: background 0.15s ease;
}
.gated-download:hover, .gated-download:focus { background: var(--ukraine-blue, #0057b7); }
.gated-download__hint { font-weight: 400; opacity: 0.85; font-size: 0.85em; }

/* Navy-hero text override (2026-06-22): the hero titles/leads sit on the dark
   gradient, but the global `h1{color:var(--text-primary)}` and
   `p{color:var(--text-secondary)}` rules render them dark-on-navy. Class
   selectors (0,1,0) beat those element rules (0,0,1) -> force white. Eyebrows
   are intentionally NOT listed: they keep their yellow/blue accent. */
.ab-title, .tp-title, .ct-title, .cl-title, .hlp-title, .sp-title, .ch-title, .srch-title,
.ab-lead, .tp-lead, .tp-count, .ct-lead, .cl-lead, .hlp-lead, .ch-lead,
.sp-intro, .sp-intro p { color: #fff; }