/* ai·radar · site/story.css
   Styles for the Story Modal and Static Story Page (Round 2 Polish).
   Synchronized with Bento Keynote design language and tokens.css.
   Respects 4pt spacing scale, 65ch reading measure, and dark mode tokens.
*/

:root {
  --radius-16: 16px;
  --radius-4: 4px;
}

/* ==========================================================================
   1. DIALOG MODAL BASE (DESKTOP & MOBILE RESPONSIVE)
   ========================================================================== */

dialog.story-dialog:not([open]) {
  display: none !important;
}

/* Native dialog reset and backdrop */
dialog.story-dialog[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-ink);
  overflow: hidden;
  z-index: 1000;
}

dialog.story-dialog::backdrop {
  background: rgba(10, 10, 14, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity var(--duration-250) var(--ease-flow);
}

/* Scroller container inside the dialog */
.story-dialog-scroller {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-canvas);
}

/* Desktop layout (centered modal panel) */
@media (min-width: 768px) {
  dialog.story-dialog[open] {
    display: grid;
    place-items: center;
    background: transparent;
    padding: var(--space-24);
    box-sizing: border-box;
  }

  .story-dialog-scroller {
    /* The panel hugs the single reading column (68ch plus the body gutters). */
    width: min(760px, calc(100vw - var(--space-48)));
    max-height: min(90vh, 1000px);
    margin: auto;
    border-radius: var(--tile-radius);
    border: 0;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.08);
    animation: storyModalIn var(--duration-250) var(--ease-flow);
  }
}

/* Phone layout (full-screen sheet) */
@media (max-width: 767px) {
  dialog.story-dialog[open] {
    display: block;
  }

  .story-dialog-scroller {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    animation: storySheetIn var(--duration-250) var(--ease-flow);
  }
}

@keyframes storyModalIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes storySheetIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-dialog-scroller {
    animation: none !important;
  }
}

/* ==========================================================================
   2. MODAL STICKY HEADER BAR
   ========================================================================== */

.story-dialog-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: var(--space-8) var(--space-24);
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hair);
}

@media (max-width: 767px) {
  .story-dialog-bar {
    min-height: 52px;
    padding: var(--space-8) var(--space-16);
  }
}

.story-modal-close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--space-16);
  border-radius: var(--radius-full);
  border: 0;
  background: var(--color-fill);
  color: var(--color-ink-2);
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-150) var(--ease-flow),
              color var(--duration-150) var(--ease-flow),
              transform var(--duration-150) var(--ease-flow);
}

.story-modal-close:hover {
  background: var(--color-field-on);
  color: var(--color-ink);
  transform: translateY(-1px);
}

.story-modal-close:active {
  transform: translateY(1px);
}

.story-modal-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.story-close-kbd {
  display: inline-block;
  padding: 1px var(--space-8);
  border-radius: var(--radius-4, 4px);
  background: var(--color-fill);
  color: var(--color-ink-3);
  font-size: var(--text-micro);
  font-family: inherit;
  border: 0;
  margin-left: var(--space-4);
}

@media (max-width: 767px) {
  .story-close-kbd {
    display: none;
  }
  .story-modal-close {
    padding: 0 var(--space-12);
  }
}

.story-dialog-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Icon button in header bar */
.story-icon-btn,
.doc-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
  border: 0;
  background: var(--color-fill);
  color: var(--color-ink-2);
  cursor: pointer;
  transition: background var(--duration-150) var(--ease-flow),
              color var(--duration-150) var(--ease-flow),
              transform var(--duration-150) var(--ease-flow);
}

.story-icon-btn:hover,
.doc-icon-btn:hover {
  background: var(--color-field-on);
  color: var(--color-ink);
  transform: translateY(-1px);
}

.story-icon-btn:active,
.doc-icon-btn:active {
  transform: translateY(1px);
}

