/* Introduction to the Bash Shell — Jupyter Book site theme.

   Visual identity VENDORED from Elementary Computational Physics (ecp/style.py
   + _static/ecp.css) so the two courses read as one portfolio: same ink-navy +
   warm-amber palette on parchment, same Fraunces / Source Serif 4 / JetBrains
   Mono fonts. This file carries the tokens and the reusable component classes
   (header/footer banner, command card, "watch out" callout) so each notebook's
   static HTML stays lean and the look lives in ONE place.

   Light AND dark mode: we never hard-code body text colour — the theme picks a
   readable colour per mode. We only set fonts, brand the headings, colour links
   amber, style the course components, and hide stripped solution-cell inputs. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Source+Serif+4:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bp-ink: #16213e;            /* near-navy, primary text (light mode) */
  --bp-ink-soft: #46506b;       /* secondary text / metadata */
  --bp-accent: #c0851a;         /* warm amber rule + numerals */
  --bp-accent-bright: #e0a93f;  /* amber for dark backgrounds */
  --bp-panel: #faf7f0;          /* parchment panel */
  --bp-hairline: #dcd6c8;       /* subtle dividers */
  --bp-heading-dark: #f3efe3;   /* warm near-parchment for dark-mode headings */

  --bp-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --bp-body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --bp-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ---- Fonts: both modes ------------------------------------------------- */
.bd-article,
.bd-article p,
.bd-article li {
  font-family: var(--bp-body);
  font-size: 1.02rem;
}

.bd-article h1,
.bd-article h2,
.bd-article h3,
.bd-article h4 {
  font-family: var(--bp-display);
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.01em;
}

.bd-article h2 {
  border-bottom: 1px solid var(--pst-color-border, rgba(128, 128, 128, 0.25));
  padding-bottom: 0.25rem;
}

code, pre, .highlight {
  font-family: var(--bp-mono);
}
.cell_output pre { font-family: var(--bp-mono); font-size: 0.85rem; }

/* ---- Brand heading colour + links: LIGHT mode -------------------------- */
html[data-theme="light"] .bd-article h1,
html[data-theme="light"] .bd-article h2,
html[data-theme="light"] .bd-article h3,
html[data-theme="light"] .bd-article h4 { color: var(--bp-ink); }
html[data-theme="light"] .bd-article a { color: var(--bp-accent); }
html[data-theme="light"] .bd-article a:hover { color: var(--bp-ink); }

