/* =========================================================
   CaaT Academy theme system — revision 3
   Load AFTER assets/css/styles.css.

   Features:
   - light/dark themes
   - transparent cat-sized theme control
   - sticky headers
   - theme-aware Highlight.js and Mermaid surfaces
   - theme-aware sidebar and author card
   - abstract developer-workspace background made from SVG
     line art and noise (no grid and no gradient background)
   ========================================================= */

:root {
  --caat-bg: #e8edf2;
  --caat-bg-elevated: #f2f5f7;
  --caat-surface: rgba(255, 255, 255, 0.84);
  --caat-surface-solid: #ffffff;
  --caat-surface-soft: #edf2f5;
  --caat-header: rgba(248, 250, 252, 0.9);
  --caat-sidebar: rgba(239, 244, 247, 0.96);
  --caat-sidebar-soft: rgba(255, 255, 255, 0.66);
  --caat-text: #253440;
  --caat-text-soft: #5a6a77;
  --caat-heading: #12222d;
  --caat-border: rgba(37, 58, 72, 0.14);
  --caat-border-strong: rgba(37, 58, 72, 0.24);
  --caat-link: #096579;
  --caat-link-hover: #084958;
  --caat-accent: #0e7280;
  --caat-accent-soft: rgba(14, 114, 128, 0.12);
  --caat-code-bg: #f6f8fa;
  --caat-code-text: #24292f;
  --caat-inline-code-bg: #e8eff2;
  --caat-diagram-bg: #ffffff;
  --caat-diagram-text: #17212b;
  --caat-sidebar-title: #0b6270;
  --caat-sidebar-subtitle: #0f766e;
  --caat-sidebar-item: #455865;
  --caat-sidebar-active-bg: #d9ecef;
  --caat-sidebar-active-text: #0b4f5b;
  --caat-shadow: 0 20px 48px rgba(29, 47, 61, 0.12);
  --caat-shadow-small: 0 10px 26px rgba(29, 47, 61, 0.09);
  --caat-header-height: 75px;

  /* Remap the existing CaaT design variables. */
  --crl-bg: var(--caat-bg);
  --crl-bg-soft: var(--caat-bg-elevated);
  --crl-bg-card: var(--caat-surface);
  --crl-bg-card-strong: var(--caat-surface-solid);
  --crl-text: var(--caat-text);
  --crl-text-muted: var(--caat-text-soft);
  --crl-ink: var(--caat-heading);
  --crl-body: var(--caat-text-soft);
  --crl-border: var(--caat-border);
  --crl-border-light: var(--caat-border);
  --crl-shadow-soft: var(--caat-shadow);
  --crl-shadow-dark: var(--caat-shadow);
}

html[data-theme="dark"] {
  --caat-bg: #0b1118;
  --caat-bg-elevated: #101923;
  --caat-surface: rgba(17, 26, 36, 0.9);
  --caat-surface-solid: #121c26;
  --caat-surface-soft: #182430;
  --caat-header: rgba(12, 19, 27, 0.9);
  --caat-sidebar: rgba(9, 16, 23, 0.97);
  --caat-sidebar-soft: rgba(20, 31, 41, 0.92);
  --caat-text: #e2eaf0;
  --caat-text-soft: #a9b7c2;
  --caat-heading: #f4f8fa;
  --caat-border: rgba(211, 227, 237, 0.13);
  --caat-border-strong: rgba(211, 227, 237, 0.24);
  --caat-link: #72d2de;
  --caat-link-hover: #a5edf2;
  --caat-accent: #65d0dc;
  --caat-accent-soft: rgba(101, 208, 220, 0.13);
  --caat-code-bg: #0d1117;
  --caat-code-text: #e6edf3;
  --caat-inline-code-bg: #182431;
  --caat-diagram-bg: #111923;
  --caat-diagram-text: #e8f1f5;
  --caat-sidebar-title: #65d8e8;
  --caat-sidebar-subtitle: #5eead4;
  --caat-sidebar-item: #c5d2dc;
  --caat-sidebar-active-bg: rgba(88, 213, 255, 0.14);
  --caat-sidebar-active-text: #f4fdff;
  --caat-shadow: 0 22px 58px rgba(0, 0, 0, 0.34);
  --caat-shadow-small: 0 11px 30px rgba(0, 0, 0, 0.25);

  --crl-bg: var(--caat-bg);
  --crl-bg-soft: var(--caat-bg-elevated);
  --crl-bg-card: var(--caat-surface);
  --crl-bg-card-strong: var(--caat-surface-solid);
  --crl-text: var(--caat-text);
  --crl-text-muted: var(--caat-text-soft);
  --crl-ink: var(--caat-heading);
  --crl-body: var(--caat-text-soft);
  --crl-border: var(--caat-border);
  --crl-border-light: var(--caat-border);
  --crl-shadow-soft: var(--caat-shadow);
  --crl-shadow-dark: var(--caat-shadow);
}

