/* Generated by scripts/build-site-css.mjs. Do not edit directly. */
/* ===== base.css ===== */

/* Begin _design-tokens.css */
:root {
  /* ========================================================================
     1. Color Palette: "Ink & Parchment"
     ======================================================================== */

  /* Primary Brand: Sophisticated Dagestani Navy */
  --color-primary-50:  #f8fafc;
  --color-primary-100: #e2e8f0;
  --color-primary-200: #cbd5e1;
  --color-primary-300: #94a3b8;
  --color-primary-400: #475569;
  --color-primary-500: #550000; /* Maroon */
  --color-primary-600: #400000;
  --color-primary-700: #2b0000;
  --color-primary-800: #150000;
  --color-primary-900: #0a0000;

  /* Bootstrap Variable Overrides */
  --bs-primary: var(--color-primary-500);
  --bs-primary-rgb: 85, 0, 0;
  --bs-secondary-color: var(--color-gray-500);
  --bs-secondary-color-rgb: 100, 116, 139;
  --bs-light-rgb: 241, 245, 249;
  --bs-link-color: var(--color-primary-500);
  --bs-link-hover-color: var(--color-primary-700);
  --bs-pagination-active-bg: var(--color-primary-500);
  --bs-pagination-active-border-color: var(--color-primary-500);
  --bs-nav-pills-link-active-bg: var(--color-primary-500);
  --bs-nav-pills-link-active-color: #fff;
}

/* .btn-primary/.btn-outline-primary's ENABLED colors correctly pick up the
   --bs-primary override above (Bootstrap wrote them as var(--bs-primary)),
   but their DISABLED-state custom properties are hardcoded to Bootstrap's
   own stock blue (#0d6efd) directly on the class, with no var() reference
   at all — so no :root-level override can reach them. A disabled "Upload
   Audio" button (or any disabled primary button) rendered blue while every
   enabled one on the site is maroon. Redefined here, after bootstrap.min.css
   in the cascade, at the same specificity Bootstrap itself used. */
.btn-primary {
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Same root cause as the two rules above, on a checked radio/checkbox
   instead of a disabled button: Bootstrap's compiled CSS sets
   .form-check-input:checked's background-color/border-color as literal
   hex (#0d6efd), not var(--bs-primary) — that one only got the runtime
   custom-property treatment on a few components (buttons' enabled state,
   links, pagination), not this one. Every checked radio/checkbox on the
   site rendered stock Bootstrap blue regardless of the maroon override. */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

:root {

  /* Accent: Mountaineer Green */
  --color-accent-500: #2d6a4f; 

  /* Neutrals: Modern Slate */
  --color-gray-50:  #f8fafc; /* Surface Background */
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b; 
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b; /* Ink */
  --color-gray-900: #0f172a;

  /* Linguistic & Semantic */
  --color-root:      #010203;
  --color-suffix:    #9b2226; 
  --color-success:   #2d6a4f;
  --color-warning:   #f59e0b;
  --color-danger:    #9b2226;
  --color-info:      #457b9d;

  /* Backgrounds */
  --bg-body:    var(--color-gray-50);
  --bg-surface: #ffffff;
  --bg-input:   #ffffff;

  /* Compatibility aliases.  Component styles use these names, but their
     values remain derived from this single token source. */
  --bg-primary: var(--bg-surface);
  --bg-secondary: var(--color-gray-100);
  --bg-tertiary: var(--color-gray-200);
  --text-primary: var(--color-gray-800);
  --text-secondary: var(--color-gray-500);
  --text-tertiary: var(--color-gray-400);
  --border-color: var(--color-gray-200);
  --border-hover: var(--color-gray-300);
  --accent-primary: var(--color-primary-500);
  --accent-hover: var(--color-primary-600);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-danger);

  /* ========================================================================
     2. Typography
     ======================================================================== */

  /* Data Font (Serif) - For Avar words, Translations */
  --font-family-serif: 'Charis SIL', 'Georgia', 'Times New Roman', serif;
  
  /* UI Font (Sans) - For Buttons, Nav, Labels */
  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* IPA Font - For transcriptions.
     Charis SIL is not enough on its own: Google serves it without a Greek
     subset, so a transcription containing χ, ʁ or ʕ rendered part in Charis
     and part in whatever the fallback was — one word in two typefaces.
     Gentium Plus is the SIL companion face and does carry Greek alongside the
     IPA extensions, so it goes first and the stack stays serif all the way
     down. (No web subset serves U+0361, the tie bar; that one mark still
     comes from a local font.) */
  --font-family-ipa: 'Gentium Plus', 'Charis SIL', 'Doulos SIL', 'Gentium Book Plus', 'DejaVu Serif', 'Georgia', serif;

  /* Scale - Slightly Increased Base for Readability */
  --text-xs:   0.8125rem; /* 13px */
  --text-sm:   0.9375rem; /* 15px */
  --text-base: 1.0625rem; /* 17px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */

  /* ========================================================================
     3. Density & Spacing
     ======================================================================== */
  
  /* Default: Comfortable */
  --density-padding-y: 1rem;
  --density-padding-x: 1.5rem;
  --density-gap:       1rem;
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 3rem;
  --space-12: 4rem;
  --space-16: 6rem;

  /* ========================================================================
     4. Effects
     ======================================================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Soft Lift */
  --shadow-float: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --radius-sm: 3px; /* Tighter */
  --radius-md: 5px;
  --radius-lg: 6px; /* Crafted Look */
  --radius-xl: 10px;

  /* Z-Index */
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-modal: 1050;
}

/* ========================================================================
   Compact Mode Override
   ======================================================================== */
[data-density="compact"] {
  --density-padding-y: 0.5rem;
  --density-padding-x: 1rem;
  --density-gap:       0.5rem;
  --text-base:         0.9rem; /* Slightly smaller base text */
}

/* ========================================================================
   Dark Mode Overrides
   ======================================================================== */
[data-theme="dark"] {
  --color-primary-500: #8ea1b3; /* Softer Blue */
  --bg-body:    #121212;
  --bg-surface: #1e1e1e;
  --bg-input:   #2d2d2d;
  
  --color-gray-800: #e0e0e0; /* Main Text Light */
  --color-gray-500: #a0a0a0; /* Muted Text */
  
  --color-root:   #ffffff;
  --color-suffix: #ff6b6b; /* Brighter Red */
  --bs-primary: var(--color-primary-500);
  --bs-primary-rgb: 142, 161, 179;
  --bs-secondary-color: var(--color-gray-500);
  --bs-secondary-color-rgb: 160, 160, 160;
  --bs-light-rgb: 43, 43, 43;
  --bs-link-color: var(--color-primary-500);
  --bs-link-hover-color: #b8c8d7;

  --shadow-card: 0 4px 6px rgba(0,0,0,0.3);
}

/* End _design-tokens.css */
/* Begin _utilities.css */
/* ========================================================================
   Utility Classes
   ======================================================================== */

/* Text Utilities */
.text-gradient {
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Utilities - Shared styling for consistent cards across templates */
.card-rounded {
    border-radius: 12px;
}

.card-elevated {
    border-radius: 12px;
    border: 0;
    box-shadow: var(--shadow-card, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
}

.card-section {
    border-radius: 12px;
    border: 0;
    box-shadow: var(--shadow-sm);
}

/* Shadow Utilities */
.shadow-soft {
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
}

.shadow-medium {
    box-shadow: var(--shadow-md, 0 4px 15px rgba(0, 0, 0, 0.12));
}

.shadow-strong {
    box-shadow: var(--shadow-xl, 0 8px 25px rgba(0, 0, 0, 0.15));
}

/* Border Utilities */
.border-gradient {
    border: 2px solid transparent;
    background-image: linear-gradient(white, white),
        var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-scale {
    transition: transform 0.2s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Scrollbar Styles */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-500, #667eea) var(--color-gray-100, #f0f0f0);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--color-gray-100, #f0f0f0);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-primary-500, #667eea);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-700, #764ba2);
}

/* Grid Layouts */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Background Utilities */
.bg-gradient-primary {
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
}

/* Skeleton Loading Animation */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-gray-200) 25%,
        var(--color-gray-300) 50%,
        var(--color-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    width: 100%;
}

.skeleton-text:last-child {
    width: 80%;
}

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-card {
    height: 200px;
}

/* Dark theme adjustment for skeleton */
[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--color-gray-800) 25%,
        var(--color-gray-700) 50%,
        var(--color-gray-800) 75%
    );
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    background: var(--color-primary-500);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-sticky);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-primary-600);
    transform: translateY(-4px);
    color: white;
}

[data-theme="dark"] .back-to-top {
    background: var(--color-primary-600);
}

[data-theme="dark"] .back-to-top:hover {
    background: var(--color-primary-500);
}

/* Toast Container */
.toast-container {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: 350px;
    max-width: 100%;
    pointer-events: auto;
    overflow: hidden;
    transform: translateX(120%);
    transition: transform 0.3s ease;
}

.toast.show {
    transform: translateX(0);
}

.toast-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 0.75rem 1rem;
}

.toast-body {
    padding: 1rem;
    color: var(--color-gray-800);
}

[data-theme="dark"] .toast {
    background: rgba(31, 41, 55, 0.95);
    color: white;
}

[data-theme="dark"] .toast-header {
    border-bottom-color: rgba(255,255,255,0.05);
    color: white;
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}



/* Command Palette */
.cmd-palette-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cmd-palette-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.cmd-palette {
    background: #fff;
    width: 600px;
    max-width: 90%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.cmd-palette-backdrop.show .cmd-palette {
    transform: scale(1);
}

.cmd-input-wrapper {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cmd-input {
    border: none;
    font-size: 1.1rem;
    width: 100%;
    outline: none;
    color: var(--color-gray-900);
}

.cmd-results {
    max-height: 400px;
    overflow-y: auto;
    padding: var(--space-2);
}

.cmd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    margin-bottom: 2px;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-gray-700);
    text-decoration: none;
    transition: background-color 0.1s;
}

.cmd-item:hover, .cmd-item.active {
    background-color: var(--color-gray-100);
    color: var(--color-primary-600);
}

.cmd-item-icon {
    width: 20px;
    text-align: center;
    margin-right: var(--space-3);
    opacity: 0.6;
}

.cmd-item-shortcut {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
}

.cmd-footer {
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
    font-size: 0.8rem;
    color: var(--color-gray-500);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Dark Mode Overrides */
[data-theme="dark"] .cmd-palette {
    background: #1f2937;
    border: 1px solid var(--color-gray-700);
}

[data-theme="dark"] .cmd-input {
    background: transparent;
    color: white;
}

[data-theme="dark"] .cmd-input-wrapper {
    border-bottom-color: var(--color-gray-700);
}

[data-theme="dark"] .cmd-item {
    color: var(--color-gray-300);
}

[data-theme="dark"] .cmd-item:hover, 
[data-theme="dark"] .cmd-item.active {
    background-color: var(--color-gray-700);
    color: white;
}

[data-theme="dark"] .cmd-footer {
    background: var(--color-gray-800);
    border-top-color: var(--color-gray-700);
}

/* Lazy Loading */
img.lazy {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

img.loaded {
    opacity: 1;
}

/* End _utilities.css */
/* Begin layout.css */
/* ========================================================================
   Layout & Structural Styles
   ======================================================================== */

/* Prevent content shrinking when scrollbar appears on scroll */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  background-color: var(--bg-body);
  color: var(--color-gray-800);
  font-family: var(--font-family-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Slim Header --- */
.app-header {
  background-color: #550000;
  color: white;
  padding: 0;
  height: 60px; /* Slimmer than standard bootstrap navbar */
  /* Remove sticky positioning if it interferes with Omnibar later, 
     but for now nice to have anchor */
  position: relative; 
  box-shadow: var(--shadow-sm);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
}

.app-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.app-brand {
  font-family: var(--font-family-serif);
  font-weight: 700; /* Bold */
  font-size: 1.25rem;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity 0.2s;
}

.app-brand:hover {
  color: var(--color-gray-100);
  opacity: 0.9;
}

/* Brand logo (SVG wordmark). Height-driven; width follows the 283.46:141.73 viewBox. */
.app-brand-logo {
  display: block;
  height: 24px;
  width: auto;
}

/* The header row is already over-full at 375px (.app-actions alone is ~344px),
   so keep the mark close to the width of the text brand it replaced (~79px)
   rather than adding to the horizontal overflow. */
@media (max-width: 575.98px) {
  .app-brand-logo {
    height: 18px;
  }
}

/* Navigation Links */
.app-nav {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  font-size: var(--text-sm);
  text-decoration: none;
  padding: 0.5rem var(--space-2);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  /* A nav label must never break mid-item. The header is a fixed 60px, so a
     wrapped link (icon on one line, text on the next) overflows it and drags
     the whole row out of alignment. Russian labels are the trigger — "NLP
     Tools" becomes "NLP-инструменты", and that hyphen is a break opportunity
     the browser will happily take. */
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link i, .nav-link span.icon {
  margin-right: 4px;
  opacity: 0.8;
}

/* The primary nav is `d-none d-xl-flex`, so it only appears from 1200px up;
   below that the hamburger (`d-xl-none`) serves the same links. It used to
   appear from `lg` (992px), where it never fitted: measured against a 960px
   container the row needs 1034px in English and 1193px in Russian, so links
   wrapped and the right-hand actions overflowed off-screen.

   Even at xl the Russian row (1193px) is wider than the 1140px container, so
   tighten the gaps and padding through the xl band and let the roomier
   spacing return at xxl, where there is space for it. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .app-nav {
    gap: var(--space-2);
  }

  .app-nav .nav-link {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .app-actions {
    gap: var(--space-2);
  }

  /* Tightening the spacing alone still leaves the Russian row ~116px over the
     1140px container. The leading icons are decorative — the label carries the
     meaning — so they are the right ~144px to give up in this band. They come
     back at xxl, where there is room for them. */
  .app-nav .nav-link > .icon {
    display: none;
  }
}

/* Bootstrap caps `.container` at 1320px, so the row never gets any more room
   than this no matter how wide the display is. With icons restored the Russian
   nav measures 1325px — 5px over — which would leave the bar permanently
   overflowing on large screens. Trimming the nav gap by 4px clears it without
   touching the padding or the icons. */
@media (min-width: 1400px) {
  .app-nav {
    gap: var(--space-3);
  }
}

/* A single application-managed layer for the Favorites drawer. It stays
   deliberately lighter than Bootstrap's default backdrop and is removed on
   the first close action, even after an HTMX body swap. */
.favorites-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgb(0 0 0 / 0.32);
}

body.favorites-open {
  overflow: hidden;
}

/* User Menu & Actions */
.app-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.btn-icon {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Language toggle — pill with translate icon + current language code */
.lang-toggle {
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
}
.lang-toggle .fa-language { font-size: 1.05rem; }
.lang-toggle .lang-code { letter-spacing: 0.5px; }
.lang-toggle .lang-caret { font-size: 0.6rem; opacity: 0.75; }

/* --- Main Content --- */
.app-main {
  min-height: calc(100vh - 60px - 100px); /* Height - Header - Footer approx */
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

/* Dark mode: Bootstrap cards in main (home, corpus, etc.) — avoids white cards on dark body */
[data-theme="dark"] .app-main .card {
  background-color: var(--bg-surface);
  border-color: #3f3f46;
}

/* --- Footer --- */
.app-footer {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--color-gray-200);
  padding: var(--space-6) 0;
  margin-top: auto;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
  text-align: center;
}

/* Base template footer (replaces Bootstrap bg-white) */
.site-footer {
  background-color: var(--bg-body);
  color: var(--color-gray-500);
  border-top-color: var(--color-gray-200);
}

[data-theme="dark"] .site-footer {
  border-top-color: #333;
}

.site-footer a.text-muted {
  color: var(--color-gray-500);
}

[data-theme="dark"] .site-footer a.text-muted {
  color: var(--color-gray-500);
}

/* --- Utilities specific to layout --- */
.serif-text {
  font-family: var(--font-family-serif);
}

.sans-text {
  font-family: var(--font-family-sans);
}

/* --- Machine-translation notice ----------------------------------------- */
/* Shown on every page of the Russian site. It kept Bootstrap's `alert-info`,
   whose blue reads as a neutral system message — the same treatment the site
   uses for status updates. This is a caveat about content quality, so it is
   tinted warm to sit alongside the auto-generated-forms notice below rather
   than alongside informational messages. Deliberately a soft wash, not a
   filled warning bar: it appears on every page and must not read as an error.
   The class is applied next to `alert-info`, so the selector doubles up to
   outrank Bootstrap's own background/border/color. */
.alert.translation-note {
  background-color: #fdf8ec;
  border: 0;
  border-left: 3px solid var(--color-warning);
  color: #6b5a2b;
}

.alert.translation-note .btn-close {
  /* Bootstrap's close glyph is near-black; warm it so it does not punch a
     hard dot into a soft banner. */
  filter: sepia(0.5) saturate(0.6) hue-rotate(3deg) opacity(0.65);
}

[data-theme="dark"] .alert.translation-note {
  background-color: #2a2418;
  border-left-color: var(--color-warning);
  color: #e3d3ad;
}

[data-theme="dark"] .alert.translation-note .btn-close {
  filter: invert(1) sepia(0.3) saturate(0.7) opacity(0.7);
}

/* --- Auto-generated content notice -------------------------------------- */
/* One quiet line above the page content; it appears on many pages, so it must
   not cost more than a line of vertical space. Bootstrap's alert/
   alert-warning classes stay on the element (autogen-disclaimer.js dismisses
   it through the alert plugin, closed.bs.alert), but their filled yellow
   background and border are overridden here — a solid warning-colored bar
   spanning the full page width on every single page read as an urgent
   problem, when this is routine, expected context. The #id selector is
   there specifically to outrank alert-warning's own background/border. */
#autogen-disclaimer-banner.autogen-note {
  background: var(--color-primary-50, #f8fafc);
  border: 0;
  border-left: 3px solid var(--color-primary-300);
  color: var(--color-gray-600);
}

#autogen-disclaimer-banner.autogen-note .autogen-note-icon,
#autogen-disclaimer-banner.autogen-note .alert-link {
  color: var(--color-gray-600);
}

.autogen-note {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.autogen-note-icon {
  flex-shrink: 0;
  font-size: 0.75rem;
}

.autogen-note-text {
  flex: 1;
  margin: 0;
}

.autogen-note .btn-close {
  flex-shrink: 0;
  padding: 0.25rem;
  font-size: 0.55rem;
  position: static;
}

/* End layout.css */
/* Begin components/entry_compact.css */
/* ========================================================================
   Compact Entry Component
   ======================================================================== */

.compact-entry {
  display: grid;
  grid-template-columns: 200px 120px 1fr auto;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  align-items: center;
  border-bottom: 1px solid var(--color-gray-200);
  background-color: var(--bg-surface, #ffffff);
  transition: background-color 0.15s ease;
}

.compact-entry:hover {
  background-color: var(--color-primary-50);
}

/* 1. Headword */
.col-headword {
  display: flex;
  flex-direction: column;
}

.headword-link {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary-600);
  text-decoration: none;
}

.phonetic {
  font-family: var(--font-family-mono);
  font-size: 0.8rem;
  color: var(--color-gray-500);
}

/* 2. Metadata */
.tag-capsules {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.capsule {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
  background-color: var(--color-gray-100);
  color: var(--color-gray-600);
  font-weight: 600;
  text-transform: uppercase;
}

.capsule-pos { background-color: var(--color-primary-100); color: var(--color-primary-700); }
.capsule-success { background-color: var(--color-success); color: white; }

/* 3. Definition */
.col-definition {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.def-inline-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.95rem;
}

.lang-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gray-400);
  width: 20px;
}

.def-text {
  color: var(--color-gray-800);
}

/* 4. Actions */
.col-actions {
  display: flex;
  gap: 8px;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.2s;
}

.compact-entry:hover .col-actions {
  opacity: 1; /* Show on hover */
}

.btn-icon-mini {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 4px;
  color: var(--color-gray-500);
}

.btn-icon-mini:hover {
  background-color: white;
  border-color: var(--color-gray-200);
  color: var(--color-primary-500);
  box-shadow: var(--shadow-sm);
}

/* End components/entry_compact.css */
/* Begin components/omnibar.css */
/* ========================================================================
   Omnibar Component
   ======================================================================== */

.omnibar-container {
  padding-top: var(--space-4);
  /* Ensure it sits below the main header if header is sticky, 
     but here we rely on standard sticky behavior */
  z-index: 90; /* Below header (100) */
  background: var(--bg-body, #f8f9fa); /* Hides content scrolling behind */
  padding-bottom: var(--space-4);
}

.omnibar-wrapper {
  background: var(--bg-surface, #ffffff);
  border-radius: var(--radius-full); /* Pill shape */
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-gray-200);
  transition: box-shadow 0.2s;
  max-width: 800px;
  margin: 0 auto;
}

.omnibar-wrapper:focus-within {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-300);
}

.omnibar-icon {
  font-size: 1.2rem;
  opacity: 0.5;
}

.omnibar-input {
  border: none;
  background: transparent;
  flex: 1;
  font-size: 1.1rem;
  color: var(--color-gray-800);
  font-family: var(--font-family-sans);
}

.omnibar-input:focus {
  outline: none;
}

.omnibar-select {
  border: none;
  background: transparent;
  font-size: 0.9rem;
  color: var(--color-gray-600);
  font-weight: 500;
  cursor: pointer;
}

.omnibar-select:focus {
  outline: none;
  color: var(--color-primary-600);
}

.btn-icon-soft {
  background: var(--color-gray-100);
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: serif;
  cursor: pointer;
  color: var(--color-gray-600);
}

.btn-icon-soft:hover {
  background: var(--color-gray-200);
  color: var(--color-primary-600);
}

/* Mobile Tweaks */
@media (max-width: 768px) {
  .omnibar-container {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
}

/* End components/omnibar.css */

/* Base Styles for Avar Dictionary */

/* Accessibility: Improved Global Focus Styles */
:focus-visible {
  outline: 3px solid var(--color-primary-500);
  outline-offset: 2px;
}


/* Filter Bar */
.filter-bar {
  position: sticky;
  top: 0;
  background: var(--color-gray-50);
  z-index: var(--z-sticky);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-300);
}

/* Corpus Search Styles */
.badge {
  font-size: 0.75em;
  padding: 0.25em 0.5em;
}

.badge-primary {
  background-color: var(--color-primary-500);
  color: white;
}

.badge-success {
  background-color: var(--color-success);
  color: white;
}

mark {
  background-color: #fff3cd;
  color: #856404;
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
  font-weight: bold;
  box-shadow: var(--shadow-sm);
}

.search-highlight {
  background-color: #fff3cd;
  color: #856404;
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
  font-weight: bold;
  box-shadow: var(--shadow-sm);
}

.corpus-result {
  border-left: 3px solid var(--color-gray-300);
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.corpus-result:hover {
  border-left-color: var(--color-primary-500);
  background-color: var(--color-gray-50);
}

.document-card {
  transition: transform 0.2s;
}

.document-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Inline Expandable Sections for Corpus Examples */
.word-form-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-gray-100);
  padding-bottom: var(--space-2);
}

.word-form-text {
  flex: 1;
  font-weight: 500;
}

.attest-badge {
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  font-weight: bold;
  min-width: 20px;
  text-align: center;
  position: relative;
}

.attest-badge:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.attest-badge::after {
  content: "▼";
  margin-left: var(--space-1);
  font-size: 10px;
  transition: transform 0.2s ease;
}

.attest-badge.expanded::after {
  transform: rotate(180deg);
}

/* Static (non-clickable) badges: hide caret and disable hover transform so the
   "▼" indicator unambiguously signals "click to expand examples". */
.attest-badge.attest-static {
  cursor: default;
}

.attest-badge.attest-static::after {
  content: none;
}

.attest-badge.attest-static:hover {
  transform: none;
  box-shadow: none;
}

.attest-badge.expanded {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary-500);
}

