/* ==========================================================================
   INSIGHTS — the articles hub, rebuilt to the desktop wireframe. 8.634.0.

   Two columns on a desktop: a wide feed and a discovery rail. The rail
   arrives at 1280px for the same reason /now/'s does — it needs ~340px
   and the feed needs ~640, and below their sum one of the two is
   squeezed into something the design never asked for.

   Every colour here is a token, so dark mode flips with the palette and
   needs no counterpart block (tools/verify-dark-mode.php).
   ========================================================================== */

.insights-page {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--space-3) var(--space-4) var(--space-10);
}

.insights-main { min-width: 0; }

/* ---- Breadcrumb (§2) ------------------------------------------------- */

.insights-crumbs__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.insights-crumbs__list a { color: var(--color-text-muted); text-decoration: none; }

.insights-crumbs__list a:hover { color: var(--color-primary-text); text-decoration: underline; }

.insights-crumbs__sep { color: var(--color-text-muted); }

.insights-crumbs__list [aria-current] { color: var(--color-ink-soft); }

/* ---- Heading + Write an Insight (§3) --------------------------------- */

.insights-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.insights-head__titles { min-width: 0; }

.insights-head__title {
  margin: 0;
  font-size: 2rem;
  line-height: var(--lh-snug, 1.25);
  letter-spacing: -0.02em;
  color: var(--color-ink-heading);
}

.insights-head__lede {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

/* The one control §3 calls out as needing to be visible without
   scrolling, so it never shrinks away. */
.insights-head__write {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  min-height: 44px;
  white-space: nowrap;
}

/* ---- Search (§4) ------------------------------------------------------ */

.insights-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.insights-search__icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  display: inline-flex;
  color: var(--color-text-muted);
  pointer-events: none;
}

.insights-search__input {
  width: 100%;
  min-height: 48px;
  padding-inline: calc(var(--space-4) + 20px) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-ink);
}

.insights-search__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.insights-search__clear {
  position: absolute;
  inset-inline-end: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-primary-text);
}

/* ---- Topic chips (§4) ------------------------------------------------- */

.insights-chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.insights-chips::-webkit-scrollbar { display: none; }

.insights-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.insights-chip:hover { background: var(--color-surface); color: var(--color-ink); }

.insights-chip.is-active {
  border-color: transparent;
  background: var(--color-primary);
  color: var(--color-white);
}

.insights-chip-more { position: relative; flex: 0 0 auto; }

.insights-chip--more::-webkit-details-marker { display: none; }

.insights-chip-more__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: var(--z-dropdown);
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.insights-chip-more__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.insights-chip-more__item:hover { background: var(--color-surface); }

.insights-chip-more__count { color: var(--color-text-muted); font-size: 0.75rem; }

/* ---- Featured hero (§5) ----------------------------------------------- */

.insights-featured {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-pulse-1), var(--color-pulse-3));
  color: var(--color-white);
  isolation: isolate;
}

/* The art sits behind the copy, so a long title cannot push it out of
   the card and a missing image leaves the same shape. */
.insights-featured__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.insights-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim is what keeps the text readable over an arbitrary
   photograph — without it the contrast depends on what an author
   uploaded. */
.insights-featured--image .insights-featured__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(13, 18, 38, 0.94) 0%,
    rgba(13, 18, 38, 0.86) 42%,
    rgba(13, 18, 38, 0.35) 100%
  );
}

.insights-featured__body {
  position: relative;
  max-width: 34rem;
  padding: var(--space-6);
}

.insights-featured__flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-3);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-accent, #FBBF24);
  color: #1F1300;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
}

.insights-featured__title {
  margin: 0;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.insights-featured__title a { color: inherit; text-decoration: none; }

.insights-featured__title a:hover { text-decoration: underline; }

/* Literal, not a token: this sits on the dark hero in BOTH schemes,
   where --color-ink-soft would flip to something near-white in dark
   mode and near-black in light — unreadable half the time.

   Selected through the parent on purpose. The lede is a <p>, and
   layout.css carries a site-wide `html.jdev-dark p { color: #CBD5E1 }`
   whose specificity (0,1,2) beat a lone class (0,1,0) — so in dark
   mode this literal was being overridden by the general paragraph
   colour and the hero only stayed legible by luck. Two classes (0,2,0)
   put the hero back in charge of its own text. */
.insights-featured .insights-featured__lede {
  margin: var(--space-3) 0 0;
  color: rgba(255, 255, 255, 0.82);
}

.insights-featured__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.insights-featured__byline { display: inline-flex; align-items: center; gap: var(--space-3); }

.insights-featured__byline img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
}