.story-icon-btn:focus-visible,
.doc-icon-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.story-icon-btn.is-saved,
.doc-icon-btn.is-saved {
  color: var(--color-accent);
  background: var(--color-fill);
  border-color: var(--color-accent);
}

/* Story page top bar: stays on a single calm line at every width, matching the home bar */
.feed-bar:has(.doc-nav) .feed-bar-in,
.feed-bar-in:has(.doc-nav),
.feed-bar-in:has(#doc-back-btn) {
  flex-wrap: nowrap;
  height: var(--bar-h);
  align-items: center;
  column-gap: var(--space-8);
}

@media (max-width: 767px) {
  .feed-bar:has(.doc-nav) .feed-bar-in,
  .feed-bar-in:has(.doc-nav),
  .feed-bar-in:has(#doc-back-btn) {
    padding-top: 0;
    column-gap: var(--space-8);
    height: var(--bar-h);
    flex-wrap: nowrap;
  }
  .doc-nav {
    order: 0;
    flex-shrink: 0;
  }
  #doc-back-btn.story-modal-close {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-full);
  }
  #doc-back-btn span {
    display: none;
  }
  .feed-bar:has(.doc-nav) .feed-brand,
  .feed-bar-in:has(.doc-nav) .feed-brand,
  .feed-bar-in:has(#doc-back-btn) .feed-brand {
    order: 1;
    flex: none;
    font-size: var(--size-18);
  }
  .feed-bar:has(.doc-nav) .ed-link,
  .feed-bar-in:has(.doc-nav) .ed-link,
  .feed-bar-in:has(#doc-back-btn) .ed-link {
    order: 2;
    padding: 0 var(--space-12);
    font-size: var(--text-small);
    min-height: 44px;
  }
  .feed-bar:has(.doc-nav) .tc-link,
  .feed-bar-in:has(.doc-nav) .tc-link,
  .feed-bar-in:has(#doc-back-btn) .tc-link {
    order: 3;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .feed-bar:has(.doc-nav) .theme-btn,
  .feed-bar-in:has(.doc-nav) .theme-btn,
  .feed-bar-in:has(#doc-back-btn) .theme-btn {
    order: 4;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 359px) {
  .feed-bar:has(.doc-nav) .feed-bar-in,
  .feed-bar-in:has(.doc-nav),
  .feed-bar-in:has(#doc-back-btn) {
    column-gap: var(--space-4);
  }
  .feed-bar:has(.doc-nav) .ed-link,
  .feed-bar-in:has(.doc-nav) .ed-link,
  .feed-bar-in:has(#doc-back-btn) .ed-link {
    padding: 0 var(--space-8);
  }
}

/* ==========================================================================
   3. ARTICLE CONTENT CONTAINER
   ========================================================================== */

.story-dialog-body {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-24) var(--space-48);
  width: 100%;
  box-sizing: border-box;
}

.story-page-container {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-32) var(--space-24) var(--space-64);
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .story-dialog-body,
  .story-page-container {
    padding: var(--space-16) var(--space-16) var(--space-48);
  }
}

/* One reading column: every block stacks at the same width, separated by one rhythm. */
.story-article {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  max-width: 68ch;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .story-article {
    gap: var(--space-24);
  }
}

.story-article > * {
  margin: 0;
}

/* A story page arrives as static HTML and story-page.js redraws it from the story's data, which has more blocks (the
   picture, the coverage). With scripts on, the static copy stays invisible until that redraw, or for at most 1.5 s, so
   the page draws once instead of jumping (layout shift 0.12 at 768px, measured 08/11). */
@media (scripting: enabled) {
  .story-page-container:not([data-ready]) > .story-article {
    visibility: hidden;
    animation: story-reveal 0s linear 1.5s forwards;
  }
}

@keyframes story-reveal {
  to { visibility: visible; }
}

/* Header & Publisher Info */
.story-header {
  min-width: 0;
}

.story-meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-8);
}

.story-pub-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  font-size: var(--text-small);
  color: var(--color-ink-2);
  flex: 1;
  min-width: 0;
}

