/* ==========================================================================
   Single glossary term page. Mobile First. Tokens per design-tokens.json —
   reuses this theme's existing space, color and ease-entrance tokens,
   no hardcoded accent anywhere. Depends on single-post.css for the shared
   .article-callout component (reused, not duplicated, per the handoff's
   explicit "reuse the same content component family as Magazine articles").
   ========================================================================== */
:root {
  --gt-radius-small: 12px;
  --gt-radius-medium: 16px;
  --gt-radius-large: 22px;
  --gt-shadow: 0 10px 32px rgba(17, 17, 17, .05);
}

.glossary-term-page { padding-block: var(--space-8) var(--space-12); }
.glossary-term-container { width: min(1100px, 100% - 32px); margin-inline: auto; }

/* ---------- Breadcrumb ---------- */
.glossary-term-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--color-text-secondary); }
.glossary-term-breadcrumb a { color: var(--color-text-secondary); }
.glossary-term-breadcrumb a:hover { color: var(--color-accent); }
.glossary-term-breadcrumb [aria-current] { color: var(--color-text-primary); font-weight: 700; }

/* ---------- Hero ---------- */
.glossary-term-hero { margin-top: var(--space-5); }
.glossary-term-hero__category {
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent);
}
.glossary-term-hero__title {
  margin: var(--space-3) 0 0;
  font-size: clamp(2.125rem, 9vw, 2.875rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.glossary-term-hero__fullname { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: 1.0625rem; }

/* ---------- Short definition ---------- */
.glossary-term-definition {
  margin-top: var(--space-6);
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--color-accent);
}
.glossary-term-definition__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; color: var(--color-text-secondary); text-transform: uppercase; }
.glossary-term-definition__text { margin: var(--space-2) 0 0; font-size: 1.25rem; line-height: 1.6; color: var(--color-text-primary); }

/* ---------- Term facts ---------- */
.glossary-term-facts {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gt-radius-medium);
}
.glossary-term-facts__item { display: flex; flex-direction: column; gap: 2px; }
.glossary-term-facts__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: .03em; color: var(--color-text-secondary); text-transform: uppercase; }
.glossary-term-facts__value { font-size: 0.875rem; font-weight: 700; color: var(--color-text-primary); }

/* ---------- Reading column (TOC + content, single-column, never sidebar) ---------- */
.glossary-term-reading { margin-top: var(--space-8); max-width: 820px; }

/* ---------- Inline TOC ---------- */
.glossary-term-toc {
  border: 1px solid var(--color-border);
  border-radius: var(--gt-radius-medium);
  background: var(--color-surface);
  overflow: hidden;
}
.glossary-term-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: none;
  background: none;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  cursor: pointer;
}
.glossary-term-toc__toggle-icon { transition: transform 180ms var(--ease-entrance); }
.glossary-term-toc.is-collapsed .glossary-term-toc__toggle-icon { transform: rotate(-90deg); }
.glossary-term-toc__list { display: block; padding: 0 var(--space-5) var(--space-4); }
.glossary-term-toc.is-collapsed .glossary-term-toc__list { display: none; }
.glossary-term-toc__link {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  font-size: var(--text-body-lg);
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms var(--ease-entrance), color 150ms var(--ease-entrance);
}
.glossary-term-toc__link:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }
.glossary-term-toc__number { color: var(--color-accent); font-weight: 700; flex-shrink: 0; }

/* ---------- Content typography ---------- */
.glossary-term-content { margin-top: var(--space-6); font-size: var(--text-body-lg); line-height: 1.75; color: var(--color-text-primary); }
.glossary-term-content > * + * { margin-top: var(--space-4); }
/* H2/H3 share one size (--heading-content, main.css) per the 2026-08-19
   Design System decision — the visual difference between them comes from
   weight/spacing, not size (see single-post.css's article-content h2/h3
   for the same pattern). */
.glossary-term-content h2 { margin-top: var(--space-9); font-size: var(--heading-content); font-weight: var(--font-black); line-height: var(--leading-heading); }
.glossary-term-content h2:first-child { margin-top: 0; }
.glossary-term-content h3 { margin-top: var(--space-7); font-size: var(--heading-content); font-weight: var(--font-bold); line-height: var(--leading-heading); }
.glossary-term-content p { line-height: 1.8; }
/* Link styling (dotted+tooltip default, .term-tech bracket variant) now lives
   in single-post.css, which this page already loads as a dependency — see
   its "Inline link system" block. Keeping it in one place avoids the two
   files fighting over the same selector. */
