/* ============================================================
   SYNPETIC THEME — ported from the project's main marketing-site
   CSS (ink + electric purple + cyan). Colors only for now; fonts
   still use the system stack below until that's addressed.
   ============================================================ */
:root {
  --bg-page: #0a0a12;       /* page background — deep ink (was off-white) */
  --bg-panel: #11111c;      /* navbar / hero / footer panel */
  --bg-panel-2: #1f1f30;    /* lighter panel, e.g. dropdowns */
  --text-primary: #ececf5;  /* headings / body text — near-white on dark */
  --text-muted: #8a8aa5;    /* secondary / caption text */
  --text-on-panel-muted: #8a8aa5; /* secondary text on the dark panel (hero) */
  --border-subtle: rgba(255, 255, 255, 0.14); /* subtle dividing borders, visible on dark */
  --bg-card: #161624;       /* card background — callouts, gallery items */

  --accent-cyan: #00F5FF;        /* primary accent — electric cyan */
  --accent-cyan-on-dark: #6bf9ff;/* slightly softer cyan for dropdown hovers etc. */
  --accent-cyan-dim: rgba(0, 245, 255, 0.08);  /* cyan-tinted background (badges etc.) */
  --accent-purple: #8B5CF6;      /* secondary accent */
  --accent-purple-dim: rgba(139, 92, 246, 0.12);
  --accent-amber: #F59E0B;       /* warm accent — used sparingly */
  --accent-amber-dim: rgba(245, 158, 11, 0.12);
  --accent-rust: #c4302b;        /* "stamp red" — danger/warning accent */
  --accent-rust-dim: rgba(196, 48, 43, 0.12);
}

/* --- Typefaces ---
   Five-font system: IBM Plex Sans for body copy, Fraunces for
   headings, Crimson Pro for long-form reading (--font-read), Caveat
   for handwritten asides (--font-hand), and IBM Plex Mono for
   labels/code — the same family static/film/film-tokens.css already
   expects at static/fonts/IBMPlexMono-*.ttf, so this also fixes that
   previously-missing reference rather than duplicating it.
*/
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-300-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/fraunces-latin-full-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/fraunces-latin-full-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/crimson-pro-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/crimson-pro-latin-400-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/crimson-pro-latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/caveat-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/caveat-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/caveat-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/IBMPlexMono-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/IBMPlexMono-Bold.ttf) format('truetype');
}

:root {
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-read: "Crimson Pro", Georgia, serif;
  --font-hand: "Caveat", cursive;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

body { padding-top: 56px; }
.left-aligned { margin-left: auto; }

/* Navbar + hero banner both use the panel color. */
.bg-dark { background-color: var(--bg-panel) !important; }
.bg-hero { background-color: var(--bg-panel); }

/* Dropdown toggles are <button> elements (not <a href="#">) for reliable,
   consistent click behavior across browsers — Bootstrap's own guidance,
   since anchor-based toggles depend on JS beating the browser's native
   link handling, which some Chromium forks (Brave, Opera, Edge) race
   differently. Strip the native button chrome so it still looks and
   sits exactly like the other .nav-link items. */
.navbar-nav button.nav-link {
  background: none;
  border: none;
  font: inherit;
}

/* Body-copy links get the cyan accent. Nav links / dropdown items are more
   specific selectors and keep Bootstrap's navbar-dark treatment untouched. */
a { color: var(--accent-cyan); }
a:hover { color: var(--accent-cyan); text-decoration: underline; }

/* Dropdown menus default to a light Bootstrap background — override so
   they match the rest of the theme instead of flashing white. Text uses
   the light-panel color, not --text-primary, since --text-primary is
   near-black and this menu sits on a dark panel background. */
.dropdown-menu {
  background-color: var(--bg-panel-2);
  border-color: var(--border-subtle);
}
.dropdown-item {
  color: #FFFFFF;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--bg-panel);
  color: var(--accent-cyan-on-dark);
}

/* Hover-to-open dropdowns on desktop (pointer devices only — touchscreens
   keep click-to-open, since there's no hover state to rely on there). */
@media (hover: hover) and (pointer: fine) {
  .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* Muted/secondary text utility, matches Bootstrap's .text-white-50 usage
   in header leads. This only ever sits on the dark hero panel, so it uses
   the panel-muted variable (not the page's --text-muted, which is tuned
   for the light page background instead). */
.text-white-50 { color: var(--text-on-panel-muted) !important; }

/* CALLOUT boxes */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-subtle);
  border-left-width: .25rem;
  border-radius: .25rem;
  background-color: var(--bg-card);
  color: var(--text-primary);
}
.bd-callout h4 { margin-bottom: 1.25rem; color: var(--text-primary); }
.bd-callout p { font-family: var(--font-read); }
.bd-callout p:last-child { margin-bottom: 0 }
.bd-callout code { border-radius: .25rem }
.bd-callout+.bd-callout { margin-top: -.25rem }
.bd-callout-info { border-left-color: var(--accent-cyan); background-color: var(--accent-cyan-dim); }
.bd-callout-warning { border-left-color: var(--accent-amber); background-color: var(--accent-amber-dim); }
.bd-callout-danger { border-left-color: var(--accent-rust); background-color: var(--accent-rust-dim); }

