/* =============================================================
   Article detail page
   Loaded with news.css, which supplies the light/dark tokens.
   ============================================================= */

/* The shared header ships a site-wide scroll bar. On an article that would
   sit alongside the reading bar below, showing two indicators at once, and
   the reading bar is the more useful of the two because it measures the
   article body rather than the whole document. */
.scroll-progress { display: none !important; }

/* Reading progress. Sits at the very top edge with the same height, gradient
   and stacking as the site-wide bar on every other page, so the indicator
   looks identical throughout. It differs only in what it measures: the
   article body rather than the whole document. */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.1s linear;
}

.article { padding-bottom: 1rem; }

/* ---------- Header ---------- */
.article__head { padding-block: 2.5rem 1.75rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--primary); }

.article__cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.875rem;
}
.article__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.article__standfirst {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 1.75rem;
}

.article__byline {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--edge);
}
.article__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--edge);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.article__avatar img { width: 26px; height: 26px; }
.article__author { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.article__meta { display: flex; gap: 1rem; font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.125rem; }
.article__meta span { position: relative; padding-left: 1rem; }
.article__meta span::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; transform: translateY(-50%);
}

/* ---------- Cover ---------- */
.article__cover { margin-bottom: 2.5rem; }
.article__cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ---------- Body typography ---------- */
.article__body { font-size: 1.0625rem; line-height: 1.8; color: var(--ink-2); }
.article__body > * + * { margin-top: 1.375rem; }

.article__body h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 2.75rem;
  scroll-margin-top: 7rem;
}

.article__body p a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.article__body ul { display: flex; flex-direction: column; gap: 0.6875rem; padding-left: 0; }
.article__body li { position: relative; padding-left: 1.625rem; }
.article__body li::before {
  content: "";
  position: absolute;
  left: 0.25rem; top: 0.75rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.55;
}

.article__body blockquote {
  margin-block: 2.25rem;
  padding: 1.375rem 0 1.375rem 1.75rem;
  border-left: 4px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2.1vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.article__note {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  margin-block: 2rem;
  padding: 1.125rem 1.25rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}
.article__note .icon { width: 19px; height: 19px; color: var(--primary); flex-shrink: 0; margin-top: 0.1875rem; }
.article__note p { font-size: 0.9375rem; line-height: 1.65; color: var(--ink-2); }

/* ---------- Tags and share ---------- */
/* ---------- Add us on Google (Preferred Sources) ---------- */
.gsource {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.gsource__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  transition: transform 0.2s var(--ease-out), border-color 0.2s, color 0.2s;
}
.gsource__btn:hover { transform: translateY(-2px); color: var(--primary); border-color: var(--primary); }
.gsource__btn .icon { width: 18px; height: 18px; }
.gsource__hint { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); margin: 0; flex: 1 1 14rem; }

.article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--edge);
}
.article__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.article__share { display: flex; align-items: center; gap: 0.5rem; position: relative; }
.article__share-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 0.25rem;
}
.share-dot {
  width: 2.375rem; height: 2.375rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 1px solid var(--edge);
  color: var(--ink-2);
  transition: transform 0.2s var(--ease-std), color 0.2s ease, border-color 0.2s ease;
}
.share-dot:hover { transform: translateY(-2px); color: var(--primary); border-color: var(--primary); }
.share-dot .icon { width: 17px; height: 17px; }
.share-dot--linkedin:hover { color: var(--linkedin); border-color: var(--linkedin); }
.share-dot__toast {
  position: absolute;
  right: 0; bottom: calc(100% + 0.5rem);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Previous / next ---------- */
.article__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.article__nav-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--edge);
  transition: transform 0.25s var(--ease-std), border-color 0.25s ease, box-shadow 0.25s ease;
}
.article__nav-item:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-md); }
.article__nav-item--next { text-align: right; }
.article__nav-dir {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.article__nav-item--next .article__nav-dir { justify-content: flex-end; }
.article__nav-dir .icon { width: 15px; height: 15px; }
.article__nav-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Related ---------- */
.article__related {
  margin-top: 4rem;
  padding-block: 3rem 3.5rem;
  background: var(--paper);
  border-top: 1px solid var(--edge);
}
.article__related .news-section__title { margin-bottom: 1.75rem; }
.article__related + .container { padding-block: 3rem 4rem; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .article__head { padding-block: 1.75rem 1.25rem; }
  .article__foot { flex-direction: column; align-items: flex-start; }
  .article__nav { grid-template-columns: minmax(0, 1fr); }
  .article__nav-item--next { text-align: left; }
  .article__nav-item--next .article__nav-dir { justify-content: flex-start; }
}

/* ---------- Print ---------- */
@media print {
  .read-progress, .theme-toggle, .article__share, .article__nav, .gsource,
  .article__related, .newsletter, .site-header, .site-footer { display: none !important; }
  .article__body { font-size: 11pt; }
}

/* ---------- Listen to the article ---------- */
.listen {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 2rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-sm);
}
.listen__btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.2s var(--ease-std), background 0.2s ease;
}
.listen__btn:hover { transform: scale(1.06); }
.listen__btn.is-playing { background: var(--primary); }

/* Play triangle and pause bars drawn in CSS, so there is no icon to load. */
.listen__icon--play {
  width: 0; height: 0;
  border-left: 12px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}
