/* Pivot AI Lab | Article light theme
   Full replacement for /home/byoung/pivotailab-staging/assets/article.css
   Loaded after /styles.css. Scoped to article pages by its inclusion in their HTML.
*/

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f5f8fc;
  --line: #dce4ee;
  --text: #13243b;
  --muted: #506278;
  --mint: #008c88;
  --blue: #1769d2;
}

body { background: #fff; color: #13243b; }
::selection { background: #cce5ff; color: #12243a; }
a:focus-visible { outline: 3px solid #1769d2; outline-offset: 4px; }

/* Site chrome. styles.css supplies the layout; these declarations make
   the shared header and footer light on article pages. */
.site-header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #e0e7ef;
}
.brand { color: #13243b; }
.brand-accent { color: #1769d2; }
.brand-dot { color: #ef773b; }
.brand-mark { border-color: #1769d2; }
.brand-mark span { background: #1769d2; }
nav { color: #344c66; }
nav a:hover { color: #1769d2; }
.nav-contact { border-color: #c4d3e3; }
.nav-contact span { color: #1769d2; }
.site-footer { background: #f8fafd; border-top: 1px solid #dde6f0; }
.footer-inner > span:nth-child(2) { color: #52647a; }
.footer-inner > a { color: #1769d2; }

/* Article header */
.article-main { padding-bottom: 76px; }
.article-header { padding: 74px 0 40px; max-width: 1120px; }
.article-header .breadcrumbs {
  margin-bottom: 30px;
  color: #52677e;
  font: 650 11px/1.7 ui-monospace, Consolas, monospace;
  letter-spacing: .055em;
}
.article-header .breadcrumbs a:hover { color: #1769d2; }
.article-header .flag {
  color: #1769d2;
  font: 750 11px/1.5 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
}
.article-header h1 {
  color: #12243b;
  max-width: 1040px;
  margin: 19px 0 23px;
  font-size: clamp(43px, 5.7vw, 74px);
  font-weight: 825;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.article-header h1 em { color: #1769d2; font-style: normal; }
.article-header .subtitle {
  max-width: 900px;
  margin-bottom: 26px;
  color: #425b75;
  font-size: 21px;
  line-height: 1.58;
}
.byline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: #60738a; font-size: 13px; }
.byline b { color: #13243b; }
.article-intro {
  max-width: 920px;
  padding-top: 28px;
  color: #344b64;
  font-size: 19px;
  line-height: 1.82;
}

/* Reading column and table of contents */
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 74px; align-items: start; }
.article-toc {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 18px;
  border-left: 2px solid #d5e2f0;
}
.article-toc strong {
  margin-bottom: 9px;
  color: #1769d2;
  font: 750 11px ui-monospace, Consolas, monospace;
  letter-spacing: .14em;
}
.article-toc a { color: #465d76; font-size: 12px; line-height: 1.5; }
.article-toc a:hover { color: #1769d2; }
.article-content { min-width: 0; color: #263c54; }
.article-content section { scroll-margin-top: 35px; }
.article-content h2 {
  margin: 64px 0 22px;
  color: #13243b;
  font-size: clamp(28px, 3.2vw, 37px);
  line-height: 1.27;
  letter-spacing: -.038em;
}
.article-content h3 {
  margin: 32px 0 14px;
  color: #183c61;
  font-size: 21px;
  line-height: 1.36;
  letter-spacing: -.022em;
}
.article-content p, .article-content li {
  color: #344a62;
  font-size: 16px;
  line-height: 1.88;
}
.article-content strong { color: #142f4b; }
.article-content ul { padding-left: 23px; }
.article-content li { margin-bottom: 9px; }
.article-content a:not(.readback) { color: #145eaf; text-underline-offset: 3px; }

/* Figures, captions and data */
.article-figure {
  margin: 36px 0 34px;
  overflow: hidden;
  background: #f7faff;
  border: 1px solid #d8e2ed;
  border-radius: 12px;
  box-shadow: 0 6px 23px rgba(31, 65, 107, .055);
}
.article-figure img { display: block; width: 100%; }
.article-figure figcaption {
  padding: 16px 20px;
  color: #50647a;
  border-top: 1px solid #dbe5ef;
  font-size: 12px;
  line-height: 1.65;
}
.figure-caption-label {
  margin-right: 6px;
  color: #1769d2;
  font: 700 11px ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
}
.article-figure figcaption a, .article-table a {
  color: #145eaf;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-figure.fullbleed { margin-left: 0; margin-right: 0; }
.article-header .intro-visual { margin-top: 42px; }
.article-header .intro-visual img { display: block; width: 100%; }
.article-header .intro-visual figcaption { padding: 14px 18px; color: #50647a; font-size: 12px; }

.article-statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 25px 0 34px; }
.article-stat {
  padding: 19px 17px;
  background: #eef5fc;
  border: 1px solid #d9e7f5;
  border-radius: 9px;
}
.article-stat strong {
  display: block;
  color: #0d5e9c;
  font: 750 20px ui-monospace, Consolas, monospace;
}
.article-stat span { color: #475f78; font-size: 12px; }
.article-note {
  margin: 28px 0 30px;
  padding: 18px 22px;
  background: #ebf6f4;
  border-left: 4px solid #008c88;
  border-radius: 0 7px 7px 0;
}
.article-note b {
  color: #086864;
  font: 700 11px ui-monospace, Consolas, monospace;
  letter-spacing: .09em;
}
.article-note p { margin: 10px 0 0; }
.article-note.warn { background: #fff2e8; border-color: #e06b30; }
.article-note.warn b { color: #a54a1d; }
.article-table { width: 100%; margin: 22px 0; border-collapse: collapse; font-size: 14px; }
.article-table th, .article-table td {
  padding: 12px 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #dce5ee;
}
.article-table th { background: #edf3fa; color: #183d61; }
.article-table td { color: #354c66; }

/* Dark terminal panels are intentional: they separate real lab evidence
   from the editorial text without turning the entire site dark. */
.code-sample {
  padding: 20px 22px;
  overflow-x: auto;
  background: #102337;
  color: #e8f3ff;
  border: 1px solid #27445f;
  border-radius: 9px;
  font: 500 14px/1.9 ui-monospace, Consolas, monospace;
}
.evidence-terminal {
  margin: 20px 0 33px;
  overflow: hidden;
  background: #102337;
  border: 1px solid #304960;
  border-radius: 12px;
}
.evidence-terminal-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  padding: 13px 17px;
  background: #1a3249;
  border-bottom: 1px solid #304b64;
  color: #c2d4e4;
  font: 650 11px/1.5 ui-monospace, Consolas, monospace;
  letter-spacing: .025em;
}
.evidence-terminal-bar strong { color: #77dfc8; }
.evidence-terminal-bar span:last-child { margin-left: auto; color: #b1c6d7; }
.terminal-lights { display: flex; gap: 6px; }
.terminal-lights i { width: 8px; height: 8px; background: #5c7791; border-radius: 50%; }
.terminal-lights i:first-child { background: #63d5ba; }
.evidence-terminal pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  white-space: pre;
  color: #e0effa;
  font: 500 13px/1.77 ui-monospace, Consolas, monospace;
  tab-size: 2;
}

/* End matter */
.article-ending { margin-top: 50px; padding-top: 20px; border-top: 1px solid #d5e2ef; }
.article-ending p { color: #526980; font-size: 14px; }
.next-read {
  margin: 70px 0 20px;
  padding: 27px 30px;
  background: #f0f6fc;
  border: 1px solid #d5e4f2;
  border-radius: 12px;
}
.next-read .kicker { margin-bottom: 14px; color: #1769d2; }
.next-read h3 { margin: 0 0 10px; color: #173955; }
.next-read p { margin: 0; font-size: 14px; }
.readback { display: inline-flex; margin-top: 18px; color: #145eaf; font-size: 13px; font-weight: 700; }
.readback:hover { color: #008c88; }

@media (max-width: 980px) {
  .article-layout { grid-template-columns: 1fr; gap: 16px; }
  .article-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 0 0 22px;
    border-left: 0;
    border-bottom: 1px solid #dce5ef;
  }
  .article-toc strong { width: 100%; }
  .article-toc a { font-size: 12px; }
  .article-content h2 { margin-top: 48px; }
}
@media (max-width: 700px) {
  .article-header { padding: 42px 0 22px; }
  .article-header h1 { font-size: clamp(36px, 10vw, 48px); }
  .article-header .subtitle { font-size: 18px; }
  .article-intro { font-size: 16px; }
  .article-statgrid { grid-template-columns: 1fr; }
  .article-content p, .article-content li { font-size: 15px; }
  .article-content h2 { font-size: 27px; }
  .article-header .intro-visual { margin-top: 27px; }
  .article-note { padding: 16px; }
  .article-table { font-size: 12px; }
  .article-table th, .article-table td { padding: 9px; }
  .evidence-terminal pre { padding: 14px; font-size: 11px; }
  .evidence-terminal-bar span:last-child { margin-left: 0; }
}