/* theme.css and data-page.css are loaded as separate <link> tags in the
   HTML (parallel, render-blocking) instead of @import chains — a chained
   import painted the page unstyled on slow connections. Load order:
   theme -> data-page -> this file. */
/* ---------------------------------------------------------------
   Newsletters module — page chrome (header/toolbar/tabs/select)
   comes from data-page.css; this file only holds what is specific
   to newsletters. The edition content itself is the pipeline's own
   markup (see sync/newsletter_sync.py); everything under
   .newsletter-doc restyles those classes to this theme.
   ------------------------------------------------------------- */

:root {
  /* Full-width like the bookshelf: the section columns adapt to the
     browser width (see the column-width rules below). */
  --page-max: none;
  --warn: #e0a458;
}

.ascii-banner {
  /* 57 monospace chars wide (~34.5em at 0.6em/char): scale with the
     viewport on narrow screens, cap at 16px like the other banners. */
  font-size: min(16px, calc((100vw - 2.5rem) / 34.5));
}

.feed-note { font-size: 0.75rem; color: var(--text-muted); }

/* Edition date: same pattern as bookshelf SYNCED — label muted, date faint */
.edition-dateline .sync-label { color: var(--text-muted); }

/* Category chips break to their own row so the first row (feed tabs +
   edition picker + dateline) stays compact like the bookshelf toolbar. */
.tab-bar-categories { flex-basis: 100%; }

/* Chips follow their category hue: a hint of it at rest, full when active */
.tab-bar-categories .tab { color: var(--cat, var(--text-muted)); }
.tab-bar-categories .tab.active { background: var(--cat, var(--accent)); color: var(--bg-elevated); }
/* Keyboard focus ring (base in data-page.css) takes the chip's hue too */
.tab-bar-categories .tab:focus-visible {
  color: var(--cat, var(--text));
  outline-color: var(--cat, var(--accent));
}

main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.2rem 2rem 4rem;
}

@media (max-width: 640px) {
  main { padding: 1rem 1.25rem 3rem; }
}

/* ---------------------------------------------------------------
   Edition content — the newsletter's own classes, restyled.
   Same structure and content as the emailed PDF, this site's skin.
   ------------------------------------------------------------- */

.newsletter-doc { line-height: 1.55; font-size: 0.85rem; }
/* Links must read as links: accent blue, like the bookshelf's Read more. */
.newsletter-doc a { color: var(--accent); text-decoration: none; }
.newsletter-doc a:hover { text-decoration: underline; }
.newsletter-doc table { border-collapse: collapse; }
.newsletter-doc table.page-wrap { width: 100%; }
.newsletter-doc table.page-wrap td { padding: 0; vertical-align: top; }
.newsletter-doc table.page-wrap thead td,
.newsletter-doc table.page-wrap tfoot td { height: 12px; }

/* The newsletter's own masthead is removed in app.js (the feed tab already
   names it); only the dateline survives. */
.newsletter-doc .dateline {
  font-size: 0.68rem; color: var(--text-faint);
  letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 0 18px;
}

/* Same treatment as the bookshelf's highlight cards: an elevated
   bordered block, no accent bar. The page CRT runs over it like over
   everything else. */
.newsletter-doc .highlights {
  /* longhand on purpose: shorthand would wipe the .crt-light lines */
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.newsletter-doc .highlights .label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent); margin-bottom: 10px;
}
/* The pipeline's hl table is rebuilt as .hl-row items in app.js so each
   headline is selectable like the news items below. The circled numbers
   become [n] key hints — the same idiom as the landing menu's [B]/[G]. */
.newsletter-doc .highlights .hl-row {
  display: flex;
  align-items: baseline;
  padding: 3px 8px 4px;
}
.newsletter-doc .highlights .key-num {
  flex: 0 0 32px;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--mono);
  font-size: 0.75rem;
}
.newsletter-doc .highlights .hl-txt {
  font-size: 0.85rem; font-weight: 600; line-height: 1.4;
  color: var(--text); padding-left: 4px;
}
.newsletter-doc .highlights .hl-txt a:hover { color: var(--accent); }

/* Hue-coded categories: --cat/--cat-soft/--cat-dim are set per section in
   app.js from the category palette; everything falls back to the accent. */
.newsletter-doc .section { margin-top: 18px; }
.newsletter-doc .section-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--cat, var(--accent));
  padding-bottom: 4px; border-bottom: 1px dashed var(--cat-dim, var(--border));
  margin-bottom: 8px;
}
/* Column count adapts to browser width, like the bookshelf grid. */
.newsletter-doc .section-grid { columns: 24rem; column-gap: 26px; }

.newsletter-doc .article { break-inside: avoid; padding: 7px 0 9px; }
/* Item titles carry their section's category hue (--cat is set per section
   in app.js); hover pops them to plain text-white for contrast. */
.newsletter-doc .article .title {
  font-size: 0.9rem; font-weight: 700; color: var(--cat, var(--text));
  line-height: 1.25; display: block; margin-bottom: 3px;
}
.newsletter-doc .article a.title:hover,
.newsletter-doc .article .title a:hover { color: var(--text); }
.newsletter-doc .article .tldr { font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); }
.newsletter-doc .article .src { font-size: 0.68rem; color: var(--text-faint); display: block; margin-top: 3px; }
.newsletter-doc .article .src a:hover { color: var(--accent); }

.newsletter-doc ul.buzz { list-style: none; padding: 0; margin: 0; columns: 24rem; column-gap: 26px; }
.newsletter-doc ul.buzz li { break-inside: avoid; padding: 7px 0 9px; line-height: 1.45; }
.newsletter-doc ul.buzz li .title { font-size: 0.85rem; font-weight: 700; color: var(--cat, var(--text)); line-height: 1.25; }
.newsletter-doc ul.buzz li .tldr-text { font-size: 0.78rem; color: var(--text-muted); display: inline; }
.newsletter-doc ul.buzz li .meta { display: block; font-size: 0.6rem; color: var(--text-faint); margin-top: 3px; letter-spacing: 0.2px; }
.newsletter-doc ul.buzz li .meta a:hover { color: var(--accent); }

.newsletter-doc .trending { columns: 24rem; column-gap: 26px; }
.newsletter-doc .repo { display: block; padding: 7px 0; break-inside: avoid; }
.newsletter-doc .repo .name { font-size: 0.85rem; font-weight: 700; color: var(--cat, var(--text)); display: block; }
.newsletter-doc .repo:hover .name { color: var(--text); }
.newsletter-doc .repo .desc { font-size: 0.78rem; color: var(--text-muted); display: block; margin: 2px 0; line-height: 1.4; }
.newsletter-doc .repo .stats { font-family: var(--mono); font-size: 0.68rem; color: var(--text-faint); }

.newsletter-doc .footer {
  margin-top: 24px; padding-top: 12px;
  border-top: none;
  font-size: 0.68rem; text-align: center; color: var(--text-faint);
}

/* ---------------------------------------------------------------
   Item selector — whole news items are click targets, with the same
   hover treatment as bookshelf cards. :active mirrors :hover so a
   tap on mobile flashes the selection before the link opens.
   ------------------------------------------------------------- */
/* Selection styling (category hue via --cat, line-free lift) comes
   from theme.css .selectable; this block only shapes the hit area. */
.newsletter-doc .article,
.newsletter-doc ul.buzz li,
.newsletter-doc .hl-row,
.newsletter-doc a.repo {
  padding: 7px 8px 9px;
  margin: 0 -8px;
}
.newsletter-doc a.repo:hover { text-decoration: none; }