/* =========================================================================
   MIE Insights + service-page reading components.
   Extends styles.css (tokens, type, buttons, header/footer). Loaded only on
   /insights pages and the Phase 1 service pages. No JS, no web fonts beyond
   the two families styles.css already uses.
   ========================================================================= */

/* Insights is "current" for every article (aria-current="true"). */
@media (min-width: 900px) {
  .nav-links > li > a[aria-current="true"] { border-bottom-color: var(--navy); }
}

/* Breadcrumb */
.breadcrumb { margin: 0 0 var(--space-3); font-size: 0.88rem; color: var(--ink-soft); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2em 0; }
.breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumb li + li::before { content: '/'; margin: 0 0.55em; color: var(--track); }
.breadcrumb a { color: var(--navy); text-underline-offset: 0.15em; }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); }

/* ---- Insights index -------------------------------------------------- */
.insights-intro { margin-bottom: var(--space-3); }
.insights-intro h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.insights-jump ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.insights-jump a {
  display: inline-block;
  padding: 0.45em 0.95em;
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.insights-jump a:hover { border-color: var(--navy); }
.insights-topic { padding-top: var(--space-4); border-top: 1px solid var(--hair); margin-top: var(--space-4); scroll-margin-top: 5.5rem; }
.insights-topic:first-of-type { margin-top: 0; }
.insights-topic-head { margin-bottom: var(--space-3); }
.insights-topic-head h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); }
.insights-topic-head p { color: var(--ink-soft); }
.insights-subhead { font-size: clamp(1.35rem, 2.8vw, 1.7rem); margin-bottom: var(--space-3); }

.insight-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .insight-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .insight-cards { grid-template-columns: repeat(3, 1fr); } }
.insight-card {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  background: var(--paper);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  transition: border-color 0.15s ease;
}
.insight-card:hover, .insight-card:focus-within { border-color: var(--navy); }
.insight-card h3 { font-size: 1.12rem; line-height: 1.25; margin: 0; }
.insight-card h3 a { color: var(--ink); text-decoration: none; }
/* whole card is clickable; the title link stays the only focus stop */
.insight-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-md); }
.insight-card h3 a:focus-visible { outline: none; }
.insight-card:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; }
.insight-card p { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }
.insight-card .insight-card-cat, .insight-card .insight-card-meta { font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); }
.insight-card .insight-card-meta { margin-top: auto; padding-top: 0.4em; }

/* ---- Article ------------------------------------------------------------ */
.article { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.article-head { max-width: 46rem; margin-bottom: var(--space-3); }
.article-head h1 { font-size: clamp(1.95rem, 4.6vw, 2.9rem); line-height: 1.1; }
.article-meta { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.article-meta a { color: var(--navy); }

.short-answer {
  max-width: 44rem;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: 0 0 var(--space-4);
}
.short-answer-label { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-soft); margin: 0 0 0.35em; }
.short-answer p:last-child { font-size: 1.08rem; color: var(--ink); line-height: 1.6; max-width: none; }

.article-toc { max-width: 44rem; margin: 0 0 var(--space-4); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--hair); }
.article-toc-title { font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-soft); margin: 0 0 0.6em; }
.article-toc ol, .article-toc ul { margin: 0; padding-left: 1.3em; display: grid; gap: 0.35em; color: var(--ink-faint); font-size: 0.95rem; }
.article-toc ul { list-style: none; padding-left: 0; }
@media (min-width: 760px) { .article-toc ol, .article-toc ul { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); } }
.article-toc a { color: var(--navy); text-underline-offset: 0.15em; }

.prose { max-width: 44rem; font-size: 1.0625rem; line-height: 1.72; }
.prose p { max-width: none; margin: 0 0 1em; }
.prose h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  line-height: 1.18;
  margin: 2.1em 0 0.6em;
  scroll-margin-top: 5.5rem;
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.16rem; line-height: 1.3; margin: 1.6em 0 0.45em; letter-spacing: -0.01em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--ink-faint); }
.prose strong { color: var(--ink); }
.prose a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.prose a:hover { color: var(--ink); }