.listen__icon--pause {
  width: 12px; height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

.listen__text { display: flex; align-items: baseline; gap: 0.625rem; flex-shrink: 0; }
.listen__label { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--ink); }
.listen__time { font-size: 0.8125rem; color: var(--ink-3); }

.listen__track {
  flex: 1;
  height: 4px;
  min-width: 2rem;
  border-radius: var(--radius-pill);
  background: var(--edge);
  overflow: hidden;
}
.listen__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.3s linear;
}

.listen__stop {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: color 0.2s ease, background 0.2s ease;
}
.listen__stop:hover { color: var(--ink); background: var(--paper-2); }
.listen__stop .icon { width: 15px; height: 15px; }

@media (max-width: 639px) {
  .listen { flex-wrap: wrap; border-radius: var(--radius-lg); }
  .listen__track { order: 3; flex-basis: 100%; margin-top: 0.25rem; }
}

@media print { .listen { display: none !important; } }

/* ---------- FAQ block ---------- */
.article__faq { display: flex; flex-direction: column; gap: 0.75rem; margin-block: 1.75rem; }
.faq-row {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: border-color 0.25s ease;
}
.faq-row[open] { border-color: rgba(37, 99, 235, 0.3); }
.faq-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row__icon {
  flex-shrink: 0;
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1;
  color: var(--primary);
  transition: transform 0.25s var(--ease-std);
}
.faq-row[open] .faq-row__icon { transform: rotate(45deg); }
.faq-row p { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); }

@media print {
  .faq-row { break-inside: avoid; }
  .faq-row p { display: block !important; }
}

/* ---------- Data table ---------- */
.article__table-wrap {
  overflow-x: auto;
  margin-block: 1.75rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--paper);
}
.article__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
/* Only tables with three or more columns need a floor that forces the wrapper to
   scroll on a phone. A two-column table fits, so leave it alone. */
.article__table:has(thead th:nth-child(3)) { min-width: 30rem; }
.article__table th, .article__table td { text-align: left; padding: 0.875rem 1.125rem; }
.article__table--numeric td,
.article__table--numeric thead th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.article__table thead th {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-2);
  border-bottom: 1px solid var(--edge);
}
.article__table tbody tr + tr { border-top: 1px solid var(--edge); }
.article__table tbody th { font-weight: 500; color: var(--ink-2); }
.article__table tbody td { color: var(--ink); }
.article__table .is-total { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.article__table .is-total th,
.article__table .is-total td { font-weight: 700; color: var(--ink); }

@media print { .article__table-wrap { break-inside: avoid; } }

/* ---------- Answer summary and sources ---------- */
.article__answer {
  margin-block: 1.75rem;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--edge);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.article__body .article__answer-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.article__body .article__answer p { margin: 0; color: var(--ink-2); }

.article__sources {
  margin-block: 2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
}
.article__body .article__sources-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.875rem;
}
.article__sources ul { display: grid; gap: 0.75rem; }
.article__body .article__sources li { padding-left: 0; }
.article__body .article__sources li::before { content: none; }
.article__sources li { font-size: 0.9375rem; line-height: 1.5; }
.article__sources a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.article__sources span { color: var(--ink-3); display: block; }

/* ---------- Inline cross-reference ---------- */
.article__related-link {
  margin-block: 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article__body .article__related-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.375rem;
}
.article__related-link a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Verified byline and AI summarise ---------- */
.article__avatar img.is-photo { width: 100%; height: 100%; object-fit: cover; }
.article__published { padding-left: 0 !important; }
.article__published::before { content: none !important; }

.article__verified {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.article__verified-mark { width: 19px; height: 19px; color: var(--primary); flex-shrink: 0; }

.summarise { margin-top: 1.5rem; }
.summarise__label {
  font-size: 0.9375rem;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}
.summarise__list { display: flex; flex-wrap: wrap; gap: 0.625rem; }

.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5625rem 0.9375rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s var(--ease-std), box-shadow 0.2s ease;
}
.ai-chip:hover { border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.ai-chip__mark { width: 20px; height: 20px; flex-shrink: 0; }

/* Each mark carries its own brand colour rather than currentColor, so the row
   reads as a set of logos instead of five identical grey glyphs. */
.ai-chip--chatgpt .ai-chip__mark    { color: #0f172a; }
.ai-chip--perplexity .ai-chip__mark { color: #22b8cd; }
.ai-chip--claude .ai-chip__mark     { color: #d97757; }
.ai-chip--gemini .ai-chip__mark     { color: #3186ff; }
.ai-chip--grok .ai-chip__mark       { color: #0f172a; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-chip--chatgpt .ai-chip__mark,
  :root:not([data-theme="light"]) .ai-chip--grok .ai-chip__mark { color: #e8eaf0; }
}
:root[data-theme="dark"] .ai-chip--chatgpt .ai-chip__mark,
:root[data-theme="dark"] .ai-chip--grok .ai-chip__mark { color: #e8eaf0; }
:root[data-theme="light"] .ai-chip--chatgpt .ai-chip__mark,
:root[data-theme="light"] .ai-chip--grok .ai-chip__mark { color: #0f172a; }

@media (max-width: 520px) {
  .summarise__list { gap: 0.5rem; }
  .ai-chip { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
}