.insights-featured__who { display: flex; flex-direction: column; }

.insights-featured__author { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

.insights-featured__meta {
  display: inline-flex;
  gap: 6px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
}

.insights-featured__cta { min-height: 40px; }

.insights-featured__topics {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insights-featured__topics a {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-white);
  font-size: 0.6875rem;
  text-decoration: none;
  backdrop-filter: blur(4px);
}

.insights-featured__topics a:hover { background: rgba(255, 255, 255, 0.28); }

/* ---- Tabs and toolbar (§6) -------------------------------------------- */

.insights-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.insights-tabs {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.insights-tabs::-webkit-scrollbar { display: none; }

.insights-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.insights-tab:hover { color: var(--color-ink); }

.insights-tab.is-active {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: var(--fw-semibold);
}

.insights-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
}

.insights-sort { display: inline-flex; align-items: center; gap: var(--space-2); }

.insights-sort__label { font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; }

.insights-sort__select {
  min-height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--fs-sm);
}

.insights-views { display: inline-flex; gap: 2px; }

.insights-views__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text-muted);
}

.insights-views__btn.is-active {
  border-color: transparent;
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---- The list (§7) ----------------------------------------------------- */

.insights-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.insights-list--grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.insights-list__item { min-width: 0; }

.insight-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.insight-card--grid { grid-template-columns: minmax(0, 1fr); }

.insight-card__thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  line-height: 0;
}

.insight-card__thumb img {
  width: 100%;
  height: 76px;
  object-fit: cover;
}

.insight-card--grid .insight-card__thumb img { height: 150px; }

.insight-card__thumb-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 76px;
  color: var(--color-text-muted);
}

.insight-card--grid .insight-card__thumb-fallback { height: 150px; }

.insight-card__body { min-width: 0; }

.insight-card__title {
  margin: 0;
  font-size: 1rem;
  line-height: var(--lh-snug, 1.3);
}

.insight-card__title a { color: var(--color-ink-heading); text-decoration: none; }

.insight-card__title a:hover { color: var(--color-primary-text); }

.insight-card__status {
  display: inline-flex;
  margin: var(--space-1) 0 0;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-warning-soft);
  color: var(--color-warning-text, var(--color-ink));
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
}

/* The two states had the same amber, so an author could not tell at a
   glance which articles were still theirs to finish and which were
   sitting with an editor. A draft is waiting on the AUTHOR, so it reads
   as neutral; only "Awaiting review" — waiting on someone else — keeps
   the amber. Both sides use tokens, so each flips with the theme. */
.insight-card__status--draft {
  background: var(--color-border-soft);
  color: var(--color-ink-soft);
}

/* ---- Featured carousel (mobile §2) ------------------------------
   One slide per viewport, snapped. The track scrolls, the page does
   not: this is the pattern that keeps a wide strip inside a 320px
   phone without the document itself gaining a horizontal scrollbar. */
.insights-carousel { margin-bottom: var(--space-5); }

.insights-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Momentum scrolling on iOS, and no scrollbar eating 15px of a
     phone's width on desktop Safari. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.insights-carousel__track::-webkit-scrollbar { display: none; }

.insights-carousel__slide {
  scroll-snap-align: start;
  min-width: 0;
}

/* The hero already carries its own bottom margin for the single-hero
   case; inside a carousel the track owns the spacing. */
.insights-carousel__slide .insights-featured { margin-bottom: 0; height: 100%; }

