/* ../../../../packages/design-system/src/colors.css */
:root {
  --color-black: #000;
  --color-white: #fff;
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);
  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-300: oklch(83.7% 0.128 66.29);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-orange-800: oklch(47% 0.157 37.304);
  --color-orange-900: oklch(40.8% 0.123 38.172);
  --color-orange-950: oklch(26.6% 0.079 36.259);
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
  --color-lime-50: oklch(98.6% 0.031 120.757);
  --color-lime-100: oklch(96.7% 0.067 122.328);
  --color-lime-200: oklch(93.8% 0.127 124.321);
  --color-lime-300: oklch(89.7% 0.196 126.665);
  --color-lime-400: oklch(84.1% 0.238 128.85);
  --color-lime-500: oklch(76.8% 0.233 130.85);
  --color-lime-600: oklch(64.8% 0.2 131.684);
  --color-lime-700: oklch(53.2% 0.157 131.589);
  --color-lime-800: oklch(45.3% 0.124 130.933);
  --color-lime-900: oklch(40.5% 0.101 131.063);
  --color-lime-950: oklch(27.4% 0.072 132.109);
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-900: oklch(39.3% 0.095 152.535);
  --color-green-950: oklch(26.6% 0.065 152.934);
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-400: oklch(76.5% 0.177 163.223);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-emerald-900: oklch(37.8% 0.077 168.94);
  --color-emerald-950: oklch(26.2% 0.051 172.552);
  --color-teal-50: oklch(98.4% 0.014 180.72);
  --color-teal-100: oklch(95.3% 0.051 180.801);
  --color-teal-200: oklch(91% 0.096 180.426);
  --color-teal-300: oklch(85.5% 0.138 181.071);
  --color-teal-400: oklch(77.7% 0.152 181.912);
  --color-teal-500: oklch(70.4% 0.14 182.503);
  --color-teal-600: oklch(60% 0.118 184.704);
  --color-teal-700: oklch(51.1% 0.096 186.391);
  --color-teal-800: oklch(43.7% 0.078 188.216);
  --color-teal-900: oklch(38.6% 0.063 188.416);
  --color-teal-950: oklch(27.7% 0.046 192.524);
  --color-cyan-50: oklch(98.4% 0.019 200.873);
  --color-cyan-100: oklch(95.6% 0.045 203.388);
  --color-cyan-200: oklch(91.7% 0.08 205.041);
  --color-cyan-300: oklch(86.5% 0.127 207.078);
  --color-cyan-400: oklch(78.9% 0.154 211.53);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-cyan-600: oklch(60.9% 0.126 221.723);
  --color-cyan-700: oklch(52% 0.105 223.128);
  --color-cyan-800: oklch(45% 0.085 224.283);
  --color-cyan-900: oklch(39.8% 0.07 227.392);
  --color-cyan-950: oklch(30.2% 0.056 229.695);
  --color-sky-50: oklch(97.7% 0.013 236.62);
  --color-sky-100: oklch(95.1% 0.026 236.824);
  --color-sky-200: oklch(90.1% 0.058 230.902);
  --color-sky-300: oklch(82.8% 0.111 230.318);
  --color-sky-400: oklch(74.6% 0.16 232.661);
  --color-sky-500: oklch(68.5% 0.169 237.323);
  --color-sky-600: oklch(58.8% 0.158 241.966);
  --color-sky-700: oklch(50% 0.134 242.749);
  --color-sky-800: oklch(44.3% 0.11 240.79);
  --color-sky-900: oklch(39.1% 0.09 240.876);
  --color-sky-950: oklch(29.3% 0.066 243.157);
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);
  --color-indigo-50: oklch(96.2% 0.018 272.314);
  --color-indigo-100: oklch(93% 0.034 272.788);
  --color-indigo-200: oklch(87% 0.065 274.039);
  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-indigo-400: oklch(67.3% 0.182 276.935);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --color-indigo-700: oklch(45.7% 0.24 277.023);
  --color-indigo-800: oklch(39.8% 0.195 277.366);
  --color-indigo-900: oklch(35.9% 0.144 278.697);
  --color-indigo-950: oklch(25.7% 0.09 281.288);
  --color-violet-50: oklch(96.9% 0.016 293.756);
  --color-violet-100: oklch(94.3% 0.029 294.588);
  --color-violet-200: oklch(89.4% 0.057 293.283);
  --color-violet-300: oklch(81.1% 0.111 293.571);
  --color-violet-400: oklch(70.2% 0.183 293.541);
  --color-violet-500: oklch(60.6% 0.25 292.717);
  --color-violet-600: oklch(54.1% 0.281 293.009);
  --color-violet-700: oklch(49.1% 0.27 292.581);
  --color-violet-800: oklch(43.2% 0.232 292.759);
  --color-violet-900: oklch(38% 0.189 293.745);
  --color-violet-950: oklch(28.3% 0.141 291.089);
  --color-purple-50: oklch(97.7% 0.014 308.299);
  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-200: oklch(90.2% 0.063 306.703);
  --color-purple-300: oklch(82.7% 0.119 306.383);
  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-500: oklch(62.7% 0.265 303.9);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-purple-700: oklch(49.6% 0.265 301.924);
  --color-purple-800: oklch(43.8% 0.218 303.724);
  --color-purple-900: oklch(38.1% 0.176 304.987);
  --color-purple-950: oklch(29.1% 0.149 302.717);
  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
  --color-fuchsia-400: oklch(74% 0.238 322.16);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
  --color-pink-50: oklch(97.1% 0.014 343.198);
  --color-pink-100: oklch(94.8% 0.028 342.258);
  --color-pink-200: oklch(89.9% 0.061 343.231);
  --color-pink-300: oklch(82.3% 0.12 346.018);
  --color-pink-400: oklch(71.8% 0.202 349.761);
  --color-pink-500: oklch(65.6% 0.241 354.308);
  --color-pink-600: oklch(59.2% 0.249 0.584);
  --color-pink-700: oklch(52.5% 0.223 3.958);
  --color-pink-800: oklch(45.9% 0.187 3.815);
  --color-pink-900: oklch(40.8% 0.153 2.432);
  --color-pink-950: oklch(28.4% 0.109 3.907);
  --color-rose-50: oklch(96.9% 0.015 12.422);
  --color-rose-100: oklch(94.1% 0.03 12.58);
  --color-rose-200: oklch(89.2% 0.058 10.001);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-rose-400: oklch(71.2% 0.194 13.428);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-rose-700: oklch(51.4% 0.222 16.935);
  --color-rose-800: oklch(45.5% 0.188 13.697);
  --color-rose-900: oklch(41% 0.159 10.272);
  --color-rose-950: oklch(27.1% 0.105 12.094);
  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-slate-950: oklch(12.9% 0.042 264.695);
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);
  --color-zinc-50: oklch(98.5% 0 0);
  --color-zinc-100: oklch(96.7% 0.001 286.375);
  --color-zinc-200: oklch(92% 0.004 286.32);
  --color-zinc-300: oklch(87.1% 0.006 286.286);
  --color-zinc-400: oklch(70.5% 0.015 286.067);
  --color-zinc-500: oklch(55.2% 0.016 285.938);
  --color-zinc-600: oklch(44.2% 0.017 285.786);
  --color-zinc-700: oklch(37% 0.013 285.805);
  --color-zinc-800: oklch(27.4% 0.006 286.033);
  --color-zinc-900: oklch(21% 0.006 285.885);
  --color-zinc-950: oklch(14.1% 0.005 285.823);
  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);
  --color-stone-50: oklch(98.5% 0.001 106.423);
  --color-stone-100: oklch(97% 0.001 106.424);
  --color-stone-200: oklch(92.3% 0.003 48.717);
  --color-stone-300: oklch(86.9% 0.005 56.366);
  --color-stone-400: oklch(70.9% 0.01 56.259);
  --color-stone-500: oklch(55.3% 0.013 58.071);
  --color-stone-600: oklch(44.4% 0.011 73.639);
  --color-stone-700: oklch(37.4% 0.01 67.558);
  --color-stone-800: oklch(26.8% 0.007 34.298);
  --color-stone-900: oklch(21.6% 0.006 56.043);
  --color-stone-950: oklch(14.7% 0.004 49.25);
  --color-mauve-50: oklch(98.5% 0 0);
  --color-mauve-100: oklch(96% 0.003 325.6);
  --color-mauve-200: oklch(92.2% 0.005 325.62);
  --color-mauve-300: oklch(86.5% 0.012 325.68);
  --color-mauve-400: oklch(71.1% 0.019 323.02);
  --color-mauve-500: oklch(54.2% 0.034 322.5);
  --color-mauve-600: oklch(43.5% 0.029 321.78);
  --color-mauve-700: oklch(36.4% 0.029 323.89);
  --color-mauve-800: oklch(26.3% 0.024 320.12);
  --color-mauve-900: oklch(21.2% 0.019 322.12);
  --color-mauve-950: oklch(14.5% 0.008 326);
  --color-olive-50: oklch(98.8% 0.003 106.5);
  --color-olive-100: oklch(96.6% 0.005 106.5);
  --color-olive-200: oklch(93% 0.007 106.5);
  --color-olive-300: oklch(88% 0.011 106.6);
  --color-olive-400: oklch(73.7% 0.021 106.9);
  --color-olive-500: oklch(58% 0.031 107.3);
  --color-olive-600: oklch(46.6% 0.025 107.3);
  --color-olive-700: oklch(39.4% 0.023 107.4);
  --color-olive-800: oklch(28.6% 0.016 107.4);
  --color-olive-900: oklch(22.8% 0.013 107.4);
  --color-olive-950: oklch(15.3% 0.006 107.1);
  --color-mist-50: oklch(98.7% 0.002 197.1);
  --color-mist-100: oklch(96.3% 0.002 197.1);
  --color-mist-200: oklch(92.5% 0.005 214.3);
  --color-mist-300: oklch(87.2% 0.007 219.6);
  --color-mist-400: oklch(72.3% 0.014 214.4);
  --color-mist-500: oklch(56% 0.021 213.5);
  --color-mist-600: oklch(45% 0.017 213.2);
  --color-mist-700: oklch(37.8% 0.015 216);
  --color-mist-800: oklch(27.5% 0.011 216.9);
  --color-mist-900: oklch(21.8% 0.008 223.9);
  --color-mist-950: oklch(14.8% 0.004 228.8);
  --color-taupe-50: oklch(98.6% 0.002 67.8);
  --color-taupe-100: oklch(96% 0.002 17.2);
  --color-taupe-200: oklch(92.2% 0.005 34.3);
  --color-taupe-300: oklch(86.8% 0.007 39.5);
  --color-taupe-400: oklch(71.4% 0.014 41.2);
  --color-taupe-500: oklch(54.7% 0.021 43.1);
  --color-taupe-600: oklch(43.8% 0.017 39.3);
  --color-taupe-700: oklch(36.7% 0.016 35.7);
  --color-taupe-800: oklch(26.8% 0.011 36.5);
  --color-taupe-900: oklch(21.4% 0.009 43.1);
  --color-taupe-950: oklch(14.7% 0.004 49.3);
}

