/* Layout for pages made by bin/marimo2hugo.py. All text styling (fonts, markdown,
   headings, code, markdown tables, colours) comes unchanged from marimo's own
   stylesheet, vendor/marimo-0.25.2.css, loaded before this file. This file only lays
   out the cells, draws the widgets marimo's frontend would have drawn (stat tiles,
   data tables, download buttons, the language toggle), and styles the blog's header
   and footer. */

/* 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(vendor/DejaVuSans-latin.woff2) format("woff2"); }
@font-face { font-family: "Inconsolata"; font-weight: 400; font-display: swap; src: url(/fonts/inconsolata-v32-latin-500.woff2) format("woff2"); }

:root { --content-width: 1110px; color-scheme: light; }

/* ---- page and cells ---------------------------------------------------------------- */
.mo-app {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1rem 16px 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.mo-cell {
  padding: 1rem;
  background: rgb(0 0 0 / 0.02);
  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; }
.mo-img { display: block; max-width: 100%; height: auto; }
.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;
  background: #fcfcfb;
}
.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; }
.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; }

/* ---- the blog's header and footer -------------------------------------------------- */
.site-header, .site-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 16px;
  font-family: "Inconsolata", system-ui, sans-serif;
  font-size: large;
  line-height: normal;
  color: #000;
  text-transform: lowercase;
}
.site-header { display: flex; justify-content: flex-end; padding-top: 30px; }
.site-header nav { display: flex; gap: 2ch; }
.site-header a { color: blue; text-decoration: underline; text-decoration-thickness: .5px; }
.site-header a:hover { text-decoration-thickness: 1px; }
.site-footer { display: flex; justify-content: space-between; font-weight: 100; }
.site-footer p { margin: 0; padding-bottom: 15px; }
/* The page has no dark version: the charts are light images. */
.site-footer #themer-button { display: none; }