.insights-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.insights-carousel__dot {
  /* 8px of ink inside a 44px touch target: the dot looks like a dot
     and is still reliably tappable with a thumb. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.insights-carousel__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--color-border);
  transition: background 140ms ease, transform 140ms ease;
}

.insights-carousel__dot.is-active::before {
  background: var(--color-primary);
  transform: scale(1.4);
}

.insights-carousel__dot:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -8px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .insights-carousel__track { scroll-behavior: auto; }
  .insights-carousel__dot::before { transition: none; }
}

/* §3 engagement row. Wraps rather than scrolls: three short figures
   fit one line from 320px, and if a future fourth metric does not,
   wrapping keeps them all readable instead of hiding some off-edge. */
.insight-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.insight-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.insight-card__stat .icon { color: var(--color-text-muted); }

.insight-card__summary {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.insight-card__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: var(--space-2) 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.insight-card__byline img {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-circle);
}

.insight-card__author { font-weight: var(--fw-semibold); color: var(--color-ink-soft); }

.insight-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* 24px tall, which is WCAG 2.2's target-size (minimum) floor.
   These were 22.5px with 6px gaps — under the floor on both counts,
   and on a phone that is a row of 11px labels you aim at rather than
   tap. The pill looks the same; it just has the height to be hit. */
.insight-card__topics a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: 0.6875rem;
  text-decoration: none;
}

.insight-card__topics a:hover { background: var(--color-border); }

.insight-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.insight-card--grid .insight-card__actions { justify-content: flex-end; }

.insight-card__menu { position: relative; }

.insight-card__menu-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}

.insight-card__menu-btn::-webkit-details-marker { display: none; }

.insight-card__menu-btn:hover { background: var(--color-surface); color: var(--color-ink); }

.insight-card__menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 4px);
  z-index: var(--z-dropdown);
  min-width: 200px;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.insight-card__menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-ink);
  font-size: var(--fs-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.insight-card__menu-item:hover { background: var(--color-surface); }

.insight-card__menu-item--danger { color: var(--color-danger-text, var(--color-danger)); }

.insight-card__menu-item--danger:hover { background: var(--color-danger-soft); }

.insight-card__menu-report {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.insight-card__menu-reason {
  min-height: 36px;
  margin-inline: var(--space-1);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--fs-sm);
}

/* ---- Pagination (§12) -------------------------------------------------- */

.insights-pager {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}

.insights-pager .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.insights-pager .page-numbers:hover { background: var(--color-surface); }

.insights-pager .page-numbers.current {
  border-color: transparent;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}

/* ---- Empty state ------------------------------------------------------- */

.insights-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  text-align: center;
}

.insights-empty__icon { color: var(--color-text-muted); }

.insights-empty__title { margin: 0; font-weight: var(--fw-semibold); color: var(--color-ink); }

/* ---- The rail (§8-§11) -------------------------------------------------- */

/* The rail is a stacked block beneath the feed by default and only
   becomes a sidebar once there is a column to put it in (1280+).

   It used to be display:none below that, which did not "collapse" the
   rail so much as delete it: My Insights, Popular Topics, Top
   Contributors and Editor's Picks — four of the spec's sections — were
   absent on every phone and tablet, which is most of the traffic. A
   narrow screen is a reason to put them after the articles, not to
   withhold them. */
.insights-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Tablet has width to spare once these are full-bleed, so pair them up
   rather than running one tall column the reader has to scroll past. */
@media (min-width: 768px) and (max-width: 1279px) {
  .insights-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.insights-rail__card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.insights-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.insights-rail__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  color: var(--color-ink-heading);
}

.insights-rail__title .icon { color: var(--color-primary-text); }

.insights-rail__viewall {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-text);
  text-decoration: none;
  white-space: nowrap;
}

.insights-rail__viewall:hover { text-decoration: underline; }

.insights-rail__all {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-primary-text);
}

.insights-rail__all:hover { background: var(--color-surface); }