html {
  background-color: var(--caat-bg);
}

body,
body.crl-home,
body:not(.crl-home) {
  position: relative;
  isolation: isolate;
  color: var(--caat-text) !important;
  background: var(--caat-bg) !important;
}

/*
   Rich, non-grid developer-workspace background. The first SVG contains
   floating editor-window outlines, curved traces, nodes, and code-like marks.
   The second SVG adds very subtle material texture. Neither uses a gradient.
*/
body.crl-home::before,
body:not(.crl-home)::before {
  content: "" !important;
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='820' viewBox='0 0 1200 820' fill='none'%3E%3Cg stroke='%234c6878' stroke-width='1.4'%3E%3Crect x='72' y='76' width='430' height='264' rx='30' opacity='.18'/%3E%3Ccircle cx='111' cy='112' r='5' opacity='.28'/%3E%3Ccircle cx='130' cy='112' r='5' opacity='.22'/%3E%3Ccircle cx='149' cy='112' r='5' opacity='.18'/%3E%3Cpath d='M108 166h188M108 196h310M108 226h242M108 256h278' opacity='.13'/%3E%3Crect x='712' y='448' width='390' height='230' rx='28' opacity='.16'/%3E%3Cpath d='M754 510h130M754 542h252M754 574h184M754 606h220' opacity='.13'/%3E%3Cpath d='M544 118c105 0 92 116 188 116s95-92 202-92 92 105 187 105' opacity='.16'/%3E%3Cpath d='M70 560c128-92 240-72 338 22 92 88 192 82 284-20' opacity='.13'/%3E%3Cpath d='M536 316l34-34 34 34M570 282v94' opacity='.2'/%3E%3Cpath d='M628 370l22 22 44-54' opacity='.18'/%3E%3C/g%3E%3Cg fill='%234c6878'%3E%3Ccircle cx='544' cy='118' r='5' opacity='.24'/%3E%3Ccircle cx='732' cy='234' r='5' opacity='.22'/%3E%3Ccircle cx='934' cy='142' r='5' opacity='.2'/%3E%3Ccircle cx='1121' cy='247' r='5' opacity='.18'/%3E%3Ccircle cx='70' cy='560' r='5' opacity='.2'/%3E%3Ccircle cx='408' cy='582' r='5' opacity='.18'/%3E%3Ccircle cx='692' cy='562' r='5' opacity='.2'/%3E%3Cpath d='M1040 92h8v8h-8z' opacity='.17'/%3E%3Cpath d='M586 680h10v10h-10z' opacity='.15'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: repeat-y !important;
  background-position: center top !important;
  background-size: 1200px 820px !important;
  opacity: 0.72;
}

body.crl-home::after,
body:not(.crl-home)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 210px 210px;
  opacity: 0.18;
  mix-blend-mode: multiply;
}