/* tokens.css */
:root {
  --color-text: var(--color-zinc-800);
  --color-muted: var(--color-zinc-500);
  --color-soft: var(--color-zinc-400);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-zinc-50);
  --color-border: var(--color-zinc-300);
  --color-border-light: var(--color-zinc-200);
  --color-label-bg: rgba(0, 0, 0, 0.02);
  --color-link: var(--color-cyan-700);
  --color-status-dot-todo: oklch(71.18% 0.0129 286.07);
  --color-status-dot-submitted: oklch(72.27% 0.192 149.58);
  --color-status-dot-overdue: oklch(70.4% 0.191 22.216);
  --color-status-dot-reviewed: oklch(71.48% 0.1257 215.22);
  --color-rubric-signal-inactive: oklch(87.11% 0.0055 286.29);
  --color-rubric-signal-low: oklch(70.4% 0.191 22.216);
  --color-rubric-signal-mid: oklch(76.86% 0.1646 70.08);
  --color-rubric-signal-high: oklch(72.27% 0.192 149.58);
  --color-banner-info-bg: #fff5d6;
  --color-banner-info-text: #5a4500;
  --color-banner-error-bg: #ffe2e0;
  --color-banner-error-text: #7a1f1c;
  --color-danger: oklch(57.7% 0.245 27.325);
  --font-sans:
    "Schibsted Grotesk",
    system-ui,
    sans-serif;
  --font-mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  --font-serif:
    Georgia,
    "Times New Roman",
    serif;
  --font-size-root: 1.0625rem;
  --font-size-assignment-meta: 0.8125rem;
  --radius: 0.5rem;
  --radius-sm: 6px;
  --page-max-width: 80ch;
}
html[data-theme=dark] {
  --color-text: var(--color-zinc-200);
  --color-muted: var(--color-zinc-400);
  --color-soft: var(--color-zinc-500);
  --color-bg: var(--color-zinc-900);
  --color-bg-alt: var(--color-zinc-950);
  --color-border: var(--color-zinc-700);
  --color-border-light: var(--color-zinc-800);
  --color-label-bg: rgba(255, 255, 255, 0.05);
  --color-link: var(--color-cyan-400);
  --color-banner-info-bg: #3b3215;
  --color-banner-info-text: #f0d27a;
  --color-banner-error-bg: #3a1c1b;
  --color-banner-error-text: #f9b1ad;
  --color-danger: oklch(70.4% 0.191 22.216);
  --color-rubric-signal-inactive: oklch(44.19% 0.0146 285.79);
  --color-rubric-signal-low: oklch(70.4% 0.191 22.216);
  --color-rubric-signal-mid: oklch(82.8% 0.189 84.429);
  --color-rubric-signal-high: oklch(80.03% 0.1821 151.71);
  --color-status-dot-todo: oklch(55.17% 0.0138 285.94);
  --color-status-dot-submitted: oklch(80.03% 0.1821 151.71);
  --color-status-dot-overdue: oklch(70.4% 0.191 22.216);
  --color-status-dot-reviewed: oklch(78.89% 0.154 211.53);
}

/* reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.chalk-content,
.chalk-content *,
.chalk-content *::before,
.chalk-content *::after {
  box-sizing: revert;
}
:where(*) {
  margin: 0;
  padding: 0;
}

/* base.css */
@font-face {
  src: url(/fonts/SchibstedGrotesk[wght].woff2) format("woff2");
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
html {
  height: 100%;
}
body {
  font-family: var(--font-sans);
  background: var(--color-bg-alt);
  color: var(--color-text);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* components/pill.css */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0;
  border: 0;
  font-size: inherit;
  line-height: 1;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.bs-local-status {
  display: contents;
}
.status-pill[data-status]::before {
  content: "";
  flex-shrink: 0;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--status-dot-color);
}
.status-pill[data-status=todo] {
  --status-dot-color: var(--color-status-dot-todo);
}
.status-pill[data-status=submitted] {
  --status-dot-color: var(--color-status-dot-submitted);
}
.status-pill[data-status=overdue] {
  --status-dot-color: var(--color-status-dot-overdue);
}
.status-pill[data-status=feedback] {
  --status-dot-color: var(--color-status-dot-reviewed);
}
a.status-pill:hover {
  color: var(--color-text);
}

/* components/type-pill.css */
.type-pill {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-label-bg);
  color: var(--color-muted);
  text-transform: capitalize;
}