.insights-rail__lede {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.insights-rail__note {
  margin: var(--space-3) 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* My Insights numbers */
.insights-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.insights-stat { display: flex; flex-direction: column; min-width: 0; }

.insights-stat__value {
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--color-ink-heading);
  line-height: 1.1;
}

.insights-stat__label {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  line-height: 1.2;
}

/* Popular topics */
.insights-topics,
.insights-authors {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.insights-topics__row,
.insights-authors__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.insights-topics__rank,
.insights-authors__rank {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-align: center;
}

.insights-topics__name {
  color: var(--color-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insights-topics__name:hover { color: var(--color-primary-text); }

.insights-topics__count,
.insights-authors__count {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.insights-authors__who {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-ink);
  text-decoration: none;
}

.insights-authors__who img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}

.insights-authors__who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insights-authors__who:hover span { color: var(--color-primary-text); }

/* Editor's picks */
.insights-picks {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.insights-picks__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.insights-picks__thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  line-height: 0;
}

.insights-picks__thumb img { width: 56px; height: 48px; object-fit: cover; }

.insights-picks__fallback {
  display: grid;
  place-items: center;
  width: 56px;
  height: 48px;
  color: var(--color-text-muted);
}

.insights-picks__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.insights-picks__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-heading);
  text-decoration: none;
}

.insights-picks__title:hover { color: var(--color-primary-text); }

.insights-picks__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* ---- Responsive (§13) ---------------------------------------------------
   The phone keeps one column, a compact hero and a thumbnail row; the
   rail moves below nothing — it is simply not drawn, because every one
   of its four cards is reachable from the page itself (My articles is a
   tab, topics are chips, Editor's picks is a tab). A stack of four
   extra cards below a paginated list is a second page nobody scrolls
   to. */

@media (max-width: 767px) {
  .insights-page { padding-inline: var(--space-3); }

  .insights-head { flex-direction: column; align-items: stretch; }

  .insights-head__title { font-size: 1.5rem; }

  .insights-head__write { justify-content: center; }

  .insights-featured__body { max-width: none; padding: var(--space-4); }

  .insights-featured__title { font-size: 1.25rem; }

  /* §13 wants the hero to become a compact card on a narrow screen. It
     was doing the opposite — 396px tall at 390px wide against 313px on
     a desktop — because the lede ran to four lines, the footer wrapped
     onto two rows and the topic pills left their absolute corner for
     the flow. All three are trimmed here rather than any one of them
     being dropped: the hero still carries every element the spec
     lists, in less room than the desktop version. */
  /* Two classes to match the base rule's specificity, which the dark
     mode paragraph override forced up — a single class here would lose
     the margin back to it. */
  .insights-featured .insights-featured__lede {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-top: var(--space-2);
  }

  .insights-featured__foot {
    margin-top: var(--space-4);
    gap: var(--space-3);
  }

  .insights-featured__byline img { width: 32px; height: 32px; }

  /* The byline and the button need 388px of a 334px row, so the button
     cannot share the line at this width. Rather than leave it looking
     wrapped, it takes the full width — which also gives it a far better
     tap target than a cramped inline button would have. */
  .insights-featured__cta { width: 100%; justify-content: center; }

  /* The topic pills overlap the title on a narrow hero, so they move
     into the flow underneath it. */
  .insights-featured__topics {
    position: static;
    justify-content: flex-start;
    padding: 0 var(--space-4) var(--space-4);
    margin-top: calc(var(--space-2) * -1);
  }

  .insight-card {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: var(--space-3);
    /* Anchors the menu panel to the card rather than to the narrow
       actions column it lives in. */
    position: relative;
  }

  /* Full card width on a phone.
     Anchored to the kebab it was only ~200px wide, so its bottom edge
     landed across the middle of the next card's topic pills — leaving
     each pill a tappable 11px sliver under an opaque panel. axe calls
     that "partially obscured" and it is a real mis-tap risk, not just a
     rule: a thumb aiming at the panel's edge hits a topic filter and
     navigates away. Spanning the card covers whatever is beneath it
     completely, so there is no sliver left to catch. */
  /* The kebab's own wrapper has to stop being the containing block,
     or inset-inline resolves against a 32px button and the panel comes
     out 10px wide — which is how the first attempt at this "passed":
     a 10px sliver obscures nothing and squashes the Report select to
     18px. The card is the anchor. */
  .insight-card__menu { position: static; }

  .insight-card__menu-panel {
    inset-inline: var(--space-3);
    min-width: 0;
  }

  .insight-card__thumb img,
  .insight-card__thumb-fallback { height: 64px; }

  .insights-toolbar { border-bottom: 0; }

  .insights-toolbar__right { width: 100%; justify-content: space-between; }
}

@media (min-width: 1280px) {
  .insights-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: var(--space-8);
  }

  .insights-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: calc(var(--jdev-header-h, 73px) + var(--space-4));
  }
}