/* /news ledger and the "In the news" entity module.

   Built from the shared blocks: the page_masthead macro + pm-atmosphere
   (page_masthead.css) carry the header, and cc-empty / cc-pill / cc-btn /
   cc-stagger / cc-motion-rise (theme.css) carry the chrome. This file only
   adds the two things that are news-specific -- the day rail and the wire
   line -- and reads every colour off the theme tokens (no new palette token,
   no gradient literal outside gradients.css). The page accent is the site's
   existing "recent" token, set on <body> by the page_accent block.

   The one indulgence is the wire line: mono, uppercase, an accent bar, the
   outlet that broke it in strong ink. Everything else stays quiet so that
   line is the thing the page is remembered by. */

.news-page {
  padding-bottom: 4rem;
}

/* ---- ledger ------------------------------------------------------- */

/* The masthead spans the container like every other landing page; the
   ledger itself holds an editorial measure, so a 1440px window does not
   stretch a headline across the whole screen. */
.news-ledger {
  max-width: 1120px;
  margin-top: 0.5rem;
}

/* One row per DAY: the rail on the left, that day's stories on the right.
   The rail is the date, so stories carry no date of their own. */
.news-day {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0 2.5rem;
  padding: 1.9rem 0;
  border-top: 1px solid var(--border);
}

.news-day:first-child {
  border-top: 0;
}

.news-day-rail {
  position: sticky;
  top: 5.25rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.news-day-weekday {
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--page-accent, var(--action));
}

.news-day-date {
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
}

.news-day-count {
  margin-top: 0.45rem;
  font-size: 0.68rem;
}

/* ---- stories ------------------------------------------------------ */

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-story {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.news-story:first-child {
  padding-top: 0;
  border-top: 0;
}

.news-body {
  flex: 1 1 auto;
  min-width: 0;
}

.news-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* A story several outlets ran is the bigger story; the size says so before
   the pill does. */
.news-story--multi .news-title {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.news-title a {
  color: inherit;
  text-decoration: none;
}

.news-title a:hover,
.news-title a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--page-accent, var(--action));
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.news-summary {
  margin: 0;
  max-width: 66ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.news-thumb {
  flex: 0 0 auto;
  width: 136px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

/* ---- preview batches ---------------------------------------------- */

.news-preview-batch {
  width: 100%;
  min-width: 0;
}

/* The batch opens by growing rather than snapping.
   ::details-content is the only handle on a <details>' own slot, so this
   needs no wrapper element and no JS. The height is animated as a grid
   track, 0fr -> 1fr, rather than block-size 0 -> auto: the latter needs
   interpolate-size, which Safari and Firefox do not ship (WebKit bug 295132,
   Gecko bug 1945962), so on both the batch snapped open with no motion at all.
   Track interpolation is in every engine, and the pseudo-element itself is
   in Chrome 131, Safari 18.4 and Firefox 143. Browsers without it ignore the
   whole rule and open instantly, which is the same thing without the motion
   -- the row is never left collapsed or unreadable.
   The closed track floors at the item's margin box, so the list carries no
   margin of its own (its top spacing sits on the first item instead) --
   otherwise the transition starts from a visible sliver rather than 0.
   Open and close take the site's asymmetric pair -- a fuller enter, a
   quicker exit -- and the tokens come from theme.css, which
   prefers-reduced-motion already drops to 1ms, so this needs no media
   query of its own. The transition on the closed rule is the one that
   plays on close; the open rule's plays on open. */
.news-preview-batch::details-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: clip;
  transition:
    grid-template-rows var(--motion-fast) var(--ease-exit),
    opacity var(--motion-fast) var(--ease-exit),
    content-visibility var(--motion-fast) allow-discrete;
}

.news-preview-batch[open]::details-content {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--motion-med) var(--ease-standard),
    opacity var(--motion-med) var(--ease-standard),
    content-visibility var(--motion-med) allow-discrete;
}

.news-preview-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.45rem;
  min-height: 44px;
  padding: 0.6rem 0;
  cursor: pointer;
  line-height: 1.5;
  overflow-wrap: anywhere;
  /* The default triangle takes no transform -- ::marker accepts colour and
     little else -- so it is dropped for a chevron that can turn. Both forms
     are needed: list-style covers the standard marker, the -webkit- rule
     covers older WebKit, which draws its own. */
  list-style: none;
}

.news-preview-toggle::-webkit-details-marker {
  display: none;
}