.attest-badge.attest-success {
  background-color: var(--color-success);
  color: white;
  border: 1px solid var(--color-success);
}

.attest-badge.attest-warning {
  background-color: var(--color-warning);
  color: #212529;
  border: 1px solid var(--color-warning);
}

.attest-badge.attest-secondary {
  background-color: var(--color-gray-500);
  color: white;
  border: 1px solid var(--color-gray-500);
}

.examples-section {
  display: none;
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-gray-50);
  border-left: 3px solid var(--color-primary-500);
  border-radius: var(--radius-sm);
  animation: slideDown 0.3s ease-out;
  width: 100%;
}

.examples-section.show {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.example-item {
  margin-bottom: 12px;
  padding: 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

.example-number {
  display: inline-block;
  background: #007bff;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  margin-right: 8px;
  line-height: 20px;
}

.example-text {
  font-style: italic;
  color: #495057;
  margin-bottom: 4px;
}

.example-translation {
  color: #6c757d;
  font-size: 0.9em;
}

.example-source {
  font-size: 0.8em;
  color: #596068;
  /* Darker gray for better contrast */
  margin-top: 4px;
  font-style: italic;
}

.examples-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dee2e6;
}

.examples-title {
  font-weight: bold;
  color: #495057;
}

.examples-count {
  font-size: 0.9em;
  color: #6c757d;
}

.loading-indicator {
  text-align: center;
  padding: 20px;
  color: #596068;
  /* Darker for accessibility */
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.error-message {
  color: #dc3545;
  font-style: italic;
  text-align: center;
  padding: 10px;
}

.no-examples {
  color: #596068;
  /* Darker for accessibility */
  font-style: italic;
  text-align: center;
  padding: 10px;
}

.highlight {
  background-color: #fff3cd;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: bold;
}

/* Bootstrap components consume the brand values declared in _design-tokens.css. */
a {
  color: var(--bs-link-color);
}
a:hover {
  color: var(--bs-link-hover-color);
}
.btn-primary {
  --bs-btn-bg: var(--color-primary-500);
  --bs-btn-border-color: var(--color-primary-500);
  --bs-btn-hover-bg: var(--color-primary-600);
  --bs-btn-hover-border-color: var(--color-primary-700);
  --bs-btn-active-bg: var(--color-primary-700);
  --bs-btn-active-border-color: var(--color-primary-700);
}
.page-link {
  color: var(--color-primary-500);
}
.page-link:hover {
  color: var(--color-primary-700);
}
.btn-outline-primary {
  --bs-btn-color: var(--color-primary-500);
  --bs-btn-border-color: var(--color-primary-500);
  --bs-btn-hover-bg: var(--color-primary-500);
  --bs-btn-hover-border-color: var(--color-primary-500);
  --bs-btn-active-bg: var(--color-primary-600);
  --bs-btn-active-border-color: var(--color-primary-600);
}

/*
 * Stressed syllable in an IPA transcription (templatetags/dict_extras.py
 * style_transcription).  A class, not a style attribute: CSP has no
 * 'unsafe-inline' for styles, so the attribute was silently dropped and the
 * stress mark never actually rendered bold.
 */
.ipa-stress {
  font-weight: 600;
}


/* ===== search.css ===== */

/* Search Page Specific Styles */

/* ===========================================
   TIER 1: Search Term Highlighting
   =========================================== */
.search-highlight,
mark {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeb3b 100%);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: inherit;
    color: inherit;
    box-shadow: 0 1px 3px rgba(255, 235, 59, 0.3);
}

/* Highlight in headword */
.headword-link mark {
    background: linear-gradient(135deg, #bbdefb 0%, #64b5f6 100%);
    border-radius: 4px;
}

/* Highlight in translations */
.def-text mark {
    background: linear-gradient(135deg, #c8e6c9 0%, #81c784 100%);
}

/* ===========================================
   TIER 1: Keyboard Navigation
   =========================================== */
.entry-row.keyboard-focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
}

.entry-row.keyboard-selected {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left-color: #1976d2;
}

/* Skip link for accessibility */
.skip-to-results {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 0.5rem 1rem;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.skip-to-results:focus {
    left: 1rem;
    top: 1rem;
}

/* ===========================================
   TIER 1: Grouped Results Separators
   =========================================== */
.results-group {
    margin-bottom: 1.5rem;
}

.results-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.results-group-header .group-icon {
    font-size: 1.1rem;
}

.results-group-header .group-label {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.results-group-header .group-count {
    background: #e9ecef;
    color: #6c757d;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Exact matches styling */
.results-group.exact-matches .entry-row {
    border-left: 4px solid #28a745;
}

/* Inflected matches styling */
.results-group.inflected-matches .entry-row {
    border-left: 4px solid #17a2b8;
}

/* Partial matches styling */
.results-group.partial-matches .entry-row {
    border-left: 4px solid #ffc107;
}

/* ===========================================
   TIER 1: Search History Sidebar
   =========================================== */
.search-history-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    background: white;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.search-history-panel.show {
    right: 0;
}

.search-history-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.search-history-panel .panel-header h5 {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

.search-history-panel .panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.search-history-panel .history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-history-panel .history-item:hover {
    background: #f8f9fa;
}

.search-history-panel .history-item .query-text {
    font-weight: 500;
    color: #007bff;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-history-panel .history-item .query-time {
    font-size: 0.75rem;
    color: #6c757d;
}

.search-history-panel .history-item .remove-btn {
    opacity: 0;
    padding: 2px 6px;
    font-size: 0.8rem;
    border: none;
    background: none;
    color: #dc3545;
    cursor: pointer;
    transition: opacity 0.2s;
}

.search-history-panel .history-item:hover .remove-btn {
    opacity: 1;
}

.search-history-panel .panel-footer {
    padding: 0.75rem;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
}

/* History toggle button */
.history-toggle-btn {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    cursor: pointer;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.history-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.5);
}

.history-toggle-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.65rem;
    min-width: 18px;
    height: 18px;
}

/* Backdrop overlay */
.search-history-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1045;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.search-history-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* ===========================================
   TIER 1: Multi-select Filter Pills
   =========================================== */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: #e7f1ff;
    color: #0d6efd;
    border: 1px solid #b6d4fe;
    border-radius: 16px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-pill:hover {
    background: #cfe2ff;
}

.filter-pill.active {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.filter-pill .remove-pill {
    font-size: 1rem;
    line-height: 1;
    margin-left: 0.25rem;
    opacity: 0.7;
}

.filter-pill .remove-pill:hover {
    opacity: 1;
}

/* ===========================================
   Keyboard Shortcut Hint
   =========================================== */
.keyboard-hints {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
}

.keyboard-hints.show {
    opacity: 1;
}

.keyboard-hints kbd {
    background: #495057;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 4px;
}

.corpus-sentences-container {
    scrollbar-width: thin;
    scrollbar-color: var(--color-success-500, #28a745) #f0f0f0;
}

.corpus-sentences-container::-webkit-scrollbar {
    width: 6px;
}

.corpus-sentences-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.corpus-sentences-container::-webkit-scrollbar-thumb {
    background: var(--color-success-500, #28a745);
    border-radius: 3px;
}

.corpus-sentences-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-success-700, #218838);
}

/* Keep active favorites visible */
.btn-favorite.active {
    opacity: 1;
    visibility: visible;
    color: #ffc107;
}
.btn-favorite.active i {
    font-weight: 900;
}

@media (max-width: 991.98px) {
    .corpus-sentences-container {
        max-height: none;
        overflow-y: visible;
    }
}

/* Split View Layout - CSS Grid */
@media (min-width: 992px) {
    .search-results-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        align-items: start;
        width: 100%;
    }

    #dictionary-entries-column,
    #corpus-sentences-column {
        min-width: 0; /* Critical for preventing grid blowout with flex children */
        width: 100%;
    }
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .search-results-container {
        display: flex;
    }
}

/* ===========================================
   TIER 5: Dark Mode Refinements
   Gemini search bar: global (home + search).
   Strong Bootstrap overrides: only under .page-search so entry/corpus pages keep token-based styling.
   =========================================== */
[data-theme="dark"] .gemini-input-group,
[data-theme="dark"] .search-history-panel,
[data-theme="dark"] .search-history-panel .panel-footer {
    background: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .page-search .filter-panel {
    background: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}

[data-theme="dark"] .gemini-input-group input {
    background: transparent;
    color: #fff;
}

[data-theme="dark"] .gemini-input-group i {
    color: #bbb;
}

[data-theme="dark"] .page-search .filter-panel h6,
[data-theme="dark"] .search-history-panel .panel-header {
    background: #252525;
    color: #ddd;
    border-bottom-color: #333;
}

[data-theme="dark"] .page-search .results-group-header .group-label {
    color: #adb5bd;
}

[data-theme="dark"] .page-search .results-group-header {
    border-bottom-color: #333;
}

[data-theme="dark"] .page-search .results-group-header .group-count {
    background: #333;
    color: #ccc;
}

[data-theme="dark"] .search-history-panel .history-item:hover {
    background: #2a2a2a;
}

[data-theme="dark"] .search-history-panel .history-item .query-text {
    color: #6ea8fe;
}

[data-theme="dark"] .search-history-panel .query-time {
    color: #888;
}

[data-theme="dark"] .page-search .filter-pill {
    background: #0c1a2b;
    color: #6ea8fe;
    border-color: #084298;
}

[data-theme="dark"] .page-search .filter-pill:hover {
    background: #102136;
}

[data-theme="dark"] .page-search .filter-pill.active {
    background: #0d6efd;
    color: #fff;
}

/* Search result highlights (dictionary search only) */
[data-theme="dark"] .page-search .search-highlight,
[data-theme="dark"] .page-search mark {
    background: linear-gradient(135deg, #664d03 0%, #856404 100%);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-search .headword-link mark {
    background: linear-gradient(135deg, #052c65 0%, #084298 100%);
}

[data-theme="dark"] .page-search .def-text mark {
    background: linear-gradient(135deg, #0f5132 0%, #198754 100%);
}

[data-theme="dark"] .page-search .sort-controls {
    background: #252525;
    border-color: #333;
}

[data-theme="dark"] .page-search .sort-controls select {
    color: #e0e0e0;
}

[data-theme="dark"] .page-search .btn-outline-secondary {
    color: #adb5bd;
    border-color: #495057;
}

[data-theme="dark"] .page-search .btn-outline-secondary:hover {
    background-color: #495057;
    color: #fff;
}

[data-theme="dark"] .page-search .card {
    background-color: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .page-search .table {
    color: #e0e0e0;
    border-color: #333;
}

[data-theme="dark"] .page-search .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: #e0e0e0;
    box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .page-search .dropdown-menu {
    background-color: #252525;
    border-color: #333;
}

[data-theme="dark"] .page-search .dropdown-item {
    color: #e0e0e0;
}

[data-theme="dark"] .page-search .dropdown-item:hover,
[data-theme="dark"] .page-search .dropdown-item:focus {
    background-color: #333;
    color: #fff;
}

/* ===========================================
   Search Page – Hero / Filters / Toolbar
   (extracted from inline <style> in search.html, 2026-05-11)
   =========================================== */

.page-search .gemini-hero {
    padding: 2rem 0;
    background: transparent;
}

.page-search .gemini-title {
    display: none;
}

.page-search .filter-panel {
    margin-top: 1rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    animation: searchFilterSlideDown 0.3s ease-out;
}

@keyframes searchFilterSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-search .search-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-search .sort-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-search .search-input-wrapper {
    position: relative;
    flex-grow: 1;
    max-width: 800px;
    margin: 0 auto;
}

.page-search .form-select-sm,
.page-search .btn-sm {
    font-size: 0.85rem;
}

/* Zero-results guidance box */
.page-search .no-results-guidance {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-top: 1rem;
}

.page-search .no-results-guidance h6 {
    margin-bottom: 0.75rem;
}

.page-search .no-results-guidance ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.page-search .no-results-guidance li + li {
    margin-top: 0.25rem;
}

[data-theme="dark"] .page-search .filter-panel,
[data-theme="dark"] .page-search .no-results-guidance {
    background-color: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}

/* Active filter summary + mode hint (UX 2026-05) */
.page-search .search-mode-hint {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.45;
}

.page-search .search-active-filters .search-filter-chip {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35em 0.65em;
    white-space: normal;
    text-align: left;
}

[data-theme="dark"] .page-search .search-active-filters.card {
    background-color: #1e1e1e;
    border: 1px solid #333;
}

/* ===========================================
   SEARCH PAGE — plain-language rail + evidence rows
   Everything below belongs to the rebuilt results page: the search bar block,
   the "Narrow it down" sidebar, one result row per word, and the idiom /
   corpus sections that follow the list.
   =========================================== */

.page-search {
    --line: var(--color-gray-200);
    --rule: var(--color-gray-800);
}

[data-theme="dark"] .page-search {
    --line: #333;
    --rule: #555;
}

/* --- Search bar --------------------------------------------------------- */

.search-bar-block {
    padding: 0 0 1.5rem;
}

.search-bar-block .gemini-search-container {
    max-width: 1100px;
}

.search-bar-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0 0.25rem;
}

.search-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-surface);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.search-tool-btn:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.search-tool-btn .palochka-char {
    font-size: 1rem;
    line-height: 1;
    color: var(--color-primary-500);
}

.search-hint {
    margin: 0.6rem 0 0;
    padding: 0 0.25rem;
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

.search-hint-muted {
    color: var(--color-gray-400);
}

/* --- Two-column shell --------------------------------------------------- */

.search-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

/* --- Sidebar ------------------------------------------------------------ */

.search-rail {
    position: sticky;
    top: 1rem;
    border-right: 1px solid var(--line);
    padding-right: 1.5rem;
}

.rail-title {
    margin: 0 0 1.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-800);
}

.rail-group {
    margin-bottom: 1.4rem;
}

.rail-group-title {
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.rail-options {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rail-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: var(--color-gray-600);
    text-decoration: none;
}

.rail-option:hover {
    color: var(--color-primary-500);
}

/* The little square doubles as the checkbox: filled means "this filter is on". */
.rail-box {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border: 1px solid var(--color-gray-400);
    background: transparent;
}

.rail-option.is-active .rail-box {
    background: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.rail-option.is-active {
    color: var(--color-gray-800);
    font-weight: 600;
}

.rail-label {
    flex: 1;
    min-width: 0;
}

.rail-count {
    font-size: 0.78rem;
    color: var(--color-gray-400);
    font-variant-numeric: tabular-nums;
}

.rail-note {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-gray-500);
}

.rail-clear {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--color-primary-500);
}

.rail-research {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.rail-research-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.rail-research-off,
.rail-research-on {
    font-size: 0.78rem;
}

.rail-research-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* The advanced panel is authored as a full-width Bootstrap grid; inside the
   240px rail every column has to collapse to a single stacked row. */
.rail-research .card {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.rail-research .card-body {
    padding: 0;
}

.rail-research .row > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.rail-research .form-label,
.rail-research h6 {
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
}

.rail-research .form-control,
.rail-research .form-select,
.rail-research .input-group-text {
    font-size: 0.8rem;
}

.rail-page-size {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.rail-page-size select {
    margin-left: 0.35rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--bg-surface);
    color: inherit;
    font-size: 0.75rem;
}

.rail-export {
    margin: 0.9rem 0 0;
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* --- Notices above the results ------------------------------------------ */

.search-note {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
    padding: 0.7rem 0.9rem;
    background: var(--color-gray-100);
    border-left: 3px solid var(--color-primary-500);
}

.search-note-flag {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary-500);
}

.search-note-body p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-gray-800);
}

.search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

.search-chip a {
    color: var(--color-gray-400);
    text-decoration: none;
}

/* --- Results header ----------------------------------------------------- */

.sr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--rule);
}

.sr-head-count {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.sr-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.8rem;
}

.sr-sort-link {
    color: var(--color-gray-500);
    text-decoration: none;
}

.sr-sort-link:hover {
    color: var(--color-primary-500);
}

.sr-sort-link.is-active {
    color: var(--color-gray-800);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- One result --------------------------------------------------------- */

.sr-row {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 200px;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}

.sr-headword {
    margin: 0 0 0.15rem;
    font-family: var(--font-family-serif);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.sr-headword a {
    color: var(--color-primary-500);
    text-decoration: none;
}

.sr-headword a:hover {
    color: var(--color-accent-500);
}

.sr-ipa {
    font-family: var(--font-family-ipa);
    /* Was 0.75rem/gray-400 — too faint to read next to a 1.35rem headword. */
    font-size: 0.9rem;
    color: var(--color-gray-500);
}

.sr-grammar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.sr-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--bg-surface);
    font-size: 0.6rem;
    color: var(--color-gray-600);
    cursor: pointer;
}

.sr-play:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.sr-type {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.sr-gloss {
    margin: 0 0 0.15rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-gray-800);
}

.sr-gloss--secondary {
    color: var(--color-gray-500);
}

.sr-example {
    margin: 0.55rem 0 0;
    padding-left: 0.7rem;
    border-left: 2px solid var(--line);
    font-family: var(--font-family-serif);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-gray-600);
}

.sr-evidence {
    text-align: right;
}

.sr-evidence-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(22, 163, 74, 0.10);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #15803d;
}

.sr-evidence-badge--todo {
    background: rgba(180, 83, 9, 0.10);
    color: #b45309;
}

.sr-evidence-note {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--color-gray-500);
}

.sr-open {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--color-gray-600);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.sr-open:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.sr-empty {
    padding: 2rem 0;
    color: var(--color-gray-500);
}

.sr-row.keyboard-focus {
    background: var(--color-gray-100);
    box-shadow: inset 3px 0 0 var(--color-primary-500);
}

/* --- Pagination --------------------------------------------------------- */

.sr-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.5rem;
}

.sr-page {
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--line);
    font-size: 0.8rem;
    color: var(--color-gray-600);
    text-decoration: none;
}

