/* The method overview (overview.html) and the articles split from it (partitioning, partition normalization, backbone,
   effective frequency, reconstruction): the pieces they add to main.css, namely the shortcut beside a section title,
   the width of narrow figures, display equations, the backbone table, the widgets, the cards of the live charts and the
   looped animations, the overview's list of articles and the reconstruction gallery. */

/* the article is a grid item with auto margins, which would size it to its widest equation or table on a phone */
.article-layout > .article { min-width: 0; width: 100%; }

/* a narrow figure of the paper, kept at a readable width */
.article figure.small img { max-width: min(560px, 100%); margin: 0 auto; }
.article figure .stack { display: grid; gap: 12px; }
.article figure .pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: center; }
.article figure .pair.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article figure img.narrow { max-width: min(440px, 100%); margin: 0 auto; }
/* an image stretched to the width of the text, where its own pixels are fewer */
.article figure img.full { width: 100%; height: auto; }
@media (max-width: 560px) { .article figure .pair { grid-template-columns: 1fr; } }

/* display equations scroll inside their own box on a narrow screen instead of widening the page */
.eq {
  text-align: center; font-size: 1.04rem; color: var(--text); overflow-x: auto; white-space: nowrap; padding: 4px 0;
  font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
}
.eq i { letter-spacing: 0.01em; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 3px; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 4px 1px; }
.frac > span:last-child { padding: 1px 4px 0; }
.eq .big { font-size: 2.1em; line-height: 0; vertical-align: -0.12em; font-weight: 300; }

/* the trained backbones */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; margin: 26px 0; border: 1px solid var(--border); border-radius: 14px; }
.backbones { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 520px; }
.backbones th, .backbones td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.backbones thead th { color: var(--text); background: var(--surface); font-weight: 650; }
.backbones tbody th { color: var(--muted); font-weight: 500; }
.backbones td { font-family: var(--mono); font-size: 0.84rem; color: var(--text-soft); white-space: nowrap; }
.backbones tr:last-child th, .backbones tr:last-child td { border-bottom: none; }

/* the two widgets */
.widget { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); position: relative; }
.widget-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 236px; gap: 14px; align-items: start; }
.widget-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.widget-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.widget .chart-panel { margin-top: 14px; }
.widget .chart-panel canvas.chart { aspect-ratio: 4 / 1; }
.widget .panel { padding: 12px; background: var(--inset); }
.widget .panel h4 { font-size: 0.88rem; }
.widget .panel canvas { border-radius: 0; }
.widget canvas.pick { cursor: crosshair; }
.widget canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { .widget-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .widget-grid .static-list { grid-column: 1 / -1; } }
@media (max-width: 560px) { .widget-grid, .widget-grid.two, .widget-grid.three { grid-template-columns: 1fr; } .widget .chart-panel canvas.chart { aspect-ratio: 2 / 1; } }
.widget-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.widget-bar .label { font-size: 0.84rem; color: var(--muted); font-weight: 600; }
.widget-bar .grow { flex: 1 1 220px; display: flex; align-items: center; gap: 12px; }
.widget-bar .value { font-family: var(--mono); font-size: 0.86rem; color: var(--yellow); min-width: 64px; }
.widget-bar .chip { padding: 5px 12px; font-family: var(--mono); font-size: 0.82rem; }

.static-list { margin: 0; padding: 12px 14px; border-radius: var(--radius); background: var(--inset); border: 1px solid var(--border); font-size: 0.84rem; }
.static-list dt { color: var(--muted); margin-top: 8px; }
.static-list dt:first-child { margin-top: 0; }
.static-list dd { margin: 1px 0 0; font-family: var(--mono); color: var(--text); }
.static-list .muted { font-family: var(--font); font-size: 0.78rem; }

