/* ==========================================================================
   NovaTechAI — Editorial layer
   Loaded in addition to site.css on the insights index and article pages.
   1. Interior page hero
   2. Insights index
   3. Article shell
   4. Prose
   5. Evidence components
   6. Responsive
   ========================================================================== */

:root {
  --claim-finding-bg: #edf2fd;
  --claim-finding-fg: #0b54cc;
  --claim-forecast-bg: #f1eefd;
  --claim-forecast-fg: #56209e;
  --claim-analysis-bg: #edf1f7;
  --claim-analysis-fg: #0b1626;
  --claim-action-bg: #e8f5f1;
  --claim-action-fg: #0e5f4e;
  --prose: #26344a;
}

/* 1. Interior page hero ----------------------------------------------------- */

/* 2. Insights index --------------------------------------------------------- */

.index-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.insight-preview--featured {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.insight-preview--featured .insight-preview__figure {
  min-height: 420px;
}

/* Grid that future articles drop into */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Bordered per card, so any number of articles tiles cleanly */
.post-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.post-card:hover {
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.post-card h3 {
  margin: 1.25rem 0 0.6rem;
  font-size: 1.3rem;
}

.post-card p {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.post-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}

/* Research agenda — what we publish on, stated as topics, not fake articles */

/* 3. Article shell ---------------------------------------------------------- */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 110;
  background: transparent;
  pointer-events: none;
}

.reading-progress__bar {
  height: 100%;
  width: 0;
  background: var(--gradient);
  transform-origin: left;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-ink-3);
}

.article-meta .tag {
  color: var(--cyan);
  border-color: rgba(69, 214, 242, 0.45);
}

.page-hero .article-deck {
  margin-top: 1.5rem;
  max-width: 62ch;
  font-family: var(--font-text);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--on-ink-2);
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items: start;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  padding-top: 1rem;
  border-top: 2px solid var(--line-2);
}

.toc h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}

.toc a {
  display: block;
  padding: 0.45rem 0 0.45rem 0.85rem;
  border-left: 2px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-3);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.toc a:hover {
  color: var(--accent);
  border-left-color: var(--line-2);
}

.toc a.is-current {
  color: var(--text);
  font-weight: 600;
  border-left-color: var(--accent);
}

/* 4. Prose ------------------------------------------------------------------ */

.prose {
  font-family: var(--font-text);
  font-size: clamp(1.06rem, 1.02rem + 0.2vw, 1.15rem);
  line-height: 1.68;
  color: var(--prose);
  max-width: 70ch;
  /* The wide data table must not be able to stretch the grid track. */
  min-width: 0;
}

.prose > section {
  padding-block: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.prose > section:last-child {
  border-bottom: 0;
}

.prose p + p,
.prose p + ul,
.prose ul + p {
  margin-top: 1.1rem;
}

.prose h2 {
  font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem);
  color: var(--text);
  margin-bottom: 1.1rem;
}

