/*
 * News Citations Kit — front-end styles.
 * Extracted verbatim (blocks only) from updater.news `assets/news.css`.
 *
 * Themeable via CSS custom properties only — no hardcoded font-family, so the
 * active theme owns typography. Single deliberate exception: citation pills use
 * a system MONO stack (Perplexity's citation design language).
 *
 * NEVER hardcode palette colors — everything binds to Blocksy's SEMANTIC :root
 * vars (links/buttons/borders/text), which the theme recomputes live from the
 * Customizer in both light and dark palettes. The hex fallbacks fire only if the
 * plugin ever runs without Blocksy.
 */

/* --- root var bindings for the article (from .news-article, news.css ~13) --- */
.news-article {
  --news-accent: var(--theme-link-initial-color, #106abf);
  --news-border: var(--theme-border-color, #e8ebed);
  --news-muted: var(--theme-text-color, #5e5e5e);
  --news-surface: var(--theme-palette-color-6, #f4f5f6);  /* no semantic surface var exists */
  --news-radius: 3px;  /* theme's general radius isn't exposed as a variable */
  --news-btn-radius: var(--theme-button-border-radius, 2px);
  --news-gap: 1rem;
}

/* --------------------------------- Summary / Report toggle (news.css ~23) --- */
.news-toggle {
  display: inline-flex;
  gap: 8px;
  margin-bottom: var(--news-gap);
}
.news-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid var(--news-border);
  background: transparent;
  color: var(--news-muted);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font: inherit;
  line-height: 1.2;
}
.news-tab__ico { flex: none; }
/* Active tab IS a button — wear exactly what the theme's buttons wear, so a
   customizer button restyle re-skins the toggle too (text/bg stay a
   theme-guaranteed contrast pair, incl. dark mode). */
.news-tab.is-active {
  background: var(--theme-button-background-initial-color, #106abf);
  color: var(--theme-button-text-initial-color, #ffffff);
  border-color: var(--theme-button-background-initial-color, #106abf);
}
/* Center the short/full switcher on phones. */
@media (max-width: 640px) {
  .news-toggle { display: flex; justify-content: center; }
}
.news-view[hidden] { display: none; }

/* --- Perplexity tint formula: every tier derived from the CURRENT text color
   at fixed alphas, bound to the theme's text color so it survives any palette
   change and dark mode. The static rgba() are pre-relative-color fallbacks.
   (from news.css ~92) --- */
.news-article, .news-cite-card, .news-sheet, .news-src-chip, .news-expander, .news-sharebox, .news-share, .wp-block-news-full-article {
  --news-text: var(--theme-text-color, #5e5e5e);
  --news-tint-faint: rgba(94, 94, 94, 0.035);
  --news-tint: rgba(94, 94, 94, 0.07);
  --news-tint-strong: rgba(94, 94, 94, 0.14);
  --news-secondary: rgba(94, 94, 94, 0.65);
}
@supports (color: rgb(from white r g b / 0.5)) {
  .news-article, .news-cite-card, .news-sheet, .news-src-chip, .news-expander, .news-sharebox, .news-share, .wp-block-news-full-article {
    --news-tint-faint: rgb(from var(--news-text) r g b / 0.035);
    --news-tint: rgb(from var(--news-text) r g b / 0.07);
    --news-tint-strong: rgb(from var(--news-text) r g b / 0.14);
    --news-secondary: rgb(from var(--news-text) r g b / 0.65);
  }
}

/* --- Inline citation pill (from news.css ~113) ---
   Pill at rest: quiet lowercase domain, NO favicon, baseline (not superscript).
   Measured: mono 10px/430, padding 3px 4.8px, radius 5px, "+N" at 50%. */
.news-cite { line-height: 0; }
.news-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  max-width: 25ch;
  padding: 0.3em 0.48em;
  margin: 0 0.15em;
  font-size: 0.625em;
  font-weight: 430;
  line-height: 1.375;
  white-space: nowrap;
  text-decoration: none;
  color: var(--news-text);
  background: var(--news-tint);
  border-radius: 5px;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
  user-select: none;
}
.news-pill:hover, .news-pill.is-open { background: var(--news-tint-strong); }
/* Pill text is real <code>, so its typography is owner-controlled from
   Customizer → Typography → Preformatted (Blocksy scopes the vars onto code
   elements; the fallbacks fire only without Blocksy). FAMILY and WEIGHT apply
   verbatim; SIZE applies at ×0.625 — the measured pill-to-code ratio (10px pills
   when Preformatted is 16px). */
.news-pill code {
  font-family: var(--theme-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  /* fallback 1.6em: without Blocksy, 1em here is the pill's already-×0.625
     size — 1.6 × 0.625 = 1 restores the measured 10px */
  font-size: calc(var(--theme-font-size, 1.6em) * 0.625);
  font-weight: var(--theme-font-weight, 430);
  line-height: inherit;
  color: inherit;
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.news-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-pill__more { opacity: 0.5; }

/* --- Citation hover card (from news.css ~168) ---
   Appended to <body>, so theme vars are read at :root (the .news-article-scoped
   vars don't reach it). Measured: 304px wide, radius 12px (Perplexity's card
   radius — rounder than the theme's 3px), padding 12px, elevated surface =
   palette 8 (flips dark), 14px/20px type. */
.news-cite-card {
  position: absolute;
  z-index: 99999;
  width: 304px;
  max-width: calc(100vw - 16px);
  padding: 12px;
  background: var(--theme-palette-color-8, #ffffff);
  border: 1px solid var(--theme-border-color, #e8ebed);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  /* All sizes are em so the owner's Typography base rescales every overlay;
     ratios preserve the measured px design at the 16px default base. */
  font-size: 0.875em;     /* 14px @16 */
  line-height: 1.4286;    /* 20/14 */
  color: var(--news-text);
}
.news-cite-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.8571em;    /* 12px @16 */
  line-height: 1.3333;    /* 16/12 */
  color: var(--news-secondary);
}
.news-cite-card__pager {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.news-cite-card__pos {
  /* theme family inherited; tabular numerals keep the 1/3 pager from wobbling */
  font-variant-numeric: tabular-nums;
}
.news-cite-card__nav {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 1.3333em;    /* 16px @16 — parent is the 12px __bar, not the card */
  line-height: 1;
  cursor: pointer;
  color: inherit;
}
.news-cite-card__nav:hover {
  background: var(--news-tint);
  color: var(--news-text);
}
.news-cite-card__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.news-cite-card__icos { display: inline-flex; }
.news-cite-card__mini {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--theme-palette-color-8, #ffffff);
  margin-left: -5px;
}
.news-cite-card__mini:first-child { margin-left: 0; }
/* the whole body is ONE link (title, author, snippet) — like Perplexity */
.news-cite-card__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.news-cite-card__src {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;   /* + the flex gap = 8px source-row → title */
  font-size: 0.8571em;    /* 12px @16 */
  line-height: 1.3333;    /* 16/12 */
  color: var(--news-secondary);
}
.news-cite-card__ico {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.news-cite-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 500;
  line-height: 1.375;
  color: var(--theme-headings-color, #000000);
}
.news-cite-card__link:hover .news-cite-card__title {
  color: var(--theme-link-initial-color, #106abf);
}
.news-cite-card__author {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.news-cite-card__snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  color: var(--news-secondary);
}

/* --- Mobile bottom sheet + desktop side/full drawer (from news.css ~282) ---
   <=640px: full-width panel, 12px top radius, 70vh max with inner scroll,
   70%-alpha blurred backdrop, "N sources" header + 32px round close, sources
   stacked 32px apart. Item internals reuse the .news-cite-card__* classes. */
.news-sheet {
  position: fixed;
  inset: 0;
  z-index: 999999;
}
.news-sheet[hidden] { display: none; }
.news-sheet__backdrop {
  position: absolute;
  inset: 0;
  /* BACKDROP covers the LARGE viewport on iOS: with inset alone it stopped at
     the layout viewport, so the page showed through in the translucent toolbar
     bands. Only the backdrop gets lvh — the interactive panel keeps anchoring to
     the layout viewport so a bottom sheet never hides under an expanded toolbar. */
  height: 100lvh;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: news-fade 0.2s ease-out;
}
.news-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70vh;
  /* The header (title + close) stays FIXED while the source list scrolls
     beneath it, so the drawer can be closed from any scroll depth. The list
     below is the only scroller. */
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  padding: 16px 24px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--theme-palette-color-8, #ffffff);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
  font-size: 0.875em;     /* 14px @16 — em: tracks the Typography base */
  line-height: 1.4286;    /* 20/14 */
  color: var(--news-text);
  animation: news-sheet-up 0.25s ease-out;
}
@keyframes news-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes news-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.news-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex: none;              /* pinned above the scrolling list */
}
.news-sheet__count {
  font-size: 1.7143em;    /* 24px @16 (panel is 14px) */
  font-weight: 600;
  line-height: 1.3333;    /* 32/24 */
}
.news-sheet__close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  font-size: 1.4286em;    /* 20px @16 */
  line-height: 1;
  cursor: pointer;
  color: var(--news-secondary);
}
.news-sheet__close:hover {
  background: var(--news-tint);
  color: var(--news-text);
}
.news-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* don't chain scroll to the locked page */
  -webkit-overflow-scrolling: touch;
}
/* Full-screen variant: 100% height, square corners, smaller header. Close stays
   on the RIGHT (reachable one-handed on phones). */
.news-sheet--full .news-sheet__panel {
  top: 0;
  max-height: none;
  border-radius: 0;
  animation: news-fade 0.2s ease-out;
}
.news-sheet--full .news-sheet__bar {
  justify-content: space-between;
  gap: 12px;
}
.news-sheet--full .news-sheet__close { order: 0; }
.news-sheet--full .news-sheet__count {
  font-size: 1.1429em;    /* 16px @16 (panel is 14px) */
  line-height: 1.5;       /* 24/16 */
}
/* Right-side variant — Perplexity's DESKTOP sources drawer (measured): fixed
   400px panel sliding in from the right, full height, no page dimming, items as
   12px-radius hover cards 8px apart. */
.news-sheet--side .news-sheet__backdrop {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}
.news-sheet--side .news-sheet__panel {
  top: 0;
  left: auto;
  width: 400px;
  max-width: 90vw;
  max-height: none;
  border-radius: 0;
  border-left: 1px solid var(--theme-border-color, #e8ebed);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  animation: news-slide-left 0.25s ease-out;
}
@keyframes news-slide-left {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
.news-sheet--side .news-sheet__bar {
  justify-content: flex-start;
  gap: 12px;
}
.news-sheet--side .news-sheet__close { order: -1; }
.news-sheet--side .news-sheet__count {
  font-size: 1.1429em;    /* 16px @16 (panel is 14px) */
  line-height: 1.5;       /* 24/16 */
}
.news-sheet--side .news-sheet__list { gap: 8px; }
.news-sheet--side .news-sheet__item {
  padding: 8px;
  border-radius: 12px;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-sheet--side .news-sheet__item:hover { background: var(--news-tint); }

/* --- "All sources" chip (from news.css ~441) ---
   32px fully-rounded pill, 1px border at text@7% over a text@3.5% wash, max
   160px. Four 16px favicons (kit; updater.news three) in 2px page-background
   "cutout" rings overlapping by 8px; on hover the 2nd/3rd/4th slide +6/+12/+18px
   apart and the label slides +12px (+18px past a fourth)
   into a static right fade mask. Label 12px/500 at text@65%. Opens the
   full-screen sheet on phones and the right-side drawer on desktop; its anchor
   (no JS) jumps to the details drawer. */
.news-src-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 160px;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 0 0 8px;
  border: 1px solid var(--news-tint);
  border-radius: 999px;
  font-size: 0.75em;      /* 12px @16 — tracks the surrounding content size */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--news-secondary);
  text-decoration: none;
  background: var(--news-tint-faint);
  transition: background-color 0.15s ease;
}
/* color re-pinned on hover: the chip is an <a>, and the theme's link-hover color
   would otherwise repaint the label (Perplexity's stays quiet) */
.news-src-chip:hover, .news-src-chip:active {
  background: var(--news-tint);
  color: var(--news-secondary);
}
/* The chip replaces a details drawer PER ARTICLE (JS marks each drawer whose own
   article has a chip): on mixed templates an article without a chip keeps its
   drawer as the visible fallback. */
.news-sources-drawer.news-drawer-replaced { display: none; }
.news-src-chip__icos { display: inline-flex; align-items: center; }
.news-src-chip__wrap {
  display: inline-flex;
  padding: 2px;
  margin-right: -8px;
  background: var(--theme-palette-color-8, #ffffff);
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.news-src-chip__wrap:last-child { margin-right: 0; }
.news-src-chip:hover .news-src-chip__wrap:nth-child(2) { transform: translateX(6px); }
.news-src-chip:hover .news-src-chip__wrap:nth-child(3) { transform: translateX(12px); }
/* kit: a fourth favicon (owner 2026-10-15, visual parity T15) */
.news-src-chip:hover .news-src-chip__wrap:nth-child(4) { transform: translateX(18px); }
.news-src-chip__ico {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  /* the ring must paint OVER the favicon's edge pixels — outline (not border/
     inset shadow: both lose to replaced content) tracks the radius, no layout */
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}
.news-src-chip__label {
  padding-right: 16px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 95%);
  mask-image: linear-gradient(to right, #000 0%, #000 80%, transparent 95%);
}
.news-src-chip__txt {
  display: inline-block;
  transition: transform 0.15s ease;
}
.news-src-chip:hover .news-src-chip__txt { transform: translateX(12px); }
/* kit (T15): past a fourth favicon the label slides with it, keeping the 8px gap */
.news-src-chip:hover:has(.news-src-chip__wrap:nth-child(4)) .news-src-chip__txt { transform: translateX(18px); }

/* the letter badge fallback when a favicon fails to load */
.news-ltr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--news-tint-strong);
  color: var(--news-text);
  font-size: 0.65em;
  font-weight: 700;
}

/* --- All-sources <details> drawer, no-JS fallback (from news.css ~516) --- */
.news-sources-drawer {
  margin-top: calc(var(--news-gap) * 1.5);
  border: 1px solid var(--news-border);
  border-radius: var(--news-radius);
  background: var(--news-surface);
  padding: 0.5rem 0.9rem;
}
.news-sources-drawer > summary {
  cursor: pointer;
  color: var(--news-muted);
}
.news-sources-list { margin: 0.75rem 0 0.25rem; padding-left: 1.25rem; }
.news-source { margin: 0.35rem 0; }
.news-source__n { color: var(--news-muted); font-size: 0.85em; }
.news-source__host { color: var(--news-muted); font-size: 0.85em; }

/* --- Summary-view bullet rhythm (from news.css ~625) ---
   The article page's Summary bullets: same 1em rhythm between points, same tight
   1.1rem indent. The theme's 2.5em --theme-list-indent is zeroed here; the
   explicit 1.1rem ul padding keeps disc markers inside the box. */
.news-article .news-view--summary {
  --theme-list-indent: 0;
}
.news-article .news-view--summary ul {
  margin: 0;
  padding-left: 1.1rem;
}
.news-article .news-view--summary li { margin: 1em 0; }

/* ---------------------------------------------------------------------------
 * verbatim from updater.news assets/news.css @5dbfaad, lines 567-620 and 633-845:
 * the news/summary-expander card block (lines 621-632, the article Summary
 * bullets, are already above), apart from the kit's open-state rules marked
 * "Kit adaptation (visual parity T14)" below (listed in the kit README
 * "Adaptations"). Reviewer copy: .superpowers/reference-updater-news-5dbfaad/
 * ------------------------------------------------------------------------- */
/* --------------------------------------------------------- summary expander
   news/summary-expander block (archive-card "See more"). Own .news-expander
   namespace — the single-post toggle JS (.news-tab/.news-view) must never
   touch these (codex plan review). Var bindings duplicated from .news-article
   because cards render OUTSIDE it; same semantic Blocksy vars, same rule:
   never hardcode the owner's current colors. */
.news-expander {
  --news-accent: var(--theme-link-initial-color, #106abf);
  --news-border: var(--theme-border-color, #e8ebed);
  --news-muted: var(--theme-text-color, #5e5e5e);
  --news-surface: var(--theme-palette-color-6, #f4f5f6);  /* no semantic surface var exists */
  --news-radius: 3px;  /* theme's general radius isn't exposed as a variable */
  margin-top: 0.5rem;
  font-size: inherit;  /* v4: bullets + chips match the excerpt typography */
}
/* The news/full-article block (kit 1.0.18) can sit outside .news-expander (an
   article layout, the editor's preview): it binds the vars its pill uses. */
.wp-block-news-full-article {
  --news-accent: var(--theme-link-initial-color, #106abf);
  --news-border: var(--theme-border-color, #e8ebed);
  --news-muted: var(--theme-text-color, #5e5e5e);
}
.news-expander__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--news-accent);
}
.news-expander__chev {
  flex: none;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.news-expander__toggle[aria-expanded="true"] .news-expander__chev {
  transform: rotate(180deg);
}
.news-expander__panel[hidden] { display: none; }
.news-expander__panel {
  margin-top: 0.6rem;
  animation: news-expander-in 0.18s ease-out;
}
/* opt-in left rule (panelStyle 'border'; default is plain — owner 2026-07-20:
   Perplexity has no rule) */
.news-expander--panel-border .news-expander__panel {
  padding-left: 0.85rem;
  border-left: 2px solid var(--news-border);
}
@keyframes news-expander-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.news-expander__bullets ul {
  margin: 0;
  padding-left: 1.1rem;
}
.news-expander__bullets li { margin: 1em 0; }   /* owner 2026-07-20 */
.news-expander__bullets p { margin: 0.3em 0; }
.news-expander__link {
  display: inline-block;
  margin-top: 0.45rem;
  font-weight: 600;
  color: var(--news-accent);
  text-decoration: none;
}
.news-expander__link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .news-expander__panel { animation: none; }
  .news-expander__chev { transition: none; }
}

/* Settings variants (v0.15.0, codex-design-reviewed): alignment moves only the
   toggle row — the panel text snaps back to start so bullets never center. */
.news-expander--align-center { text-align: center; }
.news-expander--align-right { text-align: right; }
.news-expander--align-center .news-expander__panel,
.news-expander--align-right .news-expander__panel { text-align: start; }

/* Panel styles: 'border' is the default left rule above. */

.news-expander--panel-card .news-expander__panel {
  border-left: 0;
  background: var(--news-surface);
  border-radius: var(--news-radius);
  padding: 0.7rem 0.85rem;
}

/* 'Theme button' skins: wear exactly what the theme's buttons wear (same rule
   as the single-post Summary/Report active tab) so a customizer restyle
   re-skins these too. */
.news-expander__toggle--button {
  background: var(--theme-button-background-initial-color, #106abf);
  color: var(--theme-button-text-initial-color, #ffffff);
  padding: 0.4rem 0.9rem;
  border-radius: var(--theme-button-border-radius, 2px);
}
.news-expander__link--button {
  background: var(--theme-button-background-initial-color, #106abf);
  color: var(--theme-button-text-initial-color, #ffffff);
  padding: 0.4rem 0.9rem;
  border-radius: var(--theme-button-border-radius, 2px);
}
.news-expander__link--button:hover { text-decoration: none; }

/* Local screen-reader-only def (scoped) in case the theme lacks WP's global
   .screen-reader-text — used by the localized "(opens in a new tab)" cue. */
.news-expander .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ------------------------------------------------ v4: Perplexity card UX */
/* Inline placement: expander.js moves the toggle onto the excerpt's last
   text line. Outside .news-expander the root-scoped custom properties are
   gone, so the moved toggle re-binds what it uses (codex v4 r1). */
.news-expander__toggle--inline {
  --news-accent: var(--theme-link-initial-color, #106abf);
  display: inline;
  margin-left: 0.15em;
  vertical-align: baseline;
}
.news-expander__toggle--inline .news-expander__chev { vertical-align: -2px; }
/* The leftover wrapper must not leave a blank gap under the card text while
   collapsed (codex v4 r2); the open panel re-introduces its own spacing. */
.news-expander--toggle-moved { margin-top: 0; }
.news-expander--toggle-moved .news-expander__panel { margin-top: 0.5rem; }
/* Kit adaptation (visual parity T14): an open card's excerpt is hidden by
   expander.js; keep it hidden whatever display a theme gives excerpt spans. */
.news-expander__lede[hidden] { display: none !important; }
/* ...and the bullets take the excerpt's place: no margin left by the emptied
   line, none above the panel that follows it or its first bullet (which would
   collapse through the panel and push the list down). */
.news-expander__line--lede-hidden { margin-bottom: 0 !important; }
.news-expander__line--lede-hidden + .news-expander--toggle-moved .news-expander__panel { margin-top: 0; }
.news-expander__line--lede-hidden + .news-expander--toggle-moved .news-expander__bullets li:first-child { margin-top: 0; }

/* Chip row: [Sources] [Full article] pills. The sources chip itself keeps the
   existing .news-src-chip skin; the report chip mirrors it via theme vars. */
.news-expander__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 0.7rem;
}
/* Card row from a Content Block (T16): Blocksy wraps the block in padded
   containers (50px above and below) and the shortcodes in a <p>, which stacked
   the chips. Flatten that chain so the chips are this row's flex items.
   Any container width the block is set to (.ct-container, -narrow, -full).
   A Group/Row block around the shortcodes keeps its own layout. */
.news-expander__row > [data-block],
.news-expander__row > [data-block] > [class*="ct-container"],
.news-expander__row > [data-block] > [class*="ct-container"] > article,
.news-expander__row > [data-block] > [class*="ct-container"] > article > .entry-content,
.news-expander__row > [data-block] > [class*="ct-container"] > article > .entry-content > p {
  display: contents;
}
/* A Row/Group block holding the row blocks (kit 1.0.18) spans the row, so its
   own justification and gap settings decide the layout. */
.news-expander__row > [data-block] > [class*="ct-container"] > article > .entry-content > .wp-block-group {
  flex: 1 1 100%;
  margin: 0;
}
/* Owner 2026-07-20: Sources chip flush LEFT, Read-full-article flush RIGHT.
   margin-left:auto on the link chip keeps a lone Sources chip on the left
   and a lone link chip on the right — space-between could not. */
/* Not the news/full-article block (kit 1.0.18): in a Row block the Row's own
   justification decides, which an auto margin would override. */
.news-expander__chips .news-expander__chip:not(.wp-block-news-full-article) { margin-left: auto; }
/* Equal chip heights (owner): the favicon stack made the Sources chip ~5px
   taller than the link pill. One explicit height each — the Sources chip's
   is set in its v5 metric-override rule below (same specificity, later in
   the file: it would win anyway). */
.news-expander__chips .news-expander__chip--pill {
  height: 32px;
  box-sizing: border-box;
}
.news-expander__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
}
.news-expander__chip--pill {
  border: 1px solid var(--news-border);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  color: var(--news-muted);
}
.news-expander__chip--pill:hover {
  color: var(--news-accent);
  border-color: var(--news-accent);
  text-decoration: none;
}
.news-expander__chip--link { color: var(--news-accent); }
.news-expander__chip--link:hover { text-decoration: underline; }

/* ---------------------------------------------- v5: Perplexity parity pass */
/* Panel-only reading size (rem: a tiny theme excerpt cannot drag it down);
   'inherit' mode = no class, today's behavior. The toggle never scales. */
.news-expander--text-comfortable .news-expander__panel {
  font-size: 1rem;
  line-height: 1.65;
}
.news-expander--text-large .news-expander__panel {
  font-size: 1.125rem;
  line-height: 1.65;
}
/* Citation pills inside sized panels: override the PILL element (replaces the
   global 0.625em — no compounding) and re-base its <code> label off the pill
   instead of --theme-font-size, so a 12px theme var cannot leak in (codex v5). */
.news-expander--text-comfortable .news-pill,
.news-expander--text-large .news-pill { font-size: 0.72em; }
.news-expander--text-comfortable .news-pill code,
.news-expander--text-large .news-pill code { font-size: 1em; }

/* Chip row at Perplexity proportions. */
.news-expander__chips .news-expander__chip--pill {
  padding: 0.4rem 0.85rem;
  font-weight: 500;
  border: 1px solid var(--news-tint);
  border-radius: 999px;
  background: var(--news-tint-faint);
  color: var(--news-secondary);
}
.news-expander__chips .news-expander__chip--pill:hover {
  background: var(--news-tint);
  color: var(--news-secondary);
}
/* Card Sources chip: FULL metric override of the global .news-src-chip skin
   (0.75em text, fixed 32px height, 160px max-width, left-biased padding, label
   fade mask) so both pills read as one family at any locale's label length
   (codex v5). The single-post chip outside the expander is untouched. */
.news-expander__chips .news-src-chip {
  font-size: 0.9em;
  height: 32px;            /* equal to the link pill (owner 2026-07-20) */
  box-sizing: border-box;
  max-width: none;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
}
.news-expander__chips .news-src-chip .news-src-chip__label {
  -webkit-mask: none;
  mask: none;
  max-width: none;
  padding: 0;
  margin: 0;
  transform: none;
}
/* The row blocks (kit 1.0.18): a font size chosen in the block grows the chip
   instead of clipping it at the fixed 32px. */
.news-expander__chips .news-src-chip.wp-block-news-sources-chip,
.news-expander__chips .news-expander__chip--pill.wp-block-news-full-article {
  height: auto;
  min-height: 32px;
}

/* Per-device visibility (v0.17.3, owner order — Blocksy's own block
   visibility control cannot reach a dynamic block's server markup). The
   toggle mirrors the classes because inline mode moves it OUT of the root. */
@media (max-width: 689.98px) {
  .news-expander--hide-mobile, .news-expander__toggle--hide-mobile { display: none !important; }
}
@media (min-width: 690px) and (max-width: 999.98px) {
  .news-expander--hide-tablet, .news-expander__toggle--hide-tablet { display: none !important; }
}
@media (min-width: 1000px) {
  .news-expander--hide-desktop, .news-expander__toggle--hide-desktop { display: none !important; }
}

/* Facebook-style collapse: while open the toggle is screen-reader-only, but
   keyboard focus reveals it so non-pointer users can still collapse. */
.news-expander__toggle--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.news-expander__toggle--sr:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 0 0.15em;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}
/* subtle affordance: the open panel is tappable in text mode */
.news-expander[data-collapse="text"] .news-expander__panel:not([hidden]) { cursor: pointer; }
.news-expander[data-collapse="text"] .news-expander__panel:not([hidden]) a,
.news-expander[data-collapse="text"] .news-expander__panel:not([hidden]) button { cursor: pointer; }

/* ---------------------------------------------------------------------------
 * verbatim from updater.news assets/news.css @5dbfaad, lines 847-962: the
 * news/caught-up feed divider. Reviewer copy: .superpowers/reference-updater-news-5dbfaad/
 * ------------------------------------------------------------------------- */
/* ------------------------------------------------ news/caught-up divider */
.news-caughtup {
  --news-accent: var(--theme-link-initial-color, #106abf);
  --news-border: var(--theme-border-color, #e8ebed);
  --news-muted: var(--theme-text-color, #5e5e5e);
  text-align: center;
  /* Owner design 2026-07-20: an airy stand-alone divider BETWEEN cards
     (caughtup.js moves it out of the card box) — long breathing room, no
     background, and the rules in the theme's accent blue like the check. */
  padding: 4.5rem 0;
  background: none;
  grid-column: 1 / -1;     /* full row when .entries is a grid archive */
  position: relative;      /* confetti layer anchor */
  cursor: pointer;         /* tap = extra confetti */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
/* Confetti (JS-spawned, decorative-only festive palette). Owner 2026-07-20:
   particles BLOW UP radially from the checkmark's circle, like party confetti
   around a ring — mixed ribbons, dots, and stars. JS sets each particle's
   start (left/top = the check's center) and --tx/--ty blast vector.
   pointer-events off so taps land on the divider; overflow stays visible on
   purpose (the ring blasts past the divider's box). */
.news-cu-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.news-cu-p {
  position: absolute;
  width: 6px;
  height: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: news-cu-pop var(--dur, 1s) cubic-bezier(0.16, 0.9, 0.35, 1) forwards;
}
.news-cu-p--dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.news-cu-p--star {
  width: 13px;
  height: 13px;
  border-radius: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@keyframes news-cu-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  60% {
    opacity: 1;
    /* blast outward fast, then a soft gravity settle below (+18px) */
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1) rotate(var(--rot, 180deg));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px) + 18px)) scale(0.9) rotate(var(--rot, 180deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .news-cu-p { display: none; }
}
.news-caughtup__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.news-caughtup__rule {
  display: block;
  flex: 1;
  height: 1px;
  background: var(--news-accent);
}
.news-caughtup__check {
  flex: none;
  width: 44px;
  height: 44px;
  stroke: var(--news-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.news-caughtup__title {
  margin: 0.9rem 0 0.25rem;
  font-weight: 700;
  font-size: 1.05em;
}
.news-caughtup__subtitle {
  margin: 0;
  color: var(--news-muted);
  font-size: 0.92em;
}
/* Draw-in animation: armed by JS (data-armed) so no-JS shows a fully drawn
   check; plays once on first scroll-into-view; reduced motion never animates. */
@media (prefers-reduced-motion: no-preference) {
  .news-caughtup[data-armed]:not(.is-inview) .news-caughtup__circle { stroke-dashoffset: 151; }
  .news-caughtup[data-armed]:not(.is-inview) .news-caughtup__tick { stroke-dashoffset: 36; }
  .news-caughtup__circle { stroke-dasharray: 151; }
  .news-caughtup__tick { stroke-dasharray: 36; }
  .news-caughtup.is-inview .news-caughtup__circle {
    animation: news-cu-circle 0.55s ease-out forwards;
  }
  .news-caughtup.is-inview .news-caughtup__tick {
    animation: news-cu-tick 0.4s ease-out 0.4s both;
  }
  @keyframes news-cu-circle { from { stroke-dashoffset: 151; } to { stroke-dashoffset: 0; } }
  @keyframes news-cu-tick { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
}
/* per-device visibility, same breakpoints as the expander */
@media (max-width: 689.98px) { .news-caughtup--hide-mobile { display: none !important; } }
@media (min-width: 690px) and (max-width: 999.98px) { .news-caughtup--hide-tablet { display: none !important; } }
@media (min-width: 1000px) { .news-caughtup--hide-desktop { display: none !important; } }

/* ---------------------------------------------------------------------------
 * verbatim from updater.news assets/news.css @5dbfaad, lines 57-81: the
 * featured-image credit chip. Its dark scrim, white text and 12px size are the
 * documented legibility exception to the theme-token rule (see its comment).
 * ------------------------------------------------------------------------- */
/* Featured-image source-credit chip (Perplexity parity, owner 2026-07-12): a
   small translucent-dark chip in the image's bottom-right. Uses the THEME font
   and a small radius; the dark scrim + white text are kept (not theme text/bg
   colors) so the credit stays legible over any image, same on mobile + desktop. */
.news-img-capwrap { position: relative; }
.news-img-cap {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  pointer-events: none;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Kit adaptation (owner ruling D15(b)): the theme ALSO prints this credit as a
   caption under the featured image. updater.news hides every featured-image
   caption site-wide (.ct-featured-image figcaption); here only the one next to
   an image that got the chip (news-citations.js adds .news-img-capwrap), so
   other posts keep their captions and, with JS off, the caption stays visible. */
.ct-featured-image .news-img-capwrap + figcaption,
.ct-featured-image.news-img-capwrap > figcaption { display: none; }

/* ---------------------------------------------------------------------------
 * verbatim from updater.news assets/news.css @5dbfaad, lines 964-1010: the
 * [news_citations_menu_marquee] header marquee (its first comment line named the
 * old [news_menu_marquee] tag). Reviewer copy: .superpowers/reference-updater-news-5dbfaad/
 * ------------------------------------------------------------------------- */
/* Colors/typography INHERIT from the Blocksy header element that hosts the
   shortcode (owner rule: bind to the theme, never copy values). */
/* v1 (owner rolled the scrollable v2 back): pure CSS keyframe marquee. */
.news-marquee {
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.news-marquee__track {
  display: flex;
  width: max-content;
  animation: news-marquee var(--nm-dur, 25s) linear infinite;
  will-change: transform;
}
/* Readers can stop it: pointer over, finger down, or keyboard focus inside. */
.news-marquee:hover .news-marquee__track,
.news-marquee:active .news-marquee__track,
.news-marquee:focus-within .news-marquee__track {
  animation-play-state: paused;
}
/* Kit adaptation (owner ruling 2026-10-09): keyboard focus STOPS the row at its
   start instead of pausing it wherever it is, so the focused link can be scrolled
   into view (news-citations.js sets the class and scrolls). While it is stopped
   the edge fade goes and the scroll keeps a margin, so the focused link and its
   focus ring are never faded or clipped at the edge. */
.news-marquee.is-kbd-focus {
  -webkit-mask-image: none;
  mask-image: none;
  scroll-padding-inline: 8px;
}
.news-marquee.is-kbd-focus .news-marquee__track {
  animation: none;
  padding-inline-start: 8px;   /* the first link's focus ring clears the left edge too */
}
@keyframes news-marquee {
  to { transform: translateX(-50%); }
}
.news-marquee__seg {
  display: flex;
  align-items: center;
  gap: var(--nm-gap, 40px);
  padding: 0 var(--nm-gap, 40px) 0 0;
  margin: 0;
  list-style: none;
}
.news-marquee__seg li { margin: 0; }
.news-marquee__seg a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .news-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .news-marquee__track { animation: none; }
  .news-marquee__seg[aria-hidden="true"] { display: none; }
}

/* Kit adaptation (owner 2026-10-15, visual parity T15): citation pills are never
   underlined. Blocksy's link style underlines links in content LISTS
   ([data-link="type-2"] … .entry-content :where(ul, ol) a), which caught the
   pills at the end of the summary bullets. */
.news-pill, .news-pill code, .news-pill__more { text-decoration: none !important; }

/* ---------------------------------------------------------------------------
 * Kit adaptations (owner 2026-10-15, visual parity T16, Heading.pdf).
 * ------------------------------------------------------------------------- */
/* The sources chip's phone sheet: HALF the screen, FULL after a swipe up
   (news-citations.js detentGestures); the list scrolls only at full. */
.news-sheet--detent .news-sheet__panel {
  max-height: none;
  height: 50vh;
  transition: height 0.25s ease, border-radius 0.25s ease;
}
.news-sheet--detent .news-sheet__panel::before {   /* the grab handle */
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: -6px auto 10px;
  border-radius: 2px;
  background: var(--news-tint-strong);
  flex: none;
}
.news-sheet--detent.is-expanded .news-sheet__panel {
  height: calc(100% - 12px);
  border-radius: 12px 12px 0 0;
}
.news-sheet--detent:not(.is-expanded) .news-sheet__list { overflow-y: hidden; }
@media (prefers-reduced-motion: reduce) {
  .news-sheet--detent .news-sheet__panel { transition: none; }
}

/* [news_citations_share]: a round icon button sized like the chips. */
.news-share-wrap { display: inline-flex; }
.news-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* --news-share-icon: the news/share block's icon size (kit 1.0.18) */
  min-width: calc(var(--news-share-icon, 16px) * 2);
  min-height: calc(var(--news-share-icon, 16px) * 2);
  padding: 0;
  border: 1px solid var(--news-tint);
  border-radius: 50%;
  background: var(--news-tint);
  color: var(--news-secondary);
  cursor: pointer;
}
.news-share svg { width: var(--news-share-icon, 16px); height: var(--news-share-icon, 16px); }
.news-share:hover, .news-share:focus-visible { background: var(--news-tint-strong); color: var(--news-text); }
.news-share__tpl { display: none; }

/* The share drawer: a centered popup on desktop, a bottom sheet on phones. */
.news-sharebox { position: fixed; inset: 0; z-index: 999999; }
.news-sharebox[hidden] { display: none; }
.news-sharebox__backdrop {
  position: absolute;
  inset: 0;
  height: 100lvh;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: news-fade 0.2s ease-out;
}
.news-sharebox__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 32px));
  max-height: 80vh;
  overflow-y: auto;
  padding: 16px 20px 20px;
  border-radius: 16px;
  background: var(--theme-palette-color-8, #ffffff);
  color: var(--news-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  font-size: 0.875em;
  animation: news-fade 0.2s ease-out;
}
.news-sharebox--sheet .news-sharebox__panel {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  transform: none;
  width: auto;
  border-radius: 16px 16px 0 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  animation: news-sheet-up 0.25s ease-out;
}
.news-sharebox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--news-tint);
}
.news-sharebox__meta { display: flex; flex-direction: column; min-width: 0; }
.news-sharebox__title {
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-sharebox__host { color: var(--news-secondary); font-size: 0.9286em; }