/* Custom Admonitions for TCSS 305 Course Materials
 * These extend MkDocs Material's built-in admonition types
 */

/* ==========================================================================
   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
   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 - Teal, 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: #009688;
}

.md-typeset .research > .admonition-title,
.md-typeset .research > summary {
  background-color: rgba(0, 150, 136, 0.1);
}

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

/* ==========================================================================
   GUIDE - UW Purple, open book icon
   Usage: !!! guide "Title"
   For linking to TCSS 305 course guides (distinct from external links)
   ========================================================================== */

: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="M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z"/></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);
}

/* ==========================================================================
   TROUBLESHOOT - Amber, wrench icon
   Usage: !!! troubleshoot "Title"
   For common issues and workarounds
   ========================================================================== */

: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: #ffab00;
}

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

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

/* ==========================================================================
   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);
}

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

: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);
}

/* ==========================================================================
   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);
}

/* ==========================================================================
   RECORDING - Blue, video icon
   Usage: !!! recording "Lecture Recording"
   Used for Panopto lecture recording links.
   ========================================================================== */

: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="M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4z"/></svg>');
}

.md-typeset .admonition.recording,
.md-typeset details.recording {
  border-color: #2196f3;
}

.md-typeset .recording > .admonition-title,
.md-typeset .recording > summary {
  background-color: rgba(33, 150, 243, 0.1);
}

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

/* ==========================================================================
   SOURCEFILE - Blue-gray, document icon
   Usage: !!! sourcefile "Lecture Demo"
   Used for source code file downloads.
   ========================================================================== */

: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 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6m4 18H6V4h7v5h5v11z"/></svg>');
}

.md-typeset .admonition.sourcefile,
.md-typeset details.sourcefile {
  border-color: #607d8b;
}

.md-typeset .sourcefile > .admonition-title,
.md-typeset .sourcefile > summary {
  background-color: rgba(96, 125, 139, 0.1);
}

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

/* ==========================================================================
   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 #4b2e83;
  padding-left: 0.5em;
  background-color: rgba(75, 46, 131, 0.1);
  padding: 0.3em 0.5em;
  border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   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: #9d7fcf;
  background-color: rgba(157, 127, 207, 0.15);
}

/* Troubleshoot admonition - lighter amber for dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.troubleshoot,
[data-md-color-scheme="slate"] .md-typeset details.troubleshoot {
  border-color: #ffd54f;
}

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

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

/* Guide admonition - lighter purple for dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.guide,
[data-md-color-scheme="slate"] .md-typeset details.guide {
  border-color: #c9b3e6;
}

[data-md-color-scheme="slate"] .md-typeset .guide > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .guide > summary {
  background-color: rgba(201, 179, 230, 0.2);
}

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

/* Gitrepo admonition - lighter silver-blue for dark mode */
[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;
}

/* Recording admonition - lighter blue for dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.recording,
[data-md-color-scheme="slate"] .md-typeset details.recording {
  border-color: #64b5f6;
}

[data-md-color-scheme="slate"] .md-typeset .recording > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .recording > summary {
  background-color: rgba(100, 181, 246, 0.2);
}

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

/* Sourcefile admonition - lighter blue-gray for dark mode */
[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.2);
}

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

/* Gen AI admonition - brighter for dark mode */
[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;
}

/* ==========================================================================
   EDITORIAL - Red, file-alert 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;
}

/* Sticky shadow adjustment for dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.editorial {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* macOS admonition - lighter gray for dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.macos,
[data-md-color-scheme="slate"] .md-typeset details.macos {
  border-color: #999999;
}

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

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

/* Windows admonition - lighter blue for dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition.windows,
[data-md-color-scheme="slate"] .md-typeset details.windows {
  border-color: #4FC3F7;
}

[data-md-color-scheme="slate"] .md-typeset .windows > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .windows > summary {
  background-color: rgba(79, 195, 247, 0.2);
}

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

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

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

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

/* ==========================================================================
   MACOS - Charcoal gray, Apple icon
   Usage: !!! macos "Title"
   Default title: "macOS"
   OS-specific callouts for platform differences
   ========================================================================== */

:root {
  --md-admonition-icon--macos: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>');
}

.md-typeset .admonition.macos,
.md-typeset details.macos {
  border-color: #555555;
}

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

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

/* ==========================================================================
   WINDOWS - Microsoft blue, Windows icon
   Usage: !!! windows "Title"
   Default title: "Windows"
   OS-specific callouts for platform differences
   ========================================================================== */

:root {
  --md-admonition-icon--windows: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 12V6.75l6-1.32v6.48L3 12zm17-9v8.75l-10 .15V5.21L20 3zM3 13l6 .09v6.81l-6-1.15V13zm17 .25V22l-10-1.91V13.1l10 .15z"/></svg>');
}

.md-typeset .admonition.windows,
.md-typeset details.windows {
  border-color: #0078D4;
}

.md-typeset .windows > .admonition-title,
.md-typeset .windows > summary {
  background-color: rgba(0, 120, 212, 0.1);
}

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

/* ==========================================================================
   LINUX - Ubuntu orange, penguin/Tux icon
   Usage: !!! linux "Title"
   Default title: "Linux"
   OS-specific callouts for platform differences
   ========================================================================== */

