/* Digital Greenhouse — articles.css
   Shared styling for the /articles/* section. Token-only (no new colours) so
   the site-wide light/dark theme remaps everything automatically. Loaded
   per-page on article pages only (in-body <link>), like tools.css.          */

/* ------------------------------------------------------------- Hub ---- */
.articles-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin: 0 0 var(--space-6);
}
.articles-search { flex: 1 1 260px; }
.articles-search input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-base);
}
.articles-search input:focus { outline: 3px solid var(--color-emerald); outline-offset: 2px; }

.article-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.article-filter {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--color-ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.article-filter:hover { border-color: var(--color-sprout); color: var(--color-emerald); }
.article-filter[aria-pressed="true"] { background: var(--color-emerald); color: #fff; border-color: var(--color-emerald); }
.article-filter:focus-visible { outline: 3px solid var(--color-emerald); outline-offset: 2px; }

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}
.article-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
a.article-card:hover { transform: translateY(-3px); border-color: var(--color-sprout); box-shadow: var(--shadow); color: var(--color-ink); }
.article-card__topic {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-emerald);
}
[data-theme="dark"] .article-card__topic { color: var(--color-sprout); }
.article-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); line-height: 1.25; color: var(--color-ink); }
[data-theme="dark"] .article-card__title { color: var(--text); }
.article-card__blurb { color: var(--text-muted); font-size: var(--fs-sm); flex: 1; }
.article-card__meta { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); }
.articles-empty { padding: var(--space-7); text-align: center; color: var(--text-muted); }

/* ---- Card thumbnails (theme-aware), used by the /learn and /articles hubs ----
   One small inline-SVG diagram per card, kept in a <template> on the hub page
   and matched to a card by data-thumb="<slug>". A card without a drawing
   simply renders as a plain text card. */