.story-pub-info .src-av {
  flex-shrink: 0;
}

.story-pub-name,
.story-pub-name-link {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  transition: color var(--duration-150) var(--ease-flow);
}

.story-pub-name-link:hover {
  color: var(--color-accent);
}

.story-ext-arrow {
  color: var(--color-ink-3);
  font-size: var(--size-12);
  transition: transform var(--duration-150) var(--ease-flow), color var(--duration-150) var(--ease-flow);
}

.story-pub-name-link:hover .story-ext-arrow {
  color: var(--color-accent);
  transform: translate(1px, -1px);
}

.story-kind-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-fill);
  color: var(--color-ink-2);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
}

.story-pub-dot {
  color: var(--color-ink-3);
}

.story-pub-info time {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-2);
}

.story-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

/* Headline */
.story-headline {
  font-size: clamp(var(--size-28), 2.8vw, var(--size-40));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--color-heading);
  text-wrap: balance;
  overflow-wrap: anywhere;
  margin: 0;
}

.story-page-container .story-headline {
  font-size: clamp(var(--size-32), 3.6vw, var(--size-56));
}

@media (max-width: 767px) {
  .story-headline,
  .story-page-container .story-headline {
    font-size: clamp(var(--size-28), 6vw, var(--size-32));
    line-height: 1.15;
  }
}

/* Long headlines (story.js headlineSizeClass): a 300-character social post set at display size
   filled 483px of a 375px-wide screen. Step the size down by length so the summary stays in view;
   headlines up to 100 characters keep the display size above. */
.story-headline.is-long,
.story-page-container .story-headline.is-long {
  font-size: clamp(var(--size-28), 2.2vw, var(--size-32));
  line-height: var(--leading-snug);
}

/* The page sets short headlines one step larger than the modal; long ones follow one step down too. */
.story-page-container .story-headline.is-long {
  font-size: clamp(var(--size-28), 2.8vw, var(--size-40));
}

.story-headline.is-post,
.story-page-container .story-headline.is-post {
  font-size: var(--text-tile);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

@media (max-width: 767px) {
  .story-headline.is-long,
  .story-page-container .story-headline.is-long {
    font-size: var(--text-tile);
  }

  .story-headline.is-post,
  .story-page-container .story-headline.is-post {
    font-size: var(--text-title);
  }
}

/* Translated line */
.story-orig-block {
  margin-bottom: var(--space-16);
}

.story-orig-block .card-orig,
.story-article .card-orig {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-ink-2);
  line-height: var(--leading-snug);
  min-width: 0;
  max-width: 100%;
}

.story-orig-block .card-orig .orig-text,
.story-article .card-orig .orig-text {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Link to the original under the headline: a small secondary text link, quieter than the summary. */
.story-header-cta {
  margin: var(--space-4) 0 0;
}

.story-origin-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  /* One line always: a long publisher name ellipsizes; the full label stays in the accessible
     name and title. The link box keeps a 44px touch height while the text stays small. */
  max-width: 100%;
  min-height: 44px;
  color: var(--color-ink-2);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--color-hair);
  text-underline-offset: 3px;
  transition: color var(--duration-150) var(--ease-flow),
              text-decoration-color var(--duration-150) var(--ease-flow);
}

@media (hover: hover) and (pointer: fine) {
  .story-origin-cta:hover {
    color: var(--color-ink);
    text-decoration-color: currentColor;
  }
}

.story-origin-cta:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.story-cta-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-cta-arrow {
  flex-shrink: 0;
  color: var(--color-ink-3);
  font-size: var(--size-12);
  line-height: 1;
}

/* ==========================================================================
   4. IMAGE: FULL COLUMN WIDTH, BETWEEN THE HEADLINE BLOCK AND THE TEXT
   ========================================================================== */

.story-media {
  margin: 0;
  min-width: 0;
}