html[data-theme="dark"] body.crl-home::before,
html[data-theme="dark"] body:not(.crl-home)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='820' viewBox='0 0 1200 820' fill='none'%3E%3Cg stroke='%2375d8e5' stroke-width='1.4'%3E%3Crect x='72' y='76' width='430' height='264' rx='30' opacity='.13'/%3E%3Ccircle cx='111' cy='112' r='5' opacity='.23'/%3E%3Ccircle cx='130' cy='112' r='5' opacity='.19'/%3E%3Ccircle cx='149' cy='112' r='5' opacity='.15'/%3E%3Cpath d='M108 166h188M108 196h310M108 226h242M108 256h278' opacity='.10'/%3E%3Crect x='712' y='448' width='390' height='230' rx='28' opacity='.12'/%3E%3Cpath d='M754 510h130M754 542h252M754 574h184M754 606h220' opacity='.10'/%3E%3Cpath d='M544 118c105 0 92 116 188 116s95-92 202-92 92 105 187 105' opacity='.14'/%3E%3Cpath d='M70 560c128-92 240-72 338 22 92 88 192 82 284-20' opacity='.11'/%3E%3Cpath d='M536 316l34-34 34 34M570 282v94' opacity='.17'/%3E%3Cpath d='M628 370l22 22 44-54' opacity='.16'/%3E%3C/g%3E%3Cg fill='%2375d8e5'%3E%3Ccircle cx='544' cy='118' r='5' opacity='.22'/%3E%3Ccircle cx='732' cy='234' r='5' opacity='.19'/%3E%3Ccircle cx='934' cy='142' r='5' opacity='.17'/%3E%3Ccircle cx='1121' cy='247' r='5' opacity='.15'/%3E%3Ccircle cx='70' cy='560' r='5' opacity='.18'/%3E%3Ccircle cx='408' cy='582' r='5' opacity='.16'/%3E%3Ccircle cx='692' cy='562' r='5' opacity='.18'/%3E%3Cpath d='M1040 92h8v8h-8z' opacity='.15'/%3E%3Cpath d='M586 680h10v10h-10z' opacity='.13'/%3E%3C/g%3E%3C/svg%3E") !important;
  opacity: 0.78;
}

html[data-theme="dark"] body.crl-home::after,
html[data-theme="dark"] body:not(.crl-home)::after {
  opacity: 0.24;
  mix-blend-mode: screen;
}

body:not(.crl-home) #wrapper,
body.crl-home > .crl-site-header,
body.crl-home > main,
body.crl-home > .crl-site-footer {
  position: relative;
  z-index: 1;
}

body:not(.crl-home) #wrapper,
body:not(.crl-home) #main,
body:not(.crl-home) #main > .inner {
  background: transparent !important;
}

/* ---------- Theme control ---------- */
.caat-brand-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.caat-theme-toggle,
body:not(.crl-home) button.caat-theme-toggle,
body:not(.crl-home) button.caat-theme-toggle:hover,
body:not(.crl-home) button.caat-theme-toggle:focus,
body:not(.crl-home) button.caat-theme-toggle:active {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--caat-border-strong) !important;
  border-radius: 14px !important;
  color: var(--caat-heading) !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  text-transform: none !important;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

.caat-theme-toggle:hover,
body:not(.crl-home) button.caat-theme-toggle:hover {
  color: var(--caat-accent) !important;
  border-color: var(--caat-accent) !important;
  background: transparent !important;
  transform: translateY(-1px) !important;
}

.caat-theme-toggle:focus-visible {
  outline: 3px solid var(--caat-accent-soft) !important;
  outline-offset: 3px;
}

.caat-theme-toggle i {
  width: 1em;
  font-size: 1.4rem !important;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.caat-theme-toggle__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lesson cat icons are 52px, so the lesson toggle matches them exactly. */
body:not(.crl-home) #header .logo .caat-theme-toggle,
body:not(.crl-home) #header .logo button.caat-theme-toggle {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
  margin: 0 2px;
}

body:not(.crl-home) #header .logo .caat-theme-toggle i {
  font-size: 1.5rem !important;
}

/* ---------- Sticky headers ---------- */
body.crl-home .crl-site-header {
  position: sticky !important;
  top: 12px;
  z-index: 1000 !important;
  background: var(--caat-header) !important;
  border-color: var(--caat-border) !important;
  box-shadow: var(--caat-shadow) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

body:not(.crl-home) #header {
  position: sticky !important;
  top: 0;
  z-index: 900 !important;
  min-height: var(--caat-header-height) !important;
  height: var(--caat-header-height) !important;
  border-color: var(--caat-border) !important;
  background: var(--caat-header) !important;
  box-shadow: 0 14px 34px rgba(20, 35, 47, 0.13) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

/* Keep the lesson header and sidebar search strip at the same compact height. */
body:not(.crl-home) #header .logo {
  min-height: var(--caat-header-height) !important;
  height: var(--caat-header-height) !important;
}

body:not(.crl-home) #header .logo a {
  height: var(--caat-header-height) !important;
}

body:not(.crl-home) #sidebar .toggle,
body:not(.crl-home) #sidebar .toggle::before {
  height: var(--caat-header-height) !important;
  line-height: var(--caat-header-height) !important;
}

body:not(.crl-home) #sidebar > .inner > #search {
  height: var(--caat-header-height) !important;
  min-height: var(--caat-header-height) !important;
}

