/* ── Calvin University brand colors ─────────────────────────── */
:root {
  --calvin-maroon: #6E1C2E;
  --calvin-maroon-dark: #4e1220;
  --calvin-maroon-light: rgba(110, 28, 46, 0.08);
  --calvin-gold: #C49A2C;
  --calvin-gold-dark: #9e7a1f;
  --calvin-gold-light: rgba(196, 154, 44, 0.12);
}

/* ── Typeface ───────────────────────────────────────────────
   Quarto swaps the whole Bootstrap sheet when the theme changes, and the
   two themes declare different first-choice fonts (united → Ubuntu,
   darkly → Lato). Neither is actually downloaded, so the typeface changed
   between light and dark *and* varied by whatever the reader had installed.
   Pin the shared system stack for both themes so it is stable everywhere. */
:root,
.quarto-light,
.quarto-dark {
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body,
.sidebar,
h1, h2, h3, h4, h5, h6,
.hero-title, .hero-eyebrow, .hero-meta,
.btn, .accordion-button, input, select, textarea {
  font-family: var(--bs-body-font-family);
}

/* Code keeps the monospace stack — don't let the override leak into it. */
code, pre, kbd, samp, .sourceCode {
  font-family: var(--bs-font-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace);
}

/* ── Font size ─────────────────────────────────────────────── */
/* The switcher scales the ROOT size, so every rem-based dimension on the
   site (cards, badges, sidebar, spacing) scales with it — not just text.
   "small" is the original size and stays the default. */
html                          { font-size: 100%; }    /* small  — default */
html[data-fontsize="medium"]  { font-size: 112.5%; }  /* medium */
html[data-fontsize="large"]   { font-size: 125%; }    /* large  */

body {
  font-size: 1.1rem;
}

/* ── Display settings panel (theme + text size) ─────────────
   Everything here is sized in px on purpose: the control itself must
   not grow when the reader picks a larger text size. */

/* Quarto's own tiny toggle is hidden but kept in the DOM — our Theme
   buttons click it so Quarto keeps handling the stylesheet swap. */
.quarto-color-scheme-toggle {
  display: none !important;
}

/* Sits between the logo and the search box, so it is ruled off on both
   sides rather than just hanging at the end of the sidebar. */
.disp-panel {
  margin: 4px 12px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}
.disp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.disp-row:last-child { margin-bottom: 0; }

.disp-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.disp-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* shared button base */
.disp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0;
  line-height: 1;
  font-family: inherit;
  font-weight: 600;
  color: var(--bs-body-color);
  background: transparent;
  border: 1px solid var(--bs-border-color);
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.disp-btn:hover {
  border-color: var(--calvin-maroon);
  color: var(--calvin-maroon);
}
.disp-btn.active {
  background: var(--calvin-maroon);
  border-color: var(--calvin-maroon);
  color: #fff;
}
.quarto-dark .disp-btn:hover {
  border-color: var(--calvin-gold);
  color: var(--calvin-gold);
}
.quarto-dark .disp-btn.active {
  background: var(--calvin-gold);
  border-color: var(--calvin-gold);
  color: #000;
}
.disp-btn:focus-visible {
  outline: 2px solid var(--calvin-maroon);
  outline-offset: 2px;
}
.quarto-dark .disp-btn:focus-visible { outline-color: var(--calvin-gold); }

/* .disp-row-theme carries no styles — it is a JS hook only, used to drop
   the Theme row when the project has no light/dark theme pair. */

/* theme buttons: icon + word, so they read at a glance */
.theme-btn {
  gap: 5px;
  padding: 0 9px;
  font-size: 11px;
  letter-spacing: .02em;
}
.theme-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* text-size buttons: three A's at increasing size */
.fs-btn { width: 30px; }
.fs-btn-s { font-size: 11px; }
.fs-btn-m { font-size: 14px; }
.fs-btn-l { font-size: 17px; }

/* fallback placement when a page renders without a sidebar */
.disp-panel-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1040;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  background: var(--bs-body-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,.14);
}

/* ── Locked assignments (not open until their week) ─────────
   Applied by _release.html to anything with data-opens in the future. */