.article-card--thumb { overflow: hidden; }
.learn-thumb {
  display: block;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-3);
  background: var(--color-mist);
  border-bottom: 1px solid var(--color-line);
  --lt-ink: #0B1F17;
  --lt-metal: #c5d0ca;
  --lt-void: #1d2c25;
  --lt-plastic: #f6f8f7;
  --lt-dim: #5b6b62;
  --lt-ok: #0E5C3A;
  --lt-bad: #A84A20;
}
[data-theme="dark"] .learn-thumb {
  --lt-ink: #eaf3ed;
  --lt-metal: #8a9b93;
  --lt-void: #06110c;
  --lt-plastic: #dfe7e2;
  --lt-dim: rgba(234, 243, 237, 0.7);
  --lt-ok: #3FB37F;
  --lt-bad: #F0876B;
}
.learn-thumb svg { display: block; width: 100%; height: auto; }
.learn-thumb .t-m { fill: var(--lt-metal); stroke: var(--lt-ink); stroke-width: 1.5; stroke-linejoin: round; }
.learn-thumb .t-v { fill: var(--lt-void); }
.learn-thumb .t-p { fill: var(--lt-plastic); stroke: var(--lt-ink); stroke-width: 1.2; stroke-linejoin: round; }
.learn-thumb .t-g { fill: #C8A24A; }
.learn-thumb .t-gs { fill: none; stroke: #C8A24A; stroke-width: 2.5; stroke-dasharray: 3 2; }
.learn-thumb .t-d { fill: none; stroke: var(--lt-dim); stroke-width: 1; }
.learn-thumb .t-t { fill: var(--lt-dim); font: 600 11px var(--font-sans); text-anchor: middle; }
.learn-thumb .t-t.t-s { text-anchor: start; }
.learn-thumb .t-t.t-e { text-anchor: end; }
.learn-thumb .t-t.t-k { fill: var(--lt-ink); font-weight: 700; }
.learn-thumb .t-t.t-ok { fill: var(--lt-ok); font-weight: 700; }
.learn-thumb .t-t.t-bad { fill: var(--lt-bad); font-weight: 700; }
.learn-thumb .t-ln { fill: none; stroke: var(--lt-ink); stroke-width: 4; stroke-linecap: round; }
.learn-thumb .t-okl { fill: none; stroke: var(--lt-ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.learn-thumb .t-badl { fill: none; stroke: var(--lt-bad); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.learn-thumb .t-rot { stroke-width: 3; }
.learn-thumb .t-ik { fill: var(--lt-ink); }
.learn-thumb .t-okf { fill: var(--lt-ok); }
.learn-thumb .t-badf { fill: var(--lt-bad); }
.learn-thumb .t-spot { fill: var(--lt-bad); fill-opacity: 0.25; stroke: var(--lt-bad); stroke-width: 2; }
.learn-thumb .t-drum { fill: var(--lt-metal); fill-opacity: 0.45; stroke: var(--lt-ink); stroke-width: 1.5; }
/* Bit cells keep a light face in both themes, so their digits stay dark. */
.learn-thumb .t-cell { fill: #f6f8f7; stroke: var(--lt-ink); stroke-width: 1.2; }
.learn-thumb .t-cell--par { fill: #cfe9db; }
.learn-thumb .t-cell--flip { fill: #f8d9cf; stroke: var(--lt-bad); stroke-width: 2; }
.learn-thumb .t-bit { fill: #1d2c25; font: 700 13px var(--font-sans); text-anchor: middle; }
.learn-thumb .t-bit--flip { fill: #8f3414; }

/* -------------------------------------------------------- Article page ---- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.article-meta strong { color: var(--color-ink-2); font-weight: 600; }
[data-theme="dark"] .article-meta strong { color: var(--text); }

.article-body { padding-block: var(--space-7) var(--space-8); }
.article-body .prose { margin-inline: auto; }

/* Prose extensions the base .prose doesn't cover */
.prose blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-sprout);
  background: var(--color-mist);
  border-radius: var(--radius-sm);
  color: var(--color-ink-2);
  font-size: var(--fs-lg);
}
[data-theme="dark"] .prose blockquote { color: var(--text); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--color-cream-2);
  padding: 2px 6px;
  border-radius: 4px;
}
.prose hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-7) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-line); vertical-align: top; }
.prose th { font-weight: 600; color: var(--color-ink); }
[data-theme="dark"] .prose th { color: var(--text); }
.prose td { color: var(--color-ink-2); }
[data-theme="dark"] .prose td { color: var(--text); }
.prose .table-scroll { overflow-x: auto; }

/* Data grid: full cell borders + zebra rows for data-heavy reference tables
   (frequency lists, channel plans, spec tables). Opt in with class="data-grid". */
.prose table.data-grid {
  --grid-line: #c9d6cd;
  --grid-head: var(--color-mist);
  --grid-zebra: #edf3ef;
  --grid-hover: #dfece4;
  border: 1px solid var(--grid-line);
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .prose table.data-grid {
  --grid-line: rgba(234, 243, 237, 0.18);
  --grid-head: rgba(63, 179, 127, 0.16);
  --grid-zebra: rgba(234, 243, 237, 0.045);
  --grid-hover: rgba(63, 179, 127, 0.12);
}
.prose table.data-grid th,
.prose table.data-grid td { border: 1px solid var(--grid-line); padding: var(--space-2) var(--space-3); }
.prose table.data-grid th { background: var(--grid-head); }
.prose table.data-grid tr:nth-child(even) td { background: var(--grid-zebra); }
.prose table.data-grid tr:hover td { background: var(--grid-hover); }
.prose table.data-grid td:last-child a { white-space: nowrap; }
.prose .table-scroll > table.data-grid { margin: 0; }
.prose .table-scroll:has(> table.data-grid) { margin: var(--space-5) 0; }

/* Lead paragraph — the answer-first opener */
.prose .article-lead { font-size: var(--fs-lg); color: var(--color-ink); }
[data-theme="dark"] .prose .article-lead { color: var(--text); }

/* Callout — pairs-with box for downloads, tools and services */
.article-callout {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-sprout);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--color-mist);
}
.article-callout h3 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
.article-callout p { margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--color-ink-2); }
[data-theme="dark"] .article-callout p { color: var(--text); }
.article-callout p:last-child { margin-bottom: 0; }
.article-callout .btn + .btn { margin-left: var(--space-2); }

/* Related grid at the foot of each article */
.article-related { max-width: 70ch; margin: var(--space-8) auto 0; }
.article-related h2 { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.article-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.article-related-grid .article-card__title { font-size: var(--fs-lg); }