/* Custom Admonitions for Course Materials
 * These extend MkDocs Material's built-in admonition types
 * Theme: Uses variables from theme.css — update theme.css when palette changes
 *
 * Included types:
 *   important  — Purple, exclamation mark (critical info)
 *   caution    — Red, warning circle (dangerous mistakes)
 *   due        — Deep orange, calendar (deadlines)
 *   research   — Primary color, book (further reading)
 *   link       — Gray, link icon (external resources)
 *   download   — Gray, download arrow (downloadable files)
 *   editorial  — Red, file-edit, sticky (draft content)
 *   genai      — Purple gradient, robot (AI-related callouts)
 *   screenshot — Red/coral, camera (capture reminders)
 *   claude     — Claude orange, Claude starburst icon (ask Claude for help)
 *   guide      — UW Purple, book icon (guide references)
 *   troubleshoot — Amber, wrench icon (troubleshooting tips)
 *   sourcefile — Blue-gray, file-code icon (lecture demo files)
 *   correction — Orange, alert-circle icon (lecture inaccuracy corrections)
 *   recording  — Primary color, play-circle icon (Panopto recording links)
 *   gitrepo    — Silver blue, GitHub icon (lecture demo repos)
 *
 * Section header styles:
 *   .section        — H2, primary bg, accent left border
 *   .subsection     — H3, light primary bg, primary left border
 *   .subsubsection  — H4, light primary bg, accent left border
 *   .exercise       — H3, exercise headers for labs
 *   .req            — H3, requirement headers for assignments
 */

/* ==========================================================================
   IMPORTANT - Purple, exclamation mark
   Usage: !!! important "Title"
   ========================================================================== */

:root {
  --md-admonition-icon--important: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
}

.md-typeset .admonition.important,
.md-typeset details.important {
  border-color: #7c4dff;
}

.md-typeset .important > .admonition-title,
.md-typeset .important > summary {
  background-color: rgba(124, 77, 255, 0.1);
}

.md-typeset .important > .admonition-title::before,
.md-typeset .important > summary::before {
  background-color: #7c4dff;
  -webkit-mask-image: var(--md-admonition-icon--important);
  mask-image: var(--md-admonition-icon--important);
}

/* ==========================================================================
   CAUTION - Red, hand/stop sign
   Usage: !!! caution "Title"
   ========================================================================== */

:root {
  --md-admonition-icon--caution: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 5h2v6h-2V7zm0 8h2v2h-2v-2z"/></svg>');
}

.md-typeset .admonition.caution,
.md-typeset details.caution {
  border-color: #ff5252;
}

.md-typeset .caution > .admonition-title,
.md-typeset .caution > summary {
  background-color: rgba(255, 82, 82, 0.1);
}

.md-typeset .caution > .admonition-title::before,
.md-typeset .caution > summary::before {
  background-color: #ff5252;
  -webkit-mask-image: var(--md-admonition-icon--caution);
  mask-image: var(--md-admonition-icon--caution);
}

/* ==========================================================================
   DUE - Deep Orange, calendar icon
   Usage: !!! due "Assignment 1A"
   ========================================================================== */

:root {
  --md-admonition-icon--due: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/></svg>');
}

.md-typeset .admonition.due,
.md-typeset details.due {
  border-color: #ff7043;
}

.md-typeset .due > .admonition-title,
.md-typeset .due > summary {
  background-color: rgba(255, 112, 67, 0.1);
}

.md-typeset .due > .admonition-title::before,
.md-typeset .due > summary::before {
  background-color: #ff7043;
  -webkit-mask-image: var(--md-admonition-icon--due);
  mask-image: var(--md-admonition-icon--due);
}

/* ==========================================================================
   RESEARCH - Primary color, book
   Usage: !!! research
   ========================================================================== */

:root {
  --md-admonition-icon--research: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></svg>');
}

.md-typeset .admonition.research,
.md-typeset details.research {
  border-color: var(--course-primary);
}

.md-typeset .research > .admonition-title,
.md-typeset .research > summary {
  background-color: var(--course-primary-10);
}

.md-typeset .research > .admonition-title::before,
.md-typeset .research > summary::before {
  background-color: var(--course-primary);
  -webkit-mask-image: var(--md-admonition-icon--research);
  mask-image: var(--md-admonition-icon--research);
}