.glossary-term-content ul,
.glossary-term-content ol { padding-inline-start: var(--space-6); }
.glossary-term-content li { line-height: 1.75; }
.glossary-term-content li + li { margin-top: var(--space-2); }
.glossary-term-content li::marker { color: var(--color-accent); font-weight: 700; }
.glossary-term-content img { max-width: 100%; height: auto; border-radius: var(--gt-radius-small); }
.glossary-term-content figcaption { margin-top: var(--space-2); font-size: 0.8125rem; color: var(--color-text-secondary); text-align: center; }

/* Shared glossary table look (2026-08-27, revised to match .article-content
   table in single-post.css — same graphic language and same mobile-scroll
   containment as the blog's real table component, not the ad-hoc inline
   styles some older posts carry). display:block + overflow-x:auto on the
   <table> itself scrolls the table within its own box on narrow screens
   instead of letting it push the whole page wider; border-radius +
   overflow:hidden clips the scrolling content to that rounded box. */
.glossary-term-content table {
  display: inline-block;
  width: auto;
  max-width: 100%;
  vertical-align: top;
  margin-block: var(--space-6);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--gt-radius-small);
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.9375rem;
  box-shadow: var(--gt-shadow);
  height: auto !important;
}
.glossary-term-content table tr { height: auto !important; }
.glossary-term-content table th,
.glossary-term-content table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: start;
  white-space: normal;
  height: auto !important;
}
.glossary-term-content table tr:last-child td { border-bottom: none; }
.glossary-term-content table th { background: var(--color-accent); color: #fff; font-weight: 700; }
.glossary-term-content table th:first-child { border-start-start-radius: var(--gt-radius-small); }
.glossary-term-content table th:last-child { border-start-end-radius: var(--gt-radius-small); }
/* Header row hand-typed as plain <td><strong> instead of semantic <th> —
   same real-world pattern single-post.css guards against. Scoped to a real
   2nd row so it never collides with the single-row highlight pattern below. */
.glossary-term-content table:has(tr:nth-child(2)):not(:has(th)) tr:first-child td {
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
}
.glossary-term-content table tr:nth-child(even) td { background: var(--color-page-bg); }

/* Single-row "highlight" table — same exception as single-post.css: a
   hand-typed one-row table used to visually highlight a line, not real
   tabular data, so it should read like a normal block, not scroll sideways. */
.glossary-term-content table:has(> tbody > tr:only-child):not(:has(th)),
.glossary-term-content table:has(> tr:only-child):not(:has(th)) {
  display: block;
  width: auto;
  white-space: normal;
  overflow-x: visible;
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
  border-inline-start: 4px solid var(--color-accent);
}
.glossary-term-content table:has(> tbody > tr:only-child):not(:has(th)) tr,
.glossary-term-content table:has(> tr:only-child):not(:has(th)) tr { display: block; }
.glossary-term-content table:has(> tbody > tr:only-child):not(:has(th)) td,
.glossary-term-content table:has(> tr:only-child):not(:has(th)) td {
  display: block;
  padding: var(--space-5) var(--space-6);
  border-bottom: none;
  font-weight: var(--font-regular);
  font-size: var(--text-body-lg);
}

.glossary-term-content pre {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  overflow-x: auto;
  padding: var(--space-4);
  background: var(--color-text-primary);
  color: #F4F1EC;
  border-radius: var(--gt-radius-small);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}
.glossary-term-content code {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .9em;
}
.glossary-term-content :not(pre) > code {
  padding: 2px 6px;
  background: var(--color-page-bg);
  border-radius: 6px;
}
.glossary-term-content pre code { padding: 0; background: none; }

/* ---------- FAQ ---------- */
.glossary-term-faq { margin-top: var(--space-9); }
.glossary-term-faq__title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 900; }
.glossary-term-faq__list { margin-top: var(--space-4); border-top: 1px solid var(--color-border); }
.glossary-term-faq__item { border-bottom: 1px solid var(--color-border); }
.glossary-term-faq__heading { margin: 0; }
.glossary-term-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) 0;
  border: none;
  background: none;
  text-align: start;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  cursor: pointer;
}
.glossary-term-faq__icon { flex-shrink: 0; transition: transform 180ms var(--ease-entrance); }
.glossary-term-faq__question[aria-expanded="true"] .glossary-term-faq__icon { transform: rotate(180deg); }
.glossary-term-faq__answer { padding: 0 0 var(--space-4); font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); }
.glossary-term-faq__answer[hidden] { display: none; }