:root {
  --md-admonition-icon--linux: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.62 8.35c-.42-.62-.76-1.35-.76-2.13 0-2.21 1.58-4 3.14-4 .55 0 1.07.18 1.53.5-.63-1.42-2.2-2.72-4.53-2.72-3.07 0-5.6 2.25-6.55 5.18.21-.03.42-.05.64-.05 1.56 0 2.82 1.27 2.82 2.84 0 .78-.34 1.51-.76 2.13 1.07.43 2.24.68 3.32.68s2.25-.25 3.32-.68zM5.34 17.09c-.13.46-.22.94-.22 1.41 0 2.76 3.07 5 6.88 5s6.88-2.24 6.88-5c0-.47-.09-.95-.22-1.41C16.8 18.68 14.52 19.5 12 19.5s-4.8-.82-6.66-2.41zM20.06 13.19C18.5 11.8 16.42 11 14 11h-4c-2.42 0-4.5.8-6.06 2.19C2.08 14.33 2 16.13 2 18c0 .35.04.7.1 1.04C3.68 21.24 7.05 23 12 23s8.32-1.76 9.9-3.96c.06-.34.1-.69.1-1.04 0-1.87-.08-3.67-1.94-4.81z"/></svg>');
}

.md-typeset .admonition.linux,
.md-typeset details.linux {
  border-color: #E95420;
}

.md-typeset .linux > .admonition-title,
.md-typeset .linux > summary {
  background-color: rgba(233, 84, 32, 0.1);
}

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

/* ==========================================================================
   SECTION HEADERS - Styled headers with visual hierarchy
   Uses site colors: deep purple (primary) and amber (accent)
   Usage:
     ## <span class="badge">1</span> Section Title {.section}
     ### <span class="badge">1.1</span> Subsection Title {.subsection}
     #### <span class="badge">1.1.1</span> Subsubsection Title {.subsubsection}
   ========================================================================== */

/* H2 Section - Deep purple background with amber border */
.md-typeset h2.section {
  border-left: 4px solid #ffc107;
  background-color: #673ab7;
  padding: 0.5em 0.75em;
  border-radius: 0 4px 4px 0;
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: #ffffff;
}

.md-typeset h2.section .badge {
  background: rgba(255, 255, 255, 0.9);
  color: #673ab7;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-size: 0.85em;
  margin-right: 0.35em;
  font-weight: 700;
  position: relative;
  top: -0.08em;
}

/* H3 Subsection - Light purple background with purple border */
.md-typeset h3.subsection {
  border-left: 4px solid #673ab7;
  background-color: rgba(103, 58, 183, 0.08);
  padding: 0.4em 0.6em;
  border-radius: 0 4px 4px 0;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.md-typeset h3.subsection .badge {
  background: transparent;
  color: #673ab7;
  border: 1.5px solid #673ab7;
  padding: 0em 0.25em;
  border-radius: 3px;
  font-size: 0.8em;
  margin-right: 0.3em;
  font-weight: 700;
  position: relative;
  top: -0.05em;
}

/* H4 Subsubsection - Light amber background with amber border */
.md-typeset h4.subsubsection {
  border-left: 3px solid #ffc107;
  background-color: rgba(255, 193, 7, 0.08);
  padding: 0.3em 0.5em;
  border-radius: 0 3px 3px 0;
  margin-top: 1.25em;
  margin-bottom: 0.4em;
}

.md-typeset h4.subsubsection .badge {
  background: transparent;
  color: #ff8f00;
  border: 1.5px solid #ffc107;
  padding: 0em 0.2em;
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: 600;
  margin-right: 0.3em;
  position: relative;
  top: -0.05em;
}

/* Section Header Links - Match text color so timestamp links are readable */
.md-typeset h2.section a {
  color: #ffffff;
  text-decoration: none;
}

.md-typeset h2.section a:hover {
  color: #ffc107;
  text-decoration: underline;
}

.md-typeset h3.subsection a {
  color: inherit;
  text-decoration: none;
}

.md-typeset h3.subsection a:hover {
  color: #673ab7;
  text-decoration: underline;
}

.md-typeset h4.subsubsection a {
  color: inherit;
  text-decoration: none;
}

.md-typeset h4.subsubsection a:hover {
  color: #ff8f00;
  text-decoration: underline;
}

/* Section Headers - Dark mode variants */
[data-md-color-scheme="slate"] .md-typeset h2.section {
  border-left-color: #ffca28;
  background-color: #9575cd;
  color: #000000;
}

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

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

[data-md-color-scheme="slate"] .md-typeset h3.subsection a:hover {
  color: #9575cd;
}

[data-md-color-scheme="slate"] .md-typeset h4.subsubsection a:hover {
  color: #ffca28;
}

[data-md-color-scheme="slate"] .md-typeset h2.section .badge {
  background: rgba(255, 255, 255, 0.85);
  color: #512da8;
}

[data-md-color-scheme="slate"] .md-typeset h3.subsection {
  border-left-color: #9575cd;
  background-color: rgba(149, 117, 205, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset h3.subsection .badge {
  border-color: #9575cd;
  color: #9575cd;
}

[data-md-color-scheme="slate"] .md-typeset h4.subsubsection {
  border-left-color: #ffca28;
  background-color: rgba(255, 202, 40, 0.12);
}

[data-md-color-scheme="slate"] .md-typeset h4.subsubsection .badge {
  color: #ffca28;
  border-color: #ffca28;
}

/* ── Test Prep Section Headers ── */
.md-typeset h2.section {
  border-left: 4px solid #ff7043;
  background-color: #009688;
  padding: 0.5em 0.75em;
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-typeset h2.section {
  border-left: 4px solid #ff7043;
  background-color: rgba(0, 150, 136, 0.85);
  color: #ffffff;
}