/* voila-grokkingstuff.css — grokkingstuff theme for Voilà / Voici dashboards.
   Usage (Voilà):  voila notebook.ipynb --theme=dark --VoilaConfiguration.extra_css=voila-grokkingstuff.css
   or add to a custom template's static/. For Voici, drop into _static and reference from the template.
   Dark "Rocinante Blue". Retheming targets JupyterLab/nbconvert DOM + CodeMirror + ipywidgets. */

:root{
  /* map to the parent site's theme tokens (with the original dark hex as
     fallback for standalone Voilà/Voici use, where --bg-0 etc don't exist)
     so this stylesheet also flips with the site's light/dark toggle */
  --gs-bg0:var(--bg-0, #12161d); --gs-bg1:var(--bg-1, #1a1f28); --gs-bg2:var(--bg-2, #232a35);
  --gs-line:var(--line, #333c4b); --gs-line-strong:var(--line-strong, #465061);
  --gs-fg0:var(--fg-0, #e4e8ee); --gs-fg1:var(--fg-1, #a4adbd); --gs-fg2:var(--fg-2, #68727f);
  --gs-blue:var(--blue, #6fa6cf); --gs-blue-strong:var(--blue-strong, #8bbfe4);
  --gs-amber:var(--amber, #c9924f); --gs-amber-strong:var(--amber-strong, #e0a962);
  --gs-sage:var(--sage, #8fab84); --gs-sage-strong:var(--sage, #a3bf98);
  --gs-rust:var(--rust, #c3684a);
  --gs-sans:'Space Grotesk',system-ui,sans-serif;
  --gs-mono:'JetBrains Mono','SF Mono',Consolas,monospace;
  /* map JupyterLab theme variables so widgets/themes inherit automatically */
  --jp-layout-color0:var(--gs-bg0); --jp-layout-color1:var(--gs-bg1); --jp-layout-color2:var(--gs-bg2);
  --jp-border-color1:var(--gs-line); --jp-border-color2:var(--gs-line); --jp-border-color0:var(--gs-line-strong);
  --jp-ui-font-color0:var(--gs-fg0); --jp-ui-font-color1:var(--gs-fg0); --jp-ui-font-color2:var(--gs-fg1); --jp-ui-font-color3:var(--gs-fg2);
  --jp-content-font-color0:var(--gs-fg0); --jp-content-font-color1:var(--gs-fg0); --jp-content-font-color2:var(--gs-fg1);
  --jp-brand-color1:var(--gs-blue); --jp-brand-color0:var(--gs-blue-strong);
  --jp-accent-color1:var(--gs-sage); --jp-warn-color1:var(--gs-amber-strong); --jp-error-color1:var(--gs-rust);
  --jp-ui-font-family:var(--gs-sans); --jp-content-font-family:var(--gs-sans); --jp-code-font-family:var(--gs-mono);
  --jp-cell-editor-background:var(--gs-bg1); --jp-cell-editor-border-color:var(--gs-line);
  --jp-rendermime-error-background:rgba(195,104,74,.12);
  --jp-border-radius:0px;
}

.jp-Notebook, .voila-html, #rendered_cells{ background:var(--gs-bg0); color:var(--gs-fg0); font-family:var(--gs-sans); }

/* headings — coordinate/silkscreen rhythm */
.jp-RenderedHTMLCommon h1{ color:var(--gs-blue); font-weight:600; letter-spacing:-.01em; border-bottom:1px solid var(--gs-line); padding-bottom:.3em; }
.jp-RenderedHTMLCommon h2{ color:var(--gs-amber-strong); font-weight:600; }
.jp-RenderedHTMLCommon h3{ color:var(--gs-sage-strong); font-weight:600; }
.jp-RenderedHTMLCommon a{ color:var(--gs-blue); text-decoration:none; border-bottom:1px solid currentColor; }
.jp-RenderedHTMLCommon code{ color:var(--gs-amber); background:var(--gs-bg1); border-radius:0; padding:1px 4px; }

/* cells / panels — hairline borders, square corners */
.jp-Cell, .jp-CodeCell, .jp-MarkdownCell{ background:transparent; }
.jp-InputArea-editor{ background:var(--gs-bg1); border:1px solid var(--gs-line); border-radius:0; }
.jp-OutputArea-output{ background:transparent; color:var(--gs-fg0); }
.jp-OutputArea-output pre{ font-family:var(--gs-mono); color:var(--gs-fg0); }
.jp-RenderedText[data-mime-type="application/vnd.jupyter.stderr"]{ background:rgba(195,104,74,.12); color:var(--gs-rust); }

/* CodeMirror syntax → design-system accents */
.cm-s-jupyter .cm-keyword,.cm-keyword{ color:var(--gs-blue); font-weight:600; }
.cm-s-jupyter .cm-def,.cm-def,.cm-s-jupyter .cm-property{ color:var(--gs-amber-strong); }
.cm-s-jupyter .cm-string,.cm-string{ color:var(--gs-sage-strong); }
.cm-s-jupyter .cm-comment,.cm-comment{ color:var(--gs-fg2); font-style:italic; }
.cm-s-jupyter .cm-number,.cm-number,.cm-atom{ color:var(--gs-amber); }
.cm-s-jupyter .cm-builtin,.cm-builtin{ color:var(--gs-blue-strong); }
.cm-s-jupyter .cm-variable,.cm-variable{ color:var(--gs-fg0); }

/* ipywidgets — buttons, sliders, tabs */
.widget-label, .jupyter-widgets{ color:var(--gs-fg0); font-family:var(--gs-sans); }
.jupyter-button, .widget-button{ background:transparent; color:var(--gs-blue); border:1px solid var(--gs-blue); border-radius:0; font-family:var(--gs-sans); box-shadow:2px 2px 0 0 var(--gs-line-strong); transition:transform 90ms; }
.jupyter-button:hover, .widget-button:hover{ background:var(--gs-bg2); }
.jupyter-button:active{ transform:translate(2px,2px); box-shadow:none; }
.jupyter-button.mod-warning{ color:var(--gs-amber-strong); border-color:var(--gs-amber-strong); }
.jupyter-button.mod-danger{ color:var(--gs-rust); border-color:var(--gs-rust); }
.jupyter-button.mod-success{ color:var(--gs-sage-strong); border-color:var(--gs-sage-strong); }
.widget-slider .noUi-connect, .widget-hslider .ui-slider-range, .jupyter-widget-slider .slider-track-high{ background:var(--gs-blue) !important; }
.widget-hprogress .progress-bar, .jupyter-widget-progress .progress-bar{ background:var(--gs-blue); }

/* matplotlib output — sits on flat panel, no white box */
.jp-OutputArea-output img{ background:transparent; }