/*!
 * Jupiter MoE article - core styles (figure frames, tables, note, code, banner).
 * Link this file in the <head> of the blog template page. The chart styles themselves
 * are inside jupiter-moe-article.js and only load when a chart is on the page.
 *
 * HOW TO RE-COLOUR: only edit the values in section 1. Everything is prefixed --viz- so it
 * can never clash with variables that already exist in your Webflow project.
 */

/* ============================== 1. COLOURS & SETTINGS ============================== */
:root {
  --viz-text-color: var(--color--foreground-tertiary);
  --viz-muted-color: var(--color--foreground-muted);
  --viz-border-color: #E0E0E0;
  --viz-surface-bg: var(--color--background-secondary);         /* background of the figure cards */
  --viz-page-bg: var(--color--background-primary);             /* your page background (used by a few chart outlines) */
  --viz-primary-color: #297BFF;       /* main accent */
  --viz-azure-500: #297BFF;           /* colour of the animated banner */
  --viz-on-primary: var(--color--background-primary);
  --viz-info-color: #297BFF;          /* left bar of the "Scope" note */
  --viz-danger-color: #ED3333;
  --viz-success-color: #27B256;
  --viz-axis-color: #5D5D5D;
  --viz-tick-color: var(--color--foreground-tertiary);
  --viz-grid-color: var(--color--viz-grid-color);
  --viz-gray-400: #ACACAC;
  --viz-gray-600: #777777;
  --viz-transparent-page-contrast: rgba(255, 255, 255, .85);
  --viz-z-tooltip: 1200;
  /* categorical palette used by the charts: keep as a comma-separated list of #hex colours */
  --viz-chart-categorical: #297BFF, #ED34D4, #6038FF, #FAB937, #27B256, #8EB9FF, #F693E9, #AC97FF, #FDD896, #8ED9A8, #154AA0, #971A86;
  --viz-chart-sequential: #F2F7FF, #C0D8FF, #8EB9FF, #5B9AFF, #297BFF, #1F62CF, #154AA0, #0A3170, #001840;
  --viz-chart-diverging: #1F62CF, #5B9AFF, #C0D8FF, #FAFAFA, #FBC5C5, #F26464, #C12626;
  --viz-code-bg: var(--color--background-tertiary);
  --viz-table-header-bg: var(--color--background-secondary);
  --viz-table-row-odd-bg: var(--color--background-tertiary);
  --viz-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --viz-block-spacing: 24px;
  --viz-font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  /* font of charts, tables and notes */
}

/* ============================== 2. WEBFLOW RICH-TEXT FIXES ============================== */
.w-richtext { counter-reset: viz-figure; }
.w-richtext figure:has(.viz-embed) { max-width: 100% !important; width: 100% !important; }
.w-richtext .w-embed:has(.viz-embed),
.w-richtext .w-embed.w-iframe:has(.viz-embed) { max-width: 100% !important; width: 100% !important; }
.w-richtext figure:has(.viz-embed) > div { display: block !important; width: 100% !important; max-width: 100% !important; }
.w-richtext h2, .w-richtext h3, .w-richtext h4, .viz-figure { scroll-margin-top: 100px; }

/* Font: everything in the figures, tables and notes uses --viz-font-family (set in section 1); code keeps its monospace font */
.viz-embed, .viz-embed * { font-family: var(--viz-font-family); }
.viz-embed code, .viz-embed pre, .viz-code, .viz-code * { font-family: var(--viz-font-mono); }

/* ============================== 3. FIGURE FRAME (title + card + description) ============================== */
.viz-embed { box-sizing: border-box; }
.viz-figure { margin: 0 0 var(--viz-block-spacing); position: relative; counter-increment: viz-figure;
              color: var(--viz-text-color); text-align: left; line-height: 1.45; }
.viz-figure__title { font-weight: 600; font-size: .95rem; color: var(--viz-text-color);
                     margin: 0; padding: 0 0 8px; display: block; width: 100%; }
.viz-figure__card { background-color: var(--viz-surface-bg); border: 1px solid var(--viz-border-color);
                    border-radius: 10px; padding: 24px; position: relative; box-sizing: border-box; overflow: hidden; }
.viz-figure__desc { font-size: .9rem; color: var(--viz-muted-color); margin: 0; padding: 8px 0 0; display: block; width: 100%; }
.viz-figure__desc::before { content: "Figure " counter(viz-figure) " \00b7  "; font-weight: 600; }
.viz-figure__desc a { color: inherit; text-decoration: underline; }
/* OPTIONAL wide figure: add the class  viz-figure--wide  next to  viz-figure  to let it break out of the text column */
.viz-figure--wide { width: min(1100px, 100vw - 48px); margin-left: 50%; transform: translateX(-50%); }
@media (max-width: 767px) { .viz-figure__card { padding: 14px; } }

/* ============================== 4. TABLES ============================== */
.viz-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box;
                    border: 1px solid var(--viz-border-color); border-radius: 8px; background: var(--viz-surface-bg);
                    margin: 0 0 var(--viz-block-spacing); color: var(--viz-text-color); }
.viz-table-scroll > table { border-collapse: collapse; table-layout: auto; width: fit-content; min-width: 100%;
                            max-width: none; margin: 0; background: transparent; }
