/* marimo notebooks inside blog posts (bin/marimo2hugo.py, the marimo shortcode).
   All text styling inside a notebook (fonts, markdown, headings, code, markdown
   tables, colours, dark mode) comes unchanged from marimo's own stylesheet,
   marimo-0.25.2.css, scoped to .mo-app and loaded before this file. This file only
   fits the notebook into the post, lays out the cells, draws the widgets marimo's
   frontend would have drawn (stat tiles, data tables, download buttons, the language
   toggle) and switches the charts to their dark twins. */

/* The plotly figures ask for DejaVu Sans, matplotlib's font, which the charts use too.
   Latin subset of matplotlib's copy. */
@font-face { font-family: "DejaVu Sans"; font-weight: 400; font-display: swap; src: url(DejaVuSans-latin.woff2) format("woff2"); }

/* The surface of a cell; the dark charts are rendered on exactly this colour. */
.mo-app { --mo-surface: rgb(0 0 0 / 0.02); }
[data-theme="dark"] .mo-app { --mo-surface: #222222; }

/* ---- fitting into the post --------------------------------------------------------- */
/* As wide as marimo's "medium" notebook, wider than the post's text column, centred
   on it. theme.css hides horizontal overflow on <body>, which would clip the notebook
   to the column; <html> hides it as well, so the page still never scrolls sideways. */
body:has(.mo-app) { overflow-x: visible; }
.mo-app {
  --mo-width: min(1110px, 100vw - 32px);
  width: var(--mo-width);
  margin: 1.5rem 0 1.5rem calc(50% - var(--mo-width) / 2);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Not the post's: font size, lowercase, background. */
  font-size: 1rem;
  text-transform: none;
  color: var(--foreground);
  background: none;
}
/* What theme.css sets on bare elements that marimo leaves alone. */
.mo-app strong { color: inherit; }
.mo-app li::marker { color: inherit; }
.mo-app p { line-height: inherit; }

/* ---- cells ------------------------------------------------------------------------- */
.mo-cell {
  padding: 1rem;
  background: var(--mo-surface);
  display: flow-root;
  overflow-x: auto;
  scroll-margin-top: 1rem;
}
/* The language toggle sits on its own, as in the notebook. */
.mo-cell:has(.mo-toggle) { background: none; padding-block: 0; }
/* HTML the notebook styled inline for its light page, e.g. a sticky table header. */
[data-theme="dark"] .mo-cell [style*="background"] { background: var(--mo-surface) !important; }

/* ---- charts ------------------------------------------------------------------------ */
.mo-img { display: block; max-width: 100%; height: auto; }
/* A chart with a dark twin: one of the two shows; the hidden one, lazy, is never fetched. */
[data-theme="dark"] .mo-light, :root:not([data-theme="dark"]) .mo-dark { display: none; }
.mo-plotly { width: 100%; }
/* Until plotly has drawn the figure (it then adds .js-plotly-plot), show a placeholder
   of the figure's size. */
.mo-plotly:not(.js-plotly-plot) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mo-plotly:not(.js-plotly-plot)::before {
  content: attr(data-loading);
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ---- stat tiles -------------------------------------------------------------------- */
.mo-stat { padding: 0.5rem 1rem; min-width: 10rem; overflow-wrap: break-word; hyphens: auto; }
/* A row of tiles: as many equal columns as fit, two on a phone. */
.mo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}
.mo-stats .mo-stat { padding: 0.25rem 0 0.25rem 0.75rem; min-width: 0; border-left: 2px solid var(--border); }
.mo-stat-label { font-size: 0.875rem; color: var(--foreground); }
.mo-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 2rem; color: var(--foreground); }
.mo-stat-caption { font-size: 0.75rem; color: var(--muted-foreground); }

/* ---- data tables (marimo's table widget, without its controls) --------------------- */
.mo-table { margin-top: 1rem; font-size: 0.875rem; }
.mo-table-label { margin-bottom: 0.5rem; font-weight: 700; }
.mo-table-label .paragraph { margin: 0; }
.mo-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.mo-table table { width: 100%; border-collapse: collapse; }
.mo-table th {
  text-align: left;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.mo-table td { padding: 0.375rem 0.75rem; border-bottom: 1px solid var(--border); }
.mo-table tbody tr:last-child td { border-bottom: none; }
.mo-table tbody tr:hover { background: var(--muted); }
.mo-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mo-table-footer { padding: 0.375rem 0.25rem 0; font-size: 0.75rem; color: var(--muted-foreground); }

/* ---- controls ---------------------------------------------------------------------- */
/* Language toggle: one link to the other language; the knob shows the current one. */
.mo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
}
.mo-toggle [aria-current] { color: var(--foreground); font-weight: 700; }
.mo-toggle-track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05);
}
.mo-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 0.15s;
}
.mo-toggle[data-state="on"] .mo-toggle-track::after { transform: translateX(1rem); }
.mo-toggle:hover .mo-toggle-track { filter: brightness(1.1); }

.mo-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08);
  color: var(--foreground);
  font-size: 0.875rem;
  text-decoration: none;
}
.mo-download:hover { background: var(--muted); }
.mo-download .paragraph { margin: 0; }