.sr-page:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.sr-page.is-current {
    background: var(--color-gray-800);
    border-color: var(--color-gray-800);
    color: var(--bg-surface);
    font-weight: 700;
}

.sr-page.is-disabled {
    color: var(--color-gray-300);
}

/* --- Idioms and corpus sentences below the list ------------------------- */

.sr-extra {
    margin-top: 2.5rem;
}

/* When idioms are the result list rather than an appendix, they start at the
   top of the column like the word list does. */
.sr-extra--primary {
    margin-top: 0;
}

.sr-extra-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--rule);
}

.sr-extra-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.sr-extra-all {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-600);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.sr-idioms,
.sr-sentences {
    display: grid;
    gap: 0;
}

.sr-idiom {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}

.sr-idiom-phrase {
    margin: 0 0 0.1rem;
    font-family: var(--font-family-serif);
    font-size: 1.05rem;
    font-weight: 700;
}

.sr-idiom-phrase a {
    color: var(--color-primary-500);
    text-decoration: none;
}

.sr-idiom-phrase a:hover {
    color: var(--color-accent-500);
}

.sr-idiom-gloss {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-gray-800);
}

.sr-idiom-literal {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--color-gray-500);
}

.sr-sentence {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}

.sr-sentence-avar {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-gray-800);
}

.sr-sentence-translation {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--color-gray-500);
}

.sr-sentence-source {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: var(--color-gray-400);
}

/* --- Nothing found ------------------------------------------------------ */

.search-none {
    padding: 1rem 0 3rem;
}

.search-none-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.search-none-lead {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.search-none-tips {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-gray-600);
}

/* --- Dark mode ---------------------------------------------------------- */

[data-theme="dark"] .search-note {
    background: #1f1f1f;
}

/* The light-theme green/amber are too dark to read on #121212. */
[data-theme="dark"] .sr-evidence-badge {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

[data-theme="dark"] .sr-evidence-badge--todo {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

[data-theme="dark"] .search-tool-btn,
[data-theme="dark"] .sr-play,
[data-theme="dark"] .rail-page-size select {
    background: var(--bg-surface);
    color: var(--color-gray-500);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 991.98px) {
    .search-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .search-rail {
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-right: 0;
        padding-bottom: 1rem;
    }

    .rail-group {
        margin-bottom: 1rem;
    }

    .sr-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .sr-evidence {
        text-align: left;
    }
}

@media (max-width: 767.98px) {
    /* Two columns of facets so the rail does not push the results a full
       screen down the page on a phone. */
    .search-rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1.25rem;
    }

    .rail-title,
    .rail-note,
    .rail-clear,
    .rail-research {
        grid-column: 1 / -1;
    }
}


/* ===== entry-detail.css ===== */

/* Entry Detail Page Styles */

/* Modern Card Styling */
.entry-card {
    background: var(--bg-surface);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
    margin-bottom: 2rem;
}

.entry-header {
    background: var(--bg-surface);
    color: var(--color-gray-800);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-gray-200);
    position: relative;
}

.word-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.word-text {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-gray-800);
    font-family: 'Charis SIL', 'Georgia', serif;
    letter-spacing: -0.02em;
}

.transcription-badge,
.romanization-badge {
    background: transparent;
    color: var(--color-gray-500);
    padding: 0;
    border-radius: 0;
    font-size: 1.1rem;
    font-style: normal;
    backdrop-filter: none;
    font-family: var(--font-family-ipa);
    font-variant-ligatures: none;
    margin-top: 0.1rem;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.audio-btn {
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-600);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.audio-btn:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
    text-decoration: none;
    border-color: var(--color-gray-400);
}

.entry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}

.meta-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.meta-badge {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    backdrop-filter: none;
    border: 1px solid var(--color-gray-200);
}

/* Content Sections */
.content-section {
    padding: 2rem;
}

/* Grid Layout System */
.entry-grid-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.entry-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-width: 0; /* Prevent grid blowout */
}

.entry-sidebar {
    position: relative;
    min-width: 0;
    min-height: 300px; /* Ensure space is reserved */
    background: var(--color-gray-100);
    border-radius: 12px;
    border: 2px dashed var(--color-gray-200);
    display: flex; /* Fix for sticky child */
    flex-direction: column; 
}

/* Remove background/border if we want it invisible but taking space, 
   but user requested "show that this space ... is for that" */
.entry-sidebar:has(.card) {
    background: transparent;
    border: none;
    min-height: 0;
}

.sidebar-sticky {
    position: sticky;
    top: 2rem; /* Stick 2rem from top of viewport */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 10;
}

/* Section Title Refinement */
.section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray-800);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family-sans, 'Inter', sans-serif);
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 0.5rem;
}

.translations-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.translation-card {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
}

.translation-title {
    font-weight: 600;
    color: var(--color-info);
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-gray-200);
    padding-bottom: 0.5rem;
}

.translation-text {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    line-height: 1.6;
}

.translation-value {
    display: inline-block;
    color: var(--color-gray-800);
    font-size: 1.05rem;
}

.translation-value:not(:last-child)::after {
    content: ",";
    color: var(--color-gray-300);
    margin-right: 4px;
}



/* Grammar Information */
.grammar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.grammar-item {
    background: var(--bg-surface);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    border-left: 3px solid #667eea;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease;
    border: 1px solid var(--color-gray-200);
    border-left-width: 3px;
}