.viz-table-scroll th, .viz-table-scroll td { border-bottom: 1px solid var(--viz-border-color); border-right: 1px solid var(--viz-border-color);
                            padding: 6px 8px; font-size: 15px; line-height: 1.4; text-align: left; vertical-align: top;
                            white-space: nowrap; color: inherit; }
.viz-table-scroll th:last-child, .viz-table-scroll td:last-child { border-right: none; }
.viz-table-scroll thead th { background: var(--viz-table-header-bg); padding-top: 10px; padding-bottom: 10px; font-weight: 600; }
.viz-table-scroll tbody tr:nth-child(odd) td { background: var(--viz-table-row-odd-bg); }
.viz-table-scroll tbody tr:last-child td { border-bottom: none; }
.viz-table-scroll a { color: inherit; text-decoration: underline; }

/* ============================== 5. "SCOPE" NOTE ============================== */
.viz-note { background: var(--viz-surface-bg); background: color-mix(in srgb, var(--viz-info-color) 8%, var(--viz-surface-bg));
            border-left: 2px solid var(--viz-info-color); border-radius: 0 8px 8px 0; padding: 20px 18px;
            margin: var(--viz-block-spacing) 0; color: var(--viz-text-color); text-align: left; box-sizing: border-box; }
.viz-note__title { font-size: 16px; letter-spacing: .2px; font-weight: 600; margin: 0 0 6px; }
.viz-note__text { font-size: .95rem; line-height: 1.5; }

/* ============================== 6. CODE ============================== */
code.viz-inline { font-family: var(--viz-font-mono); font-size: .88em; background: var(--viz-code-bg);
                  padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; white-space: normal; }
.viz-code { background: var(--color--background-primary); border: 1px solid var(--viz-border-color); border-radius: 8px; margin: 0 0 var(--viz-block-spacing);
            padding: 12px 16px; overflow-x: auto; box-sizing: border-box; }
.viz-code pre { margin: 0; padding: 0; background: none; border: 0; font-family: var(--viz-font-mono); font-size: 14px;
                line-height: 1.5; color: #24292E; white-space: pre; }
.viz-code .k { color: #005CC5; }

/* ============================== 7. ANIMATED BANNER ============================== */
.banner-aizawa { position: relative; width: 100%; height: 100%; min-height: 220px; aspect-ratio: 5 / 2; margin: 0; }
  .banner-aizawa canvas { display: block; width: 100%; height: 100%; }

/* ============================== 8. RESERVED SPACE (prevents the page jumping while figures load) ============================== */
/* Approximate heights of each figure, measured in a 680 px text column. Safe to delete. */
#fig-waterfall .viz-figure__card > :first-child { min-height: 426px; }
#fig-breakdown .viz-figure__card > :first-child { min-height: 377px; }
#fig-node .viz-figure__card > :first-child { min-height: 390px; }
#fig-parallelism .viz-figure__card > :first-child { min-height: 364px; }
#fig-trace-baseline .viz-figure__card > :first-child { min-height: 347px; }
#fig-offload .viz-figure__card > :first-child { min-height: 269px; }
#fig-newton-schulz .viz-figure__card > :first-child { min-height: 283px; }
#fig-trace-muon .viz-figure__card > :first-child { min-height: 581px; }
#fig-sonic .viz-figure__card > :first-child { min-height: 350px; }
#fig-ssdl .viz-figure__card > :first-child { min-height: 248px; }
#fig-trace-bf16 .viz-figure__card > :first-child { min-height: 581px; }
#fig-memory-streams .viz-figure__card > :first-child { min-height: 251px; }
#fig-nccl-ctas .viz-figure__card > :first-child { min-height: 263px; }
#fig-nccl-speedup .viz-figure__card > :first-child { min-height: 351px; }
#fig-pinned .viz-figure__card > :first-child { min-height: 243px; }
#fig-grace-at-start .viz-figure__card > :first-child { min-height: 261px; }
@media (max-width: 767px) {
  #fig-waterfall .viz-figure__card > :first-child { min-height: 456px; }
  #fig-breakdown .viz-figure__card > :first-child { min-height: 411px; }
  #fig-node .viz-figure__card > :first-child { min-height: 579px; }
  #fig-parallelism .viz-figure__card > :first-child { min-height: 368px; }
  #fig-trace-baseline .viz-figure__card > :first-child { min-height: 467px; }
  #fig-offload .viz-figure__card > :first-child { min-height: 402px; }
  #fig-newton-schulz .viz-figure__card > :first-child { min-height: 330px; }
  #fig-trace-muon .viz-figure__card > :first-child { min-height: 766px; }
  #fig-sonic .viz-figure__card > :first-child { min-height: 428px; }
  #fig-ssdl .viz-figure__card > :first-child { min-height: 268px; }
  #fig-trace-bf16 .viz-figure__card > :first-child { min-height: 766px; }
  #fig-memory-streams .viz-figure__card > :first-child { min-height: 294px; }
  #fig-nccl-ctas .viz-figure__card > :first-child { min-height: 334px; }
  #fig-nccl-speedup .viz-figure__card > :first-child { min-height: 380px; }
  #fig-pinned .viz-figure__card > :first-child { min-height: 326px; }
  #fig-grace-at-start .viz-figure__card > :first-child { min-height: 333px; }
}