.esf-legend { margin-top: 10px; }
.esf-legend .bar { height: 10px; border-radius: 4px; background: linear-gradient(90deg, #0d2a22, #0b4a39, #047857, #10b981, #6ee7b7, #d1fae5); }
:root[data-theme="light"] .esf-legend .bar { background: linear-gradient(90deg, #ecfdf5, #a7f3d0, #34d399, #059669, #047857, #064e3b); }
.esf-legend .ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
.esf-readout { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.esf-readout span { font-size: 0.82rem; padding: 5px 10px; border-radius: 8px; background: var(--inset); border: 1px solid var(--border); color: var(--muted); }
.esf-readout b { font-family: var(--mono); font-weight: 600; color: var(--text); margin-left: 4px; }
.ov-tip {
  position: absolute; z-index: 5; pointer-events: none; padding: 5px 9px; border-radius: 8px; font-size: 0.78rem; white-space: nowrap;
  background: rgba(var(--bg-rgb), 0.94); border: 1px solid var(--border-strong); color: var(--text);
}

/* the live charts and the looped animations (overview-charts.js, overview-anim.js): a card per canvas, the hues of the
   six kinds of function of the frequency sweep (validated for colour-vision deficiency on either surface), a legend of
   chips and a key of line styles */
:root {
  --ov-k1: #3b9ae8;
  --ov-k2: #e2701f;
  --ov-k3: #16a578;
  --ov-k4: #9b7cf0;
  --ov-k5: #b38700;
  --ov-k6: #de5590;
}
:root[data-theme="light"] {
  --ov-k1: #1c7ed6;
  --ov-k2: #e8590c;
  --ov-k3: #0b9a6e;
  --ov-k4: #7048e8;
  --ov-k5: #b07800;
  --ov-k6: #d6336c;
}
.ov-card {
  position: relative; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 20px 50px -34px var(--shadow);
}
.ov-canvas { display: block; width: 100%; height: auto; }
.ov-canvas.chart { aspect-ratio: 2.3 / 1; }
.ov-canvas.sweep { aspect-ratio: 1.55 / 1; }
.ov-canvas.sphere { aspect-ratio: 2 / 1; max-width: 720px; margin: 0 auto; }
.ov-canvas.pn { aspect-ratio: 2.6 / 1; }
.ov-canvas.zoom { aspect-ratio: 2.8 / 1; }
.ov-canvas.sine { aspect-ratio: 2.4 / 1; max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) {
  .ov-canvas.chart { aspect-ratio: 1.3 / 1; }
  .ov-canvas.sweep { aspect-ratio: 0.95 / 1; }
  .ov-canvas.sphere { aspect-ratio: 1.3 / 1; }
  .ov-canvas.pn { aspect-ratio: 1 / 1; }
  .ov-canvas.zoom { aspect-ratio: 1.15 / 1; }
  .ov-canvas.sine { aspect-ratio: 1.6 / 1; }
}
.ov-card canvas.chart, .ov-card canvas.sweep { cursor: crosshair; }
.ov-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ov-controls.top { margin: 0 0 12px; }
.ov-controls .segmented { width: auto; flex-wrap: wrap; }
.ov-controls .segmented button { white-space: nowrap; }
.segmented button[aria-pressed="true"] { background: var(--accent-deep); color: #fff; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ov-legend .chip { padding: 5px 11px; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 7px; }
.ov-legend .sw { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.ov-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 0.8rem; color: var(--muted); }
.ov-key span { display: inline-flex; align-items: center; gap: 7px; }
.ov-key .ln { width: 18px; height: 0; border-top: 2.4px solid var(--c); display: inline-block; }
.ov-key .ln.dash { border-top-style: dashed; }
.ov-card .ov-tip { line-height: 1.4; }
.ov-stats { margin: 26px 0; gap: 14px; }
.ov-stats .stat { padding: 18px; }
.ov-stats .stat .value { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.ov-stats .stat .label { font-size: 0.84rem; }
@media (max-width: 520px) { .ov-stats { grid-template-columns: 1fr 1fr; } }

/* the split of the variation of the centred field in the frequency widget */
.esf-share { margin-top: 12px; }
.esf-share .bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--inset); gap: 2px; }
.esf-share .in { background: var(--accent); transition: flex-basis 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); flex: 0 0 50%; }
.esf-share .frames { background: rgba(var(--yellow-rgb), 0.75); transition: flex-basis 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); flex: 1 1 auto; }
.esf-share .ticks { display: flex; justify-content: space-between; gap: 12px; font-size: 0.74rem; color: var(--muted); margin-top: 4px; }
.esf-share .ticks span:last-child { text-align: right; }
@media (prefers-reduced-motion: reduce) { .esf-share .in, .esf-share .frames { transition: none; } }
.widget .chart-panel canvas#po-chart { height: auto; aspect-ratio: 3.2 / 1; }
@media (max-width: 560px) { .widget .chart-panel canvas#po-chart { aspect-ratio: 1.7 / 1; } }

/* the one shortcut a section may carry: a small chip beside its title, "Read more about" the article that details it */
.article h2 .h2-more {
  display: inline-block; vertical-align: middle; margin: -4px 0 0 10px; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0; white-space: normal; line-height: 1.6;
}
.article h2 .h2-more:hover, .article h2 .h2-more:focus-visible { color: var(--strong); border-color: var(--accent); }

/* the reconstruction article's gallery of before and after sliders (compare.js), a block of its own rather than a
   figure, so that its images keep the slider's look and do not open in the lightbox */
#rc-gallery { margin-top: 30px; margin-bottom: 34px; }
#rc-gallery .gallery-controls { margin-bottom: 16px; }
#rc-gallery .rc-caption { font-size: 0.88rem; color: var(--muted); margin-top: 12px; }
#rc-gallery .rc-grid { gap: 14px; }
#rc-gallery .gallery-card { padding: 10px; }
/* small partition-count sweeps in place of stat tiles (overview_sweeps.py): a final value over a small chart each */
.sweep-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 24px 0; }
.sweep-tile { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 14px 10px; display: flex; flex-direction: column; }
.sweep-tile .st-head { display: flex; flex-direction: column; gap: 2px; }
.sweep-tile .st-value { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; }
.sweep-tile .st-at { font-size: 0.74rem; color: var(--muted); }
.sweep-tile .st-title { font-size: 0.82rem; color: var(--text-soft); line-height: 1.3; margin: 4px 0 6px; min-height: 2.6em; }
.sweep-tile canvas { display: block; width: 100%; aspect-ratio: 1.5 / 1; cursor: crosshair; margin-top: auto; }
@media (max-width: 520px) { .sweep-tiles { grid-template-columns: minmax(0, 1fr); } .sweep-tile canvas { aspect-ratio: 2.4 / 1; } }
@media (max-width: 420px) { .sweep-tile .st-value { font-size: 1.2rem; } .sweep-tile .st-title { min-height: 0; } }
/* the headline cards of the home page inside the overview's operator section */
.article .stats.ov-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 6px; }
@media (max-width: 560px) { .article .stats.ov-acc { grid-template-columns: minmax(0, 1fr); } }
.article .headlines-note.lead-note { margin: 2px 0 14px; }
.article .stats.seven .stat, .article .stats.projected .stat { padding: 18px; }
.article .stats.seven .stat .value, .article .stats.projected .stat .value { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.article .stats.seven .stat .label, .article .stats.projected .stat .label { font-size: 0.86rem; }
.article .stats.seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article .stats.seven > .stat:last-child { grid-column: span 2; }
@media (max-width: 560px) { .article .stats.seven { grid-template-columns: minmax(0, 1fr); } .article .stats.seven > .stat:last-child { grid-column: auto; } }
.ov-why { margin-top: 30px; }
.ov-why-list { padding-left: 1.1em; }
.ov-why-list li { margin: 0 0 10px; }
.canvas-box { position: relative; }
/* charts without fields at the text width and shorter, as there is little in them (held-out error, equivariance) */
#ho-card .ov-canvas.chart, #eq-card .ov-canvas.chart { aspect-ratio: 2.9 / 1; }
@media (max-width: 760px) { #ho-card .ov-canvas.chart, #eq-card .ov-canvas.chart { aspect-ratio: 1.6 / 1; } }
.article figure img.wide-domain { max-width: min(660px, 100%); margin: 0 auto; }
/* the note under the equivariance chart that rotation equivariance is learned, not imposed (overview-charts.js shows it
   with the rotation curve only): a red box, outside the plot so that it covers no data */
.eq-note {
  margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(var(--red-rgb), 0.75);
  background: rgba(var(--red-rgb), 0.1); color: var(--text); font-size: 0.88rem; line-height: 1.5;
}
.eq-note b { color: var(--red); }
.eq-note[hidden] { display: none; }

/* the interactive "Similar partitions coincide" figure (partnorm-cases.js): per input, the input and its normalized
   partition boxed in the canonical frame with its static frame below; the embedding strip and the pair's note under them */
.pn-cases .pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.pn-cases .pc-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.pn-cases .pc-panel { position: relative; padding-top: 22px; }
.pn-cases .pc-label { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.pn-cases .pc-panel img { display: block; width: 100%; height: auto; transition: opacity 0.17s ease; }
.pn-cases .pc-panel img.fading { opacity: 0; }
/* the scattered dots of a field overshoot its disk a little: clip to the disk the panel draws */
.pn-cases img.pc-input { clip-path: circle(45.4% at 50% 50%); }
.pn-cases img.pc-norm { clip-path: circle(44.2% at 50% 50%); }
.pn-cases .pc-img { position: relative; }
/* the canonical frame: a box around the normalized partition, where the paper draws its axes */
.pn-cases .pc-frame .pc-img::after { content: ""; position: absolute; inset: 2%; border: 1.5px solid var(--text-soft); border-radius: 3px; pointer-events: none; }
.pn-cases .pc-arrow { font-size: 1.3rem; color: var(--muted); padding-top: 22px; }
.pn-cases .pc-static { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 4px 16px; margin: 10px 0 0; font-size: 0.86rem; }
.pn-cases .pc-static div { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.pn-cases .pc-static dt { color: var(--muted); }
.pn-cases .pc-static dt::after { content: " ="; }
.pn-cases .pc-static dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; min-width: 3.2em; }
.pn-cases .pc-strip { margin-top: 18px; }
.pn-cases .pc-strip canvas { display: block; width: 100%; cursor: crosshair; }
.pn-cases .pc-cos { margin-top: 8px; text-align: right; font-size: 0.88rem; color: var(--muted); }
.pn-cases .pc-cos b { color: var(--accent); font-size: 1.05rem; font-variant-numeric: tabular-nums; margin-left: 4px; }
.pn-cases .pc-note { margin: 10px 0 0; font-size: 0.9rem; color: var(--text-soft); line-height: 1.55; min-height: 3.1em; }
.pn-cases .pc-tip { position: absolute; z-index: 3; pointer-events: none; }
@media (max-width: 700px) {
  .pn-cases .pc-grid { grid-template-columns: minmax(0, 1fr); }
  .pn-cases .pc-static { grid-template-columns: repeat(2, auto); gap: 4px 18px; font-size: 0.84rem; }
}
.article figure.esf-hero { max-width: min(700px, 100%); margin-left: auto; margin-right: auto; }

/* the Derivatives article's viewer: a 3 x 3 grid of disks (field and reconstruction, then per axis the analytic and
   decoded derivative and their error), each named, the decoded ones with their relative error */
.dv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin-top: 16px; }
.dv-tile { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dv-tile img { width: 100%; max-width: 180px; aspect-ratio: 1; background: transparent; }
.dv-name { font-size: 0.85rem; color: var(--text-soft); font-weight: 600; }
.dv-err { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); min-height: 1em; }
.dv-legend { margin-top: 12px; font-size: 0.88rem; color: var(--muted); }
@media (max-width: 560px) { .dv-grid { gap: 10px; } .dv-name { font-size: 0.72rem; } }
.article .dv-grid figure.dv-tile { border: 0; padding: 0; background: none; margin: 0; box-shadow: none; }
.article .dv-grid figure.dv-tile img { border: 0; box-shadow: none; background: none; padding: 0; border-radius: 0; }

/* the Derivatives article's animation of automatic differentiation (ad-anim.js): the canvas in its own box with the
   pause button, a strip of stage buttons with progress bars (a click plays the stage), and the stage's sentence */
.ad-figure .ad-stage { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--stage-bg); }
.ad-figure .ad-stage canvas { display: block; width: 100%; aspect-ratio: 1000 / 470; }
.ad-figure .ad-stage canvas.tall { aspect-ratio: 520 / 720; }
.ad-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ad-step {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-size: 0.82rem; cursor: pointer; text-align: left;
  transition: border-color 0.2s, color 0.2s;
}
.ad-step .num { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--accent-deep); color: #fff; font-size: 0.72rem; font-weight: 800; }
.ad-step b { font-weight: 700; color: var(--text-soft); line-height: 1.2; }
.ad-step .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--grad); }
.ad-step.active { border-color: var(--accent); }
.ad-step.active b { color: var(--text); }
.ad-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ad-caption { margin: 10px 0 0; min-height: 3em; color: var(--text-soft); font-size: 0.95rem; text-align: center; }
@media (max-width: 760px) { .ad-steps { display: flex; flex-wrap: wrap; } .ad-steps > * { flex: 1 1 30%; } }
@media (max-width: 420px) { .ad-step { padding: 7px 8px; font-size: 0.76rem; } }
/* the elementwise division in the animation's sentences, drawn as an operator at text size rather than a wide circle */
.ad-caption .osl { font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Times New Roman", serif; font-size: 0.82em; vertical-align: 0.05em; }
.ad-caption .nw { white-space: nowrap; }
/* the note under the partition-count tiles: they are a re-run, the text quotes the paper */
.sweep-note { font-size: 0.82rem; color: var(--muted); margin: 6px 0 0; }

/* a figure at three quarters of the width of a wide one (the effective-frequency article's four fields and example, the
   reconstruction article's held-out and partial-observation widgets) */
.article figure.three-quarter { max-width: min(763px, 100%); margin-left: auto; margin-right: auto; }