.grammar-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.grammar-label {
    font-weight: 600;
    color: var(--color-gray-500);
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.grammar-value {
    color: var(--color-gray-800);
    font-size: 0.95rem;
    font-weight: 500;
    font-family: 'Charis SIL', serif;
}

/* Compact Buttons */
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.action-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Forms Tables */
.forms-section {
    margin-top: 2rem;
}

.entry-detail .forms-table {
    background: var(--bg-surface);
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-gray-200);
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.entry-detail .forms-table .table {
    margin-bottom: 0;
    table-layout: auto;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.entry-detail .forms-table th {
    background: var(--color-primary-500);
    border: 1px solid var(--color-gray-200);
    font-weight: 600;
    color: white;
    padding: 1.2rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    width: 20%;
    min-width: 0;
    max-width: 20%;
    box-sizing: border-box;
    overflow: hidden;
}

/* For non-class-based verbs with only 2 columns */
.entry-detail .forms-table.non-class-based th:first-child {
    width: 33.33%;
}

.entry-detail .forms-table.non-class-based th:not(:first-child) {
    width: 33.33%;
}

.entry-detail .forms-table.non-class-based td:first-child {
    width: 33.33%;
}

.entry-detail .forms-table.non-class-based td:not(:first-child) {
    width: 33.33%;
}

.entry-detail .forms-table th:first-child {
    width: 20%;
}

.entry-detail .forms-table th:not(:first-child) {
    width: 20%;
}

.entry-detail .forms-table td {
    padding: 0.8rem 0.6rem;
    border: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
    vertical-align: top;
    background: var(--bg-surface);
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 120px;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
}

.entry-detail .forms-table tr:last-child td {
    border-bottom: none;
}

/* Ensure consistent table behavior */
.entry-detail .forms-table table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.entry-detail .forms-table table * {
    box-sizing: border-box;
}

/* Remove rigid width-based nth-child selectors */

/* Ensure content is visible */
.entry-detail .forms-table .table tbody tr td {
    overflow: visible;
    position: relative;
    min-height: 60px;
    padding: 8px;
    vertical-align: top;
}

/* Force table borders to be visible */
.entry-detail .forms-table .table,
.entry-detail .forms-table .table th,
.entry-detail .forms-table .table td {
    border: 1px solid #e9ecef;
    border-collapse: collapse;
}

.entry-detail .forms-table .word-form-row {
    position: relative;
}

/* Examples sections should expand naturally below the content */
.entry-detail .forms-table .examples-section {
    display: block;
    position: relative;
    width: 100%;
    margin: 8px 0;
    padding: 12px;
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    clear: both;
    /* Force visibility */
    visibility: visible;
    opacity: 1;
    overflow: visible;
}

/* Ensure example content is visible */
.entry-detail .forms-table .examples-section .example-item {
    display: block;
    visibility: visible;
    opacity: 1;
    margin-bottom: 12px;
    padding: 8px;
    background: white;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.entry-detail .forms-table .examples-section .example-text {
    display: block;
    visibility: visible;
    opacity: 1;
    font-style: italic;
    color: #495057;
    margin-bottom: 4px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.entry-detail .forms-table .examples-section .example-number {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    background: #007bff;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin-right: 8px;
    line-height: 20px;
}

.entry-detail .forms-table .examples-section .examples-header {
    display: flex;
    visibility: visible;
    opacity: 1;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #dee2e6;
}

/* When examples section is inserted as a table row, style the wrapper cell */
.entry-detail .forms-table tbody tr td .examples-section {
    width: 100%;
    margin: 8px 0;
    padding: 12px;
    background-color: #f8f9fa;
    border-left: 3px solid #007bff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Form Badge Styling */
.entry-detail .form-badge-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 8px;
    min-height: 40px;
    overflow: visible;
    position: relative;
}

.form-badge-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 2.2em;
}

.form-lock-badge {
    font-size: 0.6em;
    padding: 0.05em 0.3em;
    border-radius: 0.5em;
    background-color: #198754;
    color: white;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
}

.entry-detail .form-text {
    flex: 1 1 auto;
    text-align: left;
    white-space: normal;
    overflow: visible;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-right: 0.5em;
    min-width: 0;
    display: inline-block;
    line-height: 1.4;
}

.attest-success {
    background-color: #198754;
}

.attest-warning {
    background-color: #fd7e14;
}

.attest-secondary {
    background-color: #6c757d;
}

/* Feedback Section */
.feedback-section {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
}

.feedback-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    border: 2px solid var(--color-gray-200);
    background: var(--bg-surface);
    color: var(--color-gray-600);
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.feedback-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feedback-btn.like {
    border-color: #198754;
    color: #198754;
}

.feedback-btn.like:hover {
    background: #198754;
    color: white;
}

.feedback-btn.flag {
    border-color: #dc3545;
    color: #dc3545;
}

.feedback-btn.flag:hover {
    background: #dc3545;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .word-text {
        font-size: 2rem;
    }

    .translations-grid {
        grid-template-columns: 1fr;
    }

    .grammar-grid {
        grid-template-columns: 1fr;
    }

    .entry-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

@media (max-width: 991.98px) {
    .entry-grid-layout {
        grid-template-columns: 1fr;
    }
    
    .sidebar-sticky {
        position: static;
    }
}

/* POS-specific styling */
.pos-noun {
    border-left-color: #28a745;
}

.pos-verb {
    border-left-color: #dc3545;
}

.pos-adj {
    border-left-color: #ffc107;
}

.pos-pron {
    border-left-color: #17a2b8;
}

.pos-adv {
    border-left-color: #6f42c1;
}

.pos-conj {
    border-left-color: #fd7e14;
}

.pos-post {
    border-left-color: #20c997;
}

.pos-interj {
    border-left-color: #e83e8c;
}

.pos-num {
    border-left-color: #6c757d;
}

.pos-part {
    border-left-color: #495057;
}

.pos-phrase {
    border-left-color: #6610f2;
}

/* Masdar-specific styling */
.masdar-info {
    border-left-color: #8e44ad;
    background: linear-gradient(135deg, #f8f4ff 0%, #ffffff 100%);
    border: 1px solid #e1bee7;
}

.masdar-info .grammar-label {
    color: #8e44ad;
    font-weight: 700;
}

.masdar-info .grammar-value a {
    color: #8e44ad;
    font-weight: 600;
}

.masdar-info .grammar-value a:hover {
    color: #6a1b9a;
    text-decoration: underline;
}

/* Masdar Nouns Grid */
.masdar-nouns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.masdar-noun-card {
    background: linear-gradient(135deg, #f8f4ff 0%, #ffffff 100%);
    border: 2px solid #e1bee7;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.1);
    transition: all 0.3s ease;
}

.masdar-noun-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(142, 68, 173, 0.2);
    border-color: #8e44ad;
}

.masdar-noun-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.masdar-noun-link {
    font-size: 1.3rem;
    font-weight: 700;
    color: #8e44ad;
    text-decoration: none;
    font-family: 'Georgia', serif;
}

.masdar-noun-link:hover {
    color: #6a1b9a;
    text-decoration: underline;
}

.masdar-noun-id {
    font-size: 0.8rem;
    color: #8e44ad;
    background: rgba(142, 68, 173, 0.1);
    padding: 0.3rem 0.6rem;
    border-radius: 15px;
    font-weight: 500;
}

.masdar-noun-type {
    color: #8e44ad;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.masdar-noun-translations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.translation-badge {
    background: rgba(142, 68, 173, 0.1);
    color: #8e44ad;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(142, 68, 173, 0.2);
}

/* Audio Visualizer */
/* .audio-btn { display: none; } */ /* Hide old btn if present elsewhere */

#audio-visualizer .bar { transition: height 0.1s; }
#audio-visualizer.playing .bar {
    animation: bounce 0.5s infinite ease-in-out alternate;
}
#audio-visualizer.playing .bar:nth-child(1) { animation-delay: 0s; }
#audio-visualizer.playing .bar:nth-child(2) { animation-delay: 0.1s; }
#audio-visualizer.playing .bar:nth-child(3) { animation-delay: 0.2s; }
#audio-visualizer.playing .bar:nth-child(4) { animation-delay: 0.3s; }
#audio-visualizer.playing .bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes bounce {
    to { transform: scaleY(1.5); }
}

/* ========================================================================
   MORPHOLOGY COLOR-CODING
   ======================================================================== */

/* Morpheme color scheme for linguistic analysis */
.morpheme-stem {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 1px;
    border: 1px solid #90caf9;
}

.morpheme-suffix {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    color: #e65100;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 1px;
    border: 1px solid #ffcc80;
}

.morpheme-prefix {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    color: #6a1b9a;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 1px;
    border: 1px solid #ce93d8;
}

.morpheme-infix {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    color: #2e7d32;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 1px;
    border: 1px solid #a5d6a7;
}

.morpheme-epenthetic {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
    color: #c2185b;
    font-weight: 500;
    font-style: italic;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 1px;
    border: 1px solid #f48fb1;
}

/* ========================================================================
   EMPTY FIELD STYLING
   ======================================================================== */

/* Style for grammar items with missing data */
.grammar-item.empty-field {
    opacity: 0.7;
    background: var(--color-gray-100);
}

.grammar-item.empty-field .grammar-value {
    color: var(--color-gray-500);
    font-style: italic;
    background: var(--color-gray-100);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px dashed var(--color-gray-300);
}

.grammar-item.empty-field .grammar-value::before {
    content: "—";
    margin-right: 4px;
    color: var(--color-gray-300);
}

/* Hover effect for empty fields to indicate they're editable */
.grammar-item.empty-field:hover {
    opacity: 1;
    background: var(--bg-surface);
    cursor: help;
}

.grammar-item.empty-field:hover .grammar-value {
    border-color: var(--color-gray-400);
    background: var(--bg-surface);
}

/* ========================================================================
   Dark mode: nested Bootstrap cards + form tables (after global search.css scope fix)
   ======================================================================== */
[data-theme="dark"] .entry-card .card {
    background-color: var(--bg-surface);
    border-color: #3f3f46;
}

[data-theme="dark"] .entry-detail .forms-table td,
[data-theme="dark"] .entry-detail .forms-table .table td {
    background: var(--bg-surface);
    color: var(--color-gray-800);
    border-color: #3f3f46;
}

[data-theme="dark"] .entry-detail .forms-table .table,
[data-theme="dark"] .entry-detail .forms-table .table th,
[data-theme="dark"] .entry-detail .forms-table .table td {
    border-color: #3f3f46;
}

[data-theme="dark"] .entry-detail .forms-table .examples-section {
    background-color: var(--color-gray-100);
}

[data-theme="dark"] .entry-detail .forms-table .examples-section .example-item {
    background: var(--bg-surface);
    border-color: #3f3f46;
}

[data-theme="dark"] .entry-detail .forms-table .examples-section .example-text {
    color: var(--color-gray-800);
}

.generated-form-mark {
    font-size: 0.65rem;
    margin-left: 0.25rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* In-page navigation (long entry pages) */
.entry-page-nav__list {
    background: var(--color-gray-50, #f8f9fa);
    border: 1px solid var(--color-gray-200, #e9ecef);
    border-radius: 0.75rem;
    padding: 0.35rem 0.5rem;
}

.entry-page-nav .nav-link {
    color: var(--color-gray-700, #495057);
}

.entry-page-nav .nav-link:hover,
.entry-page-nav .nav-link:focus-visible {
    background: var(--color-primary-100, #e7f1ff);
    color: var(--color-primary-700, #0d47a1);
}

.entry-anchor-target {
    scroll-margin-top: 5.5rem;
}

[data-theme="dark"] .entry-page-nav__list {
    background: var(--color-gray-100, #18181b);
    border-color: #3f3f46;
}

[data-theme="dark"] .entry-page-nav .nav-link {
    color: var(--color-gray-300, #d4d4d8);
}

/* Mobile Bottom Bar for Actions (UX-10) */
@media (max-width: 767.98px) {
    .entry-actions-mobile-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-surface);
        padding: 0.75rem 1rem;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
        z-index: 1040;
        justify-content: space-evenly;
        border-top: 1px solid var(--color-gray-200);
        margin: 0;
        flex-wrap: nowrap;
    }
    
    .entry-actions-mobile-bottom .btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        border-radius: 8px;
        gap: 0.25rem;
        padding: 0.5rem;
        color: var(--color-gray-700);
        height: auto;
        width: auto;
    }
    
    .entry-actions-mobile-bottom .btn i {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }
    
    .entry-actions-mobile-bottom .btn:hover,
    .entry-actions-mobile-bottom .btn:active {
        background: var(--color-gray-100);
        color: var(--color-primary-700);
    }
    
    [data-theme="dark"] .entry-actions-mobile-bottom {
        box-shadow: 0 -4px 12px rgba(0,0,0,0.5);
    }
    
    /* Ensure body has padding so content isn't hidden behind the bar */
    body {
        padding-bottom: 80px;
    }
}

/* ========================================================================
   ENTRY PAGE — one shell for every part of speech
   Reading depth is driven by [data-entry-mode] on .entry-detail-page:
     meaning  → word + meanings only
     teaching → + "how the word changes" and plain grammar
     research → + every stored table, all disclosures open
   ======================================================================== */

.entry-detail-page {
  --line: var(--color-gray-200);
  --rule: var(--color-gray-800);
  max-width: 1180px;
  margin: 0 auto;
}

[data-theme="dark"] .entry-detail-page {
  --line: #333;
  --rule: #555;
}

/* --- Mode bar ----------------------------------------------------------- */

.ed-back {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-gray-600);
  border-bottom: 1px solid currentColor;
}

.ed-back:hover { color: var(--color-primary-500); }

.ed-modebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}

.ed-modebar-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.ed-modes {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}

.ed-mode {
  padding: 0.4rem 0.85rem;
  border: 0;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-gray-700);
  cursor: pointer;
}

.ed-mode + .ed-mode { border-left: 1px solid var(--line); }

.ed-mode.is-active {
  background: var(--color-primary-500);
  color: #fff;
}

.ed-modebar-note {
  flex: 1;
  min-width: 12rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-gray-500);
}

.ed-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ed-action {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-surface);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-gray-800);
  cursor: pointer;
}

.ed-action:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }

/* Three grey buttons hid the only one a reader with a correction is looking
   for. This one carries the warning colour; Save and Share stay neutral. */
.ed-action--alert {
  border-color: var(--color-danger);
  background: rgba(155, 34, 38, 0.08);
  color: var(--color-danger);
}

.ed-action--alert:hover {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: #fff;
}

.ed-notice {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-gray-100);
  border-left: 3px solid var(--color-primary-500);
  font-size: 0.85rem;
}

/* --- Layout ------------------------------------------------------------- */

/* One column. The side rail is gone — grammar moved under the headword and the
   correction call-out to the foot — so the head's two halves get the full
   width, and the translation is no longer squeezed into a third of it. */
.ed-layout { display: block; }
.ed-main { min-width: 0; }

/* --- Head --------------------------------------------------------------- */
/* Two halves of one answer: the word on the left, what it means on the right.
   They share a baseline so the headword and the translation read as a pair. */

.ed-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

/* Four blocks on a 2×2 grid, not two stacked pairs: phonology and grammar have
   to start on the same line whatever the word and the translation above them
   happen to be worth, or the two reference blocks sit at a slight, unexplained
   offset. The wrappers exist only to keep the phone ordering simple, so they
   are dissolved (display: contents) and their children placed by hand. */
.ed-head-left,
.ed-head-right { display: contents; }

.ed-head-word { grid-column: 1; grid-row: 1; min-width: 0; }
.ed-head-meaning { grid-column: 2; grid-row: 1; min-width: 0; }
.ed-head-phonology { grid-column: 1; grid-row: 2; min-width: 0; }
.ed-head-grammar { grid-column: 2; grid-row: 2; min-width: 0; }

.ed-headword {
  margin: 0;
  font-family: var(--font-family-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-primary-500);
  overflow-wrap: anywhere;
}

/* One family for every symbol in the transcription. The old stack fell back to
   `monospace`, and the characters Charis SIL's web subsets do not carry (Greek
   χ, the U+0361 tie bar) landed there — so a single word came out in two
   typefaces. --font-family-ipa lists only faces that cover IPA, Greek and
   combining marks, and ends in `serif` so any gap still matches. */
.ed-ipa {
  margin: 0.3rem 0 0;
  font-family: var(--font-family-ipa);
  font-size: 1.45rem;
  font-variant-ligatures: none;
  line-height: 1.3;
  color: var(--color-gray-600);
  overflow-wrap: anywhere;
}

/* Listen, the voice picker and "add another" are one set of controls, so they
   sit on one line and wrap together rather than stacking. */
.ed-audio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.ed-head-source {
  margin: 0.8rem 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-400);
}

/* Both fold like the sections below them; .ed-details supplies the rule and the
   padding, so these only need the space that separates them from the word and
   the translation above. */
.ed-head-grammar,
.ed-head-phonology { margin-top: 1.5rem; }

.ed-voice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.ed-voice-who {
  font-size: 0.85rem;
  color: var(--color-gray-500);
}

.ed-voice-select {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 22rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-surface);
  font-size: 0.85rem;
  color: var(--color-gray-600);
  text-overflow: ellipsis;
}

.ed-voice-select:hover { border-color: var(--color-primary-500); }

.ed-listen {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-surface);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-gray-800);
  cursor: pointer;
}

.ed-listen:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }
.ed-listen--empty { border-style: dashed; color: var(--color-gray-500); }

/* Sits with the voices rather than in a corner: adding one is part of the set. */
.ed-listen--add {
  border-style: dashed;
  font-size: 0.7rem;
  color: var(--color-gray-500);
  cursor: pointer;
}

.ed-audio-note { font-size: 0.8rem; color: var(--color-gray-500); }

/* --- Blocks ------------------------------------------------------------- */

.ed-block { margin-top: 1.75rem; }

.ed-block--meaning { margin-top: 0; }

.ed-block-title {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-800);
}

.ed-block-title-ru { color: var(--color-gray-400); }

.ed-senses { margin: 0; padding: 0; list-style: none; }

.ed-sense {
  display: flex;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.ed-sense-num {
  flex-shrink: 0;
  width: 1.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-500);
}

/* Fills the row so the rule between the two languages runs the full width. */
.ed-sense-body { flex: 1 1 auto; min-width: 0; }

.ed-sense-en {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--color-gray-800);
}

/* A rule between the two languages: they are two answers to the same question,
   not one sentence continuing onto a second line. Margin and padding both
   contribute here (border-top sits between them), so a four-sense entry was
   paying for that divider twice over — trimmed to the smallest gap that still
   reads as a rule rather than a stray line under the English text. */
.ed-sense-ru {
  margin: 0.3rem 0 0;
  padding-top: 0.3rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-gray-500);
}

/* Nothing to divide when only one language is stored. */
.ed-sense-ru:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ed-example {
  margin: 0.6rem 0 0;
  padding-left: 0.8rem;
  border-left: 2px solid var(--line);
  font-family: var(--font-family-serif);
  font-size: 0.95rem;
  color: var(--color-gray-700);
}

.ed-empty { margin: 0; font-size: 0.9rem; color: var(--color-gray-500); }

/* Semantic field and tags, on one line under the translation. Each is a search
   filter, so each is a link out to the words that share it. */
.ed-sense-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
}

.ed-tag {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-gray-600);
}

.ed-tag:hover {
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}

/* The semantic field is the one that names what the word is about; the tags
   qualify it. */
.ed-tag--field {
  border-color: transparent;
  background: var(--color-gray-100);
  font-weight: 600;
  color: var(--color-gray-700);
}

/* --- Paradigm ----------------------------------------------------------- */

.ed-details { border-top: 1px solid var(--line); padding-top: 1rem; }
.ed-details-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.ed-block-title--strong {
  font-size: 0.95rem;
  color: var(--color-gray-800);
}

.ed-toggle {
  flex-shrink: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-800);
  white-space: nowrap;
}

.ed-details-summary:hover .ed-toggle {
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}

/* Scoped to the summary that owns the toggle. Unscoped, a subsection nested
   inside an open section matched the open rule too, so both its labels read
   "Hide" whatever state it was actually in. */
.ed-toggle-close { display: none; }
.ed-details[open] > .ed-details-summary .ed-toggle-open { display: none; }
.ed-details[open] > .ed-details-summary .ed-toggle-close { display: inline; }
.ed-details-summary::-webkit-details-marker { display: none; }
.ed-details-note { display: block; font-size: 0.8rem; color: var(--color-gray-500); }

/* The closing control at the foot of an open section. Understated: it is a way
   back out, not a second call to action. */
.ed-section-foot {
  margin-top: 1.1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  text-align: right;
}

.ed-section-hide {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  cursor: pointer;
}

.ed-section-hide:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }

/* --- Phonology ---------------------------------------------------------- */

/* IPA, ASCII and scientific Latin are all linguistic representations of the
   same headword.  Keep them in the one stack that covers IPA extensions,
   Greek and modifier letters, instead of letting individual symbols fall back
   to a different face. */
.ed-phon-ipa,
.ed-phon-ascii,
.ed-phon-latin,
.ed-phon-variant {
  font-family: var(--font-family-ipa);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}

/* The transcription is one step larger than the labels beside it. */
.ed-phon-ipa {
  font-size: 1.15rem;
  color: var(--color-gray-800);
  overflow-wrap: anywhere;
}

.ed-phon-ascii,
.ed-phon-latin {
  font-size: 1.02em;
  color: var(--color-gray-800);
  overflow-wrap: anywhere;
}

/* Where the stress falls, said in colour rather than in a row of its own —
   in the headword's transcription, in this block's copy of it, and on the
   syllable that carries it. (style_transcription emits .ipa-stress; the
   syllable join marks the same class in build_phonology.) */
.ed-ipa .ipa-stress,
.ed-phon-ipa .ipa-stress,
.ed-phon-value .ipa-stress {
  font-weight: 700;
  color: var(--color-primary-500);
}

.ed-phon-variants { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--color-gray-500); }

.ed-phon-variants-key {
  margin-right: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-400);
}

.ed-phon-variant + .ed-phon-variant::before { content: " · "; color: var(--color-gray-300); }

/* Syllables, stress and the sound pattern are all strings of symbols; the serif
   keeps them legible where the surrounding labels stay in the UI sans. */
.ed-phon-value { font-family: var(--font-family-serif); font-size: 1.02em; }

.ed-head-phonology .ed-fact dt { flex-basis: 7.5rem; }

.ed-table-scroll { overflow-x: auto; }

.ed-paradigm {
  width: 100%;
  margin-top: 0.9rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ed-paradigm th,
.ed-paradigm td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.ed-paradigm thead th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  border-bottom-color: var(--rule);
}

.ed-paradigm-label { font-weight: 500; color: var(--color-gray-800); }
.ed-paradigm-term { color: var(--color-gray-400); font-size: 0.85em; }
.ed-paradigm-count { color: var(--color-gray-500); font-size: 0.85rem; white-space: nowrap; }

/* Worked out by rule, not seen in any text. */
.ed-cell--generated { color: var(--color-gray-400); }

.ed-table-foot { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--color-gray-400); }

.ed-facts { margin: 0; padding-left: 1rem; }

/* The foot of the page: the ask comes after the forms it is about. Full width
   now, so the text sits beside its buttons instead of stacking in a column. */