/* components/nav.css */
.site-nav {
  width: 100%;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border-light);
}
.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 0.875rem 2rem;
}
.site-nav-start,
.site-nav-end {
  display: flex;
  align-items: center;
  min-width: 0;
}
.site-nav-start {
  gap: 0.75rem;
}
.site-nav-end {
  gap: 1.25rem;
}
.site-nav-course {
  display: contents;
}
.site-nav-course-link,
.site-nav-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-muted);
  white-space: nowrap;
}
.site-nav-course-link {
  text-decoration: none;
}
.site-nav-course-link:hover {
  color: var(--color-text);
  text-decoration: none;
}
.site-nav-course-link.is-active {
  color: var(--color-text);
}
.site-nav-account {
  position: relative;
  display: flex;
  align-items: center;
}
.site-nav-account-trigger {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.site-nav-account-trigger::-webkit-details-marker {
  display: none;
}
.site-nav-account-trigger::marker {
  content: none;
}
.site-nav-account-trigger:hover,
.site-nav-account[open] .site-nav-account-trigger {
  color: var(--color-text);
}
.site-nav-chevron {
  display: block;
  flex-shrink: 0;
  width: 0.75em;
  height: 0.75em;
}
.site-nav-account-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 10;
  min-width: 12rem;
  max-width: 16rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.06);
}
.site-nav-account-email {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-nav-account-link,
.site-nav-sign-out {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text);
  text-decoration: none;
}
.site-nav-account-link {
  margin-bottom: 0.375rem;
}
.site-nav-account-link:hover,
.site-nav-sign-out:hover {
  color: var(--color-link);
  text-decoration: none;
}
.site-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text);
  text-decoration: none;
}
.site-nav-logo svg {
  display: block;
  height: 1.375rem;
  width: auto;
}
.site-nav-logo:hover {
  color: var(--color-muted);
  text-decoration: none;
}
.site-nav-course-name {
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.site-nav-course-name:hover {
  color: var(--color-text);
  text-decoration: none;
}
.page {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 2rem;
  box-sizing: border-box;
}
@media (max-width: 47.99rem) {
  .site-nav-inner {
    padding-inline: 1rem;
  }
  .site-nav-course-name {
    display: none;
  }
  .site-nav-end {
    gap: 0.75rem;
  }
  .page {
    padding-inline: 1rem;
  }
}

/* components/section-cards.css */
.section-cards {
  margin-top: 2rem;
}
.section-cards--embedded {
  margin-top: 0;
}
.section-cards-list > .section-cards-week-heading {
  display: block;
  grid-column: 1 / -1;
  padding-left: 0;
}
.section-cards-week-heading h2 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0;
}
.section-cards-list > .section-cards-week-heading:not(:first-child) {
  margin-top: 1.5rem;
}
.section-cards-list > .section-cards-unit-heading {
  display: block;
  grid-column: 1 / -1;
  padding-left: 0;
}
.section-cards-unit-heading h2 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0;
}
.section-cards-list > .section-cards-unit-heading:not(:first-child) {
  margin-top: 1.5rem;
}
.section-cards-list > .section-cards-subheading {
  display: block;
  grid-column: 1 / -1;
  padding-left: 0;
  margin-top: 0.75rem;
}
.section-cards-subheading h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  margin: 0;
}
.section-cards-unit-heading + .section-cards-subheading {
  margin-top: 0.5rem;
}
.section-cards-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
}
.section-cards-list > li {
  position: static;
  padding-left: 0;
  margin-bottom: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.section-cards-list > li::before {
  content: none;
  display: none;
}
.section-cards-list--no-progress {
  grid-template-columns: minmax(0, 1fr) auto;
}
.section-cards-list--no-progress:has(.section-card-type) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.section-cards-list--no-progress .section-card-title {
  grid-column: 1;
  grid-row: 1;
}
.section-cards-list--no-progress .section-card-time {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.section-cards-list--no-progress:has(.section-card-type) .section-card-time {
  grid-column: 3;
}
.section-cards-list--no-progress .section-card-type {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.section-cards-list--no-progress .section-card:has(.section-card-time) .section-card-type {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
.section-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto;
  row-gap: 0.25rem;
  align-items: center;
  padding: 0.5rem 0.875rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}
.section-card:hover {
  border-color: var(--color-border);
  text-decoration: none;
}
.section-card--locked {
  background: var(--color-bg-alt);
  border-style: dashed;
}
.section-card--locked .section-card-title {
  color: var(--color-muted);
}
.section-card-lock {
  color: var(--color-muted);
}
.section-card-locked-label {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.section-card--locked:not(:has(.section-card-time)) .section-card-type {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}
.section-card-progress {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
.section-card-title {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
}
.section-card-time {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.section-card-type {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}
.section-card:not(:has(.section-card-time)) .section-card-type {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.section-card--submission {
  grid-template-rows: auto auto auto;
  row-gap: 0.25rem;
  padding-bottom: 0;
  overflow: hidden;
}
.section-card-footer {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.25rem;
  margin-inline: -0.875rem;
  padding: 0.5rem 0.875rem;
  font-size: var(--font-size-assignment-meta);
  line-height: 1.35;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border-light);
}
.section-card-footer .status-pill {
  flex-shrink: 0;
}
.section-card-due {
  font-size: inherit;
  color: var(--color-muted);
  white-space: nowrap;
}
.section-card-due:empty {
  display: none;
}
@media (min-width: 24rem) {
  .section-cards-list {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: 0.75rem;
  }
  .section-cards-list:not(:has(.section-card-time)):not(:has(.section-card-locked-label)) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .section-card {
    grid-template-rows: auto;
  }
  .section-card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .section-card-type {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
  }
  .section-card:not(:has(.section-card-time)) .section-card-type {
    grid-column: 3;
    justify-self: end;
  }
  .section-cards-list:not(:has(.section-card-time)) .section-card-type {
    grid-column: 3;
    justify-self: end;
  }
  .section-card-time {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }
  .section-cards-list--no-progress {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .section-cards-list--no-progress:not(:has(.section-card-type)) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .section-cards-list--no-progress .section-card {
    grid-template-rows: auto;
  }
  .section-cards-list--no-progress .section-card-type {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }
  .section-cards-list--no-progress .section-card:has(.section-card-time) .section-card-type {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }
  .section-cards-list--no-progress .section-card:not(:has(.section-card-time)) .section-card-type {
    grid-column: 2;
    justify-self: end;
  }
  .section-cards-list--no-progress .section-card-time {
    grid-column: 3;
    grid-row: 1;
  }
  .section-cards-list--no-progress:not(:has(.section-card-type)) .section-card-time {
    grid-column: 2;
  }
  .section-card--submission {
    grid-template-rows: auto auto;
  }
  .section-card-footer {
    grid-row: 2;
  }
  .section-card--locked:not(:has(.section-card-time)) .section-card-type {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
  }
  .section-card-locked-label {
    grid-column: 4;
    grid-row: 1;
  }
}

/* components/lesson-progress.css */
.lesson-progress-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--color-text);
}
.lesson-progress-icon-svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.lesson-progress-icon--todo {
  color: var(--color-muted);
}
.lesson-progress-icon--complete,
.lesson-progress-icon--reviewed {
  color: var(--color-text);
}

/* components/course-links.css */
.course-links {
  margin-top: 1.5rem;
}
.course-links + .section-cards--embedded {
  margin-top: 2rem;
}
.course-links .lesson-list-heading {
  margin-top: 0;
}
.section-card.course-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.course-link-card-start {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1;
}
.course-link-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-muted);
}
.course-link-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.course-link-card-title {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  min-width: 0;
}
.course-link-card-detail {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}
@media (max-width: 23.99rem) {
  .section-card.course-link-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
  .course-link-card-detail {
    padding-left: calc(1.25rem + 0.625rem);
    white-space: normal;
  }
}

/* components/preview-overview-card.css */
.preview-overview-card {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  background-color: var(--color-bg-alt);
}
.preview-overview-card-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  opacity: 0.72;
  margin: 0 0 0.375rem;
}
.preview-overview-card-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 0.875rem;
}
.preview-overview-card-cta {
  align-self: flex-end;
}
@media (min-width: 36rem) {
  .preview-overview-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }
  .preview-overview-card-body {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .preview-overview-card-text {
    margin-bottom: 0;
  }
  .preview-overview-card-cta {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    margin-inline-start: 0;
  }
}

/* components/banner.css */
.banner {
  background: var(--color-banner-info-bg);
  color: var(--color-banner-info-text);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.banner.error {
  background: var(--color-banner-error-bg);
  color: var(--color-banner-error-text);
}

/* components/markdown-body.css */
.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body pre {
  margin: 0 0 0.75rem;
}
.markdown-body ul,
.markdown-body ol {
  padding-inline-start: 1.5rem;
}
.markdown-body li {
  margin-block: 0.25rem;
}
.markdown-body li::marker {
  color: var(--color-muted);
}
.markdown-body li > ul,
.markdown-body li > ol {
  margin-block: 0.25rem 0;
}
.markdown-body :is(p, li):last-child {
  margin-bottom: 0;
}
.markdown-body blockquote {
  padding-inline-start: 0.875rem;
  border-inline-start: 2px solid var(--color-border);
  color: var(--color-muted);
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  margin: 1rem 0 0.5rem;
}
.markdown-body pre {
  background: var(--color-bg-alt);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* components/assignment-tabs.css */
.assignment-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--color-border-light);
}
.assignment-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.assignment-tab:hover {
  color: var(--color-text);
  text-decoration: none;
}
.assignment-tab.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

/* components/lesson-chrome.css */
.lesson-chrome {
  font-family: var(--font-sans);
  line-height: 1.6;
}
.lesson-chrome h1 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: inherit;
  margin: 0 0 0.375rem;
}
.lesson-chrome .lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
}
.lesson-chrome .assignment-tabs {
  margin: 0 0 1.5rem;
}
.lesson-chrome .assignment-tab {
  font-family: inherit;
}