.prose h3 {
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.prose .kicker {
  font-family: var(--font-sans);
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.prose .kicker::before {
  background: var(--accent);
}

.prose__lead {
  font-size: clamp(1.18rem, 1.05rem + 0.6vw, 1.4rem);
  line-height: 1.55;
  color: var(--text);
  padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  border-bottom: 1px solid var(--line);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}

.prose a:hover {
  color: var(--accent-strong);
}

.prose ul {
  display: grid;
  gap: 0.5rem;
}

.prose ul li {
  display: flex;
  gap: 0.75rem;
}

.prose ul li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.66em;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* 5. Evidence components ----------------------------------------------------- */

/* Legend explaining how the article labels its material */
.legend {
  display: grid;
  /* Fixed column counts: these grids draw their hairlines with the container
     background, so a partly filled final row would show as an empty cell. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--font-sans);
}

.legend > div {
  padding: 1rem 1.1rem;
  background: var(--white);
}

.legend p {
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-2);
}

.claim-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.claim-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: currentColor;
}

.claim-label--finding {
  background: var(--claim-finding-bg);
  color: var(--claim-finding-fg);
}

.claim-label--forecast {
  background: var(--claim-forecast-bg);
  color: var(--claim-forecast-fg);
}

.claim-label--analysis {
  background: var(--claim-analysis-bg);
  color: var(--claim-analysis-fg);
}

.claim-label--action {
  background: var(--claim-action-bg);
  color: var(--claim-action-fg);
}

/* A labelled block of material */
.claim {
  margin-top: 1.6rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--white);
}

.claim > p {
  margin-top: 0.85rem;
  font-size: 1.02rem;
}

.claim > p:first-of-type {
  margin-top: 0.9rem;
}

.claim--finding {
  border-left-color: var(--claim-finding-fg);
}

.claim--forecast {
  border-left-color: var(--claim-forecast-fg);
}

.claim--analysis {
  border-left-color: var(--claim-analysis-fg);
  background: var(--paper);
}

.claim--action {
  border-left-color: var(--claim-action-fg);
}

.claim__source {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* Figures pulled from cited research */
.evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.6rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.evidence > div {
  padding: 1.25rem 1.2rem;
  background: var(--paper-2);
}

.evidence dt {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.evidence dd {
  margin: 0.55rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-2);
}

/* Numbered lever / system lists */
.numbered {
  margin-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.numbered li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.35rem 0.9rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}

.numbered__num {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.4em;
  font-variant-numeric: tabular-nums;
}

.numbered p {
  font-size: 1rem;
  color: var(--text-2);
}

.pull {
  margin-top: 2rem;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  border-radius: var(--r-md);
  background: var(--ink-900);
  color: var(--on-ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.34;
  letter-spacing: -0.025em;
  border-left: 3px solid var(--cyan);
}

.table-wrap {
  margin-top: 1.6rem;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.data-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.data-table caption {
  padding: 0.9rem 1rem;
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--text-2);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Column headers only — the first body column uses <th scope="row">, which
   must read as a body cell, not inherit the dark header treatment. */
.data-table thead th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--ink-800);
  color: var(--white);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.data-table td,
.data-table tbody th {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  color: var(--text-2);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.data-table tbody th {
  color: var(--text);
  font-weight: 600;
}

.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th {
  border-bottom: 0;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.75rem;
  background: var(--line-ink);
  border: 1px solid var(--ink-800);
  border-radius: var(--r-md);
  overflow: hidden;
}

.steps li {
  padding: 1.1rem 1.15rem;
  background: var(--ink-850);
  color: var(--on-ink);
  font-family: var(--font-sans);
}

.steps span {
  display: block;
  margin-bottom: 1.4rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

.steps strong {
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Sources */
.sources-list {
  display: grid;
  gap: 1px;
  margin-top: 1.5rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.sources-list li {
  background: var(--white);
  transition: background-color var(--dur) var(--ease);
}

.sources-list li:hover {
  background: var(--paper);
}

.sources-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--text);
}

.sources-list a:hover {
  color: var(--accent);
}

.sources-list strong {
  display: block;
  font-weight: 600;
}

.sources-list span {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-xs);
  color: var(--text-3);
  word-break: break-word;
}

.sources-list .icon {
  color: var(--text-3);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.sources-list a:hover .icon {
  color: var(--accent);
  transform: translate(2px, -2px);
}

.disclosure {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--text-3);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-2);
}

/* 6. Responsive -------------------------------------------------------------- */

@media (max-width: 1100px) {
  .insight-preview--featured {
    grid-template-columns: 1fr;
  }

  .insight-preview--featured .insight-preview__figure {
    min-height: 260px;
  }
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .toc {
    position: static;
    margin-bottom: 2rem;
  }

  .toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .toc a {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--line-2);
    border-left-width: 1px;
    border-radius: var(--r-sm);
  }

  .toc a.is-current {
    border-color: var(--accent);
    border-left-color: var(--accent);
  }

  .prose {
    max-width: none;
  }
}

/* Keep hairline grids on factor-of-item-count columns at every width */
@media (max-width: 620px) {
  .evidence {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .legend {
    grid-template-columns: minmax(0, 1fr);
  }
}