/* ---- Brand heading colour + links: DARK mode --------------------------- */
html[data-theme="dark"] .bd-article h1,
html[data-theme="dark"] .bd-article h2,
html[data-theme="dark"] .bd-article h3,
html[data-theme="dark"] .bd-article h4 { color: var(--bp-heading-dark); }
html[data-theme="dark"] .bd-article a { color: var(--bp-accent-bright); }
html[data-theme="dark"] .bd-article a:hover { color: #ffffff; }

/* ---- Solution-cell visibility ------------------------------------------
   Solution INPUTS are hidden on the public site by tools/strip_solutions.py,
   which replaces the source with a placeholder and adds the `remove-input`
   tag BEFORE the build -- nothing reaches the HTML, so no CSS is needed (and
   CSS `display:none` would be no protection anyway: hidden content still
   ships in the page source). An earlier blanket rule here also suppressed
   every solution cell on the AUTHOR-ONLY solutions build, which shares this
   stylesheet -- hiding exactly the worked solution code that site exists to
   show. Removed 2026-07-03 (same fix as ECP): visibility is decided by the
   pipelines, never by the stylesheet. */

/* ---- Admonitions match the palette ------------------------------------ */
/* Brand the neutral admonitions amber, but let the semantic warning classes keep
   their own colour (danger = red, etc.) so the rm safety warning reads serious. */
.admonition:not(.danger):not(.warning):not(.caution):not(.attention):not(.error) {
  border-left-color: var(--bp-accent) !important;
}

/* ======================================================================= */
/*  Course component classes — referenced by the static HTML blocks the    */
/*  notebooks embed (header/footer banner, command card, watch-out beat).  */
/* ======================================================================= */

/* Header / footer banner: parchment panel, amber left rule. Mirrors the
   ecp.style.header()/footer() look, but here it is plain HTML in a hidden
   Markdown cell rather than a Python call (bash kernel can't call Python). */
.bp-banner {
  font-family: var(--bp-body);
  background: var(--bp-panel);
  border: 1px solid var(--bp-hairline);
  border-left: 6px solid var(--bp-accent);
  border-radius: 6px;
  padding: 22px 28px;
  margin: 4px 0 26px 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 8px 24px -18px rgba(22,33,62,.5);
  color: var(--bp-ink);
}
.bp-banner .bp-series {
  font-family: var(--bp-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bp-accent); font-weight: 600;
  margin-bottom: 4px;
}
.bp-banner .bp-title {
  font-family: var(--bp-display); font-weight: 900; font-size: 22px;
  line-height: 1.15; color: var(--bp-ink); font-variation-settings: 'opsz' 144;
}
.bp-banner .bp-meta {
  font-family: var(--bp-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--bp-ink-soft);
}
.bp-banner .bp-rule {
  border-top: 1px solid var(--bp-hairline); margin-top: 16px; padding-top: 12px;
}
/* The banner sits on parchment in BOTH modes, so pin dark text inside it even
   in dark mode (otherwise the theme's near-white body colour would vanish). */
.bp-banner, .bp-banner .bp-title { color: var(--bp-ink) !important; }
.bp-banner a { color: var(--bp-accent); border-bottom: 1px solid var(--bp-accent); text-decoration: none; }

/* Command card: the structural unit for every command introduced. Rendered as a
   DARK lifted panel (same ink-navy family as the console code cells), so the
   amber command name is the highest-contrast token on it — not the dull
   amber-on-grey of the first draft. Tokens follow the colour spec: bright
   on-dark amber command name (≈7:1 on the panel), light-grey gloss, accent-blue
   flag names, pink inline tokens, amber left rule. */
.bp-card {
  font-family: var(--bp-body);
  background: #222a3d;                      /* dark lifted panel, ink-navy family */
  border: 1px solid #2f3a52;
  border-left: 4px solid var(--bp-accent);  /* keep the amber left rule */
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0;
  color: #c8ccd4;                           /* gloss / body text: light grey (AA) */
}
.bp-card .bp-card-cmd {
  font-family: var(--bp-mono); font-weight: 700; font-size: 15px;
  color: #e8b04a;                           /* bright on-dark amber (~7:1 on #222a3d) */
}
.bp-card .bp-card-job { color: #c8ccd4; font-style: italic; }
.bp-card table { margin: 8px 0 4px 0; font-size: 0.95rem; }
.bp-card td { color: #c8ccd4; }
.bp-card td:first-child {                    /* flag names: accent blue, mono */
  font-family: var(--bp-mono); white-space: nowrap; padding-right: 1.2em;
  color: #6cb6ff;
}
/* inline tokens (\n, help echo, ...): pink, on a faint pink wash. !important to
   beat the sphinx-book-theme inline-code colour/background. */
.bp-card code, .bp-card code .pre {
  color: #f2a8c4 !important;
  background: rgba(242, 168, 196, .10) !important;
  border: 0 !important;
}
.bp-card .bp-card-more {
  font-family: var(--bp-mono); font-size: 11px; letter-spacing: .04em;
  color: #9aa2b1; margin-top: 6px;
}
.bp-card kbd {
  font-family: var(--bp-mono); font-size: 0.8em;
  color: #e6e8ee; background: #2f3a52;
  border: 1px solid #3d4a66; border-radius: 3px; padding: 0 .35em;
}

/* "Watch out" beat for gotcha flags (rm -r, sort -n, grep -F, …): a short
   wry-voice warning, visually distinct from a neutral command card. */
.bp-watchout {
  border-left: 4px solid #b4452f;
  background: color-mix(in srgb, #b4452f 8%, transparent);
  border-radius: 4px;
  padding: 10px 16px;
  margin: 14px 0;
  font-size: 0.97rem;
}
.bp-watchout strong { color: #b4452f; }

/* ---- Figure-caption labels (kept for parity with ECP, if figures appear) */
figcaption .caption-number,
.bd-article figcaption .caption-number {
  display: inline-block; margin-right: 0.3em; font-weight: 700; font-style: normal;
}
figcaption .caption-number::after { content: "."; }
html[data-theme="light"] figcaption .caption-number { color: var(--bp-accent); }
html[data-theme="dark"] figcaption .caption-number { color: var(--bp-accent-bright); }

/* ======================================================================= */
/*  Console-block rendering — each executed cell is ONE dark terminal frame */
/*  (Clause 1). myst-nb gives .cell > .cell_input + .cell_output; we theme   */
/*  the whole cell as a single dark, rounded, contiguous terminal in BOTH    */
/*  site modes (a terminal is always dark): input is $-prompted with a green */
/*  left accent, output is one continuous screen (never one box per line).   */
/* ======================================================================= */

:root {
  --bp-term-bg: #1b2233;      /* terminal screen, ink-navy family */
  --bp-term-fg: #e6e8ee;      /* typed command text (uniform, like a real shell) */
  --bp-term-out: #cdd2db;     /* output text */
  --bp-term-prompt: #8aa0b4;  /* muted $ prompt */
  --bp-term-accent: #3fb950;  /* green "this is input" left accent */
}

/* The frame: one rounded dark box wrapping input + output. */
.bd-article div.cell {
  background: var(--bp-term-bg);
  border: 1px solid #0e1422;
  border-radius: 8px;
  margin: 18px 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .65);
}
/* Hide cells with neither visible input nor any output (the hidden setup cell:
   input removed, no stdout) so they do not render as empty frames. */
.bd-article div.cell:not(:has(.cell_input)):not(:has(.output)) { display: none; }

/* Input region: green left accent, flush with the output below it. */
.bd-article div.cell .cell_input {
  background: transparent;
  border: 0; border-left: 3px solid var(--bp-term-accent);
  margin: 0; padding: 10px 16px 6px 16px;
}
.bd-article div.cell .cell_input div.highlight,
.bd-article div.cell .cell_input div.highlight pre {
  background: transparent !important; margin: 0; border: 0;
}
/* Uniform light command text (a real shell does not syntax-colour what you type),
   overriding the light-mode pygments tokens that would be invisible on dark. */
.bd-article div.cell .cell_input div.highlight pre,
.bd-article div.cell .cell_input div.highlight pre * {
  color: var(--bp-term-fg) !important;
  font-weight: 400;
}
/* The muted $ prompt: a non-copyable pseudo-element (so copying the command does
   not pick up the prompt). One command per teaching cell keeps this correct. */
.bd-article div.cell .cell_input div.highlight pre::before {
  content: "$ "; color: var(--bp-term-prompt); font-weight: 600;
}

/* Output region: one continuous screen. All output children are transparent and
   marginless, so even if a stream arrives in fragments they read as one block
   (with nb_merge_streams there is a single <pre>; this also defangs residual
   fragmentation — fix B). Blank lines are just blank lines inside the <pre>. */
.bd-article div.cell .cell_output {
  background: transparent;
  border: 0; border-left: 3px solid transparent;  /* align text under the input */
  margin: 0; padding: 2px 16px 12px 16px;
}
.bd-article div.cell .cell_output .output,
.bd-article div.cell .cell_output .output pre,
.bd-article div.cell .cell_output > div {
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 !important;
  color: var(--bp-term-out);   /* base output colour; ANSI spans (green ✓) keep theirs */
}
.bd-article div.cell .cell_output pre { white-space: pre; }

/* No spurious scrollbars. The theme caps output height and adds overflow; undo
   that so short output never shows a vertical bar. Genuinely wide output (a
   columnar listing, a long path) gets a horizontal scroll only — terminals do
   that — never a vertical one. */
.bd-article div.cell .cell_output,
.bd-article div.cell .cell_output .output {
  max-height: none !important;
  overflow: visible !important;
}
.bd-article div.cell .cell_output pre {
  overflow-x: auto; overflow-y: hidden;
}
/* Long input commands wrap inside the frame rather than forcing a scrollbar
   (a wrapped command line is still one command — the $ prompt leads it). */
.bd-article div.cell .cell_input div.highlight pre {
  white-space: pre-wrap; word-break: break-word;
}

/* ======================================================================= */
/*  Compendium Scriptorum (reference table) + per-notebook "New in the      */
/*  Compendium" recap — both generated from commands.yml by the bashprimer  */
/*  Sphinx extension.                                                        */
/* ======================================================================= */

/* The command name in the compendium is an xref (<a>) in the first column, so it
   already takes the theme's amber link colour in both modes; we only add weight +
   mono. Target the first-column link directly (Sphinx may drop the inner span's
   class during xref resolution); the last column ("introduced in") stays normal. */
.bp-compendium tbody td:first-child a,
.bp-compendium .bp-cmd-name { font-family: var(--bp-mono); font-weight: 700; }
.bd-article table.bp-compendium { width: 100%; }
.bp-compendium td, .bp-compendium th { vertical-align: top; }
.bp-compendium .line-block { margin: 0; }
.bp-compendium .line { font-size: 0.9rem; margin: 0; }
.bp-compendium .line code, .bp-compendium .line .pre {
  font-family: var(--bp-mono); font-weight: 600;
}

/* Per-notebook recap: a faint amber-washed panel with the amber left rule. */
.bp-compendium-new {
  border: 1px solid var(--bp-hairline);
  border-left: 4px solid var(--bp-accent);
  border-radius: 6px;
  padding: 12px 18px 6px 18px;
  margin: 22px 0 10px 0;
  background: color-mix(in srgb, var(--bp-accent) 6%, transparent);
}
.bp-compendium-new-title {
  font-family: var(--bp-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bp-accent); font-weight: 600;
  margin-bottom: 6px;
}
.bp-compendium-new ul { margin: 0 0 6px 0; padding-left: 1.1em; }
.bp-compendium-new li { margin: 2px 0; }
.bp-compendium-new code.bp-cmd-name { font-family: var(--bp-mono); font-weight: 700; }