/* components/form-fields.css */
.form-stack {
  display: grid;
  gap: 0.75rem;
}
.form-field {
  display: grid;
  gap: 0.375rem;
}
.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}
.form-label-hint {
  font-weight: 500;
  color: var(--color-muted);
}
.form-input,
.form-textarea {
  font: inherit;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-text);
}
.form-textarea {
  field-sizing: content;
  resize: none;
  min-height: 2.75rem;
  line-height: 1.5;
}
@supports not (field-sizing: content) {
  .form-textarea {
    resize: vertical;
  }
}

/* components/button.css */
.btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  box-sizing: border-box;
}
.btn--primary {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--block {
  width: 100%;
}
.btn:hover {
  text-decoration: none;
  opacity: 0.92;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* components/empty-state.css */
.empty-state {
  margin: 0;
  color: var(--color-muted);
}

/* components/card.css */
.card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  background: var(--color-bg);
  overflow: hidden;
}
.card-header {
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
}
.card-body {
  padding: 1rem;
  background: var(--color-bg-alt);
}

/* components/submission-form-card.css */
.submission-form-card {
  margin-top: 0.5rem;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.submission-form-card button,
.submission-form-card input,
.submission-form-card textarea {
  font-family: inherit;
}
.submission-form-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.submission-form-card .banner {
  margin-bottom: 1rem;
}
.submission-form-card-helper {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.45;
}
.submission-form-card-submit {
  display: block;
  width: fit-content;
  margin-top: 1rem;
  margin-left: auto;
}
.st-reflection-body {
  font: 14px / 1.55 var(--font-mono);
  min-height: 12rem;
  width: 100%;
}
.reflection-compose .rc-toolbar {
  margin-bottom: 0.75rem;
}
.reflection-compose .rc-panel {
  min-height: auto;
}
.reflection-compose .rc-preview {
  min-height: 12rem;
}

/* components/submission-timeline.css */
.st-timeline {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.st-timeline-item {
  margin: 0;
}
.st-message-time {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
}
.st-project {
  margin: 0;
  display: grid;
  gap: 0.375rem;
}
.st-project dt {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted);
}
.st-project dd {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
}
.st-project dd:last-child {
  margin-bottom: 0;
}
.st-message-header--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.st-message-kind {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
}
.st-message-header--split .st-message-time {
  flex-shrink: 0;
}

/* components/feedback-body.css */
.fb-section {
  margin-bottom: 2rem;
}
.fb-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.fb-section h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.fb-feedback-meta {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.fb-feedback-section {
  margin-bottom: 1.5rem;
}
.fb-feedback-section:last-child {
  margin-bottom: 0;
}
.fb-rubric {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.875rem;
}
.fb-rubric-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: baseline;
}
.fb-rubric-line {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.fb-rubric-label {
  font-weight: 500;
}
.fb-rubric-level {
  font-size: 0.8rem;
  color: var(--color-muted);
}
.fb-rubric-signal {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-end;
}
.fb-rubric-signal-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 0.75rem;
  height: 0.65em;
  line-height: 1;
}
.fb-rubric-signal-bar {
  width: 3px;
  border-radius: 1px;
  background: var(--color-rubric-signal-inactive);
}
.fb-rubric-signal-bar:nth-child(1) {
  height: 25%;
}
.fb-rubric-signal-bar:nth-child(2) {
  height: 50%;
}
.fb-rubric-signal-bar:nth-child(3) {
  height: 75%;
}
.fb-rubric-signal-bar:nth-child(4) {
  height: 100%;
}
.fb-rubric-signal[data-level="1"] .fb-rubric-signal-bar:nth-child(1) {
  background: var(--color-rubric-signal-low);
}
.fb-rubric-signal[data-level="2"] .fb-rubric-signal-bar:nth-child(-n+2) {
  background: var(--color-rubric-signal-mid);
}
.fb-rubric-signal[data-level="3"] .fb-rubric-signal-bar:nth-child(-n+3),
.fb-rubric-signal[data-level="4"] .fb-rubric-signal-bar:nth-child(-n+4) {
  background: var(--color-rubric-signal-high);
}
.fb-rubric-unscored {
  color: var(--color-soft);
}
.fb-rubric-note {
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

/* pages/login.css */
.page.login,
.page.signup {
  box-sizing: border-box;
  min-height: calc(100dvh - 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login,
.signup {
  max-width: 24rem;
  margin-inline: auto;
  width: 100%;
}
.login {
  text-align: center;
}
.login h1,
.signup h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.login-lede {
  color: var(--color-muted);
  font-size: 0.9375rem;
  margin: 0 0 2rem;
  text-wrap: pretty;
}
.signup .login-lede + .login-lede {
  margin-top: calc(-1 * var(--space-m));
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.login-form input[type=email],
.login-form input[type=text] {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  box-sizing: border-box;
}
.login-form input[type=email]::placeholder,
.login-form input[type=text]::placeholder {
  color: var(--color-muted);
}
.login-form input[type=email]:focus,
.login-form input[type=text]:focus {
  border-color: var(--color-link);
}
.field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: -0.375rem;
}
.field-check {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}
.field-check input[type=checkbox] {
  appearance: none;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 0.75);
  background: var(--color-bg);
  cursor: pointer;
}
.field-check input[type=checkbox]:checked {
  border-color: var(--color-link);
  background-color: var(--color-link);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.8' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}
html[data-theme=dark] .field-check input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.8' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field-check input[type=checkbox]:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}
.field-check a {
  color: var(--color-link);
}
.form-error {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin: 0 0 1rem;
}
.login-alt,
.signup-alt {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.login-alt {
  text-align: center;
}
.login-alt a,
.signup-alt a {
  color: var(--color-link);
}
.page.login .auth-status {
  color: var(--color-muted);
  font-size: 0.9375rem;
  margin: 0 0 1rem;
  line-height: 1.6;
  text-wrap: balance;
}
.page.login .auth-status a {
  color: var(--color-link);
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* pages/paywall.css */
.paywall-hero {
  text-align: center;
  padding: 1rem 0 2.5rem;
}
.paywall-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}
.paywall-hero h1 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
.paywall-lede {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 32rem;
  margin: 0 auto 1.75rem;
  text-wrap: balance;
}
.paywall-cta {
  margin: 0;
}
.paywall-columns {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 36rem) {
  .paywall-columns {
    grid-template-columns: 1fr 1fr;
  }
}
.paywall-list {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  background: var(--color-bg);
}
.paywall-list--locked {
  background: var(--color-bg-alt);
}
.paywall-list h2 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0 0 0.75rem;
}
.paywall-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.paywall-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.paywall-list li > span {
  min-width: 0;
  text-wrap: pretty;
}
.paywall-list-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.paywall-list--included .paywall-list-icon {
  color: var(--color-link);
}
.paywall-list--locked .paywall-list-icon {
  color: var(--color-muted);
}

/* pages/preferences.css */
.preferences {
  max-width: 28rem;
}
.preferences h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.5rem;
}
.preferences-saved {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.9375rem;
}
.preferences-form {
  display: grid;
  gap: 1.25rem;
}
.preferences-fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
.preferences-legend {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
}
.preferences-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.preferences-options {
  display: grid;
  gap: 0.5rem;
}
.preferences-option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.preferences-option:has(input:checked) {
  border-color: var(--color-text);
  background: var(--color-bg);
}
.preferences-option input {
  margin-top: 0.125rem;
  flex-shrink: 0;
}
.preferences-option-text {
  display: grid;
  gap: 0.125rem;
}
.preferences-option-label {
  font-size: 0.9375rem;
  font-weight: 500;
}
.preferences-option-description {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* pages/dev-login.css */
.dev-login-current {
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
}
.dev-login-search {
  display: block;
  margin-bottom: 1rem;
}
.dev-login-filter {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
}
.dev-login-filter:focus {
  border-color: var(--color-text);
}
.dev-login-empty {
  color: var(--color-muted);
  font-size: 0.9375rem;
}
.dev-login-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 1fr auto;
  column-gap: 1rem;
  row-gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dev-login-list > li {
  position: static;
  padding-left: 0;
  margin-bottom: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.dev-login-list > li::before {
  content: none;
  display: none;
}
.dev-login-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  row-gap: 0.25rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}
.dev-login-card:hover {
  border-color: var(--color-border);
  text-decoration: none;
}
.dev-login-name {
  grid-column: 1;
  grid-row: 1;
  font-weight: 500;
  font-size: 0.875rem;
  white-space: nowrap;
}
.dev-login-name:empty {
  display: none;
}
.dev-login-email {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dev-login-email:empty {
  display: none;
}
.dev-login-name:empty + .dev-login-email {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-text);
}
.dev-login-courses {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
}
.dev-login-courses .type-pill {
  text-transform: uppercase;
}
@media (max-width: 35.99rem) {
  .dev-login-name:not(:empty) {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .dev-login-courses {
    grid-column: 4;
    grid-row: 1;
  }
  .dev-login-name:not(:empty) + .dev-login-email {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .dev-login-name:empty + .dev-login-email {
    grid-column: 1 / 3;
    grid-row: 1;
  }
}
@media (min-width: 36rem) {
  .dev-login-card {
    row-gap: 0;
  }
}

/* pages/style-guide.css */
.sg-top {
  width: 100%;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border-light);
}
.sg-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 0.875rem 2rem;
}
.sg-logo {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.sg-logo:hover {
  color: var(--color-muted);
  text-decoration: none;
}
.sg-top-nav {
  display: flex;
  gap: 1rem;
  font-size: 0.8125rem;
}
.sg-top-nav a {
  color: var(--color-muted);
  text-decoration: none;
}
.sg-top-nav a:hover {
  color: var(--color-text);
  text-decoration: none;
}
.sg-top-nav a[aria-current=page] {
  color: var(--color-text);
  font-weight: 500;
}
.sg-header {
  margin-bottom: 2rem;
}
.sg h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.sg-lede {
  margin: 0;
  color: var(--color-muted);
}
.sg-section {
  margin-bottom: 2.5rem;
}
.sg-section > h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-light);
}
.sg-demo {
  margin-bottom: 1.5rem;
}
.sg-demo-header h3 {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.sg-demo-note {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.sg-demo-preview {
  padding: 1rem;
  background: var(--color-bg);
  border: 1px dashed var(--color-border-light);
  border-radius: var(--radius);
}
.sg-demo-canvas .section-cards {
  margin-top: 0;
}
.sg-demo-canvas .preview-overview-card,
.sg-demo-preview .preview-overview-card {
  margin: 0;
}
.sg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.sg-progress-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}
.sg-progress-icons .lesson-progress-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* pages/dashboard.css */
.dashboard h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.course-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.course-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}
.course-card:hover {
  border-color: var(--color-border);
  text-decoration: none;
}
.course-label {
  font-weight: 500;
  font-size: 1rem;
}
.course-arrow {
  color: var(--color-muted);
  font-size: 1.25rem;
}
.course-card:hover .course-arrow {
  transform: translateX(3px);
}

/* pages/assignments-dashboard.css */
.ad h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
}

/* pages/reflection.css */
.rc-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.rc-header h1 {
  margin: 0;
  font-size: 1.4rem;
}
.rc-meta {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
  display: flex;
  gap: 1rem;
  align-items: center;
}
.rc-actions button {
  font: inherit;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
  cursor: pointer;
}
.reflection-compose .banner {
  margin-bottom: 0.75rem;
}
.rc-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.rc-segment {
  display: inline-flex;
  padding: 2px;
  background: var(--color-label-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
}
.rc-segment-btn {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.rc-segment-btn[aria-selected=true] {
  background: var(--color-bg);
  color: var(--color-text);
}
.rc-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.rc-toolbar-actions .rc-status {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
  min-width: 4.5rem;
  text-align: right;
}
.rc-panel {
  min-height: 60vh;
}
#rc-body {
  font: 14px / 1.55 var(--font-mono);
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  resize: vertical;
  min-height: 60vh;
  background: var(--color-bg);
  color: inherit;
  box-sizing: border-box;
}
.rc-preview {
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  background: var(--color-bg);
  min-height: 60vh;
  box-sizing: border-box;
}

/* pages/lesson.css */
.lesson-meta-start {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}
.lesson-meta-end {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  font-size: var(--font-size-assignment-meta);
  line-height: 1.35;
  white-space: nowrap;
}
.lesson-meta-due {
  font-size: inherit;
  color: var(--color-muted);
  white-space: nowrap;
}
.lesson-meta-time {
  font-size: var(--font-size-assignment-meta);
  color: var(--color-muted);
}
.lesson .chalk-content {
  margin-top: 1.5rem;
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-root);
  line-height: 1.5;
  color: var(--color-text);
  --color-bg-alt: var(--color-bg);
}
.lesson .chalk-content p {
  margin-bottom: 1lh;
}
.lesson .chalk-content a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 0.1em;
}
.lesson .chalk-content a:hover {
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}
.lesson .chalk-content + .section-cards--embedded {
  margin-top: 2rem;
}
.lesson .chalk-content :is(h1, h2, h3, h4) {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.lesson .chalk-content pre {
  white-space: pre-wrap;
}
.lesson-list-heading {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 2rem 0 0.5rem;
}
.lesson-footer {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--color-border-light);
}
.lesson-footer__action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.lesson-footer__action--complete {
  justify-content: flex-end;
}
.lesson-footer__action-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--font-size-assignment-meta);
  line-height: 1.35;
  white-space: nowrap;
}
.lesson-footer__due {
  color: var(--color-muted);
  white-space: nowrap;
}
.lesson-footer__action-control {
  flex-shrink: 0;
  margin-left: auto;
}
.lesson-footer__action--complete .lesson-footer__action-control {
  margin-left: 0;
}
.lesson-completion {
  scroll-margin-top: 1.5rem;
}
.lesson-feedback {
  scroll-margin-top: 1.5rem;
}
.lesson-feedback:not(:last-child) {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border-light);
}
.lesson-feedback__heading {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.lesson-feedback__lede {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: var(--font-size-root);
  line-height: 1.5;
}
.lesson-feedback__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lesson-feedback__textarea {
  width: 100%;
  min-height: 5lh;
}
.lesson-feedback__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
.lesson-feedback__status {
  margin: 0;
  margin-right: auto;
  font-size: var(--font-size-root);
  line-height: 1.5;
  color: var(--color-muted);
}
.lesson-feedback__status--error {
  color: var(--color-danger);
}
.lesson-feedback__thanks {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-root);
  line-height: 1.5;
}
.lesson-footer__up-next h2,
.resume-card-section h2 {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}
.lesson-footer__up-next-cards,
.resume-card-section__cards {
  margin-top: 0;
}
.lesson-footer__up-next-cards .section-cards-list > li,
.resume-card-section__cards .section-cards-list > li {
  margin-bottom: 0;
}
.course-resume {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-block: 2rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--color-border-light);
}