body:not(.crl-home) #sidebar > .inner > #search input {
  height: var(--caat-header-height) !important;
  line-height: var(--caat-header-height) !important;
}

body:not(.crl-home) #search form::before {
  top: 50% !important;
  transform: translateY(-50%) scaleX(-1) !important;
}

body.crl-home .crl-brand img,
body:not(.crl-home) #header .logo img {
  background: var(--caat-surface-soft) !important;
}

html[data-theme="light"] body:not(.crl-home) #main #header .logo a,
html[data-theme="light"] body:not(.crl-home) #main #header .logo a:visited,
html[data-theme="light"] body:not(.crl-home) #main #header .logo a:hover,
html[data-theme="light"] body:not(.crl-home) #main #header .logo a:focus,
html[data-theme="light"] body:not(.crl-home) #main #header .logo a:active,
html[data-theme="dark"] body:not(.crl-home) #main #header .logo a,
html[data-theme="dark"] body:not(.crl-home) #main #header .logo a:visited,
html[data-theme="dark"] body:not(.crl-home) #main #header .logo a:hover,
html[data-theme="dark"] body:not(.crl-home) #main #header .logo a:focus,
html[data-theme="dark"] body:not(.crl-home) #main #header .logo a:active {
  color: var(--caat-heading) !important;
  text-shadow: none !important;
}

/* ---------- Homepage surfaces ---------- */
body.crl-home .crl-hero__content,
body.crl-home .crl-stat,
body.crl-home .crl-section,
body.crl-home .crl-course-card,
body.crl-home .crl-roadmap-card {
  color: var(--caat-text) !important;
  border-color: var(--caat-border) !important;
  background: var(--caat-surface) !important;
  box-shadow: var(--caat-shadow) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

body.crl-home .crl-top-nav a:hover,
body.crl-home .crl-btn--ghost {
  background: var(--caat-surface-soft) !important;
}

body.crl-home .crl-hero h1,
body.crl-home .crl-section h2,
body.crl-home .crl-course-card h3,
body.crl-home .crl-roadmap-card h3,
body.crl-home .crl-stat strong {
  color: var(--caat-heading) !important;
}

body.crl-home .crl-hero__lead,
body.crl-home .crl-section p,
body.crl-home .crl-course-card p,
body.crl-home .crl-roadmap-card p,
body.crl-home .crl-stat span,
body.crl-home .crl-site-footer,
body.crl-home .crl-site-footer p,
body.crl-home .crl-top-nav a {
  color: var(--caat-text-soft) !important;
}

body.crl-home .crl-eyebrow,
body.crl-home .crl-course-card__meta,
body.crl-home .crl-course-card__link,
body.crl-home .crl-roadmap-card--available p {
  color: var(--caat-accent) !important;
}

/* ---------- Lesson cards and typography ---------- */
body:not(.crl-home) .page-heading,
body:not(.crl-home) .simple-post,
body:not(.crl-home) .contact-form,
body:not(.crl-home) .tables,
body:not(.crl-home) .section-heading {
  color: var(--caat-text) !important;
  border-color: var(--caat-border) !important;
  background: var(--caat-surface) !important;
  box-shadow: var(--caat-shadow-small) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

/* Existing styles.css gives these hover selectors a different background.
   In dark mode, keep the section surface exactly unchanged on hover. */
html[data-theme="dark"] body:not(.crl-home) .simple-post:hover,
html[data-theme="dark"] body:not(.crl-home) .page-heading:hover,
html[data-theme="dark"] body:not(.crl-home) .contact-form:hover,
html[data-theme="dark"] body:not(.crl-home) .tables:hover,
html[data-theme="dark"] body:not(.crl-home) .section-heading:hover {
  color: var(--caat-text) !important;
  background: var(--caat-surface) !important;
  box-shadow: var(--caat-shadow-small) !important;
}

body:not(.crl-home) .page-heading h1,
body:not(.crl-home) .page-heading h2,
body:not(.crl-home) .page-heading h3,
body:not(.crl-home) .simple-post h1,
body:not(.crl-home) .simple-post h2,
body:not(.crl-home) .simple-post h3,
body:not(.crl-home) .simple-post h4,
body:not(.crl-home) .simple-post h5,
body:not(.crl-home) .simple-post h6,
body:not(.crl-home) strong,
body:not(.crl-home) label,
body:not(.crl-home) legend {
  color: var(--caat-heading) !important;
}

body:not(.crl-home) .page-heading p,
body:not(.crl-home) .down-content p,
body:not(.crl-home) .simple-post p,
body:not(.crl-home) .simple-post li,
body:not(.crl-home) .right-content p,
body:not(.crl-home) .left-content p,
body:not(.crl-home) figcaption,
body:not(.crl-home) .copyright {
  color: var(--caat-text-soft) !important;
}

body:not(.crl-home) #main a:not(.crl-btn):not(.copy-btn):not(.crl-course-card__link):not(.crl-roadmap-card),
body:not(.crl-home) #main a:visited:not(.crl-btn):not(.copy-btn):not(.crl-course-card__link):not(.crl-roadmap-card) {
  color: var(--caat-link) !important;
  border-bottom-color: var(--caat-border-strong) !important;
}

body:not(.crl-home) #main a:hover:not(.crl-btn):not(.copy-btn):not(.crl-course-card__link):not(.crl-roadmap-card) {
  color: var(--caat-link-hover) !important;
}