.ed-fix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  background: var(--color-gray-100);
}

.ed-fix-title {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.ed-fix-copy { flex: 1 1 22rem; min-width: 0; }

.ed-fix-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-gray-700);
}

.ed-fix-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.ed-fix-btn {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-surface);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-gray-800);
}

.ed-fix-btn--solid { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #fff; }

/* --- What each mode shows ----------------------------------------------- */
/* Nothing. A mode decides how much starts open and nothing else: every section
   and every fact is in the page in both, folded in Simple and open in Full.
   There used to be an .ed-research class hidden here in Simple, which meant a
   reader had to guess that a second mode held facts the first did not — the
   part of speech decides what is worth asking now (utils/entry_grammar.py),
   which is a property of the word rather than of the reader. */

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 991.98px) {
  .ed-headword { font-size: 2rem; }
  .ed-ipa { font-size: 1.25rem; }
  .ed-modebar-note { order: 10; flex-basis: 100%; }
}

/* Below the rail breakpoint the head has room for two columns again; it is
   only on a phone that the meaning has to sit under the word. */
@media (max-width: 767.98px) {
  /* One column: word, what it means, then the two reference blocks. */
  .ed-head { display: flex; flex-direction: column; gap: 1.25rem; }
  .ed-head-word { order: 1; }
  .ed-head-meaning { order: 2; }
  .ed-head-phonology { order: 3; }
  .ed-head-grammar { order: 4; }
}

/* --- Examples ----------------------------------------------------------- */

/* Every section is separated by the same hairline. The heavier 2px rule this
   used to carry was meant to stop the folded section being walked past, but
   with the sections now sitting in one run it just read as a break in the
   page; the heavier title and the "Show" control do that job on their own. */
.ed-details--examples {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.ed-examples {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.ed-example-item {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

/* The examples are evidence under a heading, not the headline of the page, so
   they are set below the headings that introduce them. The Avar line still
   leads its own item — it stays a step above its translation. */
.ed-example-avar {
  margin: 0;
  font-family: var(--font-family-serif);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-gray-800);
}

.ed-example-translation {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--color-gray-500);
}

.ed-example-source {
  margin: 0.25rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-400);
}

.ed-examples-all {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-gray-600);
  border-bottom: 1px solid currentColor;
}

/* The generated-forms warning lives with the tables it describes. */
.ed-generated-note {
  margin: 0 0 1rem;
  padding: 0.5rem 0.7rem;
  background: rgba(245, 158, 11, 0.10);
  border-left: 3px solid #b45309;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-gray-700);
}


/* --- Grammar panel ------------------------------------------------------ */
/* label · value rows, not one card per field: the old panel gave a syllable
   count the same weight as the declension. */

.ed-grammar-sentence {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-gray-800);
}

/* The group headings are gone (entry_grammar_facts.html), so the groups run
   together as one list rather than sitting in unlabelled clumps. */
.ed-fact-group + .ed-fact-group { margin-top: 0; }

.ed-fact-title {
  margin: 0 0 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-400);
}

.ed-facts-list { margin: 0; }

.ed-fact {
  display: flex;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.ed-fact dt {
  flex: 0 0 8.5rem;
  font-weight: 400;
  color: var(--color-gray-500);
}

.ed-fact dd {
  margin: 0;
  min-width: 0;
  color: var(--color-gray-800);
  overflow-wrap: anywhere;
}

.ed-fact-note { color: var(--color-gray-400); }

/* An unset field still tells a researcher something, so it is greyed, not hidden. */
.ed-fact--empty dt,
.ed-fact--empty dd { color: var(--color-gray-300); }

.ed-grammar-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
}

.ed-grammar-cite {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  color: var(--color-primary-500);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Forms section: the stored tables, in the page's own table style -------
   The per-POS components (noun cases, verb forms, adjective classes, pronoun
   and numeral paradigms) are Bootstrap-era markup — cards on grey, striped
   `.table`, emoji section titles. Rewriting seven templates to change how they
   look would risk the JS hooks they carry (the click-to-see-examples badge, the
   collapse buttons, the CSP dynamic-style attributes), so the styling is done
   here instead, scoped to the section.

   What stays: the attestation count badge keeps its own colours (grey / orange
   / green by count) and the lock keeps its green pill. Those encode something
   the table shape cannot.
   ------------------------------------------------------------------------ */

/* Strip the card chrome. Every one of these is a box drawn around content that
   the section's own rules already separate. */
#entry-section-forms .card,
#entry-section-forms .card-body,
#entry-section-forms .card-header,
#entry-section-forms .forms-table,
#entry-section-forms .table-responsive {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Bootstrap's spacing and colour utilities carry !important, so the ones these
   templates sprinkle on have to be met in kind. */
#entry-section-forms .bg-light,
#entry-section-forms .bg-white { background: transparent !important; }

#entry-section-forms .card.p-3,
#entry-section-forms .forms-table.p-3,
#entry-section-forms .card-body.p-3,
#entry-section-forms .p-3,
#entry-section-forms .p-2 { padding: 0 !important; }

#entry-section-forms .shadow-sm,
#entry-section-forms .shadow { box-shadow: none !important; }

#entry-section-forms .forms-table { overflow-x: auto; }
#entry-section-forms .forms-section { margin-bottom: 1.5rem !important; }

/* The collapse wrapper adds nothing but height once the tip inside it is gone. */
#entry-section-forms .collapse > .card,
#entry-section-forms .card-body { margin: 0 !important; }

/* Section and sub-section headings in the page's voice, not Bootstrap's.
   Three levels that used to be two: the POS block ("Noun cases"), the group
   ("Core cases", "Locative (spatial) cases") and the series. The block title
   and the group heading were set identically, so nothing said which contained
   which — the group is the one carrying weight now, since it is what a reader
   scans for, and the block title above it steps back to an eyebrow.

   Bootstrap's m-* utilities are on these elements in the templates and carry
   !important, so the spacing has to be set in kind. */
#entry-section-forms .section-title,
#entry-section-forms h5,
#entry-section-forms h6 {
  padding: 0;
  border: 0;
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0 !important;
}

/* Set as the group heading, not as an eyebrow above it. Every block in this
   section is a group of forms — "Short form", "Emphatic", "Adjective cases",
   "Core cases" — and giving one of them a lighter treatment than the rest read
   as an accident rather than as hierarchy. */
#entry-section-forms .section-title {
  margin-top: 2rem !important;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--color-gray-900);
}

/* The group heading. Room above it, so "Locative (spatial) cases" reads as a
   new part of the paradigm rather than a caption on the table it follows. */
#entry-section-forms h5 {
  margin-top: 2rem !important;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--color-gray-900);
}

/* Not every h5 in this section is a group heading sitting over a paradigm —
   the verb, particle and postposition tables each wrap their whole table in a
   Bootstrap card and use an h5 as the card's own title, already spaced by the
   card header's padding. The 2rem above stacked on top of that and opened a
   gap under every accordion category (Tenses, Moods, Participles, ...), each
   showing "Verb Forms" a full line below its toggle button. A card's own
   title needs no extra room above it. */
#entry-section-forms .card-header h5 {
  margin-top: 0 !important;
}

/* A series is a subgroup: separated from the table above it, but sitting close
   to its own. */
#entry-section-forms h6 {
  margin-top: 2rem !important;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--color-gray-900);
}

/* Each heading owns the table under it, so the gap below is the smaller one. */
#entry-section-forms h5 + .forms-table .table,
#entry-section-forms h6 + .forms-table .table {
  margin-top: 0.45rem;
}

[data-theme="dark"] #entry-section-forms .section-title,
[data-theme="dark"] #entry-section-forms h5,
[data-theme="dark"] #entry-section-forms h6,
[data-theme="dark"] #entry-section-forms .table tbody td:first-child:not([colspan]) {
  color: var(--color-gray-800);
}

/* The emoji in front of each heading was the only thing marking it. */
#entry-section-forms .section-title > span:first-child { display: none; }

/* --- The tables ---------------------------------------------------------- */

#entry-section-forms .table {
  width: 100%;
  margin: 0.9rem 0 0;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--color-gray-800);
}

#entry-section-forms .table > :not(caption) > * > * {
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

#entry-section-forms .table thead th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  border-bottom: 1px solid var(--rule);
}

/* No zebra striping and no hover fill: the rules do the separating. */
#entry-section-forms .table-hover > tbody > tr:hover > *,
#entry-section-forms .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: transparent;
  color: inherit;
}

/* The case label, whatever the template called the cell. The core-case rows
   carry Bootstrap's fw-bold and the spatial rows carry nothing, so the two
   groups were set differently on the same page; keying on the first cell of
   the row makes every POS table agree.

   :not([colspan]) leaves the expanded-examples row alone — inline-examples.js
   inserts it as a single cell spanning the table, and it is prose, not a
   label. */
#entry-section-forms .table tbody td:first-child:not([colspan]) {
  /* 700 to match Bootstrap fw-bold, which the core rows carry with !important
     and which would otherwise sit a step heavier than the spatial ones. */
  font-weight: 700;
  color: var(--color-gray-900);
}

/* --- Cells --------------------------------------------------------------- */
/* A form is a word, its count and (if locked) the lock — laid out on one line
   with no box of its own. The attestation gradient the JS paints on the row is
   overridden here; a coloured band behind every cell is what made the old table
   unreadable next to the plain one. */

/* The evidence — the count and the lock — is laid out in slots of a fixed
   width rather than flowing after the word, so it reads as a column of its own
   down the table instead of tracking the length of each form. The count slot
   holds a five-digit badge and its caret; the lock slot holds the glyph. */
#entry-section-forms {
  --form-lock-slot: 0.9rem;
  --form-count-slot: 3.6rem;
}

#entry-section-forms .word-form-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 0;
}

#entry-section-forms .word-form-text,
#entry-section-forms .form-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-family-serif);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-gray-800);
}

/* The transcription sits under the form rather than beside it, and stays out of
   the way: it is a gloss on the word, not a second word. */
#entry-section-forms .word-form-ipa {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--font-family-ipa);
  font-size: 0.78rem;
  color: var(--color-gray-400);
}

#entry-section-forms .word-form-text--empty { color: var(--color-gray-300); }

/* --- The five-column form tables ---------------------------------------- */
/* case | singular | evidence | plural | evidence. The evidence columns are
   sized to their content so the counts line up down the page. */

/* The table fills the width and the form columns share it evenly; only the
   count columns are pinned, since a lock and a two-digit badge need no more.
   `table-layout: fixed` is what makes "evenly" mean evenly — with auto layout
   the widest word in a column decides everything.

   Classes rather than nth-child: the expanded-examples row is a single cell
   spanning the whole table, and a positional rule would size that one too. */
#entry-section-forms .forms-grid {
  table-layout: fixed;
  width: 100%;
}

#entry-section-forms .forms-grid th.forms-grid-case,
#entry-section-forms .forms-grid td.forms-grid-case { width: 9.5rem; }

/* What the series' ending means, beside the series number: "Series 3" alone
   says only that there are at least three of them. */
#entry-section-forms .forms-grid-series-gloss {
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-gray-400);
}

/* The question the case answers, under its name — the term stays, the reader
   who does not know it is not left guessing. */
#entry-section-forms .forms-grid-case-gloss {
  display: block;
  margin-top: 0.1rem;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

#entry-section-forms .forms-grid th.forms-grid-count,
#entry-section-forms .forms-grid td.forms-grid-count { width: 6.25rem; }

/* The short form and the emphatic forms are two more groups of the paradigm,
   so they are built exactly like "Core cases": an h5, a .forms-table, and
   _form_cell.html per cell. Only the gloss beside the heading is theirs. */
.ed-extra-forms { margin-bottom: 0.5rem; }

/* "the X one" beside the heading — the term names the form, this says what it
   does, and a reader who knows neither is not left guessing. */
.ed-extra-gloss {
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-gray-400);
}

/* The adjective tables — short form, emphatic, core cases, spatial cases —
   line their columns up with each other. They were auto-layout and each sized
   itself off its own contents, so "Nom." gave the core cases a 61px label
   column while "Locative" gave the spatial ones 85px, and the class columns
   started at a different x in every table on the page. A width alone does not
   fix that: under auto layout it is a suggestion the algorithm may ignore, and
   it did. Fixed layout makes it binding.

   The floor keeps four Cyrillic forms from being squeezed until they break one
   letter per line on a narrow pane; past it .forms-table scrolls instead. */
/* A form is one word and is never broken across lines: живописалъуласул in a
   105px slot came out as five lines of two letters. So the columns are sized
   by their contents (auto) and the words are held on one line (nowrap), and
   where the sum is wider than the page .forms-table scrolls — the words decide
   the width, not the width the words.

   Auto layout ignores a `width` on a cell often enough to be useless for
   holding the label column steady, which is why that one is a min-width: it is
   what keeps "Nom." and "Locative" from giving their tables label columns of
   different widths, and so keeps the class columns starting at the same x down
   the page. */
#entry-section-forms .forms-aligned { table-layout: auto; }

#entry-section-forms .forms-aligned .word-form-text { white-space: nowrap; }

#entry-section-forms .forms-aligned th:first-child,
#entry-section-forms .forms-aligned td:first-child {
  min-width: 7rem;
  white-space: nowrap;
}

/* Slack goes to the last column, not shared out among all of them. Without
   this the short-form table — two columns and room to spare — spent its spare
   width on the label column, which then started its form 175px to the right of
   where every other table starts its Class I. */
#entry-section-forms .forms-aligned th:last-child,
#entry-section-forms .forms-aligned td:last-child {
  width: 100%;
}

/* The internal-agreement marker that used to be a Bootstrap badge in each of
   the eight copied cells. */
#entry-section-forms .word-form-agr {
  margin-right: 0.3rem;
  font-size: 0.7rem;
  color: var(--color-gray-400);
}

/* The form is set against the right edge of its column so its count sits hard
   against it whatever the word is worth — and, in a case table, so the endings
   line up down the column, which is the comparison the table exists to make. */
#entry-section-forms .forms-grid th.forms-grid-form,
#entry-section-forms .forms-grid td.forms-grid-form {
  padding-right: 0.35rem;
  text-align: right;
}

#entry-section-forms .forms-grid th.forms-grid-count,
#entry-section-forms .forms-grid td.forms-grid-count { padding-left: 0.35rem; }

/* The plural group starts a new pair, so it gets the space the pairs do not. */
#entry-section-forms .forms-grid th.forms-grid-gap,
#entry-section-forms .forms-grid td.forms-grid-gap { padding-left: 2rem; }

/* An alternative is secondary to the form it varies from. */
#entry-section-forms .forms-grid td.forms-grid-alt .word-form-text {
  color: var(--color-gray-600);
}

#entry-section-forms .forms-grid th.forms-grid-alt { color: var(--color-gray-400); }

/* The count already has a column of its own here, but inside it the lock was
   still a flex item, so a form without one started its count 1.2rem further
   left than the form above it. Same two slots as `.form-badge-right`, left
   aligned because the column is already narrow. */
#entry-section-forms .word-form-row--badges {
  display: grid;
  grid-template-columns: var(--form-lock-slot) auto;
  column-gap: 0.3rem;
  row-gap: 0.15rem;
  justify-content: start;
  align-items: baseline;
}

#entry-section-forms .word-form-row--badges .form-lock-badge {
  grid-column: 1;
  justify-self: center;
}

#entry-section-forms .word-form-row--badges .attest-badge,
#entry-section-forms .word-form-row--badges .generated-form-mark {
  grid-column: 2;
  justify-self: start;
}

/* Examples open under both slots, not beside the count. */
#entry-section-forms .word-form-row--badges .examples-container {
  grid-column: 1 / -1;
}

/* --- Count and lock ------------------------------------------------------ */
/* Squared off and tinted rather than a solid pill, so they sit in the same
   visual family as the rest of the page — but the three-way colour split is
   the point of the badge, so that stays: grey none, amber a few, green many. */

#entry-section-forms .attest-badge {
  margin: 0;
  white-space: nowrap;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  min-width: 1.9rem;
}

#entry-section-forms .attest-badge::after {
  margin-left: 0.2rem;
  font-size: 0.55rem;
  opacity: 0.55;
}

#entry-section-forms .attest-badge:hover,
#entry-section-forms .attest-badge.expanded {
  transform: none;
  box-shadow: none;
}

#entry-section-forms .attest-badge.attest-success {
  border: 1px solid rgba(45, 106, 79, 0.35);
  background: rgba(45, 106, 79, 0.12);
  color: #1d5138;
}

#entry-section-forms .attest-badge.attest-warning {
  border: 1px solid rgba(180, 83, 9, 0.35);
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
}

#entry-section-forms .attest-badge.attest-secondary {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--color-gray-400);
}

#entry-section-forms .attest-badge.expanded {
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}

/* The lock was a green pill loud enough to read as a second count. It marks a
   state, so it is drawn as one: the glyph, muted, no chrome. */
#entry-section-forms .form-lock-badge {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--color-gray-500);
  filter: grayscale(1);
  opacity: 0.55;
}

[data-theme="dark"] #entry-section-forms .attest-badge.attest-success {
  background: rgba(45, 106, 79, 0.28);
  color: #86d5ab;
}

[data-theme="dark"] #entry-section-forms .attest-badge.attest-warning {
  background: rgba(245, 158, 11, 0.24);
  color: #f5c163;
}

#entry-section-forms .word-form-text small {
  font-family: var(--font-family-ipa);
  font-size: 0.8rem;
}

/* The count and the lock sat immediately after the word, so where they landed
   followed the length of the word and nothing lined up down a column — and a
   form with no lock pulled its count left by the width of the missing glyph.
   They are evidence about the form, not part of it, so they get a slot of
   their own at the right of the cell: the same width in every row, and a track
   for the lock that is there whether or not the lock is. */
