/* ================================================================
   models.css — page-local styles for models.html
   Extracted per review item 3.1 so diffs no longer touch HTML and so
   the file is cache-friendly alongside styles.css.
   ================================================================ */

:root {
  /* Model accent colours (kept in sync with compare.html / compare.js).
     Read at runtime in models.js via getComputedStyle(), so the palette
     has a single source of truth (review item 3.2). */
  --c-white: #ff7675;   /* B-IDM      (white noise)        */
  --c-ar:    #74b9ff;   /* DR-IDM     (AR(p) noise)        */
  --c-gp:    #55efc4;   /* MA-IDM     (Gaussian process)   */

  /* A stronger muted tone for body copy on this long-form page so it
     clears WCAG AA against the dark panels (review item 1.5). The site-
     wide --muted stays unchanged to avoid rippling through other pages. */
  --muted-body: #b4c2d4;
}

.mdl-wrap {
  display: block; /* Override the simulator page's shared two-column <main> grid. */
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* Prose defaults */
.mdl-prose p, .mdl-prose li {
  line-height: 1.65;
  font-size: 0.96rem;
  color: var(--muted-body);
}
.mdl-prose strong { color: var(--text); }
.mdl-prose a {
  color: var(--accent);
  text-underline-offset: 2px;
}
.mdl-prose a:visited { color: #81d4fa; }
.mdl-prose a:hover { color: #b3e5fc; }
.mdl-prose code {
  background: #0b1220;
  border: 1px solid #1c2a3a;
  padding: 1px 5px; border-radius: 4px;
  font-size: 0.88em;
  color: var(--text);
}

/* ---------- Hero ---------- */
.mdl-hero {
  display: grid;
  gap: 24px;
  align-items: center;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  padding: 8px 0 20px;
  border-bottom: 1px solid #243140;
  margin-bottom: 20px;
}
@media (max-width: 960px) { .mdl-hero { grid-template-columns: 1fr; } }

.mdl-hero h2 { margin: 0 0 10px; font-size: 1.35rem; color: var(--text); }
.mdl-hero p  { margin: 0 0 10px; }

.mdl-hero .legend-row {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px;
  font-size: 0.85rem; color: var(--muted-body);
}
.mdl-hero .legend-row b { color: var(--text); font-weight: 600; }
.legend-swatch {
  display: inline-block;
  width: 14px; height: 3px; border-radius: 2px;
  vertical-align: middle; margin-right: 6px;
}

.mdl-hero-fig {
  background: #111a24;
  border: 1px solid #243140;
  border-radius: 12px;
  padding: 10px;
  margin: 0;
  position: relative;
}
/* Reserve layout space so the figure never collapses to 0 height while the
   stylesheet/canvas script are still loading (review item 1.4). */
.mdl-hero-fig .fig-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 520 / 260;
}
.mdl-hero-fig .fig-viewport > canvas,
.mdl-hero-fig .fig-viewport > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* Hide the SVG fallback once JS has upgraded the figure to <canvas>. */
.mdl-hero-fig[data-hydrated="true"] .fig-fallback { display: none; }
.mdl-hero-fig figcaption {
  font-size: 0.82rem;
  color: var(--muted-body);
  padding: 8px 6px 2px;
  text-align: center;
}

/* ---------- Section headings ---------- */
.mdl-sec-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #243140;
}
/* Chip-style number so it reads as metadata, not heading text (item 2.2). */
.mdl-sec-title .num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  border: 1px solid #243140;
  border-radius: 4px;
  background: #0f1a28;
  position: relative;
  top: -2px;                /* optical alignment with h2 baseline */
}
.mdl-sec-title h2 { margin: 0; font-size: 1.2rem; color: var(--text); }

/* ---------- Motivation tiles ---------- */
.mdl-motivate {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px) { .mdl-motivate { grid-template-columns: 1fr; } }
.mdl-tile {
  background: #111a24;
  border: 1px solid #243140;
  border-radius: 10px;
  padding: 16px 18px;
}
.mdl-tile h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--accent-2);
  display: flex; align-items: center; gap: 8px;
}
.mdl-tile .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  background: #1a2635; color: var(--accent-2); font-weight: 700;
}
.mdl-tile p { margin: 6px 0; font-size: 0.92rem; }

