@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   Recolor pydata-sphinx-theme primary chrome to TPS navy.
   ----------------------------------------------------------
   The theme's default `--pst-color-primary` is a teal (#0a7d91)
   that drives the sidebar-toggle, article-header buttons, the
   search-button keycap hints, and link color. We retarget it
   onto the TPS palette so all chrome reads as one family.
   ============================================================ */
html[data-theme="light"],
html {
  --pst-color-primary:    #00205B;
  --pst-color-primary-bg: #eef3fb;
  --pst-color-link:       #1f6098;
  --pst-color-link-hover: #00205B;
  --pst-color-inline-code-links: #1f6098;
  /* --pst-color-accent drives the focus box-shadow on the Cmd+K
     search-modal input. Default is a magenta (#c132af) that clashes
     with the TPS navy/blue palette; retarget to TPS mid-blue. */
  --pst-color-accent:     #1f6098;
}

/* ============================================================
   SY6301 — TPS Palette
   ============================================================
   --tps-navy   : #00205B    (primary, brand)
   --tps-mid    : #1f6098    (accent / borders / table headers)
   --tps-light  : #1f5c8b    (h3 left border)
   --tps-bg     : #eef3fb    (key concept background)
   --tps-bg-alt : #f0f7ff    (example/table even rows)
   --tps-edge   : #c8ddef    (light divider)
   --tps-edge-2 : #a8c8e8    (medium divider)
*/

/* ============================================================
   Typography
   ============================================================ */

body, .bd-article {
  font-family: 'Inter', sans-serif;
}

/* ============================================================
   Heading Styles
   ============================================================ */

.bd-article h1 {
  color: #00205B;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
}
.bd-article h1::after {
  content: '';
  display: block;
  width: 2.5em;
  height: 4px;
  background-color: #1f6098;
  border-radius: 2px;
  margin-top: 0.4em;
  margin-bottom: 0.5em;
}

.bd-article h2 {
  color: #00205B;
  font-weight: 700;
  border-bottom: 1px solid #c8ddef;
  padding-bottom: 0.2em;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2;
}

.bd-article h3 {
  color: #1f5c8b;
  font-weight: 600;
  border-left: 4px solid #1f6098;
  padding-left: 0.65em;
  font-size: 18px;
  line-height: 1.25;
}

/* Inline code styling (consumes JetBrains Mono, navy on --tps-bg) */
.bd-article :not(pre) > code {
  background-color: #eef3fb;
  color: #00205B;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.86em;
  font-weight: 500;
}

/* ============================================================
   Textbook Callout Styles
   ============================================================ */

/* --- Key Concept boxes ------------------------------------ */
.admonition.key-concept,
div.admonition.key-concept {
  border: 1px solid #b8c9e8 !important;
  border-left: 5px solid #00205B !important;
  border-radius: 0 6px 6px 0 !important;
  background-color: #eef3fb !important;
  padding: 0 !important;
  overflow: hidden;
  margin: 1.5em 0;
  box-shadow: none !important;
}
.admonition.key-concept > .admonition-title,
div.admonition.key-concept > p.admonition-title {
  background-color: #00205B !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85em !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 1em !important;
  margin: 0 !important;
}
/* Aggressively suppress the theme's bell/warning icon on Key Concept titles */
.admonition.key-concept > .admonition-title::before,
div.admonition.key-concept > p.admonition-title::before,
.admonition.key-concept > .admonition-title::after,
div.admonition.key-concept > p.admonition-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.admonition.key-concept > *:not(.admonition-title),
div.admonition.key-concept > *:not(.admonition-title) {
  padding: 0.75em 1.5em !important;
  margin: 0 !important;
}

/* --- Callout list breathing room --------------------------- */
/* Bump padding-left on ordered / unordered lists inside any of the
   four callout cards so the list markers ("1.", "•") don't crowd
   the colored left border. Higher specificity than the body padding
   rules below so it actually wins. */
