/* ==========================================================================
   Headline Cloud — the reading hub (issue #1930, Epic B #1928)
   --------------------------------------------------------------------------
   A dense, variable-size word-cloud of headline chips rendered at the top of
   the brief. Built client-side by headline_cloud_controller.js from B1's
   data-* attributes. Dormant in prod (gated; see BriefDomHelper).

   Uses ONLY the warm `--color-*` palette + the type scale. Serif (Fraunces)
   headings give it the same editorial feel as the brief itself; the terracotta
   accent (--color-accent) carries emphasis. No new colors are introduced.
   ========================================================================== */

.headline-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-10);
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  /* The hub is the anchor — keep it visually distinct from the article body. */
  box-shadow: var(--shadow-sm);
}

.headline-cloud[hidden] {
  display: none;
}

/* Each chip is a real <button> — reset the UA chrome, keep it inline-flowing
   so chips pack densely and wrap like a word cloud. */
.headline-cloud__chip {
  /* Source-pill aesthetic: small sans, pill shape, dense inline pack. Mirrors
     `.source-pill` (briefs.css) so the cloud reads as navigation chips, not
     stacked headlines. Variable size still carries weight, but at a tight 11-15px
     scale set by the bucket modifiers below. */
  font-family: inherit;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 3px 10px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  border-radius: 9999px;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.headline-cloud__chip:hover {
  color: var(--color-accent);
  background-color: var(--color-accent-tint);
}

/* Visible, on-brand focus ring for keyboard users. */
.headline-cloud__chip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--color-accent-hover);
}

/* ── Variable size buckets (smallest → largest) ──────────────────────────────
   The controller assigns exactly one of these per chip from importance (when
   present) or the position/story-count fallback. Bigger = more important /
   earlier / denser, giving the true word-cloud weight hierarchy. */
/* Tight 11-15px scale — pill-sized at every bucket. xs is the source-pill
   baseline; xl carries terracotta emphasis via border + color, NOT via giant
   size, so high-importance items stand out without dominating. */
.headline-cloud__chip--xs {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.headline-cloud__chip--sm {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.headline-cloud__chip--md {
  font-size: 0.8125rem;
}

.headline-cloud__chip--lg {
  font-size: 0.875rem;
  font-weight: 700;
}

.headline-cloud__chip--xl {
  font-size: 0.9375rem;
  color: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: 700;
}

/* ── Read-state grey-out (issue #1932) ──────────────────────────────────────
   A chip is marked read once its section has been summoned (clicked) OR dwelled
   past the instrumentation controller's threshold while scrolling. Read chips
   de-emphasize so the reader can see at a glance what's left: muted text, a
   thin "read" underline, and a small check affordance. State is ALSO reflected
   to assistive tech via an "(read)" accessible-name suffix the controller sets
   — color is never the only signal. Contrast: --color-text-muted (#9a918a) on
   --color-bg-alt (#f3f0eb) keeps the text legible while clearly recessed. */
.headline-cloud__chip--read {
  color: var(--color-text-muted);
  font-weight: 600;
  /* A quiet check glyph marks the chip as done without relying on color. */
  border-bottom: 1px solid var(--color-border);
}

.headline-cloud__chip--read::after {
  content: " \2713"; /* ✓ — a non-color "done" affordance */
  color: var(--color-text-muted);
  font-weight: 700;
}

/* Read overrides the per-bucket emphasis colors (xl/section etc.) so a read
   chip always reads as recessed regardless of its size bucket. */
.headline-cloud__chip--read,
.headline-cloud__chip--read[data-cloud-kind="section"] {
  color: var(--color-text-muted);
}

/* Still fully interactive: hovering/focusing a read chip restores the accent so
   the reader knows it's clickable (re-summon / jump-to). */
.headline-cloud__chip--read:hover,
.headline-cloud__chip--read:focus-visible {
  color: var(--color-accent);
}

/* Section-level (collapsed / high-volume) chips read as a quieter "category"
   token so they don't compete with individual story headlines of the same
   size. */
.headline-cloud__chip[data-cloud-kind="section"] {
  font-style: italic;
  color: var(--color-text-muted);
}

.headline-cloud__chip[data-cloud-kind="section"]:hover,
.headline-cloud__chip[data-cloud-kind="section"]:focus-visible {
  color: var(--color-accent);
}

/* ==========================================================================
   Read-stack — summoned sections (issue #1931)
   --------------------------------------------------------------------------
   When a reader clicks a cloud chip, that chip's section is MOVED (not copied)
   out of the linear brief body into this stack, which sits ABOVE the hub. The
   hub stays put as the anchor; unread sections remain below it in linear order.
   Each summoned section gets a "Return to brief" affordance that moves it back
   to its original position. Uses only the warm --color-* palette.
   ========================================================================== */
.read-stack {
  margin: 0 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.read-stack[hidden] {
  display: none;
}

/* Each summoned section reads as a distinct "card" so the reader sees their
   chosen stack as separate from both the hub and the linear brief below. */
.read-stack__item {
  position: relative;
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* The return control sits top-right, quiet until hovered/focused. */
.read-stack__return {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.read-stack__return:hover {
  color: var(--color-accent);
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
}

.read-stack__return:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: var(--color-accent-hover);
}

@media (max-width: 640px) {
  .read-stack__item {
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  .headline-cloud {
    padding: var(--space-4);
    gap: var(--space-2);
  }

  /* No per-bucket size overrides on mobile — the new 11-15px pill scale already
     fits phones. The old overrides (xl → text-2xl ≈ 26px, lg → text-xl ≈ 21px)
     undid the pill aesthetic and reintroduced stacked-headline behavior on the
     viewport where wrapping is most constrained (Codex/Copilot review on PR
     #1965). */
}