#entry-section-forms .form-badge-right {
  display: grid;
  grid-template-columns: var(--form-lock-slot) var(--form-count-slot);
  column-gap: 0.3rem;
  align-items: baseline;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}

#entry-section-forms .form-badge-right .form-lock-badge {
  grid-column: 1;
  justify-self: center;
}

#entry-section-forms .form-badge-right .attest-badge {
  grid-column: 2;
}

/* Anchoring the evidence to the right of the cell would leave it nearer the
   next column's word than its own, reading as if it belonged to that one. The
   form is set against the right of its column instead, so its count sits hard
   against it whatever the word is worth — the same treatment the noun grid
   gets below, and for the same second reason: the case endings line up down
   the column, which is the comparison these tables exist to make.

   Keyed on the row rather than on a `.forms-table` wrapper: only the noun,
   adjective and pronoun templates have that wrapper, so scoping to it left the
   verb and adverb tables out. Every POS builds its cells from a
   `.word-form-row`, so that is what the rule follows. The noun grid gives the
   count a `<td>` of its own and puts no `.word-form-text` inside a row, so it
   is untouched here and keeps its own treatment above. */
#entry-section-forms td > .word-form-row:not(.word-form-row--badges) > .word-form-text {
  flex: 1 1 auto;
  text-align: right;
  /* `.word-form-text` is `overflow-wrap: anywhere` further up, which tells the
     auto table its min-content width is one character. A dense paradigm then
     crams itself into the container and splits words down the middle —
     воржинехъинро came out as воржинехъи / нро. Words in a paradigm are the
     data; they must never be cut. Held to whole words, the table sizes to what
     it actually needs, and `.table-responsive` scrolls when that exceeds the
     page. Scoped to the table cells so running prose keeps `anywhere`. */
  overflow-wrap: normal;
}

/* Analytical forms (infinitive + auxiliary, shown as separate component boxes)
   carry no count badge to anchor against, so the right-alignment above just
   scatters them — each row's boxes land wherever its own total width happens
   to put them, near the cell's right edge but not lined up with each other.
   Read left-to-right like the rest of the row's content instead. */
#entry-section-forms td > .word-form-row.word-form-analytical > .word-form-text {
  flex: 0 1 auto;
  text-align: left;
}

/* A form type with no class variation (Past Simple, Constative, ...) spans
   all four class columns in one cell instead of splitting across them. The
   right-alignment above reads it as if it belonged under the last of those
   columns — Plural — when it is really an answer for all of them at once, so
   it sits centered in the space it actually spans.

   Unlike the analytical case above, this is safe to center precisely because
   each of these rows is the only row for its form type: nothing else needs
   to line up against it. A colspan cell holding more than one row instead —
   the adverb table's lone invariant form beside its four-column entries — was
   tried centered first and rejected: two such rows in the same group centered
   on their own, different-length content and landed with their counts up to
   5px apart, which the plain right-aligned treatment those still use does not. */
#entry-section-forms td > .word-form-row.word-form-row--single {
  justify-content: center;
}

#entry-section-forms td > .word-form-row.word-form-row--single > .word-form-text {
  flex: 0 1 auto;
  text-align: right;
}

#entry-section-forms td > .word-form-row.word-form-row--single > .form-badge-right {
  margin-left: 0;
}

/* No horizontal padding on the row.
   Column separation is what the cell's own 12px each side already provides:
   24px between two columns against 8-27px between a word and its own count, so
   the count still reads as belonging to the word on its left.

   An earlier version added 1.75rem here to widen that margin. In a five-column
   verb paradigm the cell has about 212px and the count slot takes ~85px, so
   those 28px came straight out of the word and broke 93 forms on a single
   entry. Every value above 0 broke something (2px broke 3, 8px broke 14), which
   is the measurement saying this table has no width to spare. */

/* A cell with no form at all emits the count without the wrapper; give it the
   same slot so its "0" keeps the column the real counts hold. */
#entry-section-forms .word-form-row:not(.word-form-row--badges) > .attest-badge {
  width: var(--form-count-slot);
  margin-left: auto;
}

/* Generated, not attested — the same grey the plain table used for "we worked
   it out by rule". */
#entry-section-forms .generated-form-mark {
  font-size: 0.7rem;
  color: var(--color-gray-400);
}

/* --- Corpus examples popup (inline-examples.js) --------------------------
   Clicking an attestation badge opens the sentences behind that count, right
   under the form. It used to open as its own widget — a shadowed card with
   numbered circle pins in Bootstrap blue — legacy from before this section
   had a design of its own. The "Usage examples" block further down the page
   already answers the same question (evidence for a word, in context) with a
   quiet hairline-separated list; this popup is that same answer for one form
   instead of the whole entry, so it reads as the same list, opened in place.
   Built on --line/--color-gray-* so dark mode falls out of the page's own
   tokens instead of a parallel [data-theme="dark"] block. */
#entry-section-forms .examples-section {
  width: 100%;
  margin: 0.5rem 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

#entry-section-forms .examples-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0;
  padding: 0.7rem 0 0.4rem;
  border-bottom: 0;
}

#entry-section-forms .examples-title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-900);
}

#entry-section-forms .examples-count {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-gray-500);
}

#entry-section-forms .example-item {
  margin: 0;
  padding: 0.7rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}

#entry-section-forms .example-item:last-child {
  border-bottom: 0;
}

/* The pin numbered examples by recency, not by relevance, so the count read
   as a ranking the corpus never claimed to give. The list order is enough. */
#entry-section-forms .example-number {
  display: none;
}

#entry-section-forms .example-text {
  margin-bottom: 0;
  font-family: var(--font-family-serif);
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--color-gray-800);
}

/* The word this popup is evidence for, picked out by weight and color rather
   than a yellow marker box — the marker read as a search-result artifact,
   not as this page's own way of pointing at something. */
#entry-section-forms .example-text .highlight {
  background: none;
  padding: 0;
  border-radius: 0;
  font-weight: 700;
  color: var(--color-primary-500);
}

#entry-section-forms .example-translation {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--color-gray-500);
}

#entry-section-forms .example-source {
  margin: 0.25rem 0 0;
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gray-400);
}

#entry-section-forms .no-examples,
#entry-section-forms .loading-indicator {
  padding: 0.7rem 0;
  text-align: left;
  font-style: normal;
  color: var(--color-gray-500);
}

#entry-section-forms .error-message {
  padding: 0.7rem 0;
  text-align: left;
  font-style: normal;
}

/* The "click the badge for examples" tip is repeated verbatim in all six POS
   blocks, so an entry with two of them says it twice; the badge already
   carries a ▾ and a tooltip. Matched on .small.mb-3, which the tips share and
   the empty-state alerts ("no pronoun case forms available") do not. */
/* d-flex on these carries !important, so the hide has to as well. */
#entry-section-forms .alert.small.mb-3 { display: none !important; }

/* Pronoun type, person and number, in badges — every one of them is a row in
   the Grammar panel at the top of the page. */
#entry-section-forms .pronoun-meta { display: none; }

/* Any alert that is left is a real message, quieted to match. */
#entry-section-forms .alert {
  margin: 0.5rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

#entry-section-forms .alert i { display: none; }

#entry-section-forms .btn.btn-outline-secondary {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

#entry-section-forms .btn.btn-outline-secondary:hover {
  border-color: var(--color-primary-500);
  background: transparent;
  color: var(--color-primary-500);
}

/* --- How the word is built ---------------------------------------------- */
/* Three directions on the same fact — what this is made of, what it came
   from, what came from it — so they share a shape and only the heading
   changes. Each row is a word plus how the two are related. */

.ed-build-group { margin-top: 1.4rem; }
.ed-build-group:first-of-type { margin-top: 0.9rem; }

.ed-build-title {
  margin: 0 0 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-500);
}

.ed-build-list,
.ed-build-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ed-build-item,
.ed-build-part {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* The parts of a compound are ordered and read left to right, so they are
   joined by a plus rather than sitting as a loose set. */
.ed-build-parts { gap: 0.4rem; align-items: center; }

.ed-build-part + .ed-build-part::before {
  content: "+";
  margin-right: 0.55rem;
  margin-left: -0.15rem;
  font-size: 0.9rem;
  color: var(--color-gray-400);
}

.ed-build-word {
  font-family: var(--font-family-serif);
  font-size: 1rem;
  text-decoration: none;
  color: var(--color-primary-500);
}

.ed-build-word:hover { text-decoration: underline; }

/* A part that is not itself an entry — a bound morph with nowhere to link. */
.ed-build-word--plain { color: var(--color-gray-700); }

.ed-build-how { font-size: 0.72rem; color: var(--color-gray-500); }
.ed-build-affix { font-family: var(--font-family-serif); font-size: 0.85rem; }
.ed-build-note { font-size: 0.72rem; color: var(--color-gray-400); }

/* How the word was made, when no base word is recorded to hang it on. A
   sentence rather than a list row, because there is no word on the other end
   for a row to point at. */
.ed-build-formation {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--color-gray-700);
}

.ed-build-formation b {
  font-family: var(--font-family-serif);
  font-weight: 600;
}

.ed-build-formation .ed-build-note {
  margin-left: 0.4rem;
}

/* Said plainly, for the same reason the compound gap is: a reader who sees the
   suffix and no source word should be told that it is missing, not left to
   assume the page is hiding it. */
.ed-build-formation-gap {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: var(--color-gray-400);
}

/* The compound flag with nothing behind it — DATA-9. Said plainly rather than
   left as a section that omits the one thing it exists to show. */
.ed-build-gap {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--color-gray-500);
}

/* --- Usage examples: two kinds of evidence ------------------------------- */
/* A set expression is a fact about the language; a corpus line is a fact about
   one text. Run together they read as one list of sentences, so each gets a
   heading of its own. */

/* Each subsection folds on its own. They are .ed-details so the Simple/Full
   switch reaches them like every other section, but a subsection inside an
   open section does not need the full rule and padding above it. */
.ed-details--sub {
  border-top: 0;
  padding-top: 0;
}

.ed-examples-group + .ed-examples-group {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.ed-examples-group > .ed-details-summary { margin-top: 0.9rem; }

/* A step under the section name above it, and still clearly a heading rather
   than one of the lines it introduces. */
.ed-examples-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-900);
}

.ed-examples-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-gray-400);
}

/* Lighter than a section's toggle: this one opens a part, not the whole. */
.ed-toggle--sub {
  padding: 0.22rem 0.55rem;
  border-color: var(--line);
  font-size: 0.64rem;
  color: var(--color-gray-500);
}

/* A set expression has its own page; the corpus line does not. */
.ed-example-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.ed-example-link:hover {
  color: var(--color-primary-500);
  border-bottom-color: currentColor;
}


/* ===== pages/home.css ===== */

/* ====================================================================
   HOME PAGE — Gemini-Style Search + Unified Stats + Card Animations
   ==================================================================== */

/* --- Hero Section ---
   The one definition every page falls back to: home.css is bundled into
   site.css by scripts/build-site-css.mjs, so this is what linguistics.html,
   tools.html, about.html, and every other page using .gemini-hero/
   .gemini-title gets unless it loads a page-specific stylesheet of its own
   that overrides it (a few used to, redundantly and inconsistently — see
   pages/unknown_words.css and pages/suggest.css, which no longer carry their
   own copies). Quiet gray-900 instead of a loud maroon 700/800-weight title:
   the same restraint the entry-detail redesign uses — color is for what you
   can act on, not for every heading on the page. */
.gemini-hero {
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-4);
    text-align: center;
    background: transparent;
    border-bottom: 1px solid var(--color-gray-200);
}

.gemini-title {
    font-family: var(--font-family-sans);
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
}

/* --- Search Container --- */
.gemini-search-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--bg-surface);
    border: 1px solid var(--color-gray-200);
    border-radius: 28px;
    padding: 8px 16px 12px 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.gemini-search-container:focus-within {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent-400);
}

.gemini-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gemini-search-icon {
    color: var(--color-gray-400);
    font-size: 1.2rem;
}

.gemini-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px 0;
    font-size: 1.1rem;
    background: transparent;
    color: var(--color-gray-800);
}

.gemini-input::placeholder {
    color: var(--color-gray-400);
}

.gemini-submit-btn {
    background: var(--color-primary-500);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.gemini-submit-btn:hover {
    background: var(--color-primary-600);
    transform: scale(1.05);
}

/* --- Toolbar --- */
.gemini-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    gap: 8px;
    flex-wrap: wrap;
}

.gemini-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gemini-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- Palochka Button (Styled & Persistent) --- */
.gemini-palochka-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--color-primary-300);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.gemini-palochka-btn:hover {
    background: var(--color-primary-500);
    color: white;
    border-color: var(--color-primary-500);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(27, 38, 59, 0.15);
}

.palochka-char {
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-family-serif);
}

.palochka-kbd {
    background: rgba(27, 38, 59, 0.08);
    border: 1px solid var(--color-primary-200);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.7rem;
    font-family: var(--font-family-sans);
    color: var(--color-primary-400);
    margin-left: 4px;
}

.gemini-palochka-btn:hover .palochka-kbd {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
}

/* --- Language Pill Toggle --- */
.lang-pill-toggle {
    display: inline-flex;
    background: var(--color-gray-100);
    border-radius: 20px;
    padding: 2px;
    gap: 2px;
}

.lang-pill {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 18px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    margin: 0;
}

.lang-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lang-pill.active,
.lang-pill:has(input:checked) {
    background: var(--color-primary-500);
    color: white;
    box-shadow: 0 1px 3px rgba(27, 38, 59, 0.2);
}

.lang-pill:not(.active):hover {
    background: var(--color-gray-200);
    color: var(--color-gray-800);
}

.gemini-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-gray-600);
    cursor: pointer;
    user-select: none;
}


/* ====================================================================
   STATS STRIP — Unified horizontal bar
   ==================================================================== */

.stats-strip {
    background: var(--bg-surface);
    border: 1px solid var(--color-gray-200);
    border-radius: 16px;
    padding: 0.9rem 1.25rem 0.7rem;
    box-shadow: var(--shadow-sm);
    /* Centred band across the page, not a column neighbour of the notices. */
    max-width: 1100px;
    margin: 0 auto 1.75rem;
}

.stats-strip-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: 0.35rem 0.75rem;
    position: relative;
}

/* One neutral color for every number — the four used to run maroon / amber /
   amber / green with no meaning behind which stat got which color. Only the
   two CTA links below carry color now, where it actually signals "you can
   act on this". */
.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: var(--font-family-sans);
    line-height: 1.2;
    color: var(--color-gray-900);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin-top: 2px;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--color-gray-200);
    flex-shrink: 0;
}

/* The secondary row: coverage percentages, deltas since last update, and the
   two CTAs, all as one wrapped line instead of being stacked two or three
   deep under just the two "action" columns. */
.stats-strip-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.3rem 0.9rem;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-gray-100);
    font-size: 0.78rem;
    color: var(--color-gray-600);
    text-align: center;
}

.stats-fact--muted {
    color: var(--color-gray-400);
}

/* Pushes the two CTAs to the row's far end on wide screens; on a wrapped
   line it just collapses to nothing, so the facts and the CTAs both stay
   centered together instead of the gap looking like a mistake. */
.stats-strip-footer-spacer {
    flex: 1 0 0;
    min-width: 0;
}

@media (max-width: 640px) {
    .stats-strip-footer-spacer { display: none; }
}

.stats-cta {
    font-weight: 600;
    color: var(--color-primary-500);
    text-decoration: none;
    white-space: nowrap;
}

.stats-cta:hover {
    text-decoration: underline;
}


/* ====================================================================
   ENTRY CARDS — Verified accent + animations
   ==================================================================== */

.entry-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
}

.entry-card--verified {
    border-left-color: var(--color-success);
}

.entry-card--unverified {
    border-left-color: var(--color-gray-300);
}

.entry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float);
}

.entry-card--verified:hover {
    border-left-color: #10b981;
}

/* Headword styling */
.entry-headword {
    font-family: var(--font-family-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary-500);
}

.entry-headword a {
    color: inherit;
}

.entry-headword a:hover {
    color: var(--color-accent-500);
}

/* IPA transcription pill */
.ipa-pill {
    display: inline-block;
    font-family: var(--font-family-ipa);
    font-size: 0.8rem;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    padding: 1px 10px;
    border-radius: 12px;
    border: 1px solid var(--color-gray-200);
}

/* Language tags */
.lang-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.lang-tag--ru {
    background: #dbeafe;
    color: #1d4ed8;
}

.lang-tag--en {
    background: #dcfce7;
    color: #16a34a;
}

/* Copy button */
.btn-copy-word {
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.75rem;
    color: var(--color-gray-400);
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.btn-copy-word:hover {
    background: var(--color-gray-100);
    color: var(--color-primary-500);
    border-color: var(--color-primary-300);
}

/* Entry card stagger animation */
.entry-card-wrapper {
    opacity: 0;
    animation: cardFadeIn 0.4s ease-out forwards;
    animation-delay: calc(var(--stagger, 1) * 60ms);
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ====================================================================
   SIDEBAR NOTICE STACK — the three site notices, stacked in the left column
   ==================================================================== */

/* A centred row under the search bar. These are notices about the site, so
   they read as quiet chips rather than warnings — no red fill, just a hairline. */
.notice-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* <details>/<summary>: the reveal needs no JS and stays keyboard-operable. */
.notice-item {
    max-width: 24rem;
    background: var(--bg-surface);
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    overflow: hidden;
}

/* Opening one turns it into a card: a pill cannot hold a paragraph. */
.notice-item[open] {
    border-radius: 12px;
}

.notice-item-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-gray-700);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background 0.15s ease;
}

