/* EOI Insights — Articles reader body, figures, consent, and image hooks.
   Desk chrome lives in articles-desk.css. This file still supplies the
   in-story components the ledger renders: prose, tables, the product panel,
   related cards, and the cookie notice. */

.a-body {
  --a-ink: var(--text-primary, #10201f);
  --a-body: var(--text-secondary, #23383a);
  --a-muted: var(--text-tertiary, #6b8285);
  --a-line: var(--separator, #e3ecea);
  --a-rule: var(--separator, #cfdedb);
  --a-paper: var(--surface, #ffffff);
  --a-teal: #0d9488;
  --a-teal-deep: #0f766e;
  /* HIG: tint color, same visited/unvisited, underline as the extra cue. */
  --a-link: var(--accent, #086b64);
  --a-link-visited: var(--accent, #086b64);
  --a-link-hover: var(--accent-hover, #07574f);
  --a-serif: var(--font-editorial, Georgia, serif);
  --a-sans: var(--font-ui, "Helvetica Neue", sans-serif);
  --a-measure: 40rem;
  --a-wide: 58rem;
  --a-ease: cubic-bezier(.22, 1, .36, 1);
  --a-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ——— Reader body (also .a-text so weave/tests keep working) ——— */
.reader-body.a-text,
.a-text.reader-body,
.a-text {
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
.a-text > p,
.reader-body > p { margin: 0 0 1.45em; }
.a-text h2,
.a-text h3,
.reader-body h2,
.reader-body h3 {
  margin: 2.3em 0 .6em;
  font-size: var(--font-reader-subheading, 1.375rem);
  line-height: 1.22;
  letter-spacing: -.012em;
  font-weight: 700;
  color: var(--text-primary);
}
.a-standfirst a,
.a-text a,
.reader-body a,
.reader-deck a {
  color: var(--a-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.a-standfirst a:visited,
.a-text a:visited,
.reader-body a:visited { color: var(--a-link-visited); }
.a-standfirst a:hover,
.a-text a:hover,
.reader-body a:hover,
.reader-deck a:hover { color: var(--a-link-hover); }
.a-text ul { margin: 0 0 1.45em; padding-left: 1.15em; }
.a-text li { margin-bottom: .5em; }
.a-text strong { color: var(--text-primary); }

.a-text .g-fig,
.a-text .g-table-wrap,
.a-text .g-statstrip,
.a-text .g-product,
.a-text .g-callout,
.a-text .g-sources,
.a-text .g-related,
.a-text .g-dash-action {
  font-family: var(--a-sans);
}
.reader-body .g-fig,
.reader-body .g-table-wrap,
.reader-body .g-statstrip {
  width: 100%;
  margin-left: 0;
  transform: none;
}
.a-text .g-fig { margin-top: 42px; margin-bottom: 44px; }
.a-text .g-table-wrap { margin-top: 34px; margin-bottom: 36px; }
.a-text .g-table-wrap table { width: 100%; }
.a-text .g-table-wrap caption {
  text-align: left;
  padding-bottom: 10px;
  font-size: 13px;
  color: var(--a-muted);
}
.a-text .g-table-wrap th { text-align: left; }
.a-text .g-table-wrap td { text-align: right; }
.a-text .g-table-wrap tbody th { font-weight: 500; }
.a-text .g-callout { margin: 2em 0; }

/* Body links use the desk tint. Keep the CTA override so teal fill stays
   white, and do not bring back the old hover underline-sweep. */
.a-text a.g-cta,
.a-text a.g-cta:visited,
.a-text a.g-cta:hover,
.reader-body a.g-cta,
.reader-body a.g-cta:visited,
.reader-body a.g-cta:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  text-decoration: none !important;
  background-color: var(--a-teal-deep);
  background-image: linear-gradient(135deg, var(--a-teal) 0%, var(--a-teal-deep) 100%);
  background-size: auto;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.a-text a.g-cta-sec,
.a-text a.g-cta-sec:visited,
.a-text a.g-cta-sec:hover {
  color: var(--a-link);
  background-image: none;
  text-decoration: underline;
}
.a-convert { margin-top: 1.75em; }

/* ——— More stories (inside the reader column) ——— */
.a-more {
  max-width: none;
  margin: 2.5rem 0 0;
  padding: 1.5rem 0 0;
  background: transparent;
  border-top: 1px solid var(--separator);
  border-radius: 0;
}
.a-more h2 {
  margin: 0 0 1rem;
  font-family: var(--a-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.a-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.a-card {
  background: var(--surface-hover);
  border: 1px solid var(--separator);
  border-radius: 16px;
}
.a-card a {
  display: block;
  padding: 16px 16px 14px;
  text-decoration: none;
  color: inherit;
}
.a-card:hover { border-color: var(--separator-date); }
.a-card__kicker {
  display: block;
  font-family: var(--a-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.a-card__head {
  display: block;
  margin-top: 6px;
  font: 700 1.05rem var(--font-editorial);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-primary);
}
.a-card a:hover .a-card__head { color: var(--accent); }
.a-card__date {
  display: block;
  margin-top: 4px;
  font-family: var(--a-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.reader-end {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--separator);
}
.a-foot__disclaimer {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-tertiary);
}
.a-foot__disclaimer a {
  color: inherit;
  text-decoration: underline;
}

/* Heroes are wired in markup (data-hero-src) and CSS so we can turn them
   on later. They are not painted on /articles now. Inline body images
   keep a finished treatment so a figure in the ledger can render. */
.a-lead,
.reader-hero-art {
  display: none;
}
.a-lead__frame { display: block; overflow: hidden; border-radius: 4px; }
.a-lead img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: #0b191c;
}
.a-lead figcaption {
  margin-top: 10px;
  font-family: var(--a-sans);
  font-size: 12.5px;
  color: var(--a-muted);
}
.reader-body img,
.reader-body .a-figure,
.a-inline-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1.5rem 0;
}

.js-reveal { opacity: 0; transform: translateY(18px); }
.js-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--a-ease), transform .7s var(--a-ease);
}
.a-cards > li.js-reveal.is-in { transition-delay: calc(var(--i, 0) * 60ms); }

.g-fig-line {
  stroke-dasharray: var(--fig-len, 3000);
  stroke-dashoffset: var(--fig-len, 3000);
}
.g-fig.is-in .g-fig-line { animation: a-draw 1.15s var(--a-ease) forwards; }
.g-fig.is-in .g-fig-area,
.g-fig.is-in .g-fig-dot,
.g-fig.is-in .g-fig-end { animation: a-fade .7s var(--a-ease) .5s both; }
.g-fig-area, .g-fig-dot, .g-fig-end { opacity: 0; }
.g-fig:not(.is-in) .g-fig-area,
.g-fig:not(.is-in) .g-fig-dot,
.g-fig:not(.is-in) .g-fig-end { opacity: 1; }
@keyframes a-draw { to { stroke-dashoffset: 0; } }
@keyframes a-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .a-body *,
  .a-body *::before,
  .a-body *::after {
    animation: none !important;
    transition: none !important;
  }
  .js-reveal { opacity: 1; transform: none; }
  .g-fig-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .g-fig-area, .g-fig-dot, .g-fig-end { opacity: 1; }
  .a-progress { display: none; }
}

/* Cookie notice — same ids as the dashboard. Dismiss records that the
   reader has seen it; tracking already started. Width and bottom inset
   are pinned to the live column / visual viewport in JS; the CSS fallback
   follows the masthead measure and wraps when the copy no longer shares
   a row with the button. z-index sits above the desk and the phone sheet. */
.consent-banner {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px), calc(50% - var(--a-wide) / 2));
  right: max(16px, env(safe-area-inset-right, 0px), calc(50% - var(--a-wide) / 2));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 180;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 14px 16px 14px 18px;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--separator);
  border-radius: 12px;
  box-shadow: 0 12px 40px -18px rgba(28, 25, 23, .35);
  box-sizing: border-box;
}
.consent-banner.show {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.consent-banner p {
  margin: 0;
  font-family: var(--a-sans);
  font-size: clamp(11px, 2.6vw, 13px);
  line-height: 1.55;
  color: var(--text-tertiary);
  flex: 1 1 16rem;
  min-width: min(100%, 12rem);
}
.consent-banner a { color: inherit; text-decoration: underline; }
.consent-banner .vis-btn {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  min-width: 88px;
  width: auto;
  font: 500 13px var(--a-sans);
  color: #fff;
  background: var(--a-teal);
  border: 1px solid var(--a-teal);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
}
.consent-banner .vis-btn:hover { background: var(--a-teal-deep); border-color: var(--a-teal-deep); }
body.consent-banner-open {
  padding-bottom: var(--consent-banner-space, 0px);
}

@media (max-width: 720px) {
  .consent-banner {
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    gap: 10px 12px;
    padding: 12px 12px 12px 14px;
  }
  .consent-banner .vis-btn { min-width: 76px; padding: 8px 14px; }
}

/* Guides weave assumes paper. In Articles dark mode those light cards
   inherit cream type, so product/related headings and figure captions
   disappear — worst on the phone sheet. Restyle them as raised dark
   surfaces and retint the chart ink. */
html[data-theme="dark"] body[data-library="articles"] {
  --g-paper: var(--surface-feature, #263330);
  --g-text: var(--text-primary, #f4f2eb);
  --g-muted: var(--text-secondary, #e4e9e6);
  --g-line: var(--separator, #56615c);
  --g-ink: var(--text-primary, #f4f2eb);
  --g-teal-soft: var(--surface-feature, #263330);
  --g-warn-bg: #3a2a18;
}
html[data-theme="dark"] .g-product,
html[data-theme="dark"] .g-related,
html[data-theme="dark"] .g-cta-wrap,
html[data-theme="dark"] .g-callout,
html[data-theme="dark"] .g-stat {
  background: var(--surface-feature);
  border-color: var(--separator);
  box-shadow: none;
}
html[data-theme="dark"] .g-product .g-example {
  background: var(--surface-hover);
  box-shadow: none;
}
html[data-theme="dark"] body[data-library="articles"] .a-text h2,
html[data-theme="dark"] body[data-library="articles"] .a-text h3,
html[data-theme="dark"] body[data-library="articles"] .reader-body h2,
html[data-theme="dark"] body[data-library="articles"] .reader-body h3,
html[data-theme="dark"] body[data-library="articles"] .reader h2,
html[data-theme="dark"] body[data-library="articles"] .reader h3,
html[data-theme="dark"] body[data-library="articles"] .g-article h2,
html[data-theme="dark"] body[data-library="articles"] .g-article h3,
html[data-theme="dark"] body[data-library="articles"] .g-article p,
html[data-theme="dark"] body[data-library="articles"] .g-article li,
html[data-theme="dark"] body[data-library="articles"] .g-lede,
html[data-theme="dark"] body[data-library="articles"] .g-callout,
html[data-theme="dark"] body[data-library="articles"] .g-callout p,
html[data-theme="dark"] body[data-library="articles"] .g-callout strong,
html[data-theme="dark"] .g-product > h2,
html[data-theme="dark"] .g-related h2,
html[data-theme="dark"] .a-text .g-product > h2,
html[data-theme="dark"] .a-text .g-related h2,
html[data-theme="dark"] .g-sources h2,
html[data-theme="dark"] .g-stat-num,
html[data-theme="dark"] .g-stat-label {
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
}
html[data-theme="dark"] .g-product > p,
html[data-theme="dark"] .g-related p,
html[data-theme="dark"] .g-product-note,
html[data-theme="dark"] .g-stat-note,
html[data-theme="dark"] body[data-library="articles"] .g-fig-cap,
html[data-theme="dark"] body[data-library="articles"] .g-fig-cap strong,
html[data-theme="dark"] .g-fig-cap,
html[data-theme="dark"] .a-text .g-table-wrap caption {
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
}
html[data-theme="dark"] .g-product-kicker,
html[data-theme="dark"] .g-related-kicker,
html[data-theme="dark"] .g-fig-data summary {
  color: var(--accent);
}
html[data-theme="dark"] body[data-library="articles"] .g-fig-tick,
html[data-theme="dark"] .g-fig-tick { fill: var(--text-tertiary); }
html[data-theme="dark"] body[data-library="articles"] .g-fig-end,
html[data-theme="dark"] .g-fig-end { fill: var(--text-primary); }
html[data-theme="dark"] .g-fig-grid { stroke: var(--separator); }
html[data-theme="dark"] .g-fig-axis { stroke: var(--separator-date); }
html[data-theme="dark"] .g-fig-line { stroke: var(--accent); }
html[data-theme="dark"] .g-fig-dot { fill: var(--accent); stroke: var(--surface-reader); }
html[data-theme="dark"] .g-fig-data th,
html[data-theme="dark"] .g-fig-data td,
html[data-theme="dark"] .g-related li {
  border-color: var(--separator);
}
html[data-theme="dark"] .g-fig-data thead th {
  color: var(--text-tertiary);
}