/* The frame keeps its 16:9 place from the first paint; the picture inside is drawn whole, never cropped, on a
   blurred copy of itself (.media-backdrop, feed.css), so a square chart or a tall screenshot keeps every edge. */
.story-media-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-16);
  background: var(--color-fill);
}

.story-media-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A cover drawn from the story's facts fills the frame; its drawing sits in a safe area, so only surface is cropped. */
.story-media-img.is-cover { position: absolute; inset: 0; object-fit: cover; }

/* The caption is a quiet line under the picture, not a bar attached to it. */
.story-media-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4) var(--space-12);
  padding-top: var(--space-8);
  font-size: var(--text-micro);
  line-height: var(--leading-snug);
  color: var(--color-ink-3);
}

.story-media-caption .story-pub-name {
  font-weight: var(--weight-medium);
  color: var(--color-ink-2);
}

/* ==========================================================================
   5. TEXT: SUMMARY OR EXCERPT, SET AS ARTICLE PROSE ON THE PAGE ITSELF
   ========================================================================== */

.story-body {
  min-width: 0;
}

.story-keypoints-box + .story-summary-box {
  margin-top: var(--space-24);
}

/* No card around the text: it is the article, so it sits on the canvas like the headline. */
.story-keypoints-box,
.story-summary-box {
  min-width: 0;
  max-width: 100%;
}

.story-section-head {
  margin-bottom: var(--space-16);
}

.story-section-h2 {
  font-size: var(--size-21);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin: 0;
}

/* Inside the reading column the excerpt's label is a quiet subhead, not a second headline. */
.story-body .story-section-h2 {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
}

.story-section-sub {
  font-size: var(--text-small);
  color: var(--color-ink-2);
  margin: var(--space-4) 0 0;
}

.story-points-list {
  display: grid;
  gap: var(--space-16);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}

.story-point-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-16);
  align-items: baseline;
}

.story-point-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-fill);
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  border: none;
}

.story-point-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.story-summary-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  margin: var(--space-16) 0 0;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.story-points-disclosure {
  margin: var(--space-16) 0 0;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-hair);
  font-size: var(--text-micro);
  color: var(--color-ink-3);
  line-height: var(--leading-body);
}

/* On wider screens the reading text steps up one size, as an article body rather than a card note. */
@media (min-width: 768px) {
  .story-point-text,
  .story-summary-text {
    font-size: var(--text-title);
  }
}

/* The publisher's own description, shown when Halcyon has no summary: a quoted note on an inset panel, set at body
   size and quieter ink, so it never reads as the desk's prose (which opens with the accent rule and a larger lead). */
.story-source-desc {
  padding: 0;
}

.story-source-desc .story-section-head {
  margin-bottom: var(--space-12);
}

.story-body .story-source-desc .story-section-h2 {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
  color: var(--color-ink);
}

.story-source-desc .story-section-sub {
  font-size: var(--text-small);
}

.story-source-desc .story-summary-text {
  margin: 0;
  font-size: var(--text-body);
  color: var(--color-ink);
  max-width: 68ch;
}

.story-empty-box {
  padding: var(--space-24) 0;
}

.story-empty-text {
  color: var(--color-ink-2);
  font-size: var(--text-body);
  margin: 0;
}

/* ==========================================================================
   6. COVERAGE LIST ("CÁC NGUỒN CÙNG ĐƯA TIN"): ONE COLUMN OF HAIRLINE ROWS
   ========================================================================== */

.story-coverage-wrap {
  min-width: 0;
}

.story-detail-footer {
  display: grid;
  gap: var(--space-12);
  color: var(--color-ink-2);
}