/* ==========================================================================
   LINK - Gray, link icon
   Usage: !!! link
   ========================================================================== */

:root {
  --md-admonition-icon--link: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>');
}

.md-typeset .admonition.link,
.md-typeset details.link {
  border-color: #757575;
}

.md-typeset .link > .admonition-title,
.md-typeset .link > summary {
  background-color: rgba(117, 117, 117, 0.1);
}

.md-typeset .link > .admonition-title::before,
.md-typeset .link > summary::before {
  background-color: #757575;
  -webkit-mask-image: var(--md-admonition-icon--link);
  mask-image: var(--md-admonition-icon--link);
}

/* ==========================================================================
   DOWNLOAD - Gray, download arrow
   Usage: !!! download
   ========================================================================== */

:root {
  --md-admonition-icon--download: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
}

.md-typeset .admonition.download,
.md-typeset details.download {
  border-color: #757575;
}

.md-typeset .download > .admonition-title,
.md-typeset .download > summary {
  background-color: rgba(117, 117, 117, 0.1);
}

.md-typeset .download > .admonition-title::before,
.md-typeset .download > summary::before {
  background-color: #757575;
  -webkit-mask-image: var(--md-admonition-icon--download);
  mask-image: var(--md-admonition-icon--download);
}

/* ==========================================================================
   API CODE BLOCKS - Method signatures inside admonitions
   Used for documenting interfaces/classes in assignments
   ========================================================================== */

.md-typeset .admonition pre,
.md-typeset details pre {
  background-color: rgba(237, 247, 254, 0.9) !important;
}

.md-typeset .admonition pre code,
.md-typeset details pre code {
  font-size: 1.025em;
  font-weight: 600;
  background-color: transparent !important;
}

/* Indent description text to align with code block content (API docs only) */
.md-typeset .admonition.abstract p,
.md-typeset details.abstract p {
  margin-left: 0.6em !important;
}

/* API intro paragraph - styled like header extension */
.md-typeset .admonition.abstract > p:first-of-type,
.md-typeset details.abstract > p:first-of-type {
  background-color: rgba(237, 247, 254, 1.0) !important;
  margin-left: -0.6rem !important;
  margin-right: -0.6rem !important;
  padding: 0.6rem 1.2rem !important;
  margin-top: 0 !important;
  border-top: 2px solid rgba(79, 174, 249, 0.25) !important;
}

/* ==========================================================================
   API ADMONITION TITLES - Larger headers with bold code for class names
   Usage: ???+ abstract "`ClassName` Interface"
   ========================================================================== */

.md-typeset .admonition-title,
.md-typeset summary {
  font-size: 1.1em;
}

.md-typeset .admonition-title code,
.md-typeset summary code {
  font-weight: 700;
  font-size: 1.1em;
  background-color: transparent !important;
  border: none !important;
  padding: 0;
  box-shadow: none !important;
}

/* ==========================================================================
   REQUIREMENT HEADERS - Visual anchoring for assignment requirements
   Usage: ### Requirement 1: Name {.req}
   ========================================================================== */