.asg-card.is-locked {
  opacity: .55;
  cursor: default;
}
.asg-card.is-locked:hover {
  border-color: var(--bs-border-color);
  box-shadow: none;
  transform: none;
  opacity: .7;
}
.asg-status.asg-locked {
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

/* Instructor preview: the gate is off, so flag what students can't see yet.
   Deliberately loud — it should be impossible to mistake for the real site. */
.instructor-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  background: var(--calvin-gold);
  color: #000;
  border-bottom: 2px solid var(--calvin-maroon);
}
.instructor-ribbon a { color: #000 !important; text-decoration: underline; }

/* an item only visible because the gate is off */
.is-unreleased {
  outline: 2px dashed var(--calvin-gold);
  outline-offset: 2px;
}

/* schedule "Do" row */
.res-todo.is-locked {
  color: var(--bs-secondary-color) !important;
  font-weight: 600;
  cursor: default;
  text-decoration: none !important;
}
.res-todo.is-locked:hover { text-decoration: none !important; }
.res-locked-note { font-style: italic; }

/* ── Hyperlinks ─────────────────────────────────────────────── */
a {
  color: var(--calvin-maroon);
}
a:hover {
  color: var(--calvin-maroon-dark);
}
/* Dark mode: maroon is too dark on dark bg — use gold instead */
.quarto-dark a {
  color: var(--calvin-gold);
}
.quarto-dark a:hover {
  color: var(--calvin-gold-dark);
}

/* ── Hide author / date block on every page ────────────────── */
.quarto-title-meta {
  display: none;
}

/* ── Bloom's taxonomy badges ────────────────────────────────── */
.bloom {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.15em 0.5em;
  border-radius: 0.25rem;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
  margin-right: 0.35rem;
}
.bloom-remember   { background-color: #adb5bd; color: #000; }
.bloom-understand { background-color: #0dcaf0; color: #000; }
.bloom-apply      { background-color: #146c43; color: #fff; }
.bloom-analyze    { background-color: #ffc107; color: #000; }
/* Orange is a light fill, so it takes dark text like amber does. White on
   #fd7e14 measured 2.57:1 — below the 4.5 AA floor, in both light and dark. */
.bloom-evaluate   { background-color: #fd7e14; color: #000; }
.bloom-create     { background-color: #6f42c1; color: #fff; }

/* ── Current week highlight ─────────────────────────────────── */
.accordion-button.current-week {
  border-left: 4px solid var(--calvin-maroon);
  background-color: var(--calvin-maroon-light);
}
.quarto-dark .accordion-button.current-week {
  border-left-color: var(--calvin-gold);
  background-color: var(--calvin-gold-light);
}
.current-week-badge {
  font-size: 0.7rem;
  font-weight: 600;
  background-color: var(--calvin-maroon);
  color: #fff;
  padding: 0.15em 0.55em;
  border-radius: 0.25rem;
  margin-left: 0.6rem;
  vertical-align: middle;
}
.quarto-dark .current-week-badge {
  background-color: var(--calvin-gold);
  color: #000;
}

/* ── Schedule section headers ───────────────────────────────── */
.slo-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
  margin: 0.9rem 0 0.35rem;
}
.slo-section-label:first-child { margin-top: 0; }

/* ── Sidebar header — logo and title centered ───────────────── */
.sidebar-header {
  text-align: center !important;
}
.sidebar-logo-link {
  display: block;
  text-align: center;
}
.sidebar-logo {
  max-height: 164px;
  width: auto;
  display: inline-block;
}
/* Hide the sidebar title text link, but keep the tools visible
   (the dark mode toggle and GitHub link live inside .sidebar-title > .sidebar-tools-main) */
.sidebar-title > a:first-of-type {
  display: none;
}

/* ── Sidebar title link color ───────────────────────────────── */
.sidebar-title > a {
  color: var(--calvin-maroon) !important;
}
.quarto-dark .sidebar-title > a {
  color: var(--calvin-gold) !important;
}

/* ── Flush tables inside bordered cards ─────────────────────
   Quarto strips the style attribute from raw-HTML tables and applies
   `table, table.table { margin: .5rem 0 }`. Inside a card that has its own
   border and `overflow:hidden`, that margin shows as a white sliver above
   and below the table. Put .flush-table on the wrapper div to remove it.  */
div.flush-table > table {
  margin: 0;
}

/* ── Dark-mode secondary surface ────────────────────────────
   The darkly theme flips --bs-secondary-color to near-white but leaves
   --bs-secondary-bg light gray (#ebebeb). Anything pairing the two — zebra
   table rows, the break-week row, room pills, the check-in timeline — renders
   white-on-near-white (measured contrast 1.19, AA needs 4.5). Re-point the
   surface variable so every existing usage is fixed at once.              */
.quarto-dark {
  --bs-secondary-bg: #2f2f2f;
}

/* ── Active sidebar link ────────────────────────────────────
   Every sidebar link picks up the Calvin colors above, but the *active* one
   falls through to the theme's own link color — darkly's teal (#1AC398),
   which reads as a stray green against the maroon/gold palette.

   Rather than a third hue, the current page is simply the most legible item:
   near-black on light, warm white on dark. A thin gold rule carries the brand
   cue, so "you are here" survives for anyone who can't distinguish the color. */
.sidebar-link.active,
.sidebar-item .sidebar-link.active {
  color: #1f1d1a !important;
  border-left: 2px solid var(--calvin-maroon);
  padding-left: 0.5rem;
  margin-left: -0.65rem;
  border-radius: 0;
}
.quarto-dark .sidebar-link.active,
.quarto-dark .sidebar-item .sidebar-link.active {
  color: #f2efe8 !important;
  border-left-color: var(--calvin-gold);
}

/* ── Muted text ─────────────────────────────────────────────
   Bootstrap's .text-secondary is inverted under this theme pair: it renders
   #adb5bd (light gray) on white in light mode — 2.07:1 — and #434343 (dark
   gray) on #222 in dark mode — 1.61:1. Both fail the 4.5 AA floor, and the
   dark case is effectively invisible. Set both explicitly.                 */
.text-secondary {
  color: #5c5a55 !important;
}
.quarto-dark .text-secondary {
  color: #b8b5ac !important;
}

/* ── Dark-mode leftovers from the light theme ───────────────
   Three Bootstrap defaults stay light-on-light under .quarto-dark.        */

/* Expanded accordion headers kept a light fill, so inline <code> inside a
   week topic (e.g. STL `set` and `map`) rendered white-on-#f8f9fa at 1.05:1. */
.quarto-dark .accordion-button:not(.collapsed) {
  background-color: #2f2f2f;
  color: #f2efe8;
}
.quarto-dark .accordion-button:not(.collapsed)::after {
  filter: invert(1) grayscale(100%) brightness(1.6);
}

/* alert-warning is white on #f39c12 — 2.19:1. Orange is a light fill and
   takes dark text, same as the Evaluate badge above. */
.quarto-dark .alert-warning,
.quarto-dark .alert-warning * {
  color: #2b1d02;
}

/* Sidebar chapter titles sat at 4.41:1 against the hover fill. */
.quarto-dark .chapter-title {
  color: #d5d2ca;
}

/* Inline <code> inside an accordion header keeps a light #f8f9fa fill in dark
   mode while its text is white — 1.05:1. Affects the week 13 topic, "STL
   `set` and `map` containers". */
.quarto-dark .accordion-button code {
  background-color: rgba(255, 255, 255, 0.13);
  color: #f2efe8;
}

/* Inline <code> in a HEADING, and in a few other places Quarto forgot.

   Quarto darkens inline code with exactly one rule:

       p code:not(.sourceCode), li code:not(.sourceCode), td code:not(.sourceCode)
         { background-color: rgba(67, 67, 67, .65); padding: .2em }

   Paragraphs, list items and table cells. Nothing else. Inline code anywhere
   outside those three falls back to Bootstrap's base `code`, which is
   `background-color: #f8f9fa` — and the dark theme sets `--bs-code-color:
   white`. White on #f8f9fa is 1.05:1, which is to say invisible. It showed up
   on a01 as the heading "TODO 3, Arrays and `sizeof`", where the word `sizeof`
   simply was not there in dark mode.

   The fix is to give the uncovered containers the same treatment Quarto gives
   the covered ones, rather than to stop writing code in headings. Light mode is
   included too: the chip there was readable but a different gray from the body
   chips, and matching them costs nothing. */
h1 code:not(.sourceCode), h2 code:not(.sourceCode), h3 code:not(.sourceCode),
h4 code:not(.sourceCode), h5 code:not(.sourceCode), h6 code:not(.sourceCode),
.callout-title-container code:not(.sourceCode),
dt code:not(.sourceCode),
figcaption code:not(.sourceCode),
summary code:not(.sourceCode) {
  background-color: rgba(233, 236, 239, 0.65);
  padding: 0.2em;
}

.quarto-dark h1 code:not(.sourceCode), .quarto-dark h2 code:not(.sourceCode),
.quarto-dark h3 code:not(.sourceCode), .quarto-dark h4 code:not(.sourceCode),
.quarto-dark h5 code:not(.sourceCode), .quarto-dark h6 code:not(.sourceCode),
.quarto-dark .callout-title-container code:not(.sourceCode),
.quarto-dark dt code:not(.sourceCode),
.quarto-dark figcaption code:not(.sourceCode),
.quarto-dark summary code:not(.sourceCode) {
  background-color: rgba(67, 67, 67, 0.65);
  color: #f2efe8;
}


/* ── Terminal output ──────────────────────────────────────────────────────
   Blocks marked ```{.terminal} are things the SCREEN said, not things the
   student types. Two reasons they need their own treatment:

   1. Compiler output is wide. `g++` diagnostics carry a caret line
      (^~~~~~~~~) under the offending token, and wrapping them destroys the
      alignment that makes them readable. So: never wrap, scroll instead, and
      keep the block inside the column with max-width — without it a long
      diagnostic stretches the whole page sideways.
   2. Dark ground reads as "the computer is talking". A student scanning the
      page can tell at a glance what they must type from what they should
      expect to see, without reading a word.
   ------------------------------------------------------------------------ */
pre.terminal {
  background: #14161C;
  color: #E4E7EC;
  border: 1px solid #2A2E38;
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin: 1rem 0;
  max-width: 100%;
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.55;
}

pre.terminal code {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  white-space: pre;      /* scroll, never wrap: the caret line must line up */
  font-size: inherit;
}

/* Quarto's dark theme lightens <pre>; the terminal keeps its own ground. */
.quarto-dark pre.terminal {
  background: #0F1116;
  border-color: #333844;
  color: #E4E7EC;
}

/* ------------------------------------------------------------------------
   PSEUDOCODE
   Blocks marked ```{.pseudocode} are the SHAPE of an answer, written in
   words rather than in C++. There are three kinds of block on a page and a
   student must be able to tell them apart without reading them: gray is code
   you can compile, dark is what the machine said back, and this one is
   neither. So it takes the course maroon, a rule down its side, and a label
   saying what it is, because a student who pastes pseudocode into a compiler
   has been failed by the page rather than by themselves.
   ------------------------------------------------------------------------ */
pre.pseudocode {
  background: #FBF4F5;
  border: 1px solid #E5D5D9;
  border-left: 4px solid #6E1C2E;
  border-radius: 6px;
  padding: 2.1rem 1rem 0.9rem;
  margin: 1rem 0;
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}

pre.pseudocode::before {
  content: "Pseudocode, not C++";
  position: absolute;
  top: 0.55rem;
  left: 1.05rem;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6E1C2E;
}

pre.pseudocode code {
  background: none;
  color: #241B1E;
  padding: 0;
  border: none;
  font-size: inherit;
  white-space: pre;      /* the aligned right-hand notes must stay aligned */
}

.quarto-dark pre.pseudocode {
  background: #241A1D;
  border-color: #3B2D31;
  border-left-color: #E38DA0;
}
.quarto-dark pre.pseudocode::before { color: #E38DA0; }
.quarto-dark pre.pseudocode code    { color: #F1E8EA; }

/* ══════════════════════════════════════════════════════════════
   Lab-opening button, top of a week's first assignment page.
   Opens that week's quiet/prayer deck; ?fs=1 makes the deck go
   full screen on the first keypress (see slides/fullscreen.js).
   ══════════════════════════════════════════════════════════════ */
.lab-open-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #6E1C2E; color: #fff !important;
  text-decoration: none !important;
  padding: 0.6rem 1.1rem; border-radius: 8px;
  font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  border: 1px solid #5b1626;
  box-shadow: 0 2px 8px rgba(110, 28, 46, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
  margin: 0 0 1.2rem;
}
.lab-open-btn:hover { background: #86223a; transform: translateY(-1px); }
.lab-open-btn .lab-open-ico {
  color: #C49A2C; font-size: 0.85em; line-height: 1;
}
.lab-open-btn .lab-open-sub {
  color: rgba(255,255,255,0.62); font-weight: 400; font-size: 0.82em;
  border-left: 1px solid rgba(255,255,255,0.28); padding-left: 0.6rem;
}
.quarto-dark .lab-open-btn { border-color: #7d2338; }

/* ------------------------------------------------------------------------
   TABLE COLUMN WIDTHS
   Pandoc gives every column an equal share -- <col style="width: 33%"> --
   because the dashes in a |---|---|---| separator are equal. On these pages
   the columns are rarely equal: a skill code sits beside a sentence, a
   filename beside a description. Equal shares squeeze the prose into a
   narrow ribbon and leave the short column mostly blank.

   Letting the browser size columns to their content fixes every table on
   the site at once. The widths are inline, so the override has to be
   !important. Where one table wants a specific split, vary the dash counts
   in its separator row and Pandoc emits those proportions instead.
   ------------------------------------------------------------------------ */
table colgroup col { width: auto !important; }