.prose dl { margin: 0 0 1.2em; }
.prose dt { font-weight: 700; color: var(--ink); margin-top: 0.9em; }
.prose dd { margin: 0.15em 0 0; color: var(--ink-soft); }

.callout {
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sink);
  padding: var(--space-2) var(--space-3);
  margin: 1.4em 0;
  font-size: 1rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout-label { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 0.3em !important; }

/* Tables: scroll inside their own region on narrow screens, never the page */
.table-wrap {
  margin: 1.2em 0 1.5em;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: var(--paper);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.94rem; line-height: 1.5; }
.table-wrap.wide table { min-width: 36rem; }
.table-wrap caption { text-align: left; font-weight: 700; font-size: 0.86rem; color: var(--ink-soft); padding: 0.75rem 1rem 0.25rem; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 0.7rem 1rem; border-bottom: 1px solid var(--hair); }
.table-wrap thead th { background: var(--surface-sink); font-weight: 700; color: var(--ink); font-size: 0.88rem; }
.table-wrap tbody th { font-weight: 700; color: var(--ink); }
.table-wrap td { color: var(--ink-soft); }
.table-wrap tr:last-child th, .table-wrap tr:last-child td { border-bottom: 0; }

.article-service {
  max-width: 44rem;
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.article-service .point-label { margin-bottom: 0.5em; }
.article-service-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; margin: 0 0 0.3em; }
.article-service-title a { color: var(--ink); text-underline-offset: 0.18em; }
.article-service p:last-child { color: var(--ink-soft); font-size: 0.97rem; }

.article-sources { max-width: 44rem; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--hair); font-size: 0.9rem; color: var(--ink-soft); }
.article-sources h2 { font-size: 1.1rem; margin-bottom: 0.5em; }
.article-sources ol { padding-left: 1.3em; margin: 0.6em 0 0; display: grid; gap: 0.45em; }
.article-sources a { color: var(--navy); overflow-wrap: anywhere; }

/* ---- Service-page additions ------------------------------------------ */
.svc-section { margin-top: var(--space-5); }
.svc-section > h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); max-width: 30em; }
.svc-section > p { color: var(--ink-soft); max-width: 44em; }
.svc-section > p strong { color: var(--ink); }
.term-list { margin: var(--space-3) 0 0; display: grid; gap: 0; border-top: 1px solid var(--hair); max-width: 52rem; }
.term-list > div { display: grid; gap: 0.25em; padding: var(--space-2) 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 720px) { .term-list > div { grid-template-columns: 13rem 1fr; gap: var(--space-3); } }
.term-list dt { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.term-list dd { margin: 0; color: var(--ink-soft); }
.fit-cols { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-3); }
@media (min-width: 760px) { .fit-cols { grid-template-columns: 1fr 1fr; } }
.fit-col { border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--paper); padding: var(--space-3); }
.fit-col h3 { font-size: 1.08rem; margin-bottom: 0.7em; }
.fit-col.is-not { background: transparent; border-style: dashed; border-color: var(--hair-strong); }
.link-cards { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .link-cards { grid-template-columns: repeat(3, 1fr); } }
.link-card { border: 1px solid var(--hair-strong); border-radius: var(--radius-md); background: var(--paper); padding: var(--space-3); scroll-margin-top: 5.5rem; }
.link-card h3 { font-size: 1.1rem; margin-bottom: 0.35em; }
.link-card h3 a { color: var(--ink); text-underline-offset: 0.18em; }
.link-card p { color: var(--ink-soft); font-size: 0.94rem; margin: 0; }

/* Long article titles: keep the breadcrumb to one line; the H1 below carries the full title. */
.breadcrumb ol { flex-wrap: nowrap; }
.breadcrumb li { flex-shrink: 0; }
.breadcrumb li:last-child { flex-shrink: 1; min-width: 0; }
.breadcrumb li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phones: say that wide tables scroll sideways (decorative, hidden from AT). */
@media (max-width: 640px) {
  .table-wrap.wide::before {
    content: 'Scroll sideways to see every column \2192' / '';
    display: block;
    position: sticky;
    left: 0;
    padding: 0.55rem 1rem 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--paper);
  }
}