/* ---------- IDM equation banner ---------- */
.mdl-eq-banner {
  margin: 16px 0;
  padding: 14px 20px;
  background: linear-gradient(180deg, #132030 0%, #111a24 100%);
  border: 1px solid #243140;
  border-radius: 10px;
  overflow-x: auto;
  /* Reserve just enough vertical space that async MathJax typesetting
     doesn't cause a layout jump (review item 1.6) — but not so much that
     short equations float in a sea of empty space. */
  min-height: 3.2em;
}
.mdl-eq-banner.eq-tall { min-height: 4.8em; }
.mdl-eq-banner .eq-label {
  font-size: 0.74rem;
  color: var(--muted-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* ---------- Paper cards ---------- */
.mdl-paper {
  position: relative;
  background: #111a24;
  border: 1px solid #243140;
  border-radius: 10px;
  padding: 16px 20px 14px 24px;
  margin: 14px 0;
  overflow: hidden;
}
.mdl-paper::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--accent);
}
.mdl-paper.paper-gp::before    { background: var(--c-gp); }
.mdl-paper.paper-ar::before    { background: var(--c-ar); }
.mdl-paper.paper-white::before { background: var(--c-white); }

.mdl-paper .paper-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.mdl-paper .pill {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: #0b1220;
  border: 1px solid #243140;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mdl-paper.paper-gp    .pill { color: var(--c-gp);    border-color: rgba(85,239,196,0.35); }
.mdl-paper.paper-ar    .pill { color: var(--c-ar);    border-color: rgba(116,185,255,0.35); }
.mdl-paper.paper-white .pill { color: var(--c-white); border-color: rgba(255,118,117,0.35); }
.mdl-paper h3 { margin: 0; font-size: 1.1rem; color: var(--text); }
.mdl-paper .paper-meta {
  font-size: 0.82rem;
  color: var(--muted-body);
  margin: 2px 0 12px;
}
.mdl-paper .paper-meta a { color: var(--accent); }

/* Paper body: single column. Prose gets the full width so equations and
   long sentences aren't cramped into a ~60% column. The "At a glance"
   panel now lives as a horizontal strip of stat chips ABOVE the prose. */
.mdl-paper-body { margin-top: 6px; }
.mdl-paper-body p { margin: 6px 0; }
.mdl-paper-body > p:first-child,
.mdl-paper-body > div > p:first-child { margin-top: 0; }

/* At-a-glance stat strip: horizontal row of compact label/value chips,
   sitting at the top of each paper card. Reads as metadata, wraps freely
   on narrow screens, and leaves the prose column unconstrained. */
.mdl-glance {
  background: #0f1a28;
  border: 1px solid #1c2a3a;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 16px;
  align-items: center;
}
.mdl-glance h4 {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-body);
  font-weight: 700;
  padding-right: 12px;
  border-right: 1px solid #1c2a3a;
  white-space: nowrap;
}
.mdl-glance dl {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.mdl-glance dl > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mdl-glance dt {
  color: var(--muted-body);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.mdl-glance dd {
  margin: 2px 0 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  line-height: 1.25;
}
/* Accent the label rail per paper colour. */
.mdl-paper.paper-gp    .mdl-glance h4 { color: var(--c-gp); }
.mdl-paper.paper-ar    .mdl-glance h4 { color: var(--c-ar); }
.mdl-paper.paper-white .mdl-glance h4 { color: var(--c-white); }

@media (max-width: 640px) {
  .mdl-glance { grid-template-columns: 1fr; }
  .mdl-glance h4 {
    border-right: none;
    border-bottom: 1px solid #1c2a3a;
    padding: 0 0 6px;
  }
}

/* ---------- Comparison table + mobile pivot (review item 2.9) ---------- */
.mdl-table-wrap { overflow-x: auto; margin: 10px 0 4px; }
.mdl-table {
  width: 100%;
  border-collapse: collapse;
  background: #111a24;
  border: 1px solid #243140;
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.9rem;
}
.mdl-table th, .mdl-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #1c2a3a;
  vertical-align: top;
  text-align: left;
}
/* Column-header row (inside <thead>) keeps the dark top strip. */
.mdl-table thead th {
  background: #0f1a28;
  color: var(--text);
  font-weight: 600;
  font-size: 0.86rem;
}
/* Row-label cells (<th scope="row"> in <tbody>) look like muted labels,
   not like repeated column headers. */
.mdl-table tbody th {
  background: transparent;
  color: var(--muted-body);
  font-weight: 500;
  font-size: 0.88rem;
  width: 26%;
}
.mdl-table tr:last-child td,
.mdl-table tr:last-child th { border-bottom: none; }
.mdl-table .col-white { border-top: 2px solid var(--c-white); }
.mdl-table .col-ar    { border-top: 2px solid var(--c-ar); }
.mdl-table .col-gp    { border-top: 2px solid var(--c-gp); }

/* Below 640 px: collapse the table to stacked cards. Each <tr> becomes
   a card whose first (<th scope="row">) cell is the attribute name, and
   the three <td>s list the model values with data-label prefixes. */
@media (max-width: 640px) {
  .mdl-table-wrap { overflow-x: visible; }
  .mdl-table, .mdl-table thead, .mdl-table tbody,
  .mdl-table tr, .mdl-table th, .mdl-table td { display: block; }
  .mdl-table thead { display: none; }
  .mdl-table { background: transparent; border: none; }
  .mdl-table tr {
    background: #111a24;
    border: 1px solid #243140;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .mdl-table tbody th {
    width: auto;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    padding: 0 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid #1c2a3a;
  }
  .mdl-table td {
    border: none;
    padding: 6px 0;
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 10px;
    font-size: 0.88rem;
  }
  .mdl-table td::before {
    content: attr(data-label);
    color: var(--muted-body);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* ---------- CTA ---------- */
.mdl-cta {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 1fr;            /* equal card heights (review item 2.10) */
  margin: 22px 0 10px;
}
.mdl-cta a {
  display: flex; flex-direction: column;
  padding: 14px 16px;
  background: #111a24;
  border: 1px solid #243140;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.mdl-cta a:hover {
  background: #16222f;
  border-color: #33475e;
  transform: translateY(-1px);
}
.mdl-cta a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mdl-cta a .cta-kicker {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.mdl-cta a .cta-title { font-weight: 600; }
.mdl-cta a .cta-sub {
  display: block;
  color: var(--muted-body);
  font-size: 0.84rem;
  margin-top: 2px;
}

/* ---------- Citations ---------- */
.mdl-refs { padding-left: 22px; font-size: 0.9rem; line-height: 1.6; }
.mdl-refs li { margin-bottom: 10px; color: var(--muted-body); }
.mdl-refs li em { color: var(--text); }
.mdl-refs a { color: var(--accent); }

.mdl-bibtex { margin-top: 14px; }
.mdl-bibtex summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--accent-2);
  padding: 4px 0;
}
.mdl-bibtex pre {
  background: var(--panel-2);
  border: 1px solid #2a3645;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.78rem;
  overflow-x: auto;
  white-space: pre;
  margin: 8px 0 0;
  color: var(--text);
}
.mdl-bibtex .copy-btn {
  margin-left: 8px;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #2a3645;
  background: #1a2635;
  color: var(--accent);
  cursor: pointer;
}
.mdl-bibtex .copy-btn:hover { background: #23324a; }
.mdl-bibtex .copy-btn.copied { color: var(--c-gp); border-color: rgba(85,239,196,0.4); }

/* MathJax can overflow on narrow screens — allow horizontal scroll per block. */
mjx-container { overflow-x: auto; overflow-y: hidden; max-width: 100%; }

/* ---------- Reduced motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  .mdl-cta a { transition: none; }
  .mdl-cta a:hover { transform: none; }
}

@media print {
  .topnav, .mdl-cta, footer { display: none !important; }
  body { background: #fff; color: #000; }
  .mdl-paper, .mdl-tile, .mdl-hero-fig, .mdl-eq-banner, .mdl-table,
  .mdl-glance {
    background: #fff !important; color: #000 !important;
    border-color: #bbb !important;
  }
  .mdl-prose p, .mdl-prose li, .mdl-refs li,
  .mdl-tile p, .mdl-paper .paper-meta, .cta-sub, .mdl-glance dt,
  .mdl-hero .legend-row, .mdl-hero-fig figcaption {
    color: #222 !important;
  }
  a { color: #0645ad !important; text-decoration: underline; }
  .mdl-sec-title { border-color: #bbb; }
  .mdl-sec-title .num { color: #555; border-color: #bbb; background: #f6f6f6; }
  .mdl-hero { break-inside: avoid; }
  .mdl-paper { break-inside: avoid; }
}