body:not(.crl-home) .simple-post h2::before {
  background: var(--caat-accent) !important;
}

body:not(.crl-home) hr {
  border-color: var(--caat-border) !important;
}

body:not(.crl-home) blockquote {
  color: var(--caat-text-soft) !important;
  border-left-color: var(--caat-accent) !important;
  background: var(--caat-surface-soft) !important;
}

/* ---------- Tables and forms ---------- */
body:not(.crl-home) table {
  color: var(--caat-text) !important;
  background: var(--caat-surface-solid) !important;
  border-color: var(--caat-border) !important;
}

body:not(.crl-home) table thead,
body:not(.crl-home) table th {
  color: var(--caat-heading) !important;
  background: var(--caat-surface-soft) !important;
  border-color: var(--caat-border) !important;
}

body:not(.crl-home) table td,
body:not(.crl-home) table tr {
  color: var(--caat-text) !important;
  border-color: var(--caat-border) !important;
  background: transparent !important;
}

body:not(.crl-home) input,
body:not(.crl-home) select,
body:not(.crl-home) textarea {
  color: var(--caat-text) !important;
  border-color: var(--caat-border-strong) !important;
  background: var(--caat-surface-solid) !important;
}

body:not(.crl-home) input::placeholder,
body:not(.crl-home) textarea::placeholder {
  color: var(--caat-text-soft) !important;
}

/* ---------- Highlight.js and code blocks ---------- */
body:not(.crl-home) pre,
body:not(.crl-home) pre code,
body:not(.crl-home) .hljs {
  color: var(--caat-code-text) !important;
  border-color: var(--caat-border) !important;
  background: var(--caat-code-bg) !important;
}

body:not(.crl-home) :not(pre) > code {
  color: var(--caat-link) !important;
  background: var(--caat-inline-code-bg) !important;
  border: 1px solid var(--caat-border) !important;
  border-radius: 6px;
  padding: 0.12em 0.36em;
}

html[data-theme="light"] body:not(.crl-home) .copy-btn {
  color: #334155 !important;
  border-color: rgba(51, 65, 85, 0.18) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 8px 20px rgba(51, 65, 85, 0.12) !important;
}

html[data-theme="light"] body:not(.crl-home) .copy-btn:hover {
  color: #0f172a !important;
  background: #ffffff !important;
}

html[data-theme="dark"] body:not(.crl-home) .copy-btn {
  color: #e5edf7 !important;
  border-color: rgba(226, 232, 240, 0.25) !important;
  background: rgba(15, 23, 42, 0.8) !important;
}

/* Collapse/expand control: follow the same palette as the copy control. */
html[data-theme="light"] body:not(.crl-home) .code-toggle-btn {
  color: #334155 !important;
  border-color: rgba(51, 65, 85, 0.18) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 8px 20px rgba(51, 65, 85, 0.12) !important;
}

html[data-theme="light"] body:not(.crl-home) .code-toggle-btn:hover,
html[data-theme="light"] body:not(.crl-home) .code-toggle-btn:focus {
  color: #0f172a !important;
  border-color: rgba(14, 114, 128, 0.42) !important;
  background: #ffffff !important;
}

html[data-theme="dark"] body:not(.crl-home) .code-toggle-btn {
  color: #e5edf7 !important;
  border-color: rgba(226, 232, 240, 0.25) !important;
  background: rgba(15, 23, 42, 0.8) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] body:not(.crl-home) .code-toggle-btn:hover,