/* print.css */
@page {
  margin: 2cm;
}
@media print {
  html {
    color-scheme: only light;
  }
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  :root,
  html[data-theme=dark] {
    --color-text: var(--color-zinc-800);
    --color-muted: var(--color-zinc-500);
    --color-soft: var(--color-zinc-400);
    --color-bg: var(--color-white);
    --color-bg-alt: var(--color-zinc-50);
    --color-border: var(--color-zinc-300);
    --color-border-light: var(--color-zinc-200);
    --color-label-bg: rgba(0, 0, 0, 0.02);
    --color-link: var(--color-cyan-700);
  }
  body {
    display: block;
    min-height: auto;
    background: var(--color-white);
    color: var(--color-text);
  }
  .page.lesson {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  body:has(.page.lesson) .site-nav,
  .page.lesson .lesson-footer,
  .page.lesson .assignment-tabs,
  .page.lesson .section-cards,
  .page.lesson .code-copy {
    display: none !important;
  }
  .page.lesson .lesson-chrome {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-light);
  }
  .page.lesson .lesson-chrome h1 {
    font-size: 1.25rem;
  }
  .page.lesson .lesson-meta-end {
    white-space: normal;
  }
  .page.lesson .chalk-content {
    margin-top: 0;
    --color-bg-alt: var(--color-zinc-50);
  }
  .page.lesson .chalk-content a[href^=http]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    font-family: var(--font-sans);
    word-break: break-all;
  }
}

/* main.css */