.md-typeset h3.req {
  border-left: 3px solid var(--course-primary);
  padding-left: 0.5em;
  background-color: var(--course-primary-10);
  padding: 0.3em 0.5em;
  border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   EXERCISE HEADERS - Visual anchoring for lab exercises
   Usage: ### Exercise 1: Name {.exercise}
   ========================================================================== */

.md-typeset h3.exercise {
  border-left: 4px solid var(--course-accent);
  padding-left: 0.5em;
  background-color: var(--course-primary);
  padding: 0.3em 0.5em;
  border-radius: 0 4px 4px 0;
  color: #ffffff;
}

/* ==========================================================================
   SECTION HEADERS - Visual anchoring for concept reading sections
   Usage: ## Section Name {.section}
   ========================================================================== */

.md-typeset h2.section {
  border-left: 4px solid var(--course-accent);
  background-color: var(--course-primary);
  padding: 0.5em 0.75em;
  border-radius: 0 4px 4px 0;
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: #ffffff;
}

/* Links inside section headers (e.g., clickable timestamps) */
.md-typeset h2.section a {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
}

.md-typeset h2.section a:hover {
  opacity: 1;
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .md-typeset h2.section a {
  color: #000000;
  opacity: 0.9;
}

[data-md-color-scheme="slate"] .md-typeset h2.section a:hover {
  opacity: 1;
}

/* Section number badge: white pill with primary color text */
.md-typeset h2.section .badge {
  background: rgba(255, 255, 255, 0.9);
  color: var(--course-primary);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-size: 0.85em;
  margin-right: 0.35em;
  font-weight: 700;
  position: relative;
  top: -0.08em;
}

/* ==========================================================================
   SUBSECTION HEADERS - Visual anchoring for concept reading subsections
   Usage: ### Subsection Name {.subsection}
   ========================================================================== */

.md-typeset h3.subsection {
  border-left: 4px solid var(--course-primary);
  background-color: var(--course-primary-10);
  padding: 0.4em 0.6em;
  border-radius: 0 4px 4px 0;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Subsection number badge: outline/ghost style */
.md-typeset h3.subsection .badge {
  background: transparent;
  color: var(--course-primary);
  border: 1.5px solid var(--course-primary);
  padding: 0em 0.25em;
  border-radius: 3px;
  font-size: 0.8em;
  margin-right: 0.3em;
  font-weight: 700;
  position: relative;
  top: -0.05em;
}

/* ==========================================================================
   SUBSUBSECTION HEADERS - Visual anchoring for concept reading subsubsections
   Usage: #### Subsubsection Name {.subsubsection}
   ========================================================================== */

.md-typeset h4.subsubsection {
  border-left: 3px solid var(--course-accent);
  background-color: var(--course-primary-10);
  padding: 0.3em 0.5em;
  border-radius: 0 3px 3px 0;
  margin-top: 1.25em;
  margin-bottom: 0.4em;
}

/* Subsubsection number badge: smaller outline/ghost style */
.md-typeset h4.subsubsection .badge {
  background: transparent;
  color: var(--course-accent);
  border: 1.5px solid var(--course-accent);
  padding: 0em 0.2em;
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: 600;
  margin-right: 0.3em;
  position: relative;
  top: -0.05em;
}

/* ==========================================================================
   DARK MODE OVERRIDES
   MkDocs Material uses [data-md-color-scheme="slate"] for dark mode
   ========================================================================== */

[data-md-color-scheme="slate"] .md-typeset .admonition pre,
[data-md-color-scheme="slate"] .md-typeset details pre {
  background-color: rgba(30, 40, 50, 0.9) !important;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.abstract > p:first-of-type,
[data-md-color-scheme="slate"] .md-typeset details.abstract > p:first-of-type {
  background-color: rgba(30, 40, 50, 1.0) !important;
  border-top: 2px solid rgba(79, 174, 249, 0.4) !important;
}

/* Due admonition - lighter orange for dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.due,
[data-md-color-scheme="slate"] .md-typeset details.due {
  border-color: #ffab91;
}

[data-md-color-scheme="slate"] .md-typeset .due > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .due > summary {
  background-color: rgba(255, 171, 145, 0.2);
}

[data-md-color-scheme="slate"] .md-typeset .due > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .due > summary::before {
  background-color: #ffab91;
}

/* Requirement headers - adjust for dark mode */
[data-md-color-scheme="slate"] .md-typeset h3.req {
  border-left-color: var(--course-primary-light);
  background-color: var(--course-primary-15);
}

/* Exercise headers - adjust for dark mode */
[data-md-color-scheme="slate"] .md-typeset h3.exercise {
  border-left-color: var(--course-accent-light);
  background-color: var(--course-primary-light);
  color: #000000;
}

/* Section headers - adjust for dark mode */
[data-md-color-scheme="slate"] .md-typeset h2.section {
  border-left-color: var(--course-accent-light);
  background-color: var(--course-primary-light);
  color: #000000;
}

/* Section number badge - dark mode */
[data-md-color-scheme="slate"] .md-typeset h2.section .badge {
  background: rgba(255, 255, 255, 0.85);
  color: var(--course-primary-dark);
}

/* Subsection headers - adjust for dark mode */
[data-md-color-scheme="slate"] .md-typeset h3.subsection {
  border-left-color: var(--course-primary-light);
  background-color: var(--course-primary-12);
}

/* Subsection number badge - dark mode */
[data-md-color-scheme="slate"] .md-typeset h3.subsection .badge {
  border-color: var(--course-primary-light);
  color: var(--course-primary-light);
}

/* Subsubsection headers - adjust for dark mode */
[data-md-color-scheme="slate"] .md-typeset h4.subsubsection {
  border-left-color: var(--course-accent-light);
  background-color: var(--course-primary-10);
}

/* Subsubsection number badge - dark mode */
[data-md-color-scheme="slate"] .md-typeset h4.subsubsection .badge {
  color: var(--course-accent-light);
  border-color: var(--course-accent-light);
}

/* ==========================================================================
   EDITORIAL - Red, file-edit icon, STICKY
   Usage: !!! editorial "Editorial Review Pending"
   Used on draft content awaiting review. Sticky at top of page.
   ========================================================================== */

:root {
  --md-admonition-icon--editorial: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M6 4H13V9H18V20H6V4M11 13H13V18H11V13M11 10H13V12H11V10Z"/></svg>');
}

.md-typeset .admonition.editorial,
.md-typeset details.editorial {
  border-color: #ff5252;
}

.md-typeset .editorial > .admonition-title,
.md-typeset .editorial > summary {
  background-color: rgba(255, 82, 82, 0.1);
}

.md-typeset .editorial > .admonition-title::before,
.md-typeset .editorial > summary::before {
  background-color: #ff5252;
  -webkit-mask-image: var(--md-admonition-icon--editorial);
  mask-image: var(--md-admonition-icon--editorial);
}

/* Sticky behavior - always at top of content */
.md-typeset .admonition.editorial {
  position: sticky;
  top: 60px;  /* Account for sticky header height */
  z-index: 10;
  margin-top: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Dark mode - lighter red */
[data-md-color-scheme="slate"] .md-typeset .admonition.editorial,
[data-md-color-scheme="slate"] .md-typeset details.editorial {
  border-color: #ff8a80;
}

[data-md-color-scheme="slate"] .md-typeset .editorial > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .editorial > summary {
  background-color: rgba(255, 138, 128, 0.2);
}

[data-md-color-scheme="slate"] .md-typeset .editorial > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .editorial > summary::before {
  background-color: #ff8a80;
}

/* ==========================================================================
   GENAI - Purple/Blue Gradient, robot icon
   Usage: !!! genai "Gen AI & Learning: Title"
   ========================================================================== */

:root {
  --md-admonition-icon--genai: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2M7.5 13A2.5 2.5 0 0 0 5 15.5A2.5 2.5 0 0 0 7.5 18a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 7.5 13m9 0a2.5 2.5 0 0 0-2.5 2.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5z"/></svg>');
  --genai-color: #8b5cf6;
}

.md-typeset .admonition.genai,
.md-typeset details.genai {
  border: none;
  border-left: 4px solid;
  border-image: linear-gradient(180deg, #8b5cf6 0%, #a78bfa 50%, #c0c0c0 100%) 1;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.md-typeset .genai > .admonition-title,
.md-typeset .genai > summary {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.12) 50%, rgba(192, 192, 192, 0.08) 100%);
}

.md-typeset .genai > .admonition-title::before,
.md-typeset .genai > summary::before {
  background-color: #8b5cf6;
  -webkit-mask-image: var(--md-admonition-icon--genai);
  mask-image: var(--md-admonition-icon--genai);
}

/* Dark mode support */
[data-md-color-scheme="slate"] .md-typeset .admonition.genai,
[data-md-color-scheme="slate"] .md-typeset details.genai {
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset .genai > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .genai > summary {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.3) 0%, rgba(167, 139, 250, 0.18) 50%, rgba(192, 192, 192, 0.1) 100%);
}

[data-md-color-scheme="slate"] .md-typeset .genai > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .genai > summary::before {
  background-color: #a78bfa;
}

/* ==========================================================================
   SCREENSHOT - Red/Coral, camera icon
   Usage: !!! screenshot "Take a Screenshot"
   Used at the end of lab exercises to remind students to capture their work.
   ========================================================================== */

:root {
  --md-admonition-icon--screenshot: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h3l2-2h6l2 2h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m8 3a5 5 0 0 0-5 5a5 5 0 0 0 5 5a5 5 0 0 0 5-5a5 5 0 0 0-5-5m0 2a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3z"/></svg>');
}

.md-typeset .admonition.screenshot,
.md-typeset details.screenshot {
  border-color: #ef5350;
}

.md-typeset .screenshot > .admonition-title,
.md-typeset .screenshot > summary {
  background-color: rgba(239, 83, 80, 0.1);
}

.md-typeset .screenshot > .admonition-title::before,
.md-typeset .screenshot > summary::before {
  background-color: #ef5350;
  -webkit-mask-image: var(--md-admonition-icon--screenshot);
  mask-image: var(--md-admonition-icon--screenshot);
}

/* Dark mode support */
[data-md-color-scheme="slate"] .md-typeset .admonition.screenshot,
[data-md-color-scheme="slate"] .md-typeset details.screenshot {
  border-color: #ef9a9a;
}

[data-md-color-scheme="slate"] .md-typeset .screenshot > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .screenshot > summary {
  background-color: rgba(239, 154, 154, 0.2);
}

[data-md-color-scheme="slate"] .md-typeset .screenshot > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .screenshot > summary::before {
  background-color: #ef9a9a;
}

/* ==========================================================================
   CLAUDE - Claude orange, Claude starburst icon
   Usage: !!! claude "Need Help?"
   Used to encourage students to ask Claude Code for assistance.
   ========================================================================== */

:root {
  --md-admonition-icon--claude: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m3.127 10.604 3.135-1.76.053-.153-.053-.085H6.11l-.525-.032-1.791-.048-1.554-.065-1.505-.08-.38-.081L0 7.832l.036-.234.32-.214.455.04 1.009.069 1.513.105 1.097.064 1.626.17h.259l.036-.105-.089-.065-.068-.064-1.566-1.062-1.695-1.121-.887-.646-.48-.327-.243-.306-.104-.67.435-.48.585.04.15.04.593.456 1.267.981 1.654 1.218.242.202.097-.068.012-.049-.109-.181-.9-1.626-.96-1.655-.428-.686-.113-.411a2 2 0 0 1-.068-.484l.496-.674L4.446 0l.662.089.279.242.411.94.666 1.48 1.033 2.014.302.597.162.553.06.17h.105v-.097l.085-1.134.157-1.392.154-1.792.052-.504.25-.605.497-.327.387.186.319.456-.045.294-.19 1.23-.37 1.93-.243 1.29h.142l.161-.16.654-.868 1.097-1.372.484-.545.565-.601.363-.287h.686l.505.751-.226.775-.707.895-.585.759-.839 1.13-.524.904.048.072.125-.012 1.897-.403 1.024-.186 1.223-.21.553.258.06.263-.218.536-1.307.323-1.533.307-2.284.54-.028.02.032.04 1.029.098.44.024h1.077l2.005.15.525.346.315.424-.053.323-.807.411-3.631-.863-.872-.218h-.12v.073l.726.71 1.331 1.202 1.667 1.55.084.383-.214.302-.226-.032-1.464-1.101-.565-.497-1.28-1.077h-.084v.113l.295.432 1.557 2.34.08.718-.112.234-.404.141-.444-.08-.911-1.28-.94-1.44-.759-1.291-.093.053-.448 4.821-.21.246-.484.186-.403-.307-.214-.496.214-.98.258-1.28.21-1.016.19-1.263.112-.42-.008-.028-.092.012-.953 1.307-1.448 1.957-1.146 1.227-.274.109-.477-.247.045-.44.266-.39 1.586-2.018.956-1.25.617-.723-.004-.105h-.036l-4.212 2.736-.75.096-.324-.302.04-.496.154-.162 1.267-.871z"/></svg>');
  --claude-color: #C15F3C;
}

.md-typeset .admonition.claude,
.md-typeset details.claude {
  border: none;
  border-left: 4px solid;
  border-image: linear-gradient(180deg, #C15F3C 0%, #d97757 50%, #a8512f 100%) 1;
  box-shadow: 0 0 0 2px rgba(193, 95, 60, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.md-typeset .claude > .admonition-title,
.md-typeset .claude > summary {
  background: linear-gradient(90deg, rgba(193, 95, 60, 0.15) 0%, rgba(217, 119, 87, 0.08) 100%);
}

.md-typeset .claude > .admonition-title::before,
.md-typeset .claude > summary::before {
  background-color: #C15F3C;
  -webkit-mask-image: var(--md-admonition-icon--claude);
  mask-image: var(--md-admonition-icon--claude);
}

/* Dark mode support */
[data-md-color-scheme="slate"] .md-typeset .admonition.claude,
[data-md-color-scheme="slate"] .md-typeset details.claude {
  box-shadow: 0 0 0 2px rgba(193, 95, 60, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset .claude > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .claude > summary {
  background: linear-gradient(90deg, rgba(193, 95, 60, 0.25) 0%, rgba(217, 119, 87, 0.12) 100%);
}

[data-md-color-scheme="slate"] .md-typeset .claude > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .claude > summary::before {
  background-color: #d97757;
}

/* ==========================================================================
   GUIDE - UW Purple, book icon
   Usage: !!! guide "Related Guide"
   Used to reference related learning guides from within content.
   ========================================================================== */

:root {
  --md-admonition-icon--guide: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H6V4h2v8l2.5-1.5L13 12V4h5v16z"/></svg>');
}

.md-typeset .admonition.guide,
.md-typeset details.guide {
  border-color: #4b2e83;
}

.md-typeset .guide > .admonition-title,
.md-typeset .guide > summary {
  background-color: rgba(75, 46, 131, 0.1);
}

.md-typeset .guide > .admonition-title::before,
.md-typeset .guide > summary::before {
  background-color: #4b2e83;
  -webkit-mask-image: var(--md-admonition-icon--guide);
  mask-image: var(--md-admonition-icon--guide);
}

/* Dark mode support */
[data-md-color-scheme="slate"] .md-typeset .admonition.guide,
[data-md-color-scheme="slate"] .md-typeset details.guide {
  border-color: #9d7fd4;
}

[data-md-color-scheme="slate"] .md-typeset .guide > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .guide > summary {
  background-color: rgba(157, 127, 212, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset .guide > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .guide > summary::before {
  background-color: #9d7fd4;
}

/* ==========================================================================
   TROUBLESHOOT - Amber, wrench icon
   Usage: !!! troubleshoot "Common Issue"
   Used for troubleshooting tips and common problem resolutions.
   ========================================================================== */

:root {
  --md-admonition-icon--troubleshoot: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>');
}

.md-typeset .admonition.troubleshoot,
.md-typeset details.troubleshoot {
  border-color: #ffa000;
}

.md-typeset .troubleshoot > .admonition-title,
.md-typeset .troubleshoot > summary {
  background-color: rgba(255, 160, 0, 0.1);
}

.md-typeset .troubleshoot > .admonition-title::before,
.md-typeset .troubleshoot > summary::before {
  background-color: #ffa000;
  -webkit-mask-image: var(--md-admonition-icon--troubleshoot);
  mask-image: var(--md-admonition-icon--troubleshoot);
}

/* Dark mode support */
[data-md-color-scheme="slate"] .md-typeset .admonition.troubleshoot,
[data-md-color-scheme="slate"] .md-typeset details.troubleshoot {
  border-color: #ffca28;
}

[data-md-color-scheme="slate"] .md-typeset .troubleshoot > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .troubleshoot > summary {
  background-color: rgba(255, 202, 40, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset .troubleshoot > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .troubleshoot > summary::before {
  background-color: #ffca28;
}

/* ==========================================================================
   SOURCEFILE - Blue-gray, file-code icon
   Usage: !!! sourcefile "Demo File"
   Used for lecture demo source file references.
   ========================================================================== */

:root {
  --md-admonition-icon--sourcefile: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2l5 5h-5V4zM9.54 15.65l-1.54 1.54L5 14.19l3-3 1.54 1.54L7.6 14.19l1.94 1.46zm4.92-3.3L17 14.19l-3 3-1.54-1.54 1.94-1.46-1.94-1.84L14.46 12.35z"/></svg>');
}

.md-typeset .admonition.sourcefile,
.md-typeset details.sourcefile {
  border-color: #546e7a;
}

.md-typeset .sourcefile > .admonition-title,
.md-typeset .sourcefile > summary {
  background-color: rgba(84, 110, 122, 0.1);
}

.md-typeset .sourcefile > .admonition-title::before,
.md-typeset .sourcefile > summary::before {
  background-color: #546e7a;
  -webkit-mask-image: var(--md-admonition-icon--sourcefile);
  mask-image: var(--md-admonition-icon--sourcefile);
}

/* Dark mode support */
[data-md-color-scheme="slate"] .md-typeset .admonition.sourcefile,
[data-md-color-scheme="slate"] .md-typeset details.sourcefile {
  border-color: #90a4ae;
}

[data-md-color-scheme="slate"] .md-typeset .sourcefile > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .sourcefile > summary {
  background-color: rgba(144, 164, 174, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset .sourcefile > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .sourcefile > summary::before {
  background-color: #90a4ae;
}

/* ==========================================================================
   CORRECTION - Orange, alert-circle icon
   Usage: !!! correction "Correction"
   Used for lecture inaccuracy corrections.
   ========================================================================== */

:root {
  --md-admonition-icon--correction: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z"/></svg>');
}

.md-typeset .admonition.correction,
.md-typeset details.correction {
  border-color: #f57c00;
}

.md-typeset .correction > .admonition-title,
.md-typeset .correction > summary {
  background-color: rgba(245, 124, 0, 0.1);
}

.md-typeset .correction > .admonition-title::before,
.md-typeset .correction > summary::before {
  background-color: #f57c00;
  -webkit-mask-image: var(--md-admonition-icon--correction);
  mask-image: var(--md-admonition-icon--correction);
}

/* Dark mode support */
[data-md-color-scheme="slate"] .md-typeset .admonition.correction,
[data-md-color-scheme="slate"] .md-typeset details.correction {
  border-color: #ffb74d;
}

[data-md-color-scheme="slate"] .md-typeset .correction > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .correction > summary {
  background-color: rgba(255, 183, 77, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset .correction > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .correction > summary::before {
  background-color: #ffb74d;
}

/* ==========================================================================
   RECORDING - Primary color, play-circle icon
   Usage: !!! recording "Panopto Recording"
   Used for linking to Panopto lecture recordings.
   ========================================================================== */

:root {
  --md-admonition-icon--recording: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>');
}

.md-typeset .admonition.recording,
.md-typeset details.recording {
  border-color: var(--course-primary);
}

.md-typeset .recording > .admonition-title,
.md-typeset .recording > summary {
  background-color: var(--course-primary-10);
}

.md-typeset .recording > .admonition-title::before,
.md-typeset .recording > summary::before {
  background-color: var(--course-primary);
  -webkit-mask-image: var(--md-admonition-icon--recording);
  mask-image: var(--md-admonition-icon--recording);
}

/* Dark mode support */
[data-md-color-scheme="slate"] .md-typeset .admonition.recording,
[data-md-color-scheme="slate"] .md-typeset details.recording {
  border-color: var(--course-primary-light);
}

[data-md-color-scheme="slate"] .md-typeset .recording > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .recording > summary {
  background-color: var(--course-primary-15);
}

[data-md-color-scheme="slate"] .md-typeset .recording > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .recording > summary::before {
  background-color: var(--course-primary-light);
}

/* ==========================================================================
   GITREPO - Silver Blue, GitHub icon
   Usage: !!! gitrepo "Demo Code"
   Used for linking to lecture demo code repositories.
   ========================================================================== */

:root {
  --md-admonition-icon--gitrepo: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,17.99 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"/></svg>');
}

.md-typeset .admonition.gitrepo,
.md-typeset details.gitrepo {
  border-color: #78909c;
}

.md-typeset .gitrepo > .admonition-title,
.md-typeset .gitrepo > summary {
  background-color: rgba(120, 144, 156, 0.1);
}

.md-typeset .gitrepo > .admonition-title::before,
.md-typeset .gitrepo > summary::before {
  background-color: #78909c;
  -webkit-mask-image: var(--md-admonition-icon--gitrepo);
  mask-image: var(--md-admonition-icon--gitrepo);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.gitrepo,
[data-md-color-scheme="slate"] .md-typeset details.gitrepo {
  border-color: #b0bec5;
}

[data-md-color-scheme="slate"] .md-typeset .gitrepo > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .gitrepo > summary {
  background-color: rgba(176, 190, 197, 0.2);
}

[data-md-color-scheme="slate"] .md-typeset .gitrepo > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .gitrepo > summary::before {
  background-color: #b0bec5;
}