/* Suppress the native disclosure triangle (Safari keeps it despite flex). */
.notice-item-head::-webkit-details-marker {
    display: none;
}

.notice-item-head:hover {
    background: var(--color-gray-100);
    color: var(--color-primary-500);
}

.notice-item-head:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
}

.notice-item-icon {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.notice-item-title {
    flex: 1;
}

.notice-item-caret {
    font-size: 0.65rem;
    opacity: 0.55;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.notice-item[open] .notice-item-caret {
    transform: rotate(180deg);
}

.notice-item-body {
    padding: 0 0.75rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-gray-600);
}


/* ====================================================================
   CARD HOVER — shared lift effect, also used by the corpus/tools pages
   ==================================================================== */

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--color-gray-200);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float);
    border-color: var(--color-primary-200);
    background: white;
}

.card-hover .fas {
    transition: transform 0.3s ease;
}

.card-hover:hover .fas {
    transform: scale(1.1);
}


/* ====================================================================
   RECENTLY ADDED — a single editorial line of words
   ==================================================================== */

.recent-line {
    /* --line: hairline between words; --rule: the heavy header rule. */
    --line: var(--color-gray-200);
    --rule: var(--color-gray-800);
    margin-bottom: 1.5rem;
}

.recent-line-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--rule);
}

.recent-line-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-gray-800);
}

.recent-line-all {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color-gray-600);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.recent-line-all:hover {
    color: var(--color-primary-500);
}

/* Six words per row, wrapping onto further rows. The hairlines are driven by
   nth-child, so each breakpoint restates them for its own column count. */
.recent-line-items {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.recent-word {
    min-width: 0;
    padding: 0.85rem 0.9rem 0.75rem;
    border-left: 1px solid var(--line);
}

.recent-word:nth-child(6n + 1) {
    border-left: 0;
    padding-left: 0;
}

.recent-word:nth-child(n + 7) {
    border-top: 1px solid var(--line);
}

.recent-word-headword {
    margin: 0 0 0.1rem;
    font-family: var(--font-family-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.recent-word-headword a {
    color: var(--color-primary-500);
    text-decoration: none;
}

.recent-word-headword a:hover {
    color: var(--color-accent-500);
}

.recent-word-ipa {
    margin-bottom: 0.3rem;
    font-family: var(--font-family-ipa);
    font-size: 0.7rem;
    color: var(--color-gray-400);
}

.recent-word-gloss {
    margin: 0 0 0.1rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--color-gray-800);
}

.recent-word-gloss--secondary {
    color: var(--color-gray-500);
}

.recent-word-meta {
    margin: 0.45rem 0 0;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-600);
}

.recent-word-meta--muted {
    color: var(--color-gray-400);
}


/* ====================================================================
   THREE WAYS YOU CAN HELP
   ==================================================================== */

.help-strip {
    --line: var(--color-gray-200);
    --rule: var(--color-gray-800);
    margin-bottom: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.help-strip-title {
    margin: 0 0 0.2rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.help-strip-sub {
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.help-strip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--rule);
}

.help-way {
    padding: 0.9rem 1.25rem 1rem;
    border-left: 1px solid var(--line);
}

.help-way:first-child {
    border-left: 0;
    padding-left: 0;
}

.help-way-num {
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary-500);
}

.help-way-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.help-way-text {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-gray-500);
}

.help-way-btn {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--color-gray-800);
    border-radius: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-gray-800);
    transition: background 0.18s ease, color 0.18s ease;
}

.help-way-btn:hover {
    background: var(--color-gray-800);
    color: var(--bg-surface);
}


/* ====================================================================
   CLOSING CTA — compact brand banner
   ==================================================================== */

.closing-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0;
    padding: 1.15rem 1.5rem;
    border-radius: 4px;
    /* Brand maroon is fixed: the banner keeps white type in both themes. */
    background: #550000;
    color: #fff;
}

.closing-cta-line {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.closing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.closing-cta-btn {
    padding: 0.6rem 1rem;
    border: 1px solid #fff;
    border-radius: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}

.closing-cta-btn--solid {
    background: #fff;
    color: #550000;
}

.closing-cta-btn--solid:hover {
    background: rgba(255, 255, 255, 0.85);
    color: #550000;
}

.closing-cta-btn--ghost {
    color: #fff;
}

.closing-cta-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}


/* ====================================================================
   DARK MODE
   ==================================================================== */

[data-theme="dark"] .gemini-search-container {
    background: #2d2d2d;
    border-color: #404040;
}

[data-theme="dark"] .gemini-input {
    color: #e2e8f0;
}

[data-theme="dark"] .lang-pill-toggle {
    background: #333;
}

[data-theme="dark"] .lang-pill {
    color: #aaa;
}

[data-theme="dark"] .lang-pill.active,
[data-theme="dark"] .lang-pill:has(input:checked) {
    background: var(--color-primary-500);
    color: white;
}

[data-theme="dark"] .gemini-palochka-btn {
    background: #333;
    border-color: #555;
    color: #ccc;
}

[data-theme="dark"] .gemini-palochka-btn:hover {
    background: var(--color-primary-500);
    color: white;
}