.bd-article .admonition.key-concept > ol,
.bd-article .admonition.key-concept > ul,
.bd-article .admonition.example-problem > ol,
.bd-article .admonition.example-problem > ul,
.bd-article .admonition.quick-exercise > ol,
.bd-article .admonition.quick-exercise > ul,
.bd-article .admonition.ground-rules > ol,
.bd-article .admonition.ground-rules > ul,
.bd-article div.admonition.key-concept > ol,
.bd-article div.admonition.key-concept > ul,
.bd-article div.admonition.example-problem > ol,
.bd-article div.admonition.example-problem > ul,
.bd-article div.admonition.quick-exercise > ol,
.bd-article div.admonition.quick-exercise > ul,
.bd-article div.admonition.ground-rules > ol,
.bd-article div.admonition.ground-rules > ul {
  padding-left: 2.6em !important;
}

/* --- Quick Exercise boxes (mid-blue) ----------------------- */
.admonition.quick-exercise,
div.admonition.quick-exercise {
  border: 1px solid #a8c8e8 !important;
  border-left: 5px solid #1f6098 !important;
  border-radius: 0 6px 6px 0 !important;
  background-color: #f6fbff !important;
  padding: 0 !important;
  overflow: hidden;
  margin: 1.5em 0;
  box-shadow: none !important;
}
.admonition.quick-exercise > .admonition-title,
div.admonition.quick-exercise > p.admonition-title {
  background-color: #1f6098 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85em !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 1em !important;
  margin: 0 !important;
}
.admonition.quick-exercise > .admonition-title::before,
div.admonition.quick-exercise > p.admonition-title::before,
.admonition.quick-exercise > .admonition-title::after,
div.admonition.quick-exercise > p.admonition-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.admonition.quick-exercise > *:not(.admonition-title),
div.admonition.quick-exercise > *:not(.admonition-title) {
  padding: 0.5em 1.5em !important;
  margin: 0 !important;
}
/* Make the nested Solution dropdown read as a child of the exercise. */
.admonition.quick-exercise .admonition.dropdown {
  margin: 0.5em 0 0 !important;
  border-radius: 4px !important;
}

/* --- Example Problem boxes -------------------------------- */
div.admonition.example-problem {
  border: 1px solid #ddb896;
  border-left: 5px solid #7b3000;
  border-radius: 0 6px 6px 0;
  background-color: #fdf6f1;
  padding: 0;
  overflow: hidden;
  margin: 1.5em 0;
}
div.admonition.example-problem > p.admonition-title {
  background-color: #7b3000;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 1em;
  margin: 0;
}
div.admonition.example-problem > p.admonition-title::before {
  display: none;
}
div.admonition.example-problem > *:not(.admonition-title) {
  padding: 0.5em 1.5em 0.25em 1.5em;
  margin: 0;
}

/* ============================================================
   Table Styles
   ============================================================ */

.bd-article table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
  margin: 1.25em 0;
}
.bd-article table thead tr {
  background-color: #1f6098;
}
.bd-article table thead th {
  color: #ffffff;
  font-weight: 600;
  padding: 0.5em 0.85em;
  border: none;
  text-align: left;
}
.bd-article table tbody td {
  padding: 0.45em 0.85em;
  border-bottom: 1px solid #a8c8e8;
  color: #000000 !important;
  text-wrap: pretty;
}
.bd-article table tbody tr:nth-child(even) {
  background-color: #f0f7ff;
}
.bd-article table tbody tr:hover {
  background-color: #eef3fb;
  box-shadow: inset 3px 0 0 #1f6098;
}
.bd-article table tbody tr:nth-child(even) td,
.bd-article table tbody tr:hover td {
  color: #000000 !important;
}

/* ============================================================
   Flashcard Styles
   ============================================================ */