/* ---------- Sources ---------- */
.glossary-term-sources { margin-top: var(--space-9); }
.glossary-term-sources__title { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 900; }
.glossary-term-sources__list { margin-top: var(--space-3); padding-inline-start: var(--space-5); }
.glossary-term-sources__list li { font-size: 0.875rem; line-height: 1.7; }
.glossary-term-sources__list li + li { margin-top: var(--space-2); }
.glossary-term-sources__list a { color: var(--color-accent); }
.glossary-term-sources__publisher,
.glossary-term-sources__accessed { color: var(--color-text-secondary); }

/* ---------- Review notice ---------- */
.glossary-term-review-notice { margin-top: var(--space-6); font-size: 0.8125rem; color: var(--color-text-secondary); }

/* ---------- Related terms ---------- */
.glossary-related-terms { margin-top: var(--space-10); }
.glossary-related-terms__title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 900; }
.glossary-related-terms__grid { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.glossary-related-terms__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--gt-radius-medium);
  transition: box-shadow 180ms var(--ease-entrance), transform 180ms var(--ease-entrance);
}
.glossary-related-terms__card:hover { box-shadow: var(--gt-shadow); transform: translateY(-2px); }
.glossary-related-terms__category { font-size: 0.6875rem; font-weight: 700; color: var(--color-accent); }
.glossary-related-terms__name { font-size: 1.0625rem; font-weight: 900; }
.glossary-related-terms__def { font-size: 0.8125rem; color: var(--color-text-secondary); line-height: 1.55; }
.glossary-related-terms__arrow { position: absolute; inset-inline-start: var(--space-5); bottom: var(--space-4); color: var(--color-accent); transition: transform 180ms var(--ease-entrance); }
.glossary-related-terms__card:hover .glossary-related-terms__arrow { transform: translateX(-4px); }

/* ---------- Category hub ---------- */
.glossary-category-hub { margin-top: var(--space-6); }
.glossary-category-hub__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* ---------- Related magazine articles ---------- */
.glossary-term-section { margin-top: var(--space-10); }
.glossary-term-section__title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 900; }
.glossary-related-articles__grid { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr; gap: var(--space-4); }

/* ---------- Tablet, >=768px ---------- */
@media (min-width: 768px) {
  .glossary-term-facts { flex-direction: row; flex-wrap: wrap; }
  .glossary-term-facts__item { flex: 1 1 40%; min-width: 160px; }
  .glossary-related-terms__grid,
  .glossary-related-articles__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Desktop, >=1200px ---------- */
@media (min-width: 1200px) {
  .glossary-term-container { width: min(1100px, 100% - 64px); }
  .glossary-related-terms__grid,
  .glossary-related-articles__grid { grid-template-columns: repeat(3, 1fr); }
}
/* 2026-11-12 table row lines: the palette (galyamstudio-dynamic-colors) sets --color-border to the same cream as the page
   background (#f5f1eb), so the row dividers, the outline and the even-row tint defined above were invisible. These rules give
   data tables (2+ rows) a visible divider and a light tint, without changing the global --color-border token. Cells with their
   own inline borders or backgrounds are unaffected; single-row highlight tables are excluded by :has(tr:nth-child(2)). */
.glossary-term-content table:has(tr:nth-child(2)) { border-color: #d3cbbd; }
.glossary-term-content table:has(tr:nth-child(2)) th,
.glossary-term-content table:has(tr:nth-child(2)) td { border-bottom-color: #d3cbbd; }
.glossary-term-content table:has(tr:nth-child(2)) tr:nth-child(even) td { background: rgba(24, 24, 24, 0.045); }
/* 2026-11-12 table width: pasted content often carries an inline width (style="width:100%"). The table is inline-block, so its
   rounded frame took the full column width while the grid inside shrank to its content, leaving an empty strip inside the frame.
   Shrink-to-fit is this component's design (width:auto above), so it is enforced over the inline value. */
.glossary-term-content table { width: auto !important; }