[data-theme="dark"] .stats-strip {
    background: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .stat-divider {
    background: #333;
}

[data-theme="dark"] .entry-card {
    background: #222;
}

[data-theme="dark"] .entry-card:hover {
    background: #2a2a2a;
}

[data-theme="dark"] .ipa-pill {
    background: #333;
    border-color: #444;
    color: #aaa;
}

[data-theme="dark"] .lang-tag--ru {
    background: #1e3a5f;
    color: #93c5fd;
}

[data-theme="dark"] .lang-tag--en {
    background: #14532d;
    color: #86efac;
}

[data-theme="dark"] .card-hover {
    background: #222;
    border-color: #333;
}

[data-theme="dark"] .card-hover:hover {
    background: #2a2a2a;
    border-color: var(--color-primary-500);
}

[data-theme="dark"] .btn-copy-word {
    border-color: #444;
    color: #888;
}

[data-theme="dark"] .btn-copy-word:hover {
    background: #333;
    color: var(--color-primary-500);
}

[data-theme="dark"] .notice-item {
    background: var(--bg-surface);
    border-color: #333;
}

[data-theme="dark"] .notice-item-head {
    color: var(--color-gray-500);
}

[data-theme="dark"] .notice-item-head:hover {
    background: #2a2a2a;
}

[data-theme="dark"] .notice-item-body {
    color: #b9b9b9;
}

[data-theme="dark"] .recent-line,
[data-theme="dark"] .help-strip {
    --line: #333;
    --rule: #555;
}

[data-theme="dark"] .recent-word-meta {
    color: var(--color-gray-500);
}

[data-theme="dark"] .closing-cta {
    background: #3d0000;
}


/* ====================================================================
   RESPONSIVE — Mobile breakpoints
   ==================================================================== */

@media (max-width: 767.98px) {
    .stats-strip {
        padding: 1rem;
    }

    .stats-strip-main {
        flex-direction: column;
        gap: 0.5rem;
    }

    .stats-strip-footer {
        justify-content: flex-start;
        text-align: left;
    }

    .stat-divider {
        width: 80%;
        height: 1px;
    }

    .stat-value {
        font-size: 1.4rem;
    }

    .lang-pill-toggle {
        flex-wrap: wrap;
        justify-content: center;
    }

    .lang-pill {
        font-size: 0.75rem;
        padding: 3px 8px;
    }

    .gemini-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .gemini-toolbar-right {
        width: 100%;
        justify-content: flex-start;
        margin-top: 6px;
    }
}

/* Each step below restates the whole hairline rule set, because the base
   nth-child(6n + 1) selector would otherwise blank the wrong left borders. */
@media (max-width: 1199.98px) {
    .recent-line-items {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .recent-word {
        border-left: 1px solid var(--line);
        border-top: 0;
        padding-left: 0.9rem;
    }

    .recent-word:nth-child(4n + 1) {
        border-left: 0;
        padding-left: 0;
    }

    .recent-word:nth-child(n + 5) {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 991.98px) {
    .gemini-palochka-btn {
        min-height: 40px;
    }


    .recent-line-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .recent-word {
        border-left: 1px solid var(--line);
        border-top: 0;
        padding-left: 0.9rem;
    }

    .recent-word:nth-child(3n + 1) {
        border-left: 0;
        padding-left: 0;
    }

    .recent-word:nth-child(n + 4) {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 767.98px) {
    .recent-line-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .recent-word {
        border-left: 1px solid var(--line);
        border-top: 0;
        padding: 0.75rem 0.75rem 0.65rem;
    }

    .recent-word:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .recent-word:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .help-strip-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .help-way {
        border-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .help-way + .help-way {
        border-top: 1px solid var(--line);
    }

    .closing-cta {
        padding: 1.25rem;
    }

    .closing-cta-line {
        font-size: 1.05rem;
    }
}

.app-main:has(.closing-cta) {
    padding-bottom: var(--space-2);
}

/* Hero wordmark. Height-driven; width follows the 283.46:141.73 viewBox. */
.hero-logo {
    height: 50px;
    width: auto;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .hero-logo {
        height: 34px;
    }
}


/* ===== pages/app-shell.css ===== */

/**
 * Shared layout and surfaces so dictionary, auth, help, and about pages
 * share the same visual rhythm (hero, cards, icon buttons).
 */

.page-lead-narrow {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.page-narrow {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.surface-card {
  border-radius: 12px;
  border: 0;
  box-shadow: var(--shadow-sm);
}

.surface-card--accent-left {
  border-left: 4px solid var(--color-primary-500);
  transition: transform 0.2s ease;
}

.surface-card--accent-left:hover {
  transform: translateY(-1px);
}

/* Replaces the former mouseover/mouseout attributes on phraseology cards. */
.interactive-lift-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.surface-alert {
  border-radius: 8px;
}

.input-group-text-soft {
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
}

/* Circular icon actions (entry header, compact toolbars) */
.btn-icon-circle {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Generic content panels (about, static info pages) */
.content-panel {
  background: var(--bg-surface, #fff);
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

/* Section headings across the About/Linguistics/Tools family (about.html,
   goals.html, creators.html, language.html, methodology.html, ime_info.html,
   data.html, privacy.html — every one of them writes
   <h2 class="h5 text-primary fw-bold">) came out bold maroon, repeated many
   times down a single page: 6-12 loud headings per page, all the same
   color as the page's one interactive brand accent. Overridden by element
   selector (higher specificity than the bare .text-primary utility class,
   so no per-template edit needed) to the same quiet gray-900 the rest of
   the redesign uses for section labels. */
/* !important because Bootstrap's own .text-primary utility carries
   !important by design (a utility class is meant to always win over a
   component's own styling) — a plain higher-specificity rule here loses to
   it otherwise, regardless of selector weight. */
.content-panel > h2.text-primary,
.content-panel h2.text-primary {
  color: var(--color-gray-900) !important;
}

.team-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-gray-100);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary-500);
}

.team-avatar {
  width: 48px;
  height: 48px;
  background: rgba(27, 38, 59, 0.08);
  color: var(--color-primary-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.contact-panel {
  background: linear-gradient(
    135deg,
    rgba(27, 38, 59, 0.02),
    rgba(27, 38, 59, 0.05)
  );
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.contact-panel-icon {
  font-size: 1.75rem;
  color: var(--color-primary-500);
  margin-bottom: 0.75rem;
}

.goals-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.goals-list li {
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.goals-list li i {
  color: var(--color-success);
  margin-top: 0.25rem;
}

/* A disclaimer/note panel — .content-panel plus Bootstrap's subtle-warning
   or subtle-info utilities, which several About/Linguistics/Tools pages
   used directly (bg-warning-subtle, border-warning-subtle, bg-info,
   alert-warning...) for their "before you read this" notes. Each page had
   its own filled yellow or blue box, all different, none matching the
   hairline-accent notes the entry-detail redesign already settled on
   (.linguistic-note, .ed-details--examples). This is that same treatment,
   reusable wherever a page needs one: a left rule and quiet type, not a
   filled colored card. Add alongside .content-panel, in place of the
   Bootstrap subtle-color utility classes, not on top of them. */
.content-panel--note {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--color-primary-300);
  border-radius: 0;
  box-shadow: none;
  padding: 0.1rem 0 0.1rem 1.1rem;
}

.content-panel--note .content-panel-note-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-700);
}

/* The same idea at card-inline scale — a filled alert-warning/alert-info box
   sitting inside an already-bordered card (the NLP Tools cards' download
   caveats) read as a box within a box. Small muted text with a hairline
   accent instead. */
.inline-note {
  border-left: 2px solid var(--color-primary-300);
  padding: 0.1rem 0 0.1rem 0.7rem;
  font-size: 0.82rem;
  color: var(--color-gray-600);
}

/* Mobile touch targets & readability (Tier C) */
@media (max-width: 767.98px) {
  .app-nav .nav-link,
  .app-actions .btn-icon,
  .app-actions .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .gemini-btn,
  .gemini-toolbar .gemini-btn {
    min-height: 40px;
  }
}

/* ========================================================================
   Theme: Corpus Mode (UX-17)
   ========================================================================
   Corpus mode only tints the page background. It deliberately does NOT re-skin
   the header any more: the maroon header from layout.css is used on every page.

   The old light-header variant made the menu bar look different from page to
   page, and inconsistently so — hx-boost swaps the body *contents* but keeps
   the <body> element, so the theme class set on first load stuck around for the
   rest of the session and a corpus page could leave a white header on /tools/.
   ======================================================================== */
.theme-corpus {
  background-color: #f7faf8;
}

/* Reserve the border on every page so the header height never shifts. */
.app-header {
  border-bottom: 3px solid transparent;
}

/*
 * HTMX navigation feedback; the element is declared once in base_generic.
 *
 * The states below are classes, not inline styles written from JS.  htmx copies
 * attributes onto matching elements during settle, and re-applying a style
 * attribute goes through setAttribute(), which this site's CSP refuses without
 * 'unsafe-hashes'.  A class attribute carries no such restriction.
 */
#global-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  opacity: 0;
  z-index: 11000;
  background: linear-gradient(90deg, #7a1f1f, #c0392b);
  box-shadow: 0 0 8px rgba(192, 57, 43, .6);
  /* No transition in the base state, so restarting the bar snaps back to 0. */
  transition: none;
  pointer-events: none;
}

#global-progress.is-loading {
  width: 90%;
  opacity: 1;
  transition: width 8s cubic-bezier(.1, .7, .1, 1), opacity .3s;
}

#global-progress.is-finishing {
  width: 100%;
  opacity: 1;
  transition: width .2s ease, opacity .4s ease;
}

#global-progress.is-fading {
  width: 0;
  opacity: 0;
  transition: width .2s ease, opacity .4s ease;
}

/*
 * htmx would otherwise inject these as a nonce-less <style> element that CSP
 * blocks on every page load; htmx.config.includeIndicatorStyles is disabled in
 * static/js/htmx-csp.js and the rules are reproduced verbatim here.
 */
.htmx-indicator {
  opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  transition: opacity 200ms ease-in;
}


/* ===== pages/template-utilities.css ===== */

/* Declarations mechanically migrated from template style attributes. */
/* Keep new component/page styling in its dedicated static stylesheet. */

.csp-dynamic-form-row { border-radius: 4px; padding: 4px; margin: 2px 0; }
.csp-dynamic-form-row--compact { border-radius: 4px; padding: 2px 4px; margin: 1px 0; }
.csp-dynamic-form-row--wide { border-radius: 6px; padding: 6px; justify-content: center; position: relative; display: flex; align-items: center; }
.csp-dynamic-attestation-header { border-radius: 6px; }
.csp-verb-attestation-count { font-size: .7rem; min-width: 1.5em; }

.csp-style-011ce903ae75{display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.8em; line-height: 1.4em;}
.csp-style-01a3bb680d8d{min-width: 180px;}
.csp-style-0218ac926cdc{color: #0d6efd; text-decoration: none; font-size: 0.85rem;}
.csp-style-064021e25e49{background: #f3e5f5; color: #7b1fa2; font-size: 0.65rem;}
.csp-style-077ec28035e9{display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem; margin-left: 0.5rem;}
.csp-style-07d32ca9a6d7{background: #f8f9fa; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto;}
.csp-style-08724256bd38{font-size: 0.7rem;}
.csp-style-0b55a6dad859{margin-left: 10px;}
.csp-style-0b961cb0ae3c{width:2.2rem;height:2.2rem;font-size:0.9rem;}
.csp-style-0bcd9ceed044{font-size: 1.5rem;}
.csp-style-0eca47ac6670{background: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 1rem; flex: 1; min-width: 200px; max-width: 300px;}
.csp-style-11e6aa01d228{max-height: calc(100vh - 300px); overflow-y: auto; padding-right: 10px;}
.csp-style-126244f1351e{flex: 1;}
.csp-style-183c74c2d93e{background-color: var(--bs-warning-bg-subtle, #fff3cd); border-color: var(--bs-warning-border-subtle, #ffe69c); color: var(--bs-warning-text-emphasis, #664d03);}
.csp-style-1a7281c0465e{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;}
.csp-style-1bad14f42706{background-color: #f8f9fa; border: 1px dashed #dee2e6;}
.csp-style-1c1ccb4d1efa{border-radius: 12px;}
.csp-style-1fc442775862{height: 30px; width: 100%;}
.csp-style-1fc8e3ac1571{min-width: 160px;}
.csp-style-226f5bb816fd{direction: ltr;}
.csp-style-23486a61d10c{order: 1;}
.csp-style-25561090436f{border-radius: 8px;}
.csp-style-2615d75a7d46{z-index: 10000; text-decoration: none;}
.csp-style-2803c64d914c{line-height: 1.7;}
.csp-style-29425ce62c63{z-index: 10;}
.csp-style-2cc0c5b499a6{border: 2px solid #e9ecef;}
.csp-style-2e72acd64782{font-size: 1rem;}
.csp-style-2fc7b1ee0849{border-left: 3px solid #dee2e6;}
.csp-style-321809111282{cursor: help; font-size: 0.9em;}
.csp-style-34661c5392b8{letter-spacing: 0.5px;}
.csp-style-353d071d2746{font-size: 0.95rem; line-height: 1.4;}
.csp-style-37ab52c9d67a{width: 100%;}
.csp-style-3a66cc89a772{font-size: 0.85em;}
.csp-style-3ae1698bfcbd{scrollbar-width: none;}
.csp-style-3b6fad0b298d{margin-top: 10px;}
.csp-style-3caae29cedba{top: 4rem; z-index: 1020; background-color: var(--bg-surface);}
.csp-style-3d43560d7f56{margin-bottom: 0.5rem;}
.csp-style-3dce1bcf3aa7{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 15px; margin: -1.5rem -1.5rem 2rem -1.5rem;}
.csp-style-4555334f9590{text-align: left;}
.csp-style-45991f0923fd{font-size: 0.88rem; font-weight: 400;}
.csp-style-45d230585abc{border-radius: 4px; padding: 4px; margin: 2px 0;}
.csp-style-4908cb0a1366{font-size: 0.85rem;}
.csp-style-495d3e290984{line-height: 2;}
.csp-style-49814d1579b1{width: auto; box-shadow: none;}
.csp-style-4ad1729b525e{line-height: 1.9;}
.csp-style-4b88067ef8cc{background: #e3f2fd;}
.csp-style-4d524dc3cba1{vertical-align: top;}
.csp-style-4e345435f1bd{opacity: 0.5;}
.csp-style-4ed0f474eba2{background: #fff3e0;}
.csp-style-4f8dbc76c794{margin-top: 2rem;}
.csp-style-547ce2175898{min-width: 12rem;}
.csp-style-55b20c6a610c{max-height: 85vh;}
.csp-style-56cf80f78c85{font-size:0.95em;}
.csp-style-56d1e0204546{width: 28%;}
.csp-style-57d487858376{display: flex; flex-wrap: wrap; gap: 1rem;}
.csp-style-5b755faceabd{font-size: 0.8rem; padding: 0.75rem 1rem;}
.csp-style-5cdbac3f0ff1{color: #764ba2; font-size: 0.95rem;}
.csp-style-5d121e7bd644{width: auto;}
.csp-style-5e838c85d912{font-size: 0.7em;}
.csp-style-6002529ccd3d{margin: 0 auto;}
.csp-style-6113ebe44246{border-radius: var(--radius-lg);}
.csp-style-61fcbaf167aa{margin: 15px 0;}
.csp-style-622e25af578f{width: 100%; max-width: 900px;}
.csp-style-6491234e3dbe{border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s;}
.csp-style-64f38d3c69c8{font-size: 1.2em; background: #eee; padding: 2px 5px;}
.csp-style-670ccee14680{font-size: 0.95rem; line-height: 1.6;}
.csp-style-68f98ab07fdb{font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; color: #2c5aa0;}
.csp-style-6a830c8e7848{background: #fff3e0; color: #f57c00; border-color: #ffe0b2;}
.csp-style-6cea408ee7b9{font-weight: 600; font-size: 1rem;}
.csp-style-6ceb6993cdd6{background: #fff3cd; padding: 10px; border-radius: 6px; border-left: 4px solid #ffc107;}
.csp-style-6e22c58a7a6a{display: none;}
.dynamic-filters--visible{display:block;}
.filter-group--visible{display:block;}
.csp-style-6fdd6821ed31{font-size: 1.1rem;}
.csp-style-70473726ab79{border-left: 3px solid var(--warning-color);}
.csp-style-721348195f22{height: fit-content;}
.csp-style-72559bf72e18{font-size:0.75rem;}
.csp-style-730cac87c610{border-radius: 16px;}
.csp-style-734f9023dd94{color: #198754; font-size: 0.95rem;}
.csp-style-773d228bd59d{background: #f3e5f5; border-left: 4px solid #9c27b0; border-radius: 6px;}
.csp-style-79db29cd4c7c{font-size: 3rem; opacity: 0.3;}
.csp-style-7c0f86ab5456{cursor: pointer;}
.csp-style-7d6c4c340ad4{display: block; order: 2; grid-column: 1 / -1;}
.csp-style-7f8191ff3470{margin-bottom: 0.3rem;}
.csp-style-80e0c6b06d4d{background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1);}
.csp-style-83d8a27ef02d{font-weight: normal; text-transform: none;}
.csp-style-85c3f7c97851{background-color: var(--color-primary-500); font-size: 1rem; margin-bottom: 0.2em;}
.csp-style-871b7becf588{font-size:0.82rem;}
.csp-style-87c174ac8b65{width: 60%; height: 1.5em; margin-bottom: 1em;}
.csp-style-87f4e8322504{width:26%}
.csp-style-8846c688d950{background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%); border-left: 4px solid #4a90e2;}
.csp-style-89adea50ca8e{background: #f8f9fa; border-radius: 8px;}
.csp-style-89e201d64efb{display: inline-flex; justify-content: center; align-items: center;}
.csp-style-8a20b829b6e9{border-left: 4px solid #4a90e2;}
.csp-style-8a42f99fd3bb{background:#dc3545;}
.csp-style-8b511f076fb1{font-size: 0.75rem;}
.csp-style-8d8a98d8e950{max-width: 600px;}
.csp-style-92951960c682{height: 6px;}
.csp-style-92fdd03e2402{font-size: 0.9rem; line-height: 1.6; color: #495057;}
.csp-style-933f423fbca1{width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px;}
.csp-style-93f804a389b6{background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);}
.csp-style-942eb0ec3aae{width: 100%; margin-top: 1rem;}
.csp-style-98a8089e79a5{background-color: #e0e7ff; color: #4338ca;}
.csp-style-98b1e8b3320f{background: #f8f9fa; border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;}
.csp-style-9904ae0b1da5{background: #f8f9fa; border: 1px solid #e9ecef;}
.csp-style-9be7441361dc{font-size: 0.9rem;}
.csp-style-9ff81528d9bd{width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;}
.csp-style-a0052fd48c6b{width: 30px; height: 4px; background: #e9ecef; border-radius: 2px;}
.csp-style-a01153c96511{width: 20%}
.csp-style-a1b8f1b1055b{letter-spacing: 0.05em;}
.csp-style-a2dbdad5feb0{width: 50%;}
.csp-style-a345538b0782{background: #f8f9fa; border: 2px solid #e9ecef;}
.csp-style-a512d1e3c7d3{border-radius: 12px 12px 0 0;}
.csp-style-a6c62bdf9337{font-size: 0.65rem;}
.csp-style-a88642231398{order: 3;}
.csp-style-a8c670fb3d42{top: 20px;}
.csp-style-a8faa6dd3fa4{color: #6b7280; font-size: 14px; margin: 0;}
.csp-style-a91ad02988e6{border-radius: 8px; border-left: 3px solid #198754; transition: all 0.2s;}
.csp-style-a99e34a7a9d5{background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px;}
.csp-style-aa75644121bb{display: block;}
.csp-style-aae30f4ce161{font-size: 0.8rem;}
.csp-style-ac820dd1c60e{font-size:0.9rem; border-color:#dee2e6;}
.csp-style-adb684577081{order: 4;}
.csp-style-ae525792321d{margin-bottom: 1rem; color: #6c757d; font-size: 0.9rem;}
.csp-style-b07581571ae5{width: 200px;}
.csp-style-b3b25bb76895{font-size: 2.5rem;}
.csp-style-b440c49c6b9a{white-space: pre-wrap; font-size: 0.78rem;}
.csp-style-b6b60e4dee79{width: 26px; height: 26px; display: inline-flex; justify-content: center; align-items: center;}
.csp-style-b898e6fe52b0{font-size: 0.7rem; letter-spacing: 0.5px; font-weight: 600;}
.csp-style-b8dd12c7b8b6{z-index: 1090;}
.csp-style-ba0516ac32b0{border-radius: 12px; border: 1px dashed #ced4da;}
.csp-style-bf4eb110bad2{color: #6c757d; font-size: 0.85rem; font-style: italic;}
.csp-style-c0f12da0a84d{font-size: 0.65em;}
.csp-style-c1d57789fea8{opacity: 0.8; min-width: 160px;}
.csp-style-c5510aee071a{font-size: 2rem;}
.csp-style-c8083d292716{font-size:0.9rem; border-color:#e9ecef;}
.csp-style-c81fa55435c0{width: 70%; border-radius: 2px;}
.csp-style-cb43f8983898{min-width: 140px;}
.csp-style-cbbca9c62753{background: #e3f2fd; border-left: 4px solid #2196f3; border-radius: 6px;}
.csp-style-ce2a0497b4a1{grid-column: 1 / -1;}
.csp-style-cf0566729162{background: #f3e5f5;}
.csp-style-d0466aa33fa8{display:none;}
.csp-style-d1814cbdb0b3{background: #e8f5e9; color: #2e7d32; font-size: 0.65rem;}
.csp-style-d1c493a134fe{border-radius: 12px; border-left: 4px solid var(--color-success);}
.csp-style-d3e1c93ed7c8{max-width: 120px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.csp-style-d62f691c1857{top: 8rem; scroll-margin-top: 6rem;}
.csp-style-d7d21b5f6c06{background: #fff3e0; border-left: 4px solid #ff9800; border-radius: 6px;}
.csp-style-dcdf4c9388b3{background-color: #550000;}
.csp-style-dd775cb77c32{scroll-margin-top: 6rem;}
.csp-style-dee324ed16f3{width: 32px; height: 32px;}
.csp-style-e34c76235cfa{color: var(--color-primary-500); letter-spacing: 0.5px; font-size: 1.25rem;}
.csp-style-e46894cbb4af{border-radius: 12px; border-left: 4px solid #28a745;}
.csp-style-e5d4f0f60c40{font-size: 1.2rem;}
.csp-style-e90e45da9329{text-decoration: none; color: inherit;}
.csp-style-ea01e09be4f6{font-size: 3rem;}
.csp-style-eb899c490557{width: 40%;}
.csp-style-edda91dc7f41{font-size:0.78rem;}
.csp-style-f050a0abbafb{gap: 1rem;}
.csp-style-f0a245b4cd7e{max-width: 560px;}
.csp-style-f279de9edd43{font-size: 1.2rem; opacity: 0.4;}
.csp-style-f3431026a13e{border: 2px dashed #e9ecef;}
.csp-style-f38d26a0f58f{z-index: 1050; cursor: pointer; background: rgba(255,255,255,0.8); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.csp-style-f52d32d2b568{width:4rem}
.csp-style-f5551d8b4718{max-width: 720px;}
.csp-style-f5ae832dfc43{grid-column: 1 / -1; background-color: #fffaf0;}
.csp-style-f6048611b5be{width: 28px; height: 28px; display: inline-flex; justify-content: center; align-items: center;}
.csp-style-f7f760e2a15c{width: 15%;}
.csp-style-fe0396a24987{font-size:0.78rem; line-height:1.3;}
.csp-style-feffaa774571{border-radius: 12px; position: sticky; top: 20px;}
.csp-style-ff75dee9da0c{border-radius: 8px; border-left: 3px solid #764ba2; transition: all 0.2s;}


/* ===== components/entry-mini-toolbar.css ===== */

/*
 * Entry mini-toolbar (UX-3) — quick-action bar that appears after scrolling
 * past the entry header on long entry-detail pages. Pinned to the bottom on
 * narrow viewports, and to the right edge on desktop so it doesn't fight the
 * existing on-page nav (which sticks to the top).
 *
 * Filter offcanvas bottom-sheet polish (UX-11) is at the bottom of this file.
 */

.entry-mini-toolbar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translate(-50%, 1rem);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  background-color: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  z-index: 1030;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.entry-mini-toolbar.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.entry-mini-toolbar__word {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 0.5rem 0 0.25rem;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  color: var(--text-primary, #212529);
}

.entry-mini-toolbar__btn {
  background: transparent;
  border: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #6c757d);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.entry-mini-toolbar__btn:hover,
.entry-mini-toolbar__btn:focus-visible {
  background-color: var(--hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--text-primary, #212529);
  outline: none;
}

.entry-mini-toolbar__btn:focus-visible {
  box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd);
}

/* UX-1: native details provide keyboard and screen-reader disclosure without
 * a JavaScript lifecycle dependency. */
.entry-disclosure {
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: 0.5rem;
  background: var(--bg-surface, #fff);
  padding: 0.75rem;
}

.entry-disclosure__summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text-primary, #212529);
  margin: -0.15rem 0 0.75rem;
}

.entry-disclosure:not([open]) .entry-disclosure__summary {
  margin-bottom: -0.15rem;
}

.entry-disclosure__summary:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 3px;
}

/* On very narrow screens, drop the headword chip so the toolbar stays compact. */
@media (max-width: 420px) {
  .entry-mini-toolbar__word {
    display: none;
  }
  .entry-mini-toolbar {
    bottom: 0.75rem;
    padding: 0.3rem 0.45rem;
  }
}

/* Don't compete with the back-to-top button on screens that have one. */
@media (min-width: 992px) {
  .entry-mini-toolbar {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    transform: translate(0, 1rem);
  }
  .entry-mini-toolbar.is-visible {
    transform: translate(0, 0);
  }
}

/* -------------------------------------------------------------------------
 * UX-11 — Filters as a proper bottom sheet on mobile.
 * The search page already uses Bootstrap's offcanvas-lg + offcanvas-bottom on
 * #advancedFiltersPanel; this adds the visual affordances (drag handle, top
 * radii, elevated shadow) that make it read as a bottom sheet, plus a touch
 * of polish for the existing "Apply Filters" sticky footer.
 * ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  #advancedFiltersPanel.offcanvas-bottom {
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.18);
  }

  /* Drag-handle pill at the top of the sheet. Pure visual affordance — the
   * offcanvas itself still closes via the existing close button / backdrop. */
  #advancedFiltersPanel.offcanvas-bottom::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.18);
    margin: 0.5rem auto 0;
  }
}


/* ===== components/recent-updates.css ===== */

/* Recent Updates Notification CSS */

.notification-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  cursor: pointer;
}

.notification-toggle:hover,
.notification-toggle:focus {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-1px);
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--header-bg, #7a1f1f);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.recent-updates-offcanvas {
  width: 380px;
  max-width: 90vw;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 1045;
}

/* This backdrop is owned by the app shell instead of Bootstrap's offcanvas
   instance, which prevents a stale, opaque backdrop after hx-boost swaps. */
.recent-updates-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0, 0, 0, 0.32);
}

body.recent-updates-open {
  overflow: hidden;
}

/* Flat brand maroon instead of a red gradient square — the gradient read as
   its own separate accent color next to the site's one brand color used
   everywhere else. */
.updates-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-primary-500, #550000);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* A hairline between entries instead of each one being its own bordered,
   shadowed, hover-lifting card — six categories each in a different filled
   color (blue/teal/purple/orange/two grays) plus a yellow-washed "pinned"
   variant read as a lot of unrelated colors in a 380px-wide panel. Category
   is still legible from its own icon + label; it doesn't need a hue too. */
.update-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 0;
  padding: 0.85rem 0.1rem;
  box-shadow: none;
}

.update-card:hover {
  border-color: var(--color-gray-200, #e2e8f0);
  box-shadow: none;
}

.updates-timeline .update-card:last-child {
  border-bottom: 0;
}

/* Pinned still reads as different — a rule at the left, not a filled wash
   over the whole card. */
.update-card.pinned {
  border-left: 2px solid var(--color-primary-300, #94a3b8);
  background: transparent;
  padding-left: 0.75rem;
}

.update-date-badge {
  font-size: 0.75rem;
  color: var(--color-gray-500, #64748b);
  font-weight: 500;
}

/* One quiet bordered-pill treatment for every category, matching .ed-tag
   elsewhere on the site, instead of six different filled colors. */
.category-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  color: var(--color-gray-600, #475569);
}

.category-badge.category-words,
.category-badge.category-examples,
.category-badge.category-corpus,
.category-badge.category-grammar,
.category-badge.category-system,
.category-badge.category-other {
  background: transparent;
  color: var(--color-gray-600, #475569);
}

/* Pinned keeps its own badge color — it is a real, separate signal
   ("read this one first"), unlike the six category hues which coded nothing
   the label text didn't already say. */
.badge.bg-warning {
  background-color: var(--color-primary-50, #f8fafc) !important;
  color: var(--color-primary-500, #550000) !important;
  border: 1px solid var(--color-primary-200, #cbd5e1);
}

.update-card-title {
  color: var(--color-gray-900, #0f172a);
  font-size: 0.92rem;
  line-height: 1.35;
}

.update-card-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-gray-600, #475569);
}

/* Same bordered-pill treatment as the category badges — words/examples
   metrics no longer need their own blue/teal pair to read as "a count". */
.metric-pill {
  font-size: 0.73rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  color: var(--color-gray-600, #475569);
}

.metric-pill.metric-words,
.metric-pill.metric-examples {
  background: transparent;
  color: var(--color-gray-600, #475569);
}

/* The "new update" toast's own header — was Bootstrap's bg-danger (red,
   the site's error color, for a banner announcing something positive). */
.toast-header-brand {
  background-color: var(--color-primary-500, #550000);
}