/* CRE342 deck theme — dark navy + electric blue, built on reveal.js.
   Reusable across weeks: link this after reveal.css. */

@font-face { font-family: "Inter"; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; }
@font-face { font-family: "Space Grotesk"; src: url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 300 700; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 800; }

:root {
  --bg: #0b1026;
  --bg-2: #111936;
  --panel: #151f45;
  --panel-2: #1b2753;
  --line: #2a3768;
  --ink: #eef2ff;
  --ink-2: #c3cbe6;
  --muted: #8d98bf;
  --blue: #3aa8ff;
  --blue-deep: #1672d9;
  --blue-soft: rgba(58, 168, 255, .16);
  --coral: #ff6b6b;
  --coral-soft: rgba(255, 107, 107, .16);
  --mint: #4fd1a5;
  --mint-soft: rgba(79, 209, 165, .15);
  --gold: #ffc53d;
  --gold-soft: rgba(255, 197, 61, .15);
  --violet: #a58bff;
  --violet-soft: rgba(165, 139, 255, .16);
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --r-background-color: var(--bg);
}

html, body { background: var(--bg); }
.reveal-viewport { background: radial-gradient(1200px 700px at 85% -10%, #16255c 0%, transparent 60%), radial-gradient(900px 600px at -10% 110%, #151a44 0%, transparent 60%), var(--bg); }

.reveal { font-family: var(--body); font-size: 32px; color: var(--ink); font-weight: 400; letter-spacing: -.005em; }
.reveal .slides { text-align: left; }
.reveal .slides section { padding: 84px 96px 70px; box-sizing: border-box; height: 100%; }
/* Reveal is configured with display:'flex', so every slide centres its content vertically */
.reveal .slides > section { flex-direction: column; justify-content: center; }
.reveal .slides section.center-v { display: flex !important; flex-direction: column; justify-content: center; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 { font-family: var(--display); color: var(--ink); text-transform: none; margin: 0; line-height: 1.02; letter-spacing: -.025em; font-weight: 700; }
.reveal h1 { font-size: 104px; }
.reveal h2 { font-size: 64px; margin-bottom: 36px; }
.reveal h3 { font-size: 34px; letter-spacing: -.015em; margin-bottom: 10px; }
.reveal h4 { font-size: 27px; letter-spacing: 0; margin-bottom: 6px; }
.reveal p { margin: 0 0 18px; line-height: 1.42; }
.reveal ul, .reveal ol { margin: 0; padding-left: 1.1em; }
.reveal li { margin: 0 0 14px; line-height: 1.38; }
.reveal li::marker { color: var(--blue); }
.reveal strong { color: var(--ink); font-weight: 650; }
.reveal em { color: var(--ink); }
.reveal a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(58,168,255,.4); }
.reveal code, .reveal .mono { font-family: var(--mono); font-size: .86em; }
.reveal small, .reveal .small { font-size: 22px; color: var(--muted); }
.reveal .muted { color: var(--muted); }
.reveal .ink2 { color: var(--ink-2); }
.reveal .lead { font-size: 36px; line-height: 1.35; color: var(--ink-2); max-width: 1150px; }
.reveal .hl { color: var(--blue); }
.reveal .hl-coral { color: var(--coral); }
.reveal .hl-mint { color: var(--mint); }
.reveal .hl-gold { color: var(--gold); }
.reveal .hl-violet { color: var(--violet); }

/* Small uppercase label above a heading */
.kicker { font-family: var(--mono); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; display: block; }
.kicker.coral { color: var(--coral); } .kicker.mint { color: var(--mint); } .kicker.gold { color: var(--gold); } .kicker.violet { color: var(--violet); }
.rule { width: 72px; height: 5px; background: var(--blue); border-radius: 3px; margin: 0 0 30px; }

/* Layout helpers */
.row { display: flex; gap: 32px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.split-wide { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.stack > * + * { margin-top: 18px; }
.reveal .mt-0 { margin-top: 0 !important; } .reveal .mt-s { margin-top: 16px; } .reveal .mt-m { margin-top: 36px; } .reveal .mt-l { margin-top: 56px; }
.center { text-align: center; }

/* Cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px 28px; position: relative; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .tag { font-family: var(--mono); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; }
.card.blue { border-color: rgba(58,168,255,.55); background: linear-gradient(180deg, rgba(58,168,255,.14), rgba(58,168,255,.04)); }
.card.coral { border-color: rgba(255,107,107,.55); background: linear-gradient(180deg, rgba(255,107,107,.14), rgba(255,107,107,.04)); }
.card.mint { border-color: rgba(79,209,165,.55); background: linear-gradient(180deg, rgba(79,209,165,.13), rgba(79,209,165,.03)); }
.card.gold { border-color: rgba(255,197,61,.55); background: linear-gradient(180deg, rgba(255,197,61,.13), rgba(255,197,61,.03)); }
.card.violet { border-color: rgba(165,139,255,.55); background: linear-gradient(180deg, rgba(165,139,255,.14), rgba(165,139,255,.04)); }
.card .big { font-family: var(--display); font-size: 44px; font-weight: 700; line-height: 1; margin-bottom: 10px; display: block; }
.card .num { font-family: var(--mono); font-size: 18px; color: var(--muted); position: absolute; top: 22px; right: 24px; }
.card p, .card li { font-size: 26px; color: var(--ink-2); }

/* Chips */
.chip { display: inline-block; font-family: var(--mono); font-size: 17px; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); background: var(--bg-2); margin: 0 6px 8px 0; white-space: nowrap; }
.chip.blue { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.chip.coral { border-color: var(--coral); color: var(--coral); background: var(--coral-soft); }
.chip.mint { border-color: var(--mint); color: var(--mint); background: var(--mint-soft); }
.chip.gold { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.chip.violet { border-color: var(--violet); color: var(--violet); background: var(--violet-soft); }

/* Tables */
.reveal table.t { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 26px; }
.reveal table.t th { font-family: var(--mono); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: left; padding: 0 18px 14px; border-bottom: 1px solid var(--line); }
.reveal table.t td { padding: 15px 18px; border-bottom: 1px solid rgba(42,55,104,.6); color: var(--ink-2); vertical-align: top; line-height: 1.3; }
.reveal table.t td:first-child { color: var(--ink); font-weight: 600; }
.reveal table.t tr:last-child td { border-bottom: 0; }
.reveal table.t .num { font-family: var(--mono); text-align: right; }
.reveal table.t th.num { text-align: right; }

/* Quote */
.quote { font-family: var(--display); font-size: 54px; line-height: 1.15; letter-spacing: -.02em; font-weight: 500; max-width: 1250px; }
.quote .src { display: block; font-family: var(--body); font-size: 24px; color: var(--muted); margin-top: 28px; letter-spacing: 0; }

/* Section divider */
.reveal section.divider { display: flex !important; flex-direction: column; justify-content: center; }
.divider .sec-num { font-family: var(--mono); font-size: 26px; color: var(--blue); letter-spacing: .2em; margin-bottom: 24px; }
.divider h2 { font-size: 112px; margin-bottom: 26px; }
.divider .lead { font-size: 34px; }
.divider::after { content: ""; position: absolute; right: -120px; top: 50%; width: 620px; height: 620px; transform: translateY(-50%); border-radius: 50%; border: 2px solid rgba(58,168,255,.18); box-shadow: 0 0 0 70px rgba(58,168,255,.04), 0 0 0 140px rgba(58,168,255,.025); pointer-events: none; }

/* Title slide */
.title-slide .course { font-family: var(--mono); font-size: 20px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.title-slide h1 { font-size: 118px; margin: 30px 0 24px; max-width: 1250px; }
.title-slide h1 .hl { background: linear-gradient(90deg, var(--blue), #7fd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Prompt / think slides */
.prompt-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--bg); background: var(--gold); padding: 8px 18px; border-radius: 999px; margin-bottom: 30px; }
.prompt-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bg); }

/* Timer */
.timer { font-family: var(--mono); font-size: 34px; color: var(--gold); border: 2px solid var(--gold); border-radius: 12px; padding: 6px 18px; display: inline-block; cursor: pointer; user-select: none; }
.timer.done { color: var(--coral); border-color: var(--coral); }

/* Code block */
.reveal pre.code { font-family: var(--mono); font-size: 23px; line-height: 1.55; background: #070b1c; border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px; margin: 0; box-shadow: none; width: auto; color: var(--ink-2); white-space: pre; }
.code .k { color: var(--violet); } .code .c { color: var(--muted); } .code .s { color: var(--mint); } .code .n { color: var(--gold); } .code .v { color: var(--blue); }

/* Figures */
.fig { width: 100%; height: auto; display: block; }
.fig text { font-family: var(--body); }
.figcap { font-size: 20px; color: var(--muted); margin-top: 10px; }
.img-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.img-card img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }

/* Persistent chrome: course tag + section tag */
.deck-chrome { position: fixed; top: 0; left: 0; right: 0; pointer-events: none; z-index: 30; }
.deck-chrome .l, .deck-chrome .r { position: absolute; top: 26px; font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.deck-chrome .l { left: 34px; } .deck-chrome .r { right: 34px; color: var(--blue); }
.deck-chrome.hide { opacity: 0; }

.reveal .progress { height: 4px; color: var(--blue); background: rgba(255,255,255,.05); }
.reveal .slide-number { background: transparent; font-family: var(--mono); font-size: 13px; color: var(--muted); left: 34px; right: auto; bottom: 20px; }
.reveal .controls { color: var(--blue); }

/* Fragments: a softer rise */
.reveal .fragment.rise { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.reveal .fragment.rise.visible { opacity: 1; transform: none; }
.reveal .fragment.dim-after.current-fragment ~ .fragment.dim-after.visible { opacity: 1; }
.reveal svg .fragment { transition: opacity .5s ease; }
.reveal .fragment.draw path, .reveal path.fragment.draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.1s ease, opacity .3s; }
.reveal .fragment.draw.visible path, .reveal path.fragment.draw.visible { stroke-dashoffset: 0; }

/* Speaker-view friendly print */
@media print { .deck-chrome { display: none; } }

/* Cue timer: big elapsed clock + cue lists that light up when due (run-sheet slides) */
.cue-timer { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; }
.cue-timer .ct-left { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 26px 30px; }
.cue-timer .ct-clock { font-family: var(--mono); font-size: 116px; font-weight: 600; line-height: 1; color: var(--ink); letter-spacing: -.03em; }
.cue-timer .ct-total { font-family: var(--mono); font-size: 26px; color: var(--muted); display: block; margin-top: 6px; }
.cue-timer .ct-bar { height: 10px; border-radius: 5px; background: var(--bg-2); margin: 20px 0; overflow: hidden; }
.cue-timer .ct-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s linear; }
.cue-timer.over .ct-clock { color: var(--coral); }
.cue-timer.over .ct-bar i { background: var(--coral); }
.cue-timer .ct-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.cue-timer button { font-family: var(--mono); font-size: 18px; letter-spacing: .06em; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-2); cursor: pointer; }
.cue-timer button.ct-start { background: var(--blue); border-color: var(--blue); color: #04122a; font-weight: 700; }
.cue-timer.running button.ct-start { background: var(--gold); border-color: var(--gold); }
.cue-timer .ct-hint { font-size: 16px; color: var(--muted); margin-top: 12px; font-family: var(--mono); }
.cue-timer .ct-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 22px 28px; align-content: start; }
.cue-timer h4 { font-family: var(--mono); font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; font-weight: 500; }
.cue-timer ol { list-style: none; padding: 0; margin: 0; }
.cue-timer li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: baseline; font-size: 24px; line-height: 1.25; padding: 9px 14px; margin: 0 0 6px; border-radius: 10px; border: 1px solid transparent; color: var(--ink-2); transition: background .3s, border-color .3s, opacity .3s; }
.cue-timer li .t { font-family: var(--mono); font-size: 22px; color: var(--muted); }
.cue-timer li.ramp .t { color: var(--blue); }
.cue-timer li.dist .t { color: var(--coral); }
.cue-timer li.soon { border-color: var(--line); background: var(--bg-2); }
.cue-timer li.now { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); animation: cuepulse 1s ease-in-out infinite; }
.cue-timer li.done { opacity: .38; }
@keyframes cuepulse { 50% { box-shadow: 0 0 0 6px rgba(255,197,61,.18); } }