.story-detail-footer .story-summary-sources,
.story-detail-footer .story-image-credit {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.story-detail-footer .story-summary-sources a {
  display: inline-block;
  min-height: 44px;
  max-width: 100%;
  color: inherit;
  text-underline-offset: 3px;
}

.story-detail-footer .story-coverage-list > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.story-detail-footer .story-summary-sources a:focus-visible,
.story-detail-footer .story-coverage-list > li > a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.story-detail-footer .story-orig-block {
  margin: 0;
}

.story-detail-footer .story-points-disclosure {
  margin: 0;
  padding: 0;
  border: 0;
}

.story-detail-footer .story-coverage-list,
.story-detail-footer .story-coverage-list > li {
  border: 0;
}

.story-coverage-wrap > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 44px;
  color: var(--color-ink-2);
  font-size: var(--text-small);
  cursor: pointer;
  list-style: none;
}

.story-coverage-wrap > summary::-webkit-details-marker {
  display: none;
}

.story-coverage-wrap > summary::after {
  content: "⌄";
  font-size: var(--text-title);
}

.story-coverage-wrap[open] > summary::after {
  transform: rotate(180deg);
}

.story-coverage-wrap > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.story-coverage-wrap .story-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.story-coverage-count {
  font-size: var(--text-small);
  color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}

.story-coverage-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-hair);
}

.story-coverage-list > li {
  border-top: 1px solid var(--color-hair);
}

.story-cov-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 44px;
  padding: var(--space-12) 0;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--duration-150) var(--ease-flow);
}

@media (hover: hover) and (pointer: fine) {
  .story-cov-item:hover .story-cov-title {
    color: var(--color-accent);
  }
}

.story-cov-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.story-cov-main {
  flex: 1;
  min-width: 0;
}

.story-cov-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-micro);
  color: var(--color-ink-2);
  margin-bottom: var(--space-4);
}

.story-cov-title {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin: 0;
}

.story-cov-arrow {
  display: inline-grid;
  place-items: center;
  color: var(--color-ink-3);
  flex-shrink: 0;
  transition: color var(--duration-150) var(--ease-flow), transform var(--duration-150) var(--ease-flow);
}

.story-cov-item:hover .story-cov-arrow {
  color: var(--color-accent);
  transform: translate(2px, -2px);
}

/* ==========================================================================
   7. WAY OUT TO THE ORIGINAL: A QUIET CLOSING LINE, SECONDARY TO THE SUMMARY
   ========================================================================== */

.story-origin-gateway {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4) var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-hair);
}

.story-origin-desc {
  flex: 1 1 24ch;
  min-width: 0;
  font-size: var(--text-small);
  color: var(--color-ink-2);
  line-height: var(--leading-body);
  margin: 0;
}

/* Both exits (under the headline and at the end) are small text links, never pills or buttons.
   The link box keeps a 44px touch height while the visible text stays at the small size. */
.story-origin-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  flex-shrink: 0;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--color-hair);
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color var(--duration-150) var(--ease-flow),
              text-decoration-color var(--duration-150) var(--ease-flow);
}

@media (hover: hover) and (pointer: fine) {
  .story-origin-btn:hover {
    color: var(--color-ink);
    text-decoration-color: currentColor;
  }
}

.story-origin-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ==========================================================================
   9. FOOTER NAVIGATION
   ========================================================================== */

.story-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-hair);
}

.story-footer-link,
.story-footer-link-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: var(--space-8) 0;
  color: var(--color-ink-2);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--duration-150) var(--ease-flow);
}

.story-footer-link:hover,
.story-footer-link-btn:hover {
  color: var(--color-accent);
}

.story-footer-link:focus-visible,
.story-footer-link-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Error box */
.story-error-box {
  padding: var(--space-48) var(--space-24);
  text-align: center;
}

.story-error-title {
  font-size: var(--size-28);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-bottom: var(--space-12);
}

.story-error-msg {
  color: var(--color-ink-2);
  font-size: var(--text-body);
  margin-bottom: var(--space-24);
}

/* Full-summary sources remain readable in both reader surfaces. */
.story-summary-attribution { margin-top: var(--space-16); }
.story-summary-sources {
  margin: var(--space-16) 0 0;
  font-size: var(--text-small);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}