/* Blockquotes (e.g. the NPV cash-flow figures in entrepreneurship.html)
   get the handwritten accent — reads like a marked-up aside rather than
   plain body copy. Native <blockquote>, so this needs no HTML changes. */
blockquote {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--accent-cyan-on-dark);
  border-left: 3px solid var(--accent-cyan);
  padding-left: 1rem;
  margin: 0.75rem 0;
}
blockquote p { margin-bottom: 0; }

/* Marginalia — handwritten red aside for a self-critical/limitations note,
   same font+color pairing as the marketing site's "Models are not
   predictions..." note. This layout has no reserved side-gutter for a
   floating margin note, so it sits inline in the normal content flow
   rather than being positioned off to the side. */
.marginalia {
  font-family: var(--font-hand);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--accent-rust);
  transform: rotate(-1deg);
  max-width: 32rem;
  margin: 1.25rem 0;
}
.marginalia::before {
  content: "\21B3  ";
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent-rust);
}

/* --- Photo galleries (reusable across pages) ---
   Usage: <div class="photo-gallery" id="some-unique-id"> containing one
   <figure class="gallery-item"> per photo, each with an <img class="gallery-thumb">
   and a <figcaption class="gallery-caption"> (leave as a single space " " for
   photos with no caption yet, so the row height stays consistent).
   5 thumbnails per row on desktop, fewer on smaller screens.
*/
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 992px) {
  .photo-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 576px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
}
.gallery-item {
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.4rem;
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}
.gallery-caption {
  margin: 0.4rem 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  min-height: 1.2em;
}

/* --- Section sidebar navigation (see static/sidebar-nav.js) ---
   Restyled to match the numbered .toc look used on model.html/
   inclusivity.html (cyan CSS-counter digits, mono font, no pill
   background/border) — same JS, same auto-population from page
   h2/h3s, just different chrome. This is what makes every page
   using sidebar-nav.js pick up the new style automatically. */
#page-sidebar-col { position: sticky; align-self: flex-start; top: 5rem; }
.page-sidebar-label {
  margin: 0 0 0.75rem 0;
  padding-left: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
ul.page-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sidebar;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.page-sidebar-nav li { margin: 0; }
.page-sidebar-link {
  display: block;
  padding: 0.15rem 0 0.15rem 2rem;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.35;
  position: relative;
  border-radius: 0;
  border: none;
  background: none;
}
.page-sidebar-nav li:not(.page-sidebar-sub):not(.page-sidebar-top) {
  counter-increment: sidebar;
}
.page-sidebar-nav li:not(.page-sidebar-sub):not(.page-sidebar-top) > .page-sidebar-link::before {
  content: counter(sidebar, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--accent-cyan);
}
.page-sidebar-link:hover { color: var(--accent-cyan); }
.page-sidebar-nav li.page-sidebar-sub .page-sidebar-link {
  margin-left: 2rem;
  padding-left: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.page-sidebar-nav li.page-sidebar-sub .page-sidebar-link:hover { color: var(--accent-cyan); }
.page-sidebar-link.active {
  color: var(--accent-cyan);
  font-weight: 600;
  background: none;
  border: none;
}
.page-sidebar-nav li.page-sidebar-top {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}
.page-sidebar-nav li.page-sidebar-top .page-sidebar-link {
  font-weight: 500;
  color: var(--text-muted);
  padding-left: 0;
}
.page-sidebar-nav li.page-sidebar-top .page-sidebar-link::before { content: none; }
.page-sidebar-nav li.page-sidebar-top .page-sidebar-link:hover { color: var(--accent-cyan); }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

/* ============================================================
   Ported from the marketing site's drylab-model.html layout:
   a 3-column "editorial" spread (sticky TOC / main content /
   sticky marginalia column), a numbered sticky table of contents,
   and a distinct amber warning callout. Not wired into any page
   yet — .marginalia already is (see wiki/pages/model.html).
   ============================================================ */

/* ---------- Editorial body (3-column: TOC + main + marginalia) ---------- */
.editorial-body {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 14rem);
  gap: 2.5rem;
  align-items: start;
}
.editorial-body .col-aside-l,
.editorial-body .col-aside-r {
  position: sticky;
  top: 5rem;
}
.editorial-body .col-main { min-width: 0; }
@media (max-width: 991px) {
  .editorial-body { grid-template-columns: 1fr; }
  .editorial-body .col-aside-l,
  .editorial-body .col-aside-r { position: static; }
}

/* Two-column variant (TOC + main, no page-level right rail) — use when
   notes are paired locally via .with-note instead of stacked globally
   in one long col-aside-r that drifts out of sync with scroll position. */
.editorial-body.no-aside-r {
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
}

/* ---------- Local note pairing (content + its own note, side by side) ---------
   Wrap ONE piece of content (e.g. a single .bd-callout) and the note that
   explains it in a .with-note, so the note can't drift away from what it's
   annotating as you scroll — unlike a shared col-aside-r stack. */
.with-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
  gap: 2rem;
  align-items: start;
  margin: 1.25rem 0;
}
.with-note > .with-note-main { min-width: 0; }
.with-note > .with-note-main > *:first-child { margin-top: 0; }
.with-note > .with-note-note { position: sticky; top: 5rem; }
.with-note > .with-note-note .marginalia { margin: 0; }
@media (max-width: 900px) {
  .with-note { grid-template-columns: 1fr; }
  .with-note > .with-note-note { position: static; }
}

