/* ============================================================================
   DealAlign — editorial layer (Resources + articles)
   Additive only. Does not modify css/style.css, the logo, tokens, nav, footer
   or the product screenshots. Reuses the existing brand tokens.
   ========================================================================== */

/* ---------- article hero ---------- */
.art-hero {
  position: relative;
  background: radial-gradient(120% 140% at 12% 0%, var(--navy-3) 0%, var(--navy) 58%, #070E24 100%);
  color: #fff;
  padding: 34px 0 46px;
  overflow: hidden;
}
.art-hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76,151,255,.5), transparent);
}
.art-hero .crumbs { font-size: .78rem; letter-spacing: .02em; color: #9FB0D6; margin: 0 0 18px; }
.art-hero .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.art-hero .crumbs li { display: flex; align-items: center; gap: 7px; }
.art-hero .crumbs li + li::before { content: "/"; color: #4E5F8A; }
.art-hero .crumbs a { color: #C6D3EC; text-decoration: none; border-bottom: 1px solid transparent; }
.art-hero .crumbs a:hover, .art-hero .crumbs a:focus-visible { color: #fff; border-bottom-color: var(--blue-300); }
.art-hero .crumbs [aria-current="page"] { color: #8A9BC4; }

.art-kicker {
  display: inline-block; margin: 0 0 14px;
  font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: #9CC2FF;
}
.art-title {
  font-size: clamp(1.72rem, 1.1rem + 2.1vw, 2.72rem);
  line-height: 1.12; letter-spacing: -.025em; font-weight: 800;
  margin: 0 0 16px; max-width: 20ch; color: #fff;
}
.art-standfirst {
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  line-height: 1.6; color: #C3CEE6; margin: 0; max-width: 64ch;
}
.art-meta {
  margin: 24px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .78rem; color: #93A3C9; display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.art-meta b { color: #D7E1F5; font-weight: 700; }

/* hero visual inside the dark hero band */
.art-hero-figure {
  margin: 26px 0 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  padding: 14px;
}
.art-hero-figure svg { display: block; width: 100%; height: auto; }
.art-hero-figure figcaption {
  margin: 10px 0 0; font-size: .74rem; line-height: 1.5; color: #8FA0C6;
}

/* ---------- article body ---------- */
.art-wrap { padding: 46px 0 8px; }
.art-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 292px;
  gap: 52px; align-items: start;
}
.art-prose { max-width: 72ch; }

.art-prose > p,
.art-prose > ul,
.art-prose > ol { font-size: 1.02rem; line-height: 1.72; color: var(--ink-2); }
.art-prose p { margin: 0 0 18px; }
.art-prose ul, .art-prose ol { margin: 0 0 20px; padding-left: 22px; }
.art-prose li { margin: 0 0 9px; }
.art-prose li::marker { color: var(--blue); }

.art-prose h2 {
  font-size: clamp(1.28rem, 1.1rem + .7vw, 1.62rem);
  line-height: 1.24; letter-spacing: -.018em; font-weight: 800;
  color: var(--ink); margin: 44px 0 14px; scroll-margin-top: 90px;
}
.art-prose h3 {
  font-size: 1.06rem; line-height: 1.35; font-weight: 800;
  color: var(--ink); margin: 28px 0 10px; letter-spacing: -.01em;
}
.art-prose h2 + p, .art-prose h3 + p { margin-top: 0; }
.art-prose strong { color: var(--ink); font-weight: 700; }
.art-prose a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.art-prose a:hover { color: var(--blue-btn-hover); }

/* direct answer box — sits near the top, satisfies GEO "answer first" */
.answer {
  border-left: 3px solid var(--blue);
  background: var(--blue-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px; margin: 0 0 30px;
}
.answer p { margin: 0; font-size: 1.02rem; line-height: 1.66; color: #10224C; }
.answer p + p { margin-top: 10px; }
.answer b { color: #061634; }

/* ---------- figures ---------- */
.fig { margin: 30px 0; }
.fig-shot {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden; box-shadow: var(--shadow-md);
}
.fig-shot img { display: block; width: 100%; height: auto; }
.fig-cap {
  margin: 10px 0 0; font-size: .8rem; line-height: 1.55; color: var(--muted);
}
.fig-cap b { color: var(--ink-2); font-weight: 700; }

/* diagram plate — original SVG charts */
.fig-plate {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, #FBFCFE, #F6F8FC);
  padding: 20px;
}
.fig-plate svg { display: block; width: 100%; height: auto; }

/* ---------- formula ---------- */
.formula {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 20px 22px; margin: 24px 0;
  box-shadow: var(--shadow-sm);
}
.formula p:last-child { margin: 0; }
.formula .f-line {
  font-size: .98rem; line-height: 1.7; color: var(--ink); font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}
.formula .f-note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.55; }

/* ---------- tables ---------- */
.tbl-wrap { margin: 26px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); }
.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff; min-width: 520px; }
.tbl caption { caption-side: top; text-align: left; padding: 12px 14px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tbl thead th { background: var(--bg-alt); font-weight: 800; color: var(--ink); font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .pos { color: var(--good); font-weight: 700; }
.tbl .neg { color: #B3261E; font-weight: 700; }

/* ---------- takeaways ---------- */
.takeaways {
  background: var(--navy); color: #DCE5F7;
  border-radius: var(--radius-lg); padding: 26px 28px; margin: 38px 0;
}
.takeaways h2 {
  color: #fff !important; font-size: 1.06rem !important; margin: 0 0 14px !important;
  letter-spacing: .01em;
}
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { margin: 0 0 9px; font-size: .94rem; line-height: 1.6; color: #C9D5EC; }
.takeaways li::marker { color: var(--blue-300); }
.takeaways b { color: #fff; }

/* ---------- FAQ ---------- */
.faq { margin: 18px 0 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 34px 16px 0; position: relative;
  font-weight: 700; font-size: .98rem; line-height: 1.45; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; font-weight: 400; color: var(--blue); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--blue-600); }
.faq .faq-a { padding: 0 0 16px; }
.faq .faq-a p { margin: 0 0 10px; font-size: .95rem; line-height: 1.65; color: var(--ink-2); }
.faq .faq-a p:last-child { margin: 0; }

/* ---------- CTA ---------- */
.cta-band {
  margin: 44px 0 10px; border-radius: var(--radius-lg);
  background: radial-gradient(120% 160% at 88% 0%, var(--navy-3), var(--navy) 62%);
  color: #fff; padding: 34px 32px;
}
.cta-band h2 { color: #fff !important; margin: 0 0 10px !important; font-size: 1.26rem !important; }
.cta-band p { margin: 0 0 20px; color: #C3CEE6; font-size: .96rem; line-height: 1.6; max-width: 58ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ---------- side rail ---------- */
.art-rail { position: sticky; top: 24px; }
.rail-box { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 18px 18px 8px; margin: 0 0 18px; }
.rail-box h2 {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 800; color: var(--muted); margin: 0 0 12px;
}
.rail-nav { list-style: none; margin: 0; padding: 0; }
.rail-nav li { margin: 0 0 2px; }
.rail-nav a {
  display: block; padding: 8px 0; font-size: .86rem; line-height: 1.4;
  color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2);
}
.rail-nav li:last-child a { border-bottom: 0; }
.rail-nav a:hover { color: var(--blue-600); }
.rail-cta { background: var(--bg-alt); border-color: var(--line); }
.rail-cta p { font-size: .86rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.rail-cta .btn { width: 100%; text-align: center; }

/* ---------- related articles ---------- */
.rel { margin: 52px 0 0; padding-top: 34px; border-top: 1px solid var(--line); }
.rel h2 { font-size: 1.16rem; font-weight: 800; color: var(--ink); margin: 0 0 20px; }
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rel-card {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; padding: 18px; text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rel-card:hover { border-color: #C3D4F2; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rel-card .rc-k { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--blue-600); margin: 0 0 8px; }
.rel-card h3 { font-size: .95rem; line-height: 1.35; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.rel-card p { font-size: .84rem; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- resources index ---------- */
.res-hero { padding: 52px 0 40px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.res-hero h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); line-height: 1.14; letter-spacing: -.025em; margin: 0 0 14px; color: var(--ink); max-width: 22ch; font-weight: 800; }
.res-hero p { font-size: 1.04rem; line-height: 1.65; color: var(--ink-2); margin: 0; max-width: 66ch; }

.cat-bar { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 0; }
.cat-bar a {
  font-size: .8rem; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); text-decoration: none;
}
.cat-bar a:hover { border-color: var(--blue); color: var(--blue-600); }

.res-section { padding: 40px 0 8px; }
.res-section > h2 { font-size: 1.22rem; font-weight: 800; color: var(--ink); margin: 0 0 6px; letter-spacing: -.015em; }
.res-section > .res-sub { font-size: .92rem; color: var(--muted); margin: 0 0 22px; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 8px; }
.a-card {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.a-card:hover { border-color: #C3D4F2; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.a-card-thumb { display: block; background: var(--navy); }
.a-card-thumb svg { display: block; width: 100%; height: auto; }
.a-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.a-card-k { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--blue-600); margin: 0 0 8px; }
.a-card h3 { font-size: 1rem; line-height: 1.34; font-weight: 800; color: var(--ink); margin: 0 0 9px; }
.a-card p { font-size: .855rem; line-height: 1.55; color: var(--muted); margin: 0 0 14px; flex: 1 1 auto; }
.a-card .a-more { font-size: .8rem; font-weight: 800; color: var(--blue-600); }

/* ---------- DA-16: provenance and limitations ---------- */
.basis {
  margin: 44px 0 0; padding: 22px 24px;
  border: 1px solid var(--line); border-left: 3px solid var(--blue-600);
  border-radius: var(--radius); background: var(--bg-alt);
}
.basis h2 {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--ink); margin: 0 0 12px;
}
.basis p { font-size: .86rem; line-height: 1.62; color: var(--ink-2); margin: 0 0 12px; }
.basis ul { margin: 0 0 12px; padding-left: 18px; }
.basis li { font-size: .84rem; line-height: 1.58; color: var(--ink-2); margin: 0 0 8px; }
.basis li b { color: var(--ink); }
.basis a { text-decoration: underline; text-underline-offset: 2px; }
.basis-author { margin: 0; font-size: .82rem; color: var(--muted); }

/* ---------- DA-13 / DA-15: table scroll cues and keyboard access ---------- *//* js/article-tables.js makes each .tbl-wrap a named, focusable region
   (role="region" + tabindex="0") and adds .is-scrollable only while the table
   genuinely overflows. The styles below are no-ops without JavaScript, so the
   tables remain readable and touch-scrollable if the script never runs. */
.tbl-wrap:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.tbl-wrap:focus-visible .tbl { outline: none; }
/* Right-edge shadow that appears only when there is more table to the right. */
.tbl-wrap.is-scrollable { position: relative; }
.tbl-wrap.is-scrollable::after {
  content: "";
  position: sticky;
  right: 0;
  float: right;
  width: 28px;
  height: 1px;
  margin-top: -1px;
  box-shadow: -16px 0 16px -6px rgba(10, 19, 48, .3);
  pointer-events: none;
}

/* ---------- DA-16: accessible scrollable charts ---------- */
/* js/article-charts.js adds .is-scrollable to a chart container only while the
   chart genuinely overflows, .chart-scrolls to its <figure>, and appends a
   .chart-cue span to the caption. Nothing in this block is needed for the chart
   to render or to be readable — it only adds the affordance and the focus ring.
   The charts keep their original design and their desktop layout untouched. */
.fig-plate.is-scrollable,
.art-hero-figure.is-scrollable {
  scroll-behavior: smooth;
}
.fig-plate.is-scrollable:focus-visible,
.art-hero-figure.is-scrollable:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
/* On the dark hero a blue-on-navy ring needs more contrast. */
.art-hero-figure.is-scrollable:focus-visible {
  outline-color: var(--blue-300);
}

/* The swipe cue is inert until .chart-scrolls is present, so desktop readers
   never see an instruction to scroll a chart that already fits. */
.chart-cue { display: none; }
.chart-scrolls .chart-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #0B1330;
  background: #E4EDFF;
  border: 1px solid #BBD3FF;
  white-space: nowrap;
}
.art-hero-figure .chart-cue {
  color: #DCE5F7;
  background: rgba(76, 151, 255, .16);
  border-color: rgba(76, 151, 255, .45);
}
/* Once the reader has scrolled the chart, the instruction is spent. */
.chart-scrolls .is-explored .chart-cue,
.chart-scrolls .chart-cue.is-done { opacity: .55; }
/* Reduced motion: no smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  .fig-plate.is-scrollable,
  .art-hero-figure.is-scrollable { scroll-behavior: auto; }
}

/* ---------- DA-14: reduce layout shift ---------- */
/* Chart SVGs carry a fixed viewBox, so their height is intrinsic and reserved
   before paint. Screenshots already carry width/height attributes, which the
   browser uses to reserve the correct box per image — no container aspect-ratio
   is applied here, because screenshot heights vary (446/561/566/569/637). */
.fig-shot img { background: var(--bg-alt); height: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .art-rail { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .rail-box { margin: 0; }
  .rel-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* DA-05b: chart legibility once the article drops to a single column.
     The hero SVGs use a 1000-unit viewBox and the body .fig-plate SVGs a
     900-unit viewBox, both with 11-13px labels. Scaled into a ~700px tablet
     column that type renders at roughly 7-9px; scaled into a ~350px phone
     column it renders at roughly 4px. Rather than shrink the type, give every
     chart SVG a readable width floor and let the figure scroll. The svg keeps
     role="img" plus its aria-label, so the accessible text alternative is
     unaffected. */
  .art-hero-figure,
  .fig-plate {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .art-hero-figure svg { min-width: 880px; }
  .fig-plate svg { min-width: 800px; }
}
@media (max-width: 720px) {
  .art-hero { padding: 24px 0 34px; }
  .art-title { max-width: none; }
  .art-wrap { padding: 32px 0 8px; }
  .art-prose > p, .art-prose > ul, .art-prose > ol { font-size: .99rem; }
  .rel-grid, .card-grid { grid-template-columns: minmax(0, 1fr); }
  .art-rail { grid-template-columns: minmax(0, 1fr); }
  .takeaways { padding: 22px 20px; }
  .cta-band { padding: 24px 20px; }
  .cta-actions .btn { width: 100%; text-align: center; }
  .fig-plate { padding: 12px; }
  .tbl { font-size: .82rem; min-width: 440px; }

  /* DA-05: keep chart labels legible on narrow screens. The scroll container
     and the SVG width floors are declared at the 1000px breakpoint above and
     repeat here so the floors survive if the blocks are ever merged. The
     svg's role="img" + aria-label remains the accessible text alternative. */
  .art-hero-figure svg { min-width: 880px; }
  .fig-plate svg { min-width: 800px; }

  /* The table scroll shadow is now unconditional on viewport width and keyed
     off .is-scrollable, set by js/article-tables.js only when the table really
     overflows. See the DA-13 / DA-15 block above. */
}

/* DA-07: accessible focus indicator on every interactive element */
.art-prose a:focus-visible,
.a-card:focus-visible,
.faq summary:focus-visible,
.rail-nav a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}