html[data-theme="dark"] body:not(.crl-home) .code-toggle-btn:focus {
  color: #ffffff !important;
  border-color: rgba(101, 208, 220, 0.5) !important;
  background: rgba(30, 41, 59, 0.96) !important;
}

/* The collapsed control bar must toggle with the code theme too. */
body:not(.crl-home) pre.is-code-collapsed {
  color: var(--caat-code-text) !important;
  border-color: var(--caat-border-strong) !important;
  background: var(--caat-code-bg) !important;
  background-color: var(--caat-code-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--caat-border) !important;
}

/* ---------- Previous / next lesson navigation ---------- */
html[data-theme="dark"] body:not(.crl-home) .border-rectangle-button a,
html[data-theme="dark"] body:not(.crl-home) .border-rectangle-button a:visited,
html[data-theme="dark"] body:not(.crl-home) .filled-rectangle-button a,
html[data-theme="dark"] body:not(.crl-home) .filled-rectangle-button a:visited {
  color: #ddf7fa !important;
  border-color: rgba(101, 208, 220, 0.36) !important;
  background: #14222d !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] body:not(.crl-home) .border-rectangle-button a:hover,
html[data-theme="dark"] body:not(.crl-home) .border-rectangle-button a:focus,
html[data-theme="dark"] body:not(.crl-home) .filled-rectangle-button a:hover,
html[data-theme="dark"] body:not(.crl-home) .filled-rectangle-button a:focus {
  color: #ffffff !important;
  border-color: rgba(101, 208, 220, 0.64) !important;
  background: #1a3340 !important;
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.32) !important;
}

/* ---------- Math and Mermaid ---------- */
body:not(.crl-home) h4.mathJax,
body:not(.crl-home) .mathJax {
  color: var(--caat-heading) !important;
  border-color: var(--caat-border) !important;
  background: var(--caat-surface-solid) !important;
}

body:not(.crl-home) .diagram-wrapper,
body:not(.crl-home) .mermaid {
  color: var(--caat-diagram-text) !important;
  border-color: var(--caat-border) !important;
  background: var(--caat-diagram-bg) !important;
  transition: background-color 180ms ease, border-color 180ms ease;
}

body:not(.crl-home) .mermaid svg,
body:not(.crl-home) .diagram-wrapper svg {
  max-width: 100%;
  height: auto;
}

/* ---------- Sidebar ---------- */
body:not(.crl-home) #sidebar {
  color: var(--caat-text) !important;
  border-right-color: var(--caat-border) !important;
  background: var(--caat-sidebar) !important;
}

body:not(.crl-home) #sidebar > .inner {
  scrollbar-color: var(--caat-accent) var(--caat-sidebar-soft) !important;
}

body:not(.crl-home) #sidebar > .inner > #search,
body:not(.crl-home) #sidebar .featured-posts .heading {
  color: var(--caat-text) !important;
  border-color: var(--caat-border) !important;
  background: var(--caat-sidebar-soft) !important;
}

body:not(.crl-home) #sidebar > .inner > #search input,
body:not(.crl-home) #sidebar > .inner > #search input::placeholder,
body:not(.crl-home) #search form::before {
  color: var(--caat-text-soft) !important;
}

/* Explicitly replace the hard-coded cyan/green sidebar palette in light mode. */
body:not(.crl-home) #menu ul li h3 {
  color: var(--caat-sidebar-title) !important;
}

body:not(.crl-home) #menu ul li h4 {
  color: var(--caat-sidebar-subtitle) !important;
}

body:not(.crl-home) #menu ul li h6,
body:not(.crl-home) #sidebar h1,
body:not(.crl-home) #sidebar h2,
body:not(.crl-home) #sidebar strong,
body:not(.crl-home) #menu .opener {
  color: var(--caat-heading) !important;
}

body:not(.crl-home) #sidebar p,
body:not(.crl-home) #sidebar li,
body:not(.crl-home) #sidebar .copyright,
body:not(.crl-home) #menu ul a,
body:not(.crl-home) #menu ul span {
  color: var(--caat-sidebar-item) !important;
}

body:not(.crl-home) #menu ul a,
body:not(.crl-home) #menu ul span {
  margin: 2px 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-radius: 7px !important;
}