/* ---------- Table of contents (sticky, CSS-counter numbered) ---------- */
.toc {
  position: sticky;
  top: 5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.toc-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.toc ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.toc li {
  counter-increment: toc;
  padding-left: 2rem;
  position: relative;
  color: var(--text-primary);
}
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--accent-cyan);
}
.toc a { color: inherit; text-decoration: none; transition: color 150ms; }
.toc a:hover { color: var(--accent-cyan); }

/* ---------- Callout (amber warning box — distinct from .bd-callout,
   for a single-paragraph "here's what's wrong/risky" aside with a
   bolded lead-in, matching the "Three places this model is wrong"
   box on drylab-model.html) ---------- */
.callout {
  position: relative;
  margin: 2rem 0;
  padding: 1.25rem 1.4rem 1.25rem 3.6rem;
  border-left: 3px solid var(--accent-amber);
  background: var(--accent-amber-dim);
  font-family: var(--font-read);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-primary);
  border-radius: 0 0.25rem 0.25rem 0;
}
.callout::before {
  content: "\26A0";
  position: absolute;
  left: 1.3rem;
  top: 1.15rem;
  font-size: 1.4rem;
  color: var(--accent-amber);
}
.callout strong { color: var(--accent-amber); }
.callout.callout-green {
  border-left-color: #84cc16;
  background: rgba(132, 204, 22, 0.10);
}
.callout.callout-green::before { content: "\2726"; color: #84cc16; }
.callout.callout-green strong { color: #84cc16; }
.callout.callout-purple {
  border-left-color: var(--accent-purple);
  background: var(--accent-purple-dim);
}
.callout.callout-purple::before { content: "\2756"; color: var(--accent-purple); }
.callout.callout-purple strong { color: var(--accent-purple); }

/* ---------- Prior-art page: secondary tab bar for multiple tutorials
   (a "second navbar" of Bootstrap tabs, one per tutorial; sits full-width
   right under the hero header via layout.html's above_content block).
   static/sidebar-nav.js rebuilds the page's #page-sidebar-nav to match
   whichever .tab-pane below is currently active. ---------- */
.prior-art-subnav {
  background-color: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2rem;
}
.prior-art-tabs {
  border-bottom: none;
  flex-wrap: wrap;
}
.prior-art-tabs .nav-link {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.9rem 1rem;
}
.prior-art-tabs .nav-link:hover {
  color: var(--accent-cyan-on-dark);
  border-bottom-color: var(--border-subtle);
}
.prior-art-tabs .nav-link.active {
  color: var(--accent-cyan);
  background: transparent;
  border-bottom-color: var(--accent-cyan);
}

/* Force-hides the page sidebar (e.g. an active tab with no headings yet —
   a stub tutorial). Kept separate from the base "d-none d-lg-block" pair
   already on #page-sidebar-col so toggling this never clobbers that
   responsive show/hide behavior. */
.page-sidebar-empty { display: none !important; }