.news-preview-toggle::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid var(--page-accent, var(--action));
  border-bottom: 2px solid var(--page-accent, var(--action));
  transform: rotate(-45deg);
  transition: transform var(--motion-fast) var(--ease-standard);
}

.news-preview-batch[open] > .news-preview-toggle::before {
  transform: rotate(45deg);
}

.news-preview-toggle:focus-visible {
  outline: 2px solid var(--page-accent, var(--action));
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.news-preview-label {
  min-width: 0;
  font-size: 1.12rem;
  font-weight: 600;
}

.news-preview-meta {
  min-width: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.news-preview-list {
  list-style: none;
  /* No margin: as the grid item of ::details-content above, any margin
     would become the closed track's floor. min-height: 0 lets the track
     really reach 0 (a grid item's automatic minimum is its content). */
  margin: 0;
  min-height: 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--border);
}

.news-preview-item {
  padding: 0.8rem 0;
  overflow-wrap: anywhere;
}

/* The 0.5rem the list used to carry as margin-top, kept off the grid item. */
.news-preview-item:first-child {
  padding-top: 1.3rem;
}

.news-preview-item + .news-preview-item {
  border-top: 1px solid var(--border);
}

.news-preview-item .news-wire {
  margin-bottom: 0;
}

/* ---- the wire line ------------------------------------------------- */

.news-wire {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
  margin: 0 0 0.55rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--page-accent, var(--action));
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.news-wire a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.news-wire a:hover,
.news-wire a:focus-visible {
  color: var(--text);
  border-bottom-color: var(--page-accent, var(--action));
}

.news-wire-first {
  color: var(--text);
  font-weight: 700;
}

.news-wire-verb {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

/* "broke it · also covered by": the second verb opens a new clause. */
.news-wire-verb + .news-wire-verb::before {
  content: "·";
  margin-right: 0.45rem;
  color: var(--page-accent, var(--action));
}

.news-wire-sep {
  margin-left: -0.45rem;
}

.news-wire-time {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.news-wire-time::before {
  content: "·";
  margin-right: 0.45rem;
}

/* ---- pager --------------------------------------------------------- */

.news-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.news-pager .cc-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.news-pager-older {
  margin-left: auto;
}

/* ---- small screens -------------------------------------------------- */

@media (max-width: 767.98px) {
  .news-day {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding: 1.4rem 0;
  }

  .news-day-rail {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
  }

  .news-day-date {
    font-size: 1.3rem;
  }

  .news-day-count {
    margin-top: 0;
    margin-left: auto;
  }

  .news-story {
    gap: 1rem;
  }

  .news-story--multi .news-title {
    font-size: 1.22rem;
  }

  .news-thumb {
    width: 96px;
    height: 64px;
  }
}

@media (max-width: 480px) {
  .news-thumb {
    display: none;
  }
}

/* ---- "In the news" entity module ----------------------------------- */

.entity-news {
  margin: 1.75rem 0;
  padding: 1.1rem 1.35rem 1.25rem;
  border-left: 3px solid var(--page-accent, var(--action));
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}

.entity-news-heading {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--page-accent, var(--action));
}

.entity-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.entity-news-title {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
  text-decoration: none;
  text-wrap: balance;
}

.entity-news-title:hover,
.entity-news-title:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--page-accent, var(--action));
  text-underline-offset: 0.18em;
}

/* The module already carries the accent bar; the wire inside it does not
   repeat it. */
.entity-news .news-wire {
  margin: 0;
  padding-left: 0;
  border-left: 0;
}

.entity-news-more {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}

.entity-news-more:hover,
.entity-news-more:focus-visible {
  color: var(--page-accent, var(--action));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---- Discussion threads (GH-300) ---------------------------------------- */

.news-discuss-form {
  display: inline;
  margin: 0;
}

.news-discuss {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
}

.news-discuss:hover,
.news-discuss:focus-visible {
  color: var(--page-accent, var(--action));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.news-discuss--open {
  color: var(--text);
}

/* ---- Votes (a vote on the story's board:news thread) --------------------- */

.news-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-top: 0.35rem;
}

.news-actions .news-discuss {
  margin-top: 0;
}

.news-vote {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.news-vote-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard);
}

.news-vote-up:hover,
.news-vote-up[aria-pressed="true"] {
  color: var(--brand);
}

.news-vote-down:hover,
.news-vote-down[aria-pressed="true"] {
  color: var(--accent-interest);
}

.news-vote-arrow:focus-visible {
  border-color: var(--border-strong);
}

.news-vote-arrow:active {
  transform: scale(0.9);
}

.news-vote-score {
  min-width: 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text);
}