body:not(.crl-home) #menu ul a:hover,
body:not(.crl-home) #menu ul span:hover,
body:not(.crl-home) #menu .opener:hover,
body:not(.crl-home) #menu .opener.active {
  color: var(--caat-sidebar-active-text) !important;
  background: var(--caat-accent-soft) !important;
  border-radius: 7px !important;
  padding-left: 10px !important;
}

body:not(.crl-home) #menu ul li a.active-lesson,
body:not(.crl-home) #menu ul li a.active-lesson:hover {
  color: var(--caat-sidebar-active-text) !important;
  background: var(--caat-sidebar-active-bg) !important;
  border: 1px solid var(--caat-border) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  padding-left: 14px !important;
}

body:not(.crl-home) #menu ul a.opener::before,
body:not(.crl-home) #menu ul span.opener::before {
  color: var(--caat-sidebar-title) !important;
}

body:not(.crl-home) #menu > ul > li {
  border-top-color: var(--caat-border) !important;
}

body:not(.crl-home) #sidebar .toggle,
body:not(.crl-home) #sidebar .toggle::before {
  color: var(--caat-heading) !important;
}

/* Similar Tutorials */
body:not(.crl-home) .featured-posts,
body:not(.crl-home) .featured-posts .featured-item {
  border-color: var(--caat-border) !important;
  background: var(--caat-sidebar-soft) !important;
}

body:not(.crl-home) .featured-posts .heading h2 {
  color: var(--caat-heading) !important;
  border-bottom-color: var(--caat-border) !important;
}

body:not(.crl-home) .featured-posts .featured-item p,
body:not(.crl-home) .featured-posts p {
  width: 100%;
  color: var(--caat-text-soft) !important;
  text-align: center !important;
}

html[data-theme="light"] body:not(.crl-home) .featured-posts .owl-carousel button.owl-dot span {
  background: rgba(51, 78, 92, 0.28) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body:not(.crl-home) .featured-posts .owl-carousel button.owl-dot.active span {
  background: var(--caat-accent) !important;
  box-shadow: none !important;
}

/* Sidebar author/profile card */
body:not(.crl-home) #footer {
  margin: 28px 0 30px !important;
  padding: 18px !important;
  border: 1px solid var(--caat-border) !important;
  border-radius: 18px !important;
  background: var(--caat-sidebar-soft) !important;
  box-shadow: var(--caat-shadow-small) !important;
}

body:not(.crl-home) #footer > a {
  margin-top: 0 !important;
}

body:not(.crl-home) #footer img {
  border: 1px solid var(--caat-border-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--caat-shadow-small) !important;
}

body:not(.crl-home) #footer .copyright::before {
  color: var(--caat-heading) !important;
}

body:not(.crl-home) #footer::after {
  margin-bottom: 0 !important;
  color: var(--caat-text-soft) !important;
}

/* ---------- Responsive behaviour ---------- */
@media (max-width: 845px) {
  body:not(.crl-home) #header .logo {
    gap: 9px !important;
  }

  body:not(.crl-home) #header .logo .caat-theme-toggle,
  body:not(.crl-home) #header .logo button.caat-theme-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }

  body:not(.crl-home) #header .logo .caat-theme-toggle i {
    font-size: 1.32rem !important;
  }
}

@media (max-width: 680px) {
  body.crl-home .crl-site-header {
    align-items: flex-start;
  }

  .caat-brand-controls {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 520px) {
  body:not(.crl-home) #header .logo a {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.crl-home::before,
  body:not(.crl-home)::before {
    background-size: 820px 560px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caat-theme-toggle,
  .caat-theme-toggle *,
  body:not(.crl-home) .diagram-wrapper,
  body:not(.crl-home) .mermaid {
    transition: none !important;
  }
}

/* =========================================================
   v4 micro-fix: anchor the search icon to the search strip
   ========================================================= */
body:not(.crl-home) #sidebar > .inner > #search form {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: var(--caat-header-height) !important;
  margin: 0 !important;
}

body:not(.crl-home) #sidebar > .inner > #search form::before {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) scaleX(-1) !important;
}

/* CaaT homepage light-brand hover fix: start */

html[data-theme="light"] body.crl-home .crl-brand:hover,
html[data-theme="light"] body.crl-home .crl-brand:hover span,
html[data-theme="light"] body.crl-home .crl-brand:focus-visible,
html[data-theme="light"] body.crl-home .crl-brand:focus-visible span {
  color: #0f172a !important;
  text-shadow: none !important;
}

/* CaaT homepage light-brand hover fix: end */