.story-summary-sources a { color: inherit; text-underline-offset: 3px; }

/* ==========================================================================
   10. HALCYON SUMMARY: AN EDITORIAL PIECE WITH A LEAD PARAGRAPH
   ========================================================================== */

/* The byline names the desk and the outlet; the credit names the sources. */
.story-body .story-byline {
  margin: 0;
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  color: var(--color-ink-2);
  line-height: var(--leading-snug);
}

/* A short accent rule opens the summary above the byline, like a section mark in print. */
.story-body .story-byline::before {
  content: "";
  display: block;
  width: var(--space-32);
  height: 2px;
  margin-bottom: var(--space-12);
  background: var(--color-accent-fill);
  border-radius: var(--radius-full);
}

.story-credit-label {
  color: var(--color-ink-3);
}

/* Spacing alone separates the credit: the closing area already has the gateway and footer rules. */
.story-body .story-summary-attribution {
  margin-top: var(--space-24);
}

.story-body .story-summary-sources {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--color-ink-2);
}

.story-body .story-summary-sources a {
  color: var(--color-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--color-hair);
  text-underline-offset: 3px;
}

.story-body .story-summary-attribution .story-section-sub {
  font-size: var(--text-meta);
  color: var(--color-ink-3);
}

/* Summary bullets begin directly under the picture. */

.story-bullets {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-bullet {
  position: relative;
  max-width: 68ch;
  padding-left: var(--space-16);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* The dot sits on the first line's x-height centre: half a line down, less half the dot. */
.story-bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.5lh - var(--space-6) / 2);
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-accent-fill);
}

@media (min-width: 768px) {
  .story-bullets {
    gap: var(--space-16);
  }
  .story-bullet {
    font-size: var(--text-title);
  }
}

/* Key points: a quiet numbered list with hanging accent numerals, no circles. */
.story-body .story-points-list {
  gap: var(--space-16);
  margin: 0;
}

.story-body .story-point-item {
  grid-template-columns: var(--space-24) 1fr;
  gap: var(--space-8);
}

.story-body .story-point-num {
  width: auto;
  height: auto;
  justify-content: flex-start;
  background: none;
  color: var(--color-accent);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   STREAM PLAYER (trinh-phat.js): the story's frame, sized for a 16:9 video.
   Light surface, no rule under the bar; the video sits in a dark well until YouTube paints it.
   ========================================================================== */

.player-dialog .player-bar {
  border-bottom: 0;
}

.player-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 0 var(--space-24) var(--space-24);
}

.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-12);
  overflow: hidden;
  background: var(--gray-13);
}

.player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.player-k {
  font-size: var(--text-micro);
  line-height: 1.3;
  font-weight: var(--weight-bold);
  color: var(--color-ink-2);
}

.player-k.is-live {
  color: var(--color-live);
}

.player-title {
  margin: 0;
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.player-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

.player-yt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--btn-h);
  padding: 0 var(--space-16);
  border-radius: var(--radius-full);
  background: var(--color-fill);
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--duration-150) var(--ease-flow),
              transform var(--duration-150) var(--ease-press);
}

.player-yt .i {
  width: 16px;
  height: 16px;
}

.player-yt:hover {
  background: var(--color-field-on);
}

.player-yt:active {
  transform: scale(0.97);
}

.player-yt:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* The frame grows with the window, and stays short enough that the video, its title and the YouTube link fit in it. */
@media (min-width: 768px) {
  .player-dialog .player-panel {
    height: auto;
    width: min(var(--player-max), calc(100vw - var(--space-48)), max(32rem, calc((90dvh - 15rem) * 16 / 9 + var(--space-48))));
  }
}

/* A phone: the sheet is the whole screen, the video runs edge to edge under the bar. */
@media (max-width: 767px) {
  .player-body {
    padding: 0 0 var(--space-24);
  }

  .player-frame {
    border-radius: 0;
  }

  .player-text {
    padding: 0 var(--space-16);
  }
}