.bd-article details {
  border: 1px solid #b8cfe8;
  border-left: 5px solid #00205B;
  border-radius: 0 6px 6px 0;
  margin: 0.6em 0;
  overflow: hidden;
}
.bd-article details summary {
  background-color: #00205B;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95em;
  padding: 0.55em 1.1em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.bd-article details summary::-webkit-details-marker { display: none; }
.bd-article details summary::before {
  content: '\25B6';
  font-size: 0.7em;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.bd-article details[open] summary::before { transform: rotate(90deg); }
.bd-article details .card-answer {
  background-color: #eef3fb;
  padding: 0.75em 1.5em;
  color: #212529;
}
.bd-article .card-answer ol { margin: 0.4em 0 0.4em 1.4em; }
.bd-article .card-answer p  { margin: 0.5em 0; }

/* ============================================================
   Page-width utilities
   ============================================================ */

.wide-page .bd-main .bd-content,
.wide-page .bd-main .bd-content .bd-article-container,
.wide-page .bd-main .bd-content .bd-article {
  max-width: 100% !important;
}

.wide-page .bd-container {
  max-width: 100% !important;
}

.full-width {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ============================================================
   Embedded media
   ============================================================ */

.bd-article video {
  max-width: 100%;
  border-radius: 6px;
  margin: 1em 0;
}

.bd-article iframe.pdf-embed {
  width: 100%;
  height: 80vh;
  border: 1px solid #c8ddef;
  border-radius: 6px;
}

/* ============================================================
   Sidebar TOC — match ECE-315 / sphinx-book-theme look on the
   globaltoc.html output that we use to render the FULL nav tree
   on every page. The sbt-sidebar-shim.js adds <details>/<summary>
   chevron wrappers; this CSS styles them.
   ============================================================ */

/* The globaltoc heading is repurposed as a Home link by the JS shim
   (see sbt-sidebar-shim.js). Show only the tagged variant. */
.sy-globaltoc > h3 { display: none; }
.sy-globaltoc > h3.sy-globaltoc-home {
  display: block;
  margin: 0 0 0.6em 0;
  padding: 0;
  font-size: 0.9em;
  font-weight: 500;
}
.sy-globaltoc > h3.sy-globaltoc-home a {
  display: block;
  padding: 0.4em 1.6em 0.4em 0.5em;
  color: #495057;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.sy-globaltoc > h3.sy-globaltoc-home a:hover {
  background: #f4f7fb;
  color: #1f6098;
}
.sy-globaltoc > h3.sy-globaltoc-home.current a,
.sy-globaltoc > h3.sy-globaltoc-home a.current {
  color: #1f6098;
  border-left-color: #1f6098;
  font-weight: 600;
}

/* Caption rows ("Block 1", "Block 2", ...) */
.sy-globaltoc p.caption {
  font-weight: 700;
  font-size: 0.9em;
  color: #212529;
  margin: 1.2em 0 0.4em 0;
  padding: 0;
  text-transform: none;
}

/* Top-level UL: kill default bullet marks, indent */
.sy-globaltoc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Top-level lessons */
.sy-globaltoc li.toctree-l1 {
  position: relative;
  padding: 0;
  margin: 0;
}
.sy-globaltoc li.toctree-l1 > a {
  display: block;
  padding: 0.4em 1.6em 0.4em 0.5em;
  color: #495057;
  text-decoration: none;
  border-left: 3px solid transparent;
  font-weight: 500;
  font-size: 0.9em;
  line-height: 1.35;
}
.sy-globaltoc li.toctree-l1 > a:hover {
  background: #f4f7fb;
  color: #1f6098;
}

/* Active top-level lesson: blue text + blue left bar */
.sy-globaltoc li.toctree-l1.current > a,
.sy-globaltoc li.toctree-l1 > a.current {
  color: #1f6098;
  border-left-color: #1f6098;
  font-weight: 600;
  background: transparent;
}

/* Chevron toggle: position absolute on the right of each l1 row */
.sy-globaltoc li.toctree-l1.has-children > details > summary {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.4em 0.6em;
  cursor: pointer;
  list-style: none;
  color: #6c757d;
  background: transparent;
  border: none;
  font-size: 0.85em;
}
.sy-globaltoc li.toctree-l1.has-children > details > summary::-webkit-details-marker {
  display: none;
}
.sy-globaltoc li.toctree-l1.has-children > details > summary i {
  transition: transform 0.2s ease;
}
.sy-globaltoc li.toctree-l1.has-children > details[open] > summary i {
  transform: rotate(180deg);
}
.sy-globaltoc li.toctree-l1.has-children > details > summary:hover {
  color: #1f6098;
}

/* Sub-items (Lesson sub-pages) */
.sy-globaltoc li.toctree-l2 {
  margin: 0;
}
.sy-globaltoc li.toctree-l2 > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.3em 0.5em 0.3em 1.5em;
  color: #6c757d;
  text-decoration: none;
  font-size: 0.85em;
  line-height: 1.35;
  border-left: 4px solid transparent;
}
.sy-globaltoc li.toctree-l2 > a:hover {
  background: #f4f7fb;
  color: #1f6098;
}
.sy-globaltoc li.toctree-l2 > a.current,
.sy-globaltoc li.toctree-l2.current > a {
  color: #1f6098;
  font-weight: 600;
  background: #eef3fb;
  border-left-color: #1f6098;
}

/* Sidebar l2 glyphs (Reading / Flashcards / Demo) */
.sy-globaltoc .sy-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: currentColor;
}
.sy-globaltoc li.sy-l2-reading    > a .sy-icon { color: #1f6098; }
.sy-globaltoc li.sy-l2-flashcards > a .sy-icon { color: #14a8c8; }
.sy-globaltoc li.sy-l2-demo       > a .sy-icon { color: #1d7a4d; }
.sy-globaltoc li.toctree-l2.current > a .sy-icon { color: #1f6098; }

/* Hide toctree details summary's default UA list-style triangle */
.sy-globaltoc details > summary { list-style: none; }
.sy-globaltoc details > summary::marker { content: ""; }

/* ============================================================
   Disable the dark-mode theme switcher.
   default_mode: light is set in _config.yml, so the page renders
   in light mode by default. Hiding the toggle removes the option
   for users to switch (the dark mode styles don't play well with
   our hardcoded TPS palette).
   ============================================================ */
.theme-switch-button,
button.theme-switch-button,
.bd-header .theme-switch-button,
.bd-header-article .theme-switch-button,
.header-article-items .theme-switch-button,
.navbar-header-items .theme-switch-button,
nav .theme-switch-button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   Demo iframe "open in full screen" link.
   Add a `.demo-fullscreen` link right before each demo iframe
   so users can pop the demo out into its own tab.
   ============================================================ */
.demo-fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 0 0 6px;
  background: #f6f8fa;
  border: 1px solid #d8e2ec;
  border-radius: 4px;
  color: #00205B !important;
  font-size: 0.85em;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.12s ease;
}
.demo-fullscreen:hover {
  background: #e9eef5;
  border-color: #1f6098;
}
.demo-fullscreen::before {
  content: "↗";
  font-weight: 700;
  color: #1f6098;
}

/* ============================================================
   MATLAB cross-reference chip
   ============================================================ */
.bd-article .matlab-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px 14px;
  margin: 0.4em 0 0.6em;
  background: #fff7ed;
  border: 1px solid #f3c89a;
  border-radius: 5px;
  color: #7b3000 !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bd-article .matlab-link:hover {
  background: #fdf0dc;
  border-color: #e87722;
}
.bd-article .matlab-link .ml-text {
  font-variant-numeric: tabular-nums;
}
.bd-article .matlab-link .ml-text code,
.bd-article .matlab-link code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 0.95em;
}
.bd-article .matlab-link .ml-arrow {
  margin-left: 10px;
  font-weight: 700;
  color: #e87722;
}

/* ============================================================
   Figures (inline reading figures)
   ============================================================ */
.bd-article figure {
  margin: 1.5em 0;
  padding: 10px 12px 6px;
  background: #fff;
  border: 1px solid var(--tps-rule, #d8e2ec);
  border-radius: 8px;
}
.bd-article figure > img,
.bd-article figure > picture > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.bd-article figure figcaption {
  color: var(--ink-3, #5b6573);
  font-size: 0.92em;
  font-style: italic;
  margin-top: 8px;
  padding: 0 4px;
  text-wrap: pretty;
}

/* ============================================================
   Demo iframe wrapper (auto-height handshake)
   ============================================================
   Demo HTMLs call SY.iframe.publishHeight() and post their
   scrollHeight to the parent. iframe-resize-parent.js sets the
   matching iframe.height, so the value below is just a sane
   fallback while the first message is in flight.
   ============================================================ */
.bd-article .demo-wrap {
  margin: 0.5em 0;
}
.bd-article .demo-wrap iframe {
  width: 100%;
  min-height: 480px;
  border: 1px solid var(--tps-rule, #d8e2ec);
  border-radius: 8px;
  display: block;
  margin: 0;
}

/* ============================================================
   Per-block dashboard (blockNN/index.md)
   ============================================================ */
.bd-article .block-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: -8px 0 18px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #5b6573;
  font-weight: 600;
}
.bd-article .block-meta .b-block {
  color: #00205B;
  padding: 2px 8px;
  background: #eef3fb;
  border-radius: 3px;
  letter-spacing: 0.08em;
}
.bd-article .block-meta .b-time,
.bd-article .block-meta .b-demos {
  display: inline-flex;
  align-items: center;
}
.bd-article .block-meta .b-time::before {
  content: "○ ";
  color: #a8c8e8;
  margin-right: 4px;
}
.bd-article .block-meta .b-demos::before {
  content: "▶ ";
  color: #1d7a4d;
  margin-right: 4px;
}
.bd-article .block-synopsis {
  font-size: 17px;
  line-height: 1.55;
  color: #3b4651;
  max-width: 68ch;
  margin: 0 0 22px;
}

.bd-article .block-toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 8px;
}
@media (max-width: 720px) {
  .bd-article .block-toc { grid-template-columns: 1fr; }
}
.bd-article .bt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px 18px;
  background: #fff;
  border: 1px solid var(--tps-rule, #d8e2ec);
  border-left: 4px solid #1f6098;
  border-radius: 0 6px 6px 0;
  color: var(--ink, #15202b) !important;
  text-decoration: none !important;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.bd-article .bt-card:hover {
  background: #f8fbff;
  border-color: #1f6098;
  border-left-color: #00205B;
}
.bd-article .bt-card .bt-kind {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #5b6573;
  margin-bottom: 2px;
}
.bd-article .bt-card h4 {
  margin: 2px 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #00205B;
}
.bd-article .bt-card p {
  margin: 0;
  font-size: 13px;
  color: #3b4651;
  line-height: 1.45;
}
.bd-article .bt-card.bt-reading    { border-left-color: #1f6098; }
.bd-article .bt-card.bt-flashcards { border-left-color: #14a8c8; }
.bd-article .bt-card.bt-demo       { border-left-color: #1d7a4d; }
.bd-article .bt-card.bt-reading .bt-kind    { color: #1f6098; }
.bd-article .bt-card.bt-flashcards .bt-kind { color: #0c8aa5; }
.bd-article .bt-card.bt-demo .bt-kind       { color: #1d7a4d; }

.bd-article .block-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 8px;
  padding: 14px 0 0;
  border-top: 1px solid var(--tps-rule, #d8e2ec);
  font-size: 13.5px;
}
.bd-article .block-nav a {
  color: #1f6098;
  text-decoration: none;
  font-weight: 600;
}
.bd-article .block-nav a:hover { color: #00205B; }
.bd-article .block-nav .block-nav-prev { margin-right: auto; }
.bd-article .block-nav .block-nav-next { margin-left:  auto; text-align: right; }

/* ============================================================
   Breadcrumb (above page title on interior pages)
   ============================================================ */
.bd-article .sy-breadcrumb {
  margin: 0 0 8px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  color: #5b6573;
  text-wrap: pretty;
}
.bd-article .sy-breadcrumb a {
  color: #1f6098;
  text-decoration: none;
}
.bd-article .sy-breadcrumb a:hover {
  color: #00205B;
  text-decoration: underline;
}
.bd-article .sy-breadcrumb .sep {
  color: #a8c8e8;
  margin: 0 6px;
}

/* ============================================================
   Hero section (intro page)
   ============================================================ */
.bd-article .hero {
  position: relative;
  margin: 0 0 28px;
  padding: 40px 44px 44px;
  background:
    radial-gradient(ellipse at top right, rgba(31, 96, 152, 0.20), transparent 55%),
    linear-gradient(180deg, #001541 0%, #00205B 60%, #002a76 100%);
  color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.bd-article .hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, #1f6098 0%, #4a8fce 50%, #1f6098 100%);
}
.bd-article .hero .hero-eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}
.bd-article .hero h1.hero-title {
  color: #fff;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  max-width: 18ch;
}
/* Suppress the normal h1::after underline inside the hero. */
.bd-article .hero h1.hero-title::after { display: none; }
.bd-article .hero .hero-lede {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  max-width: 50ch;
}
.bd-article .hero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bd-article .hero .cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bd-article .hero .cta:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.65);
}
.bd-article .hero .cta-primary {
  background: #1f6098;
  border-color: #1f6098;
}
.bd-article .hero .cta-primary:hover {
  background: #2c75b3;
  border-color: #2c75b3;
}
@media (max-width: 720px) {
  .bd-article .hero {
    padding: 28px 24px 32px;
  }
}

/* ============================================================
   Block grid (intro page)
   ============================================================ */
.bd-article .block-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}
@media (max-width: 980px) {
  .bd-article .block-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .bd-article .block-grid { grid-template-columns: 1fr; }
}
.bd-article .block-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 14px;
  background: #fff;
  border: 1px solid var(--tps-rule, #d8e2ec);
  border-radius: 8px;
  color: var(--ink, #15202b) !important;
  text-decoration: none !important;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.bd-article .block-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #00205B;
  border-radius: 8px 8px 0 0;
}
.bd-article .block-card:hover {
  border-color: #1f6098;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 32, 91, 0.08);
}
.bd-article .block-card .num {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 11px;
  color: #5b6573;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.bd-article .block-card h3 {
  margin: 4px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #00205B;
  border-left: none;
  padding-left: 0;
}
.bd-article .block-card p {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: #3b4651;
  line-height: 1.45;
  flex: 1;
}
.bd-article .block-card footer {
  font-size: 11px;
  color: #1d7a4d;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   Deliverable cards (intro page)
   ============================================================ */
.bd-article .deliverable-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 28px 0;
}
@media (max-width: 720px) {
  .bd-article .deliverable-cards { grid-template-columns: 1fr; }
}
.bd-article .deliverable-card {
  border: 1px solid var(--tps-rule, #d8e2ec);
  border-left: 5px solid #00205B;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px 14px;
  background: #f8fbff;
}
.bd-article .deliverable-card .d-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: #1f6098;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bd-article .deliverable-card h3 {
  margin: 4px 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: #00205B;
  border-left: none;
  padding-left: 0;
}
.bd-article .deliverable-card .d-weight {
  margin: 0 0 4px;
  font-size: 13px;
  color: #3b4651;
}
.bd-article .deliverable-card .d-weight .d-w-num {
  font-weight: 700;
  color: #00205B;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.bd-article .deliverable-card .d-due {
  margin: 0 0 12px;
  font-size: 13px;
  color: #3b4651;
}
.bd-article .deliverable-card .d-due strong {
  color: #00205B;
  font-weight: 700;
}
.bd-article .deliverable-card .d-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #1f6098;
  text-decoration: none;
}
.bd-article .deliverable-card .d-link:hover {
  text-decoration: underline;
  color: #00205B;
}

/* ============================================================
   Ground-rules callout (rust accent, like example-problem)
   ============================================================ */
.admonition.ground-rules,
div.admonition.ground-rules {
  border: 1px solid #ddb896 !important;
  border-left: 5px solid #7b3000 !important;
  border-radius: 0 6px 6px 0 !important;
  background-color: #fdf6f1 !important;
  padding: 0 !important;
  overflow: hidden;
  margin: 1.5em 0;
  box-shadow: none !important;
}
.admonition.ground-rules > .admonition-title,
div.admonition.ground-rules > p.admonition-title {
  background-color: #7b3000 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85em !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 1em !important;
  margin: 0 !important;
}
.admonition.ground-rules > .admonition-title::before,
div.admonition.ground-rules > p.admonition-title::before,
.admonition.ground-rules > .admonition-title::after,
div.admonition.ground-rules > p.admonition-title::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.admonition.ground-rules > *:not(.admonition-title),
div.admonition.ground-rules > *:not(.admonition-title) {
  padding: 0.75em 1.5em !important;
  margin: 0 !important;
}

/* ============================================================
   Download cards (Downloads page)
   ============================================================ */
.bd-article .dl-row {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin: 1em 0;
}
.bd-article .dl-card {
  border: 1px solid #c8ddef;
  border-left: 5px solid #00205B;
  border-radius: 0 6px 6px 0;
  padding: 0.85em 1.2em;
  background: #f8fbff;
}
.bd-article .dl-card a.dl-link {
  display: inline-block;
  color: #00205B;
  font-weight: 600;
  font-size: 0.95em;
  text-decoration: none;
  margin-top: 0.15em;
}
.bd-article .dl-card a.dl-link:hover {
  text-decoration: underline;
  color: #1f6098;
}
.bd-article .dl-meta {
  color: #5a6772;
  font-size: 0.82em;
  margin-left: 0.4em;
}
.bd-article .dl-summary {
  margin: 0.4em 0 0.5em 0;
  color: #2a3340;
  font-size: 0.93em;
}

/* ============================================================
   Reference tags (Additional References page)
   ============================================================ */
.bd-article .ref-tag {
  display: inline-block;
  background: #eef3fb;
  color: #00205B;
  font-weight: 600;
  font-size: 0.78em;
  padding: 0.15em 0.55em;
  border-radius: 4px;
  margin-right: 0.4em;
  vertical-align: middle;
}
.bd-article .ref-meta {
  color: #5a6772;
  font-size: 0.85em;
  margin: 0.3em 0 1em 0;
}
.bd-article .ref-link {
  display: inline-block;
  margin-right: 1em;
}

/* ============================================================
   Print styles
   ----------------------------------------------------------
   Some students print readings to mark up by hand. Strip the
   chrome (sidebar, navy hero, theme switcher), replace embedded
   iframes with a printed URL placeholder, force backgrounds to
   white, and reset the article column to full width.
   ============================================================ */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Hide every piece of theme chrome. */
  .bd-sidebar-primary,
  .bd-sidebar-secondary,
  .bd-header,
  .bd-header-article,
  .bd-footer,
  .bd-footer-content,
  .bd-header-announcement,
  .header-article,
  .prev-next-area,
  .theme-switch-button,
  button.theme-switch-button,
  .toc-h2,
  .sphinxsidebar,
  .sy-breadcrumb,
  .block-nav,
  .hero .hero-cta,
  .fc-toolbar,
  .fc-study {
    display: none !important;
  }

  /* Main column: full width. */
  .bd-main,
  .bd-container,
  .bd-content,
  .bd-article-container,
  .bd-article {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
  }

  /* Replace each demo iframe with its full-screen URL printed in mono.
     The companion .demo-fullscreen anchor remains visible above. */
  .demo-wrap iframe { display: none !important; }
  .demo-wrap::after {
    content: "Interactive demo — open the linked URL above to use it online.";
    display: block;
    padding: 14px;
    border: 1px dashed #999;
    border-radius: 4px;
    color: #555;
    font-style: italic;
    font-size: 11pt;
  }

  /* Hero strip prints as a plain title row. */
  .bd-article .hero {
    background: none !important;
    color: #000 !important;
    padding: 0 0 12pt !important;
    border-bottom: 2pt solid #000;
    margin-bottom: 18pt;
    page-break-after: avoid;
  }
  .bd-article .hero::after { display: none !important; }
  .bd-article .hero .hero-shield { display: none !important; }
  .bd-article .hero .hero-eyebrow { color: #444 !important; }
  .bd-article .hero h1.hero-title,
  .bd-article .hero .hero-lede { color: #000 !important; }

  /* Block cards: stripped-down list look. */
  .bd-article .block-grid {
    display: block !important;
  }
  .bd-article .block-card {
    background: none !important;
    border: 1pt solid #999 !important;
    margin-bottom: 6pt !important;
    box-shadow: none !important;
    transform: none !important;
    page-break-inside: avoid;
  }

  /* Callouts: preserve the left-border accent, force white fill. */
  .admonition,
  div.admonition,
  .admonition.key-concept,
  .admonition.example-problem,
  .admonition.quick-exercise,
  .admonition.ground-rules {
    background: #fff !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .admonition > .admonition-title,
  div.admonition > p.admonition-title {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 1pt solid #000 !important;
  }

  /* Page breaks. */
  h1, h2, h3 { page-break-after: avoid; }
  figure, table, .deliverable-card, .bt-card { page-break-inside: avoid; }

  /* MATLAB chip prints as a plain underlined reference. */
  .bd-article .matlab-link {
    background: none !important;
    border: none !important;
    color: #000 !important;
    padding: 0 !important;
    text-decoration: underline !important;
  }
  .bd-article .matlab-link svg,
  .bd-article .matlab-link .ml-arrow { display: none !important; }

  /* Inline code: no background, just JetBrains Mono. */
  .bd-article :not(pre) > code {
    background: none !important;
    color: #000 !important;
    padding: 0 !important;
  }

  a, a:visited { color: #000 !important; text-decoration: underline; }
  a[href]::after { content: ""; }  /* don't print every URL */
}