/* ============================================================
   FONTS
   Google Fonts import — self-host in production
   ============================================================ */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-Italic.woff2') format('woff2');
}

/* ============================================================
   THEMES (Base16 semantic variables)

   --bg          page background
   --bg-alt      sidebar, table hover, code blocks
   --border      dividers and borders
   --muted       secondary text, labels
   --text        body text
   --text-em     emphasized / bright text
   --link        hyperlinks
   --hl-1        site title, h1  (warm: orange)
   --hl-2        active nav, info labels  (green)
   --hl-3        inline code, special  (pink/magenta)
   --hl-4        h2, [text] resource tag  (yellow)
   ============================================================ */

:root,
[data-theme="solarized-dark"] {
  --bg:       #002b36;
  --bg-alt:   #073642;
  --border:   #586e75;
  --muted:    #657b83;
  --text:     #839496;
  --text-em:  #eee8d5;
  --link:     #268bd2;
  --cyan:     #2aa198;
  --hl-1:     #cb4b16;
  --hl-2:     #859900;
  --hl-3:     #6c71c4;
  --hl-4:     #b58900;
  --annotation: #dc322f;
}

[data-theme="solarized-light"] {
  --bg:       #fdf6e3;
  --bg-alt:   #eee8d5;
  --border:   #93a1a1;
  --muted:    #839496;
  --text:     #657b83;
  --text-em:  #073642;
  --link:     #268bd2;
  --cyan:     #2aa198;
  --hl-1:     #cb4b16;
  --hl-2:     #859900;
  --hl-3:     #6c71c4;
  --hl-4:     #b58900;
  --annotation: #dc322f;
}

[data-theme="gruvbox-dark"] {
  --bg:       #282828;
  --bg-alt:   #3c3836;
  --border:   #504945;
  --muted:    #7c6f64;
  --text:     #ebdbb2;
  --text-em:  #fbf1c7;
  --link:     #83a598;
  --cyan:     #8ec07c;
  --hl-1:     #fe8019;
  --hl-2:     #b8bb26;
  --hl-3:     #d3869b;
  --hl-4:     #fabd2f;
  --annotation: #cc241d;
}

[data-theme="gruvbox-light"] {
  --bg:       #fbf1c7;
  --bg-alt:   #ebdbb2;
  --border:   #d5c4a1;
  --muted:    #a89984;
  --text:     #3c3836;
  --text-em:  #282828;
  --link:     #076678;
  --cyan:     #427b58;
  --hl-1:     #af3a03;
  --hl-2:     #79740e;
  --hl-3:     #8f3f71;
  --hl-4:     #d79921;
  --annotation: #cc241d;
}

[data-theme="dracula"] {
  --bg:       #282a36;
  --bg-alt:   #44475a;
  --border:   #6272a4;
  --muted:    #6272a4;
  --text:     #f8f8f2;
  --text-em:  #ffffff;
  --link:     #8be9fd;
  --cyan:     #8be9fd;
  --hl-1:     #ffb86c;
  --hl-2:     #50fa7b;
  --hl-3:     #bd93f9;
  --hl-4:     #f1fa8c;
  --annotation: #ff5555;
}

[data-theme="nord"] {
  --bg:       #2e3440;
  --bg-alt:   #3b4252;
  --border:   #434c5e;
  --muted:    #4c566a;
  --text:     #d8dee9;
  --text-em:  #eceff4;
  --link:     #88c0d0;
  --cyan:     #88c0d0;
  --hl-1:     #d08770;
  --hl-2:     #a3be8c;
  --hl-3:     #b48ead;
  --hl-4:     #ebcb8b;
  --annotation: #bf616a;
}

[data-theme="tokyo-night"] {
  --bg:       #1a1b26;
  --bg-alt:   #24283b;
  --border:   #414868;
  --muted:    #565f89;
  --text:     #a9b1d6;
  --text-em:  #c0caf5;
  --link:     #7aa2f7;
  --cyan:     #2ac3de;
  --hl-1:     #ff9e64;
  --hl-2:     #9ece6a;
  --hl-3:     #bb9af7;
  --hl-4:     #e0af68;
  --annotation: #f7768e;
}

[data-theme="catppuccin-mocha"] {
  --bg:       #1e1e2e;
  --bg-alt:   #313244;
  --border:   #45475a;
  --muted:    #6c7086;
  --text:     #cdd6f4;
  --text-em:  #b4befe;
  --link:     #89b4fa;
  --cyan:     #89dceb;
  --hl-1:     #fab387;
  --hl-2:     #a6e3a1;
  --hl-3:     #cba6f7;
  --hl-4:     #f9e2af;
  --annotation: #f38ba8;
}

[data-theme="one-dark"] {
  --bg:       #282c34;
  --bg-alt:   #21252b;
  --border:   #3e4451;
  --muted:    #5c6370;
  --text:     #abb2bf;
  --text-em:  #dfe4ed;
  --link:     #61afef;
  --cyan:     #56b6c2;
  --hl-1:     #d19a66;
  --hl-2:     #98c379;
  --hl-3:     #c678dd;
  --hl-4:     #e5c07b;
  --annotation: #e06c75;
}

[data-theme="catppuccin-latte"] {
  --bg:       #eff1f5;
  --bg-alt:   #e6e9ef;
  --border:   #ccd0da;
  --muted:    #9ca0b0;
  --text:     #4c4f69;
  --text-em:  #3c3f5a;
  --link:     #1e66f5;
  --cyan:     #04a5e5;
  --hl-1:     #fe640b;
  --hl-2:     #40a02b;
  --hl-3:     #8839ef;
  --hl-4:     #df8e1d;
  --annotation: #d20f39;
}

[data-theme="monokai"] {
  --bg:       #272822;
  --bg-alt:   #3e3d32;
  --border:   #49483e;
  --muted:    #75715e;
  --text:     #f8f8f2;
  --text-em:  #ffffff;
  --link:     #66d9e8;
  --cyan:     #66d9e8;
  --hl-1:     #fd971f;
  --hl-2:     #a6e22e;
  --hl-3:     #ae81ff;
  --hl-4:     #e6db74;
  --annotation: #f92672;
}

[data-theme="rose-pine"] {
  --bg:       #191724;
  --bg-alt:   #1f1d2e;
  --border:   #26233a;
  --muted:    #6e6a86;
  --text:     #e0def4;
  --text-em:  #ffffff;
  --link:     #9ccfd8;
  --cyan:     #9ccfd8;
  --hl-1:     #f6c177;
  --hl-2:     #9ccfd8;
  --hl-3:     #c4a7e7;
  --hl-4:     #31748f;
  --annotation: #eb6f92;
}

[data-theme="kanagawa"] {
  --bg:       #1f1f28;
  --bg-alt:   #2a2a37;
  --border:   #363646;
  --muted:    #727169;
  --text:     #dcd7ba;
  --text-em:  #c8c093;
  --link:     #7e9cd8;
  --cyan:     #6a9589;
  --hl-1:     #ffa066;
  --hl-2:     #76946a;
  --hl-3:     #957fb8;
  --hl-4:     #c0a36e;
  --annotation: #c34043;
}

[data-theme="everforest-dark"] {
  --bg:       #2d353b;
  --bg-alt:   #343f44;
  --border:   #3d484d;
  --muted:    #859289;
  --text:     #d3c6aa;
  --text-em:  #e6d6ac;
  --link:     #7fbbb3;
  --cyan:     #7fbbb3;
  --hl-1:     #e69875;
  --hl-2:     #a7c080;
  --hl-3:     #d699b6;
  --hl-4:     #dbbc7f;
  --annotation: #e67e80;
}

[data-theme="rose-pine-dawn"] {
  --bg:       #faf4ed;
  --bg-alt:   #f2e9e1;
  --border:   #dfdad9;
  --muted:    #9893a5;
  --text:     #575279;
  --text-em:  #3d3b54;
  --link:     #286983;
  --cyan:     #56949f;
  --hl-1:     #ea9d34;
  --hl-2:     #56949f;
  --hl-3:     #907aa9;
  --hl-4:     #d7827a;
  --annotation: #b4637a;
}

[data-theme="ayu-light"] {
  --bg:       #fafafa;
  --bg-alt:   #f3f4f5;
  --border:   #e7e8e9;
  --muted:    #abb0b6;
  --text:     #5c6166;
  --text-em:  #4b4f54;
  --link:     #55b4d4;
  --cyan:     #55b4d4;
  --hl-1:     #fa8d3e;
  --hl-2:     #6cbf43;
  --hl-3:     #a37acc;
  --hl-4:     #f2ae49;
  --annotation: #f07171;
}

[data-theme="everforest-light"] {
  --bg:       #fdf6e3;
  --bg-alt:   #edeada;
  --border:   #e0dcc7;
  --muted:    #a6b0a0;
  --text:     #5c6a72;
  --text-em:  #4a5561;
  --link:     #3a94a5;
  --cyan:     #3a94a5;
  --hl-1:     #f57d26;
  --hl-2:     #8da101;
  --hl-3:     #df69ba;
  --hl-4:     #dfa000;
  --annotation: #e67e80;
}

[data-theme="phd"] {
  --bg:       #061229;
  --bg-alt:   #2a3448;
  --border:   #4d5666;
  --muted:    #717885;
  --text:     #b8bbc2;
  --text-em:  #dbdde0;
  --link:     #5299bf;
  --cyan:     #5299bf;
  --hl-1:     #d07346;
  --hl-2:     #99bf52;
  --hl-3:     #9989cc;
  --hl-4:     #c4b28a;
  --annotation: #d07346;
}

[data-theme="ayu-dark"] {
  --bg:       #0d1017;
  --bg-alt:   #131721;
  --border:   #1d2433;
  --muted:    #3d5273;
  --text:     #bfbdb6;
  --text-em:  #e6e1cf;
  --link:     #39bae6;
  --cyan:     #39bae6;
  --hl-1:     #f29718;
  --hl-2:     #7fd962;
  --hl-3:     #d2a6ff;
  --hl-4:     #e6b450;
  --annotation: #f07178;
}

[data-theme="oxocarbon"] {
  --bg:       #161616;
  --bg-alt:   #1c1c1c;
  --border:   #262626;
  --muted:    #525252;
  --text:     #c6c6c6;
  --text-em:  #f4f4f4;
  --link:     #78a9ff;
  --cyan:     #3ddbd9;
  --hl-1:     #ff7eb6;
  --hl-2:     #42be65;
  --hl-3:     #be95ff;
  --hl-4:     #fddc69;
  --annotation: #fa4d56;
}

[data-theme="nightfly"] {
  --bg:       #011627;
  --bg-alt:   #01223a;
  --border:   #0b3955;
  --muted:    #1d3b53;
  --text:     #acb4c2;
  --text-em:  #d6deeb;
  --link:     #82aaff;
  --cyan:     #21c7a8;
  --hl-1:     #ffcb8b;
  --hl-2:     #c3e88d;
  --hl-3:     #c792ea;
  --hl-4:     #ffe45e;
  --annotation: #fc514e;
}

/* ============================================================
   RESET + BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--bg-alt);
  color: var(--text-em);
}

:focus-visible {
  outline: 2px solid var(--hl-2);
  outline-offset: 3px;
  border-radius: 2px;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg);
}

::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

html {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 17px;
  line-height: 1.6;
  background-color: var(--bg);
  color: var(--text);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   GLOBAL VARIABLES
   ============================================================ */

:root {
  --topbar-h:  4rem;
  --sidebar-w: 300px;
}

/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem 0 1rem;
  gap: 1rem;
}

.topbar-site {
  color: var(--hl-1);
  text-decoration: none;
  font-size: 1.75rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-site:hover {
  text-decoration: none;
  color: var(--hl-1);
}

.topbar-nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  align-items: center;
}

.topbar-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 1.3rem;
  white-space: nowrap;
}

.topbar-nav a::before { content: '['; color: transparent; }
.topbar-nav a::after  { content: ']'; color: transparent; }

.topbar-nav a:hover,
.topbar-nav a.active {
  color: var(--hl-2);
  text-decoration: none;
}

.topbar-nav a:hover::before,
.topbar-nav a:hover::after,
.topbar-nav a.active::before,
.topbar-nav a.active::after {
  color: var(--hl-2);
}

.theme-icons {
  display: none; /* desktop uses sidebar footer; shown on mobile */
  gap: 0.25rem;
  align-items: center;
  flex-shrink: 0;
}

.theme-icon {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.7rem;
  line-height: 1;
  padding: 0.1rem 0.15rem;
  cursor: pointer;
  flex-shrink: 0;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
  transition: color 0.15s, text-shadow 0.2s;
}

.theme-icon:hover {
  color: var(--text-em);
  text-shadow: 0 0 10px currentColor;
}

.theme-icon.active {
  color: var(--hl-2);
  text-shadow: 0 0 6px currentColor;
}

.theme-icon.active:hover {
  text-shadow: 0 0 12px currentColor;
}

/* ============================================================
   LAYOUT: SPLIT  (all pages)

   Sticky sidebar on the left, scrolling content on the right.
   ============================================================ */

.page-body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  align-items: start;
  position: relative;
}

.page-body::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--sidebar-w);
  bottom: 0;
  width: 1px;
  background: var(--border);
  pointer-events: none;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.page-sidebar {
  padding: 1.5rem 1rem 0;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-footer {
  margin-top: auto;
  padding: 1rem 0 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.sidebar-title {
  color: var(--text-em);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  white-space: nowrap;
}

.sidebar-subtitle {
  color: var(--text-em);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.sidebar-term {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.1rem;
}

.sidebar-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.85rem 0;
}

.sidebar-block {
  margin-bottom: 0.75rem;
}

.sidebar-label {
  color: var(--hl-2);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}

.sidebar-value {
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.4;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.sidebar-link {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.2rem 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-link::before {
  content: '➜ ';
  white-space: pre;
  color: transparent;
}

.sidebar-link:hover {
  color: var(--hl-2);
  text-decoration: none;
}

.sidebar-link.active {
  color: var(--hl-2);
  font-weight: 700;
}

.sidebar-link.active::before {
  color: var(--hl-2);
}

.sidebar-sub-topic {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.1rem 0 0.1rem 1.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-subnav {
  padding-left: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin-top: 0.05rem;
}

/* ============================================================
   CONTENT
   ============================================================ */

.page-content {
  padding: 1.25rem 2.5rem;
  min-width: 0;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1 {
  color: var(--hl-1);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

h2 {
  color: var(--hl-4);
  font-size: 1.3rem;
  font-weight: 400;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

h3 {
  color: var(--text-em);
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

p {
  margin-bottom: 1em;
  color: var(--text);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  color: var(--text-em);
}

.info-block {
  border-left: 2px solid var(--border);
  padding-left: 1rem;
  margin-bottom: 1.75rem;
}

.info-row {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.35rem;
  align-items: baseline;
}

.info-label {
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  min-width: 4rem;
  flex-shrink: 0;
}

.info-value {
  font-size: 0.9rem;
  color: var(--text-em);
}

code {
  color: var(--hl-3);
  font-weight: 700;
}

ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1em;
}

li {
  margin-bottom: 0.3em;
}

/* ============================================================
   TABLE  (course schedule)
   ============================================================ */

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

th {
  color: var(--hl-2);
  text-align: left;
  padding: 0.4rem 1.5rem 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  white-space: nowrap;
}

td {
  padding: 0.1rem 1.5rem 0.1rem 0;
  vertical-align: top;
  color: var(--text);
}

tr:hover td {
  background: var(--bg-alt);
}

.schedule tr:hover td.week {
  background: transparent;
}

tr.divider td {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

td a {
  color: var(--link);
}

/* Resource tags */
.resource {
  display: inline-block;
  text-decoration: none;
  font-size: 0.8rem;
  margin-right: 0.3rem;
  white-space: nowrap;
}

.resource:hover {
  text-decoration: underline;
}

.resource--slides      { color: var(--hl-3); }
.resource--slides-plus { color: var(--hl-3); }
.resource--notes       { color: var(--hl-3); }
.resource--notes-plus  { color: var(--hl-3); }
.resource--video       { color: var(--link); }
.resource--note        { color: var(--hl-3); }
.resource--pset        { color: var(--hl-2); }
.resource--key         { color: var(--annotation); }
.resource--calc        { color: var(--hl-1); }
.resource--text        { color: var(--hl-4); }
.resource--info        { color: var(--muted); }
.resource--pdf         { color: var(--link); }

/* Schedule table */
.schedule td:first-child,
.schedule th:first-child {
  white-space: nowrap;
  padding-right: 1em;
  width: 1px;
}

.schedule td.week {
  color: var(--muted);
  vertical-align: top;
}

.schedule-annotation {
  font-style: italic;
  color: var(--annotation);
}

.has-tooltip {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--hl-4);
  text-underline-offset: 3px;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 3px);
  background: var(--bg-alt);
  border: 1px solid var(--hl-4);
  color: var(--hl-4);
  font-weight: bold;
  padding: 0.2em 0.55em;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 10;
}

.has-tooltip:hover::after {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}

/* Calendar */
.calendar-iframe {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border: none;
  display: block;
}

/* CV */
.cv-table {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 2rem;
  width: auto;
}
.cv-years {
  width: 1%;
  color: var(--hl-2);
  white-space: nowrap;
  padding-right: 1em;
  vertical-align: top;
  font-size: 0.85rem;
  padding-top: 0.15em;
  border-right: 1px solid var(--border);
}
.cv-detail {
  vertical-align: top;
  padding-left: 1em;
}
.cv-detail strong {
  color: var(--text-em);
}
.cv-spacer { height: 1.25rem; }
.cv-table tr:hover td { background: none; }
.cv-org {
  color: var(--text-dim, var(--text));
  font-size: 0.9rem;
}

/* Past Exams table */
.past-exams {
  border-collapse: collapse;
  font-size: 0.88rem;
  margin-top: 0.5rem;
  width: auto;
}

.past-exams th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hl-2);
  padding: 0 2em 0.5rem 0;
}


.past-exams td {
  padding: 0.45rem 3em 0.45rem 0;
  vertical-align: middle;
}

.past-exams-semester {
  white-space: nowrap;
  color: var(--text-em);
}

.past-exams-entry {
  white-space: nowrap;
}

.past-exams tbody tr:nth-child(even) td { background: var(--bg-alt); }
.past-exams tr:hover td { background: none; }

.schedule {
  width: auto;
}

.schedule td.topic {
  padding-right: 0;
  position: relative;
}

.schedule td.resources,
.schedule th.resources {
  padding-left: 2em;
  text-align: left;
}

.schedule td.debut,
.schedule th.debut {
  padding-left: 2em;
  text-align: left;
  font-weight: bold;
  color: #cc0000;
}

.schedule tr.week-gap td {
  padding: 0.5rem 0 0;
}

.schedule tr.week-gap:hover td {
  background: none;
}

.annotation {
  color: var(--annotation);
  font-weight: 700;
}

/* Schedule page two-column layout */
.schedule-page {
  display: grid;
  grid-template-columns: 1fr 17rem;
  gap: 3rem;
  align-items: start;
}

.schedule-main {
  min-width: 0;
}

/* Announcements panel */
.announcement {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 0.6rem;
  border-left: 2px solid var(--border);
  padding-left: 0.75rem;
}

.announcement-title {
  display: block;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--muted);
}

.announcement-text {
  color: var(--text-em);
}

.announcement--warn {
  border-left-color: var(--hl-4);
}

.announcement--warn .announcement-title {
  color: var(--hl-4);
}

.announcement--urgent {
  border-left-color: var(--annotation);
}

.announcement--urgent .announcement-title {
  color: var(--annotation);
}

.announcements {
  position: sticky;
  top: calc(var(--topbar-h) + 1.5rem);
}

@media (max-width: 860px) {
  .schedule-page {
    grid-template-columns: 1fr;
  }
  .announcements {
    display: none;
  }
}

/* ============================================================
   THEME PICKER
   ============================================================ */

.theme-picker-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.1rem 0.2rem;
  cursor: pointer;
  margin-left: 0.1rem;
  transition: color 0.15s;
  font-family: 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
}

.theme-picker-btn--top {
  display: none;
}

.theme-picker-btn:hover {
  color: var(--text-em);
}

.theme-picker {
  display: none;
  position: fixed;
  left: 0;
  width: var(--sidebar-w);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 0.75rem 1rem;
  z-index: 98;
  flex-direction: column;
  gap: 0.6rem;
}

.theme-picker.open {
  display: flex;
}

.theme-picker-group {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.theme-picker-label {
  color: var(--hl-2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.2rem;
}

.theme-picker-item {
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
  padding: 0.15rem 0;
  cursor: pointer;
}

.theme-picker-item::before {
  content: '  ';
  white-space: pre;
}

.theme-picker-item:hover {
  color: var(--hl-2);
}

.theme-picker-item.active {
  color: var(--hl-2);
  font-weight: 700;
}

.theme-picker-item.active::before {
  content: '➜ ';
}

/* ============================================================
   MOBILE
   ============================================================ */

/* ============================================================
   HAMBURGER + NAV DRAWER
   ============================================================ */

.hamburger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger:hover {
  border-color: var(--text-em);
  color: var(--text-em);
}

.nav-drawer {
  display: none;
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  width: 220px;
  background: var(--bg-alt);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1rem;
  z-index: 99;
  flex-direction: column;
  gap: 0.75rem;
}

.nav-drawer.open {
  display: flex;
}

.nav-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-drawer-label {
  color: var(--hl-2);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.2rem;
}

.nav-drawer a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.15rem 0;
  display: block;
}

.nav-drawer a:hover {
  color: var(--hl-2);
  text-decoration: none;
}

.nav-drawer a.active {
  color: var(--hl-2);
}

.nav-drawer-text {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.1rem 0;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

  /* Topbar: shrink height and fonts, hide course nav links */
  :root {
    --topbar-h: 3rem;
  }

  .topbar {
    padding: 0 1rem;
    gap: 0.75rem;
  }

  .topbar-site {
    font-size: 1.3rem;
  }

  .topbar-nav {
    display: none;
  }

  .theme-icons {
    display: flex;
  }

  .theme-picker-btn--top {
    display: inline-block;
  }

  .theme-picker {
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  .hamburger {
    display: block;
  }

  .sidebar-footer {
    display: none;
  }

  /* Layout: single column, sidebar hidden */
  .page-body {
    grid-template-columns: 1fr;
  }

  .page-body::after {
    display: none;
  }

  .page-sidebar {
    display: none;
  }

  /* Content */
  .page-content {
    padding: 1.5rem 1rem;
  }

  /* Tables: horizontal scroll rather than overflow */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Schedule: stacked layout instead of horizontal scroll */
  .schedule {
    overflow-x: visible;
  }

  .schedule thead { display: none; }

  .schedule tr,
  .schedule td,
  .schedule th {
    display: block;
  }

  .schedule tr.week-gap { display: none; }
  .schedule tr:hover td { background: none; }

  .schedule td {
    padding: 0;
    white-space: normal;
  }

  .schedule td:first-child {
    width: auto;
    white-space: normal;
  }

  .schedule td:first-child:empty { display: none; }

  .schedule td.week {
    padding-top: 1.25rem;
    padding-bottom: 0.1rem;
    font-size: 0.8rem;
  }

  .schedule td:nth-child(2) {
    padding: 0 0 0.1rem;
  }

  .schedule td:nth-child(3) {
    padding: 0 0 0.4rem;
  }
}

@media (max-width: 480px) {
  .topbar-site {
    font-size: 1.2rem;
  }
}

/* ============================================================
   SAGECELL
   ============================================================ */

.compute {
  margin: 1.25rem 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

/* CodeMirror editor */
.compute .CodeMirror {
  background: var(--bg-alt) !important;
  color: var(--text) !important;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 0.9rem !important;
  padding: 0.25rem 0 !important;
  height: auto !important;
}

.compute .CodeMirror-scroll {
  background: var(--bg-alt) !important;
  min-height: unset !important;
}

.compute .CodeMirror-lines {
  padding: 0.5rem 0 !important;
}

.compute .CodeMirror-gutters {
  background: var(--bg-alt) !important;
  border-right: 1px solid var(--border) !important;
}

.compute .CodeMirror-linenumber {
  color: var(--muted) !important;
}

/* Hide sagecell UI chrome we don't need */
.compute .sagecell_options,
.compute .sagecell_fullScreen {
  display: none !important;
}

/* Evaluate button */
.sagecell_evalButton {
  display: inline-block !important;
  margin: 0.5rem 0.75rem !important;
  padding: 0.2rem 0.75rem !important;
  background: var(--bg) !important;
  color: var(--hl-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}

.sagecell_evalButton:hover {
  background: var(--bg-alt) !important;
}

/* Output area */
.sagecell_output {
  border-top: 1px solid var(--border) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.9rem !important;
}

/* CodeMirror syntax highlighting mapped to theme palette */
.compute .cm-keyword    { color: var(--hl-3) !important; }
.compute .cm-string,
.compute .cm-string-2   { color: var(--hl-2) !important; }
.compute .cm-number     { color: var(--hl-1) !important; }
.compute .cm-comment    { color: var(--muted) !important; font-style: italic !important; }
.compute .cm-def        { color: var(--link) !important; }
.compute .cm-builtin    { color: var(--hl-4) !important; }
.compute .cm-atom       { color: var(--hl-1) !important; }
.compute .cm-operator   { color: var(--text-em) !important; }
.compute .cm-variable   { color: var(--text) !important; }
.compute .cm-variable-2 { color: var(--text-em) !important; }
.compute .cm-meta       { color: var(--muted) !important; }
.compute .cm-error      { color: var(--annotation) !important; }