/* Glossary leaf styles — palette tokens aliased to theme.css's site palette
     so the leaf pages share the cream/amber site look. Element-level rules
     below use --bg / --text / --accent / --rule to keep this stylesheet
     readable; the resolved values come from theme.css. */
  :root {
    --bg: var(--surface-page);
    --text: var(--text-primary);
    --accent: var(--color-primary);
    --rule: var(--surface-divider);
  }
  /* Body/reset/container provided by theme.css. */
  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
  .breadcrumb a, .breadcrumb [aria-current] { white-space: nowrap; }
  .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.12s ease; }
  .breadcrumb a:hover { color: var(--accent); }
  .breadcrumb .sep { opacity: 0.5; }
  .breadcrumb [aria-current] { color: var(--text); }
  /* Glossary leaf back-link inherits .back-link sizing/margin from theme.css
     (responsive top:bottom = 2:1 rule). Only the accent color differs. */
  .back-link { color: var(--accent); text-decoration: none; }
  .back-link:hover { opacity: 0.8; }
  .back-link svg { stroke: currentColor; }
  h1 { font-size: 28px; line-height: 1.25; margin-bottom: 24px; font-weight: 700; }
  h1 .en { color: var(--text-muted); font-weight: 500; font-size: 0.85em; }
  .definition-block { padding: 20px; background: rgba(180, 83, 9, 0.04); border-left: 3px solid var(--accent); border-radius: 4px; margin-bottom: 24px; }
  .definition-block p { margin-bottom: 12px; }
  .definition-block p:last-child { margin-bottom: 0; }
  .definition-en { font-size: 0.95em; color: var(--text-muted); }
  .source-cite { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
  .source-cite a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .source-cite a:hover { text-decoration: none; }
  /* contextual sibling cross-link — a normal prose sentence whose term links are visible */
  .crosslink { color: var(--text-secondary); }
  .crosslink a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .crosslink a:hover { text-decoration: none; }
  .content-body section { margin-bottom: 28px; }
  /* Glossary content column — fills the .container content box so its left edge
     sits at the logo's x and its right edge aligns to the header download button
     (vs the narrow shared .legal-container 720px reading column used by legal pages). */
  .glossary-col { max-width: none; margin: 0; }
  /* FAQ aligns to the content column's left edge (not centered like on the homepage) */
  .glossary-col .faq-block,
  .glossary-col .faq-list { max-width: none; margin-left: 0; margin-right: 0; }
  h2 { font-size: 20px; margin-bottom: 12px; font-weight: 600; }
  blockquote { border-left: 3px solid var(--rule); padding: 8px 16px; margin: 12px 0; font-style: italic; color: var(--text-muted); }
  blockquote cite { display: block; font-size: 13px; font-style: normal; margin-top: 6px; }
  .related-terms { font-size: 15px; color: var(--text-muted); padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .related-terms a { color: var(--accent); text-decoration: none; }
  .related-terms a:hover { text-decoration: underline; }
  .cta-block { padding: 20px; background: #FFFFFF; border: 1px solid var(--rule); border-radius: 8px; margin-bottom: 24px; }
  .cta-block .cta-link { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 600; text-decoration: none; }
  .cta-block .cta-link:hover { text-decoration: underline; }
  .founder-note { padding: 20px 24px; background: rgba(180, 83, 9, 0.06); border-radius: 8px; margin-top: 32px; }
  .founder-note blockquote { border: none; padding: 0; font-style: normal; color: var(--text); font-size: 16px; }
  .founder-note cite { display: block; text-align: right; font-size: 14px; color: var(--text-muted); font-style: normal; margin-top: 12px; }

  /* Founder block — design's .hot-take (left amber-accent card + avatar byline).
     Ported from the design system's content.css; fills the glossary content
     column (vs the design's 760px measure) to keep the button-aligned width. */
  .hot-take { max-width: none; margin: 32px 0 0; padding: 28px 32px; background: var(--surface-card); border-radius: 20px; border-left: 4px solid var(--color-amber); box-shadow: var(--shadow-card); }
  @media (min-width: 768px) { .hot-take { padding: 32px 36px; } }
  .hot-take-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-amber); margin: 0 0 12px; }
  .hot-take p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 14px; }
  .hot-take .lead { font-size: 17px; color: var(--text-primary); }
  .hot-take p:last-of-type { margin-bottom: 0; }
  .hot-take-byline { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--surface-divider); }
  .hot-take-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--color-amber-light); color: var(--color-amber); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
  .hot-take-byline .who { font-size: 14px; font-weight: 600; color: var(--text-primary); }
  .hot-take-byline .role { font-size: 13px; color: var(--text-muted); margin-top: 1px; }
  dfn { font-style: normal; font-weight: 500; }

  /* Mini page-masthead (hero-less pages) — light band the transparent navbar
     floats over; warm content body sits below it. Mirrors homepage hero behaviour. */
  .page-masthead { background: var(--surface-page); border-bottom: 1px solid var(--surface-divider); padding: 88px 0 30px; }
  @media (min-width: 768px) { .page-masthead { padding: 96px 0 40px; } }
  .page-masthead .breadcrumb { margin-bottom: 16px; }
  .page-masthead h1 { margin-bottom: 12px; }
  .page-masthead .lede { margin-bottom: 0; max-width: 640px; }
  .content-body { padding: 40px 0 64px; }
  @media (min-width: 768px) { .content-body { padding: 52px 0 72px; } }
  /* warm article band — visually separates the content above from the FAQ below */
  .content-body.is-warm { background: var(--surface-warm); }
  /* glossary-hub "Психология" band — lighter (FAQ tone) so it separates the
     warm "Сам язык" band above from the warm CTA below. */
  .content-body.glossary-psych { background: var(--surface-page); padding-top: 8px; }
  p { margin-bottom: 16px; line-height: 1.7; }
  section p:last-child { margin-bottom: 0; }
  .lead-def { font-size: 17px; }
  .lead-def strong { color: var(--text); }
  .canon-term { font-size: 14px; color: var(--text-muted); font-style: italic; margin-bottom: 12px; }
  .canon-term b { color: var(--text); font-style: normal; }

  /* Levels table (CEFR-style rich block) */
  .table-scroll { overflow-x: auto; margin: 16px 0 8px; -webkit-overflow-scrolling: touch; }
  .data-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 540px; }
  .data-table caption { text-align: left; font-size: 13px; color: var(--text-muted); font-style: italic; margin-bottom: 12px; }
  .data-table th, .data-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .data-table thead th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); background: rgba(180,83,9,0.04); border-bottom: 2px solid var(--rule); }
  .data-table tbody tr:hover { background: rgba(180,83,9,0.025); }
  .data-table .lvl { white-space: nowrap; font-weight: 700; color: var(--accent); }
  .data-table .lvl small { display: block; font-weight: 600; font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
  .data-table .lvl-name { white-space: nowrap; font-weight: 600; color: var(--text); }

  /* Authoritative quote with original + translation */
  .auth-quote { background: #FFFFFF; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 8px; padding: 22px 24px; margin: 16px 0; }
  .auth-quote .q-ru { font-size: 16px; line-height: 1.6; color: var(--text); margin-bottom: 12px; }
  .auth-quote .q-en { font-size: 14px; line-height: 1.55; color: var(--text-muted); font-style: italic; margin-bottom: 12px; }
  .auth-quote cite { display: block; font-size: 13px; font-style: normal; color: var(--text-muted); }
  .auth-quote cite a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
  .auth-quote cite a:hover { text-decoration: none; }

  /* Inline test link — amber text link with arrow (matches .cta-link / related links) */
  .inline-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 16px; text-decoration: none; }
  .inline-cta:hover { text-decoration: underline; }
  .inline-cta svg { width: 16px; height: 16px; }

  /* FAQ + final CTA: standard shared components (theme.css) */
  /* .site-nav / .site-footer rules removed — leaf pages now use the shared
     Header.astro + Footer.astro components (palette unified to site theme). */

  /* Glossary hub additions — only used by /глоссарий/ index, not leaves. */
  .lede { color: var(--text-muted); margin-bottom: 32px; }
  .glossary-hub h2 { font-size: 14px; margin-top: 32px; margin-bottom: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
  .term-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
  .term-card { padding: 16px 20px; background: #FFFFFF; border: 1px solid var(--rule); border-radius: 8px; transition: border-color 0.15s; }
  .term-card:hover { border-color: var(--accent); }
  .term-card a { text-decoration: none; color: inherit; display: block; }
  .term-name { font-weight: 600; font-size: 18px; margin-bottom: 4px; }
  .term-en { color: var(--text-muted); font-weight: 400; font-size: 0.85em; }
  .term-summary { color: var(--text-muted); font-size: 15px; }
  .footnote { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--text-muted); }