/* Kubernetes for Ops — course site
   Devoteam brand, April 2026 guidelines.
   Colour p40, typography p25, components p35–38. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- tokens ----------------------------------------------------------- */

:root {
  /* Brand primary */
  --poppy: #f8485e;
  --poppy-light: #fca2ae;
  --poppy-lighter: #fddade;
  --dark-grey: #3c3c3a;
  --white: #ffffff;

  /* Brand secondary — backgrounds and graphics only, never text */
  --aqua: #d7ebe7;
  --beige: #efeadc;
  --light-grey: #efeeee;

  /* Brand accent — data and section coding only */
  --fire: #fcc354;
  --mint: #5ab891;
  --lagoon: #4a8cca;
  --candy: #ec86a3;
  --violet: #63238c;

  /* Dark surfaces, derived from Dark Grey. The brand sanctions a dark mode
     with surfaces "slightly elevated from background" (p35). */
  --bg: #1b1b1a;
  --surface: #232322;
  --surface-2: #2c2c2a;
  --line: #3a3a37;
  --text: #f2f0ee;
  --text-muted: #a5a29e;
  --text-dim: #7c7975;

  /* Radii, p37 */
  --r-card: 15px;
  --r-hero: 25px;
  --r-btn: 12px;
  --r-label: 12px;
  --r-modal: 24px;

  --shell: min(1180px, 100% - 3rem);
  --header-h: 74px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- reset ------------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- typography, brand p25 -------------------------------------------- */

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); font-weight: 700; line-height: 1.25; }
h3 { font-size: 1.75rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.5rem; font-weight: 600; line-height: 1.35; }
h5 { font-size: 1.25rem; font-weight: 500; line-height: 1.4; }
h6 { font-size: 1rem; font-weight: 700; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--poppy); text-decoration: none; border-bottom: 1px solid rgba(248, 72, 94, 0.35); transition: border-color 0.18s var(--ease); }
a:hover { border-bottom-color: var(--poppy); }

/* Signal a link that leaves the site, so nobody is surprised by a new tab. */
.slide a[target="_blank"]::after,
.notes-panel a[target="_blank"]::after {
  content: '↗';
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.8em;
  vertical-align: 0.15em;
  opacity: 0.7;
}

strong { font-weight: 600; color: var(--white); }
em { font-style: italic; color: var(--poppy-light); font-weight: 500; }

small, .small { font-size: 0.875rem; line-height: 1.5; }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--poppy);
  margin: 0 0 0.75rem;
}

.lead { font-size: 1.125rem; line-height: 1.6; color: var(--text-muted); max-width: 62ch; }

blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 2px solid var(--poppy);
  color: var(--text-muted);
  font-weight: 300;
  font-size: 1.125rem;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* ---- code ------------------------------------------------------------- */

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 0.875em;
}

:not(pre) > code {
  background: rgba(248, 72, 94, 0.10);
  color: var(--poppy-light);
  padding: 0.12em 0.4em;
  border-radius: 6px;
  white-space: nowrap;
}

pre {
  position: relative;
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  background: #141413;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow-x: auto;
  line-height: 1.55;
  tab-size: 2;
}
pre code { background: none; padding: 0; color: #e8e5e1; white-space: pre; }

.copy-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.3rem 0.65rem;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s var(--ease), color 0.18s var(--ease);
}
pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--text); }
.copy-btn[data-copied='true'] { color: var(--mint); border-color: var(--mint); opacity: 1; }

/* ---- tables, p37: 15px outer radius, square rows ---------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: 0.7rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th {
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.15s var(--ease); }
tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3rem; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--poppy); }

/* ---- buttons, p38 ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.35rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--poppy); color: var(--white); border-bottom: 1px solid transparent; }
.btn--primary:hover { background: #e63e53; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); border-bottom-color: var(--line); }
.btn--ghost:hover { border-color: var(--text-dim); }

/* Neon is an accent only, max 1–2 focal points per screen (p34). */
.btn--hero { box-shadow: 0 0 0 1px rgba(248, 72, 94, 0.4), 0 6px 30px rgba(248, 72, 94, 0.28); }

.label {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-label);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--line);
  color: var(--text-muted);
  background: var(--surface-2);
}
.label--live { color: var(--poppy); border-color: rgba(248, 72, 94, 0.45); background: rgba(248, 72, 94, 0.1); }
.label--soon { color: var(--text-dim); }
.label--preview { color: var(--fire); border-color: rgba(252, 195, 84, 0.4); background: rgba(252, 195, 84, 0.09); }

/* ---- header ----------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: rgba(27, 27, 26, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* The source SVG carries a lot of empty viewBox around the artwork, so it is
   cropped to the mark itself — otherwise a nominal 46px renders about 27px.
   Clear space around the logo equal to the height of the 'd', per brand p7. */
.site-header__logo { display: flex; align-items: center; border: 0; flex: 0 0 auto; padding-right: 0.75rem; }
.site-header__logo img { height: 40px; width: auto; display: block; }
.site-header__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  padding-left: 1.25rem;
  border-left: 1px solid var(--line);
}
.site-header__spacer { flex: 1 1 auto; }

.sessnav { display: flex; align-items: center; gap: 0.3rem; }
.sessnav a {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 0.5rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-dim);
}
.sessnav a:hover { color: var(--text); background: var(--surface-2); }

/* Stage tells you what a session currently is, at a glance and from the back of
   a room: open in the brand colour, pre-read only in fire, and — instructors
   only, since students never see these — hidden as a dimmed number with a dot. */
.sessnav a.is-full { color: var(--poppy); }
.sessnav a.is-preview { color: var(--fire); }
.sessnav a.is-hidden-stage { opacity: 0.35; }
.sessnav a.is-hidden-stage::after { content: '·'; margin-left: 2px; }

/* Where you are beats what the stage is, and it is declared last so it wins on
   source order — the stage rules match with identical specificity, which is how
   a pre-read session used to render fire-on-poppy while selected. Overview,
   Config and every session get the same treatment here on purpose: the header
   should answer "which page am I on" the same way everywhere. */
.sessnav a[aria-current='page'],
.sessnav a[aria-current='page']:hover {
  color: var(--white);
  background: var(--poppy);
  opacity: 1;
}

.site-header__admin { color: var(--poppy); border-bottom-color: transparent; font-weight: 500; }

.site-header__user { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--text-dim); }
.site-header__user form { margin: 0; }
.site-header__user button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px;
}
.site-header__user button:hover { color: var(--text); }

@media (max-width: 860px) {
  .site-header__title, .site-header__user span { display: none; }
}

/* ---- deck and slides -------------------------------------------------- */

.deck { scroll-snap-type: y proximity; }

.slide {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 3rem) 0 4rem;
  /* the soft turn */
  transform-origin: 50% 0%;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.slide__inner { width: var(--shell); margin: 0 auto; }

/* Sections longer than a viewport opt out of snapping entirely. */
.slide--scroll { min-height: 0; scroll-snap-align: none; padding: 3rem 0; align-items: flex-start; }

/* The OS switch is sticky at `top: var(--header-h)`, which means it is already
   clamped there at scroll 0 — it renders below the header while reserving only
   its own height at the top of the flow. The first slide therefore starts
   roughly where the switch is drawn, and its heading ends up tucked under the
   bar. Push it clear of both. Applies to whichever section comes first, so the
   gap is the same whether cluster access is open or closed. */
.os-switch ~ .deck > .slide:first-child { padding-top: calc(var(--header-h) + 2.5rem); }

.deck .slide.is-past { opacity: 0.25; transform: translateY(-2.5%) scale(0.965); }
.deck .slide.is-future { opacity: 0.35; transform: translateY(2%) scale(0.985); }
.deck .slide.is-current { opacity: 1; transform: none; }

.slide + .slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--shell);
  border-top: 1px solid var(--line);
}
.slide--scroll + .slide::before, .slide--cover + .slide::before { border-top-color: transparent; }

/* ---- cover slide ------------------------------------------------------ */

.slide--cover .slide__inner { max-width: 62rem; }
.cover__title { font-size: clamp(2.5rem, 7vw, 4rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1rem; }
.cover__title em { font-style: normal; color: var(--poppy); font-weight: 800; }
.cover__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }

/* Glass, p36: one element only, never stacked, 12–16px blur, 70–85% opacity. */
.glass {
  background: rgba(44, 44, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--r-hero);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.hero-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.hero-glow::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 44vw;
  height: 44vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 72, 94, 0.20) 0%, rgba(248, 72, 94, 0) 68%);
  filter: blur(30px);
}

/* ---- bento, p34 ------------------------------------------------------- */

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin: 0 0 1.75rem; }
.card {
  grid-column: span 4;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.card--wide { grid-column: span 6; }
.card--full { grid-column: span 12; }
.card--tint { background: var(--surface-2); }
a.card { border-bottom: 1px solid var(--line); color: inherit; }
a.card:hover { border-color: rgba(248, 72, 94, 0.5); transform: translateY(-2px); }
.card h3, .card h4 { margin-bottom: 0.35rem; }
.card p { color: var(--text-muted); font-size: 0.9375rem; }
.card__foot { margin-top: auto; padding-top: 0.85rem; font-size: 0.8125rem; color: var(--text-dim); }

/* A single glowing number per screen, per the neon rule.
   Written as p.stat rather than .stat so it outranks the .card p rule above. */
p.stat, .stat {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  color: var(--poppy);
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.stat--glow { text-shadow: 0 0 28px rgba(248, 72, 94, 0.45); }
p.stat__label, .stat__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 0.85rem;
}

@media (max-width: 900px) {
  .card, .card--wide { grid-column: span 6; }
}
@media (max-width: 620px) {
  .card, .card--wide, .card--full { grid-column: span 12; }
}

/* ---- session index ---------------------------------------------------- */

.session-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin-bottom: 0.6rem;
  color: inherit;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.session-row:hover { border-color: rgba(248, 72, 94, 0.5); background: var(--surface); }
.session-row__num { font-size: 1.5rem; font-weight: 800; color: var(--poppy); line-height: 1; }
.session-row__title { font-weight: 600; }
.session-row__summary { font-size: 0.875rem; color: var(--text-muted); margin: 0.25rem 0 0; }
.session-row--soon { opacity: 0.62; }

@media (max-width: 620px) {
  .session-row { grid-template-columns: 2.5rem 1fr; }
  .session-row > .label { grid-column: 2; justify-self: start; }
}

/* ---- callouts --------------------------------------------------------- */

.callout {
  border-left: 3px solid var(--poppy);
  background: var(--surface);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 1.15rem 1.4rem;
  margin: 1.5rem 0;
}
.callout__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--poppy); margin-bottom: 0.4rem; }
.callout--mint { border-left-color: var(--mint); }
.callout--mint .callout__title { color: var(--mint); }
.callout--fire { border-left-color: var(--fire); }
.callout--fire .callout__title { color: var(--fire); }

/* ---- quiz ------------------------------------------------------------- */

.quiz {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.6rem;
  margin: 1.75rem 0;
}
.quiz__eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--poppy); margin: 0 0 0.5rem; }
.quiz__prompt { font-size: 1.0625rem; font-weight: 500; margin-bottom: 1rem; color: var(--text); }
.quiz__options { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.45rem; }
.quiz__options label {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  cursor: pointer;
  font-size: 0.9375rem;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.quiz__options label:hover { border-color: var(--text-dim); }
.quiz__options input { margin: 0.35rem 0 0; accent-color: var(--poppy); flex: 0 0 auto; }
.quiz__options input:checked + span { color: var(--white); font-weight: 500; }
.quiz__options label:has(input:checked) { border-color: var(--poppy); background: rgba(248, 72, 94, 0.07); }

.quiz__text, .quiz__textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  resize: vertical;
}
.quiz__text:focus, .quiz__textarea:focus { outline: 2px solid var(--poppy); outline-offset: 1px; border-color: transparent; }

.quiz__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.quiz__verdict { font-size: 0.875rem; font-weight: 500; }
.quiz__verdict[data-state='right'] { color: var(--mint); }
.quiz__verdict[data-state='wrong'] { color: var(--poppy-light); }
.quiz__verdict[data-state='info'] { color: var(--text-muted); }
.quiz__verdict[data-state='revealed'] { color: var(--fire); }
.quiz.is-right { border-color: rgba(90, 184, 145, 0.5); }
.quiz.is-revealed { border-color: rgba(252, 195, 84, 0.45); }

/* ---- progress rail ---------------------------------------------------- */

.rail {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: grid;
  gap: 0.55rem;
}
.rail button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.rail button:hover { background: var(--text-dim); transform: scale(1.3); }
.rail button[aria-current='true'] { background: var(--poppy); transform: scale(1.4); }
@media (max-width: 1080px) { .rail { display: none; } }

/* ---- footer ----------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.site-footer__inner { width: var(--shell); margin: 0 auto; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.site-footer img { height: 32px; width: auto; opacity: 0.8; }
.tagline { font-weight: 700; color: var(--poppy); }

/* ---- login ------------------------------------------------------------ */

.login { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.5rem; position: relative; }
.login__card { width: min(420px, 100%); }
/* Centred, with room above it — this is the first thing anyone sees of the
   course, and the logo sitting hard against the top edge read as an accident.
   The margins come down as the mark goes up, so the block occupies the same
   92px it did at 32px and the card does not grow. */
.login__card img {
  display: block;
  height: 52px;
  max-width: 100%;
  margin: 1.25rem auto;
}
.login__card h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.35rem; text-align: center; }
.login__card .lead { font-size: 0.9375rem; margin-bottom: 1.75rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.4rem; }
.field input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}
.field input:focus { outline: 2px solid var(--poppy); outline-offset: 1px; border-color: transparent; }
.form-error { color: var(--poppy-light); font-size: 0.875rem; margin-bottom: 1rem; }

/* ---- present mode ----------------------------------------------------- */

.present-bar { display: flex; align-items: center; gap: 0.5rem; }

body.presenting { overflow: hidden; }
body.presenting .site-header,
body.presenting .rail,
body.presenting .site-footer,
body.presenting .slide-tail { display: none; }

body.presenting .deck { scroll-snap-type: none; }

body.presenting .slide {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  padding: 4rem 0 6rem;
  margin: 0;
  background: var(--bg);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.5%) scale(0.99);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
  z-index: 10;
}
body.presenting .slide::before { display: none; }
body.presenting .slide.is-showing {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  z-index: 20;
}
body.presenting .slide__inner { max-width: 1100px; }
body.presenting .slide__inner { font-size: 1.125rem; }
body.presenting h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
body.presenting .quiz { display: none; }

.present-hud {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem clamp(1rem, 3vw, 2rem);
  background: rgba(20, 20, 19, 0.92);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--text-dim);
}
body.presenting .present-hud { display: flex; }
.present-hud__count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.present-hud__title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.present-hud__keys { color: var(--text-dim); }
.present-hud kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 0.6875rem;
  color: var(--text-muted);
}
.present-hud__progress { position: absolute; left: 0; top: -2px; height: 2px; background: var(--poppy); transition: width 0.3s var(--ease); }

/* Presenter notes: instructor-only, and only in present mode. */
.notes-panel {
  position: fixed;
  right: 0; bottom: 0;
  width: min(460px, 42vw);
  max-height: 55vh;
  overflow-y: auto;
  z-index: 45;
  display: none;
  padding: 1.25rem 1.4rem 3.5rem;
  background: rgba(20, 20, 19, 0.97);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--r-modal) 0 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}
body.presenting.notes-on .notes-panel { display: block; }
.notes-panel h6 { color: var(--poppy); margin-bottom: 0.75rem; }
.notes-panel strong { color: var(--text); }
.notes-panel :not(pre) > code { font-size: 0.8125rem; }

.slide-tail { text-align: center; padding: 0 0 4rem; }

/* ---- chapter dividers -------------------------------------------------- */

/* Marks where the pre-read stops and the live session starts. Shorter than a
   full panel so it reads as a break in the flow, not as another slide of
   content — and it doubles as a title card in present mode. */
.slide--chapter {
  min-height: 0;
  padding: 5rem 0;
  align-items: center;
  text-align: center;
}
.slide--chapter .slide__inner { max-width: 46rem; }
.slide--chapter .eyebrow { color: var(--text-dim); }
.chapter__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.85rem;
}
.chapter__blurb { color: var(--text-muted); font-size: 1.0625rem; margin: 0 auto; max-width: 34rem; }

/* A poppy rule above and below, which is the actual separator. */
.slide--chapter::after,
.slide--chapter .slide__inner::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: 0 auto;
  background: var(--poppy);
  box-shadow: 0 0 18px rgba(248, 72, 94, 0.5);
}
.slide--chapter::after { position: absolute; top: 2.5rem; left: 50%; transform: translateX(-50%); }
.slide--chapter .slide__inner::after { margin-top: 2rem; }

/* The divider supplies the break, so suppress the generic section rule. */
.slide--chapter::before,
.slide--chapter + .slide::before { border-top-color: transparent !important; }

/* "In the session" is where the pre-read stops and the live hour starts, so it
   carries more weight than the divider above it. It is also the first thing on
   screen in present mode, which makes it the title card for the session rather
   than another separator. */
.slide--chapter-during {
  padding: 8rem 0;
  min-height: 58vh;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(248, 72, 94, 0.15), transparent 68%),
    var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.slide--chapter-during .eyebrow { color: var(--poppy); }
.slide--chapter-during .chapter__title { font-size: clamp(2.6rem, 7vw, 4.25rem); }
.slide--chapter-during .chapter__blurb {
  font-size: 1.1875rem;
  max-width: 38rem;
  color: var(--text-muted);
}
.slide--chapter-during::after { width: 5rem; }

body.presenting .slide--chapter { padding: 4rem 0; align-items: center; }
body.presenting .slide--chapter-during { padding: 4rem 0; min-height: 0; }
body.presenting .slide--chapter::after { top: 22%; }

/* ---- session stage cues ----------------------------------------------- */

.session-row--preview { border-color: rgba(252, 195, 84, 0.3); }
/* Instructor view of a session students cannot reach: still a working link. */
.session-row--hidden { opacity: 0.5; border-style: dashed; }
/* Student view of the same thing: visible, so the shape of the course is
   obvious from day one, but plainly not open yet.
   Dimmed with explicit colours rather than a blanket opacity — flattening the
   whole row to 40% killed the Poppy on the number and left it looking broken
   rather than pending. */
.session-row--locked {
  cursor: default;
  border-style: dashed;
  border-color: rgba(248, 72, 94, 0.22);
  background: linear-gradient(90deg, rgba(248, 72, 94, 0.05), rgba(248, 72, 94, 0.015) 45%, transparent);
}
.session-row--locked:hover {
  border-color: rgba(248, 72, 94, 0.22);
  background: linear-gradient(90deg, rgba(248, 72, 94, 0.05), rgba(248, 72, 94, 0.015) 45%, transparent);
}
.session-row--locked .session-row__num { color: rgba(248, 72, 94, 0.6); }
.session-row--locked .session-row__title { color: var(--text-muted); font-weight: 500; }
.session-row--locked .session-row__summary { color: var(--text-dim); }
.session-row--locked .label {
  color: var(--poppy-light);
  border-color: rgba(252, 162, 174, 0.3);
  background: rgba(248, 72, 94, 0.07);
}

.stage-banner {
  padding: calc(var(--header-h) + 1.5rem) 0 0;
}
.stage-banner .slide__inner {
  width: var(--shell);
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(252, 195, 84, 0.3);
  background: rgba(252, 195, 84, 0.06);
  border-radius: var(--r-card);
}
.stage-banner p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; flex: 1 1 22rem; }
.stage-banner + .deck .slide:first-child { padding-top: 2.5rem; min-height: 0; }

/* ---- admin ------------------------------------------------------------ */

.admin { padding: calc(var(--header-h) + 3rem) 0 5rem; }
.admin h2 { margin-top: 3.5rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.admin h2:first-of-type { margin-top: 2.5rem; }
.admin-count { font-size: 1rem; font-weight: 500; color: var(--text-dim); }
.admin-num { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.admin-table { font-size: 0.875rem; }
.admin-table td { vertical-align: middle; }
.admin-table .label { margin-left: 0.5rem; }

.flash { padding: 0.85rem 1.15rem; border-radius: var(--r-card); margin-bottom: 1.5rem; font-size: 0.9375rem; }
.flash--ok { border: 1px solid rgba(90, 184, 145, 0.45); background: rgba(90, 184, 145, 0.08); color: var(--mint); }
.flash--bad { border: 1px solid rgba(248, 72, 94, 0.45); background: rgba(248, 72, 94, 0.08); color: var(--poppy-light); }

.stage-form { display: flex; gap: 0.25rem; }
.stage-btn {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.stage-btn:hover { color: var(--text); border-color: var(--text-dim); }
.stage-btn.is-on { color: var(--text); border-color: var(--text-dim); background: var(--surface-2); }
.stage-btn--preview.is-on { color: var(--bg); background: var(--fire); border-color: var(--fire); }
.stage-btn--full.is-on { color: var(--white); background: var(--poppy); border-color: var(--poppy); }

/* A heading with an action on the right. */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.section-head h2 { margin: 0; }

/* Modals, brand p37: 24px radius, stronger elevation than a card. */
.modal {
  width: min(30rem, calc(100vw - 2.5rem));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-modal);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.modal::backdrop { background: rgba(12, 12, 11, 0.7); backdrop-filter: blur(3px); }
/* showModal() focuses the dialog itself, which draws the browser's own ring
   around the whole card. Focus is still moved into the first field by ui.js. */
.modal:focus, .modal:focus-visible { outline: none; }
.modal form { padding: 1.75rem; margin: 0; }
.modal h3 { font-size: 1.375rem; margin-bottom: 0.35rem; }
.modal .small { color: var(--text-muted); margin-bottom: 1.25rem; }
.modal label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.modal textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  resize: vertical;
}
.modal textarea:focus { outline: 2px solid var(--poppy); outline-offset: 1px; border-color: transparent; }
.modal__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }

/* Without <dialog> support the modal stays inline rather than disappearing. */
.modal:not([open]) { display: none; }

code.pw { white-space: nowrap; background: var(--surface-2); color: var(--fire); user-select: all; }

/* Masked until clicked. The dots are wide and dim so a row still reads as
   "has a password" from the back of a room, without being one. */
button.pw {
  font-family: inherit;
  font-size: 0.875rem;
  white-space: nowrap;
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-dim);
  letter-spacing: 0.08em;
  cursor: pointer;
}
button.pw:hover { border-color: var(--text-dim); color: var(--text-muted); }
button.pw.is-shown {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border-style: solid;
  border-color: rgba(252, 195, 84, 0.45);
  color: var(--fire);
  letter-spacing: 0;
  /* Selectable, so dragging across it copies by hand as well as by click. */
  user-select: all;
  cursor: copy;
}
button.pw.is-copied { border-color: rgba(90, 184, 145, 0.5); color: var(--mint); }

.admin-actions { display: flex; gap: 0.75rem; white-space: nowrap; }
.admin-actions form { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8125rem; color: var(--text-dim); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--text); }
.linkbtn--danger:hover { color: var(--poppy); }

.admin-revealed { color: var(--fire); font-size: 0.75rem; margin-left: 0.35rem; }

/* The progress strip is a button: grouped per session, click for the detail. */
/* Four sessions per row. Eight in a line made the column wide enough to squeeze
   everything else, and two tidy rows of four read faster than one long strip. */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 0.5rem 0.75rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font: inherit;
  text-align: left;
}

/* The hover and the focus ring moved to the individual session, because that is
   now what is clickable. */
.pgroup {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.3rem 0.4rem;
  margin: -0.3rem -0.4rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.pgroup:hover { border-color: var(--line); background: var(--surface-2); }
.pgroup:hover .pgroup__label { color: var(--text); }
.pgroup:focus-visible { outline: 2px solid var(--poppy); outline-offset: 1px; }
.pgroup--idle { opacity: 0.5; }
.pgroup--idle:hover { opacity: 1; }
.pgroup__label { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); line-height: 1; }
.pgroup__cells { display: inline-flex; gap: 3px; }

.pcell {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-block;
  flex: 0 0 auto;
}
.pcell--none { background: var(--surface-2); border: 1px solid var(--line); }
.pcell--attempted { background: rgba(248, 72, 94, 0.4); }
.pcell--revealed { background: var(--fire); }
.pcell--correct { background: var(--mint); }

.rolechip {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-label);
  border: 1px solid var(--poppy);
  color: var(--poppy-light);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

.checkline { display: flex; align-items: center; gap: 0.55rem; margin-top: 1rem; font-size: 0.9375rem; font-weight: 400; color: var(--text-muted); }
.checkline input { width: auto; margin: 0; }

.legend { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; color: var(--text-dim); margin-top: 0.85rem; }
.nowrap { white-space: nowrap; }

/* ---- per-person detail dialog ----------------------------------------- */

.modal--wide { width: min(46rem, calc(100vw - 2.5rem)); }
/* Scrolling lives on the dialog, not on an inner div. Chrome makes a scroll
   container keyboard-focusable and draws its own ring around it, which looked
   like a stray blue border inside the card. */
.modal--wide { max-height: min(80vh, 44rem); overflow-y: auto; }
.modal__body { padding: 1.75rem; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.modal__head h3 { margin-bottom: 0.25rem; }
.modal__head .small { color: var(--text-muted); margin: 0; }
.modal__x {
  background: none;
  border: 0;
  padding: 0 0.25rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
}
.modal__x:hover { color: var(--text); }
/* This is the first focusable element in the detail dialog, so it takes focus
   on open. Brand the ring rather than leaving the browser's blue. */
.modal__x:focus-visible { outline: 2px solid var(--poppy); outline-offset: 2px; border-radius: 6px; color: var(--text); }

.qgroup { margin-bottom: 1.75rem; }
.qgroup h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.75rem; }

.qrow {
  display: flex;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  margin-bottom: 0.4rem;
}
.qrow .pcell { margin-top: 0.2rem; }
.qrow--none { opacity: 0.55; }
.qrow__main { min-width: 0; }
.qrow__prompt { font-size: 0.9375rem; margin: 0 0 0.2rem; }
.qrow__meta { font-size: 0.75rem; color: var(--text-dim); margin: 0; }
.qrow__state { font-weight: 600; color: var(--text-muted); }
.qrow--correct .qrow__state { color: var(--mint); }
.qrow--revealed .qrow__state { color: var(--fire); }
.qrow--attempted .qrow__state { color: var(--poppy-light); }
.qrow__answer {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--bg);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
/* A picked option is prose the author wrote, not something typed by the
   student, so it reads better in the body face. */
.qrow__answer--picked {
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
}
.qrow__answer--picked::before {
  content: 'Picked: ';
  font-weight: 600;
  color: var(--text-dim);
}

/* ---- operating-system panes -------------------------------------------- */

/* Both operating systems are always in the markup. Hiding one in CSS rather
   than filtering it server-side keeps the switch instant and means a student
   helping a colleague on the other OS can see both without logging out. */

.os-pane { display: none; }
body[data-os='mac'] .os-pane[data-os='mac'],
body[data-os='windows'] .os-pane[data-os='windows'] { display: block; }

/* Until ui.js sets data-os, and forever if scripting is off, show everything.
   A page with no commands on it at all is the worse failure. */
body:not([data-os]) .os-pane { display: block; }
body:not([data-os]) .os-pane + .os-pane { margin-top: 1.5rem; }

.os-switch {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(27, 27, 26, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.os-switch__inner {
  width: var(--shell);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
}

.os-switch__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.os-switch__group {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
}

.os-switch__btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border: 0;
  border-radius: calc(var(--r-btn) - 4px);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.os-switch__btn:hover { color: var(--text); }
.os-switch__btn.is-active { background: var(--poppy); color: var(--white); }

@media (max-width: 640px) {
  .os-switch__label { display: none; }
  /* Narrow enough that the switch and the button will not sit side by side. */
  .os-switch__inner { flex-wrap: wrap; }
  .os-switch__cta { margin-left: 0; }
}

/* ---- 404 --------------------------------------------------------------- */

/* The only page that is a single short section. A normal slide is a full
   viewport tall, which on its own pushes the footer past the bottom edge and
   leaves the page scrolling for no reason — so this one reserves the footer's
   height instead of claiming it. */
/* One short section on a page of its own. Rather than guess a height for it,
   the body becomes a column: the deck takes whatever is left and the footer
   sits on the bottom edge at its normal size. Without this the page is shorter
   than the viewport and the footer floats in the middle with dead background
   underneath it. The fixed header is out of flow, so it is not a flex item. */
body:has(.slide--notice) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body:has(.slide--notice) .deck { flex: 1 0 auto; display: flex; }
body:has(.slide--notice) .site-footer { flex: 0 0 auto; }

.slide--notice {
  min-height: 0;
  flex: 1;
  padding-bottom: 2rem;
}

.notfound { max-width: 60ch; }
.notfound .eyebrow { font-size: 1rem; letter-spacing: 0.12em; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0; }

/* ---- kubeconfig ------------------------------------------------------- */

/* Right-hand end of the sticky OS switch. Most visits after the first are
   somebody coming back for their token, and there it stays on screen. */
.os-switch__cta { margin-left: auto; }
.os-switch__cta[hidden] { display: none; }
/* Full button height rather than the compact one — at .btn--small it read as a
   different component from everything else on the site. The bar grows to suit,
   so its own padding comes down to keep the strip from getting heavy. */
.os-switch__cta .btn { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.os-switch:has(.os-switch__cta:not([hidden])) .os-switch__inner { padding: 0.45rem 0; }

/* The one surface left outside the deck is the accessbar on /admin. */

.accessbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1.5rem 0 0.75rem;
  padding: 1.15rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--fire);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.accessbar--open { border-left-color: var(--mint); }
.accessbar__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fire); margin-bottom: 0.3rem; }
.accessbar--open .accessbar__title { color: var(--mint); }
.accessbar p.small { margin: 0; max-width: 60ch; }


/* Inside the modal the card is already the box. */
.modal .kubecfg { background: none; border: 0; padding: 0; margin: 0; }

/* ---- kubeconfig panel -------------------------------------------------- */

.kubecfg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.6rem;
  margin: 1.5rem 0;
}

.kubecfg__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1.25rem;
  margin: 0 0 1.35rem;
}
.kubecfg__facts dt { color: var(--text-muted); font-size: 0.8125rem; }
.kubecfg__facts dd { margin: 0; }

.kubecfg__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.kubecfg__actions .btn { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.kubecfg__actions .btn:hover { border-color: var(--text-dim); }
.kubecfg__actions .btn[disabled] { opacity: 0.55; cursor: progress; }
/* Poppy would make this the focal point of the page, and it is the one button
   here nobody should press by accident. */
.kubecfg__reset { color: var(--text-muted); }
.kubecfg__reset:hover { color: var(--poppy); border-color: var(--poppy); }

.kubecfg__note { margin-top: 1rem; font-size: 0.9375rem; color: var(--mint); }
.kubecfg__note:empty { margin-top: 0; }
.kubecfg__note.is-error { color: var(--fire); }

.kubecfg__problem { border-left: 3px solid var(--fire); padding-left: 1.1rem; }
.kubecfg__problem-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fire); margin-bottom: 0.4rem; }

.kubecfg__out:empty { display: none; }
.kubecfg__bar { display: flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0.6rem; }
.kubecfg__path { flex: 1; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
/* Size only. Colour stays with whatever else is on the button, so
   `btn--primary btn--small` is still poppy rather than silently grey. */
.btn--small { padding: 0.35rem 0.8rem; font-size: 0.8125rem; }
/* The toolbar above the YAML is the quiet exception: three neutral buttons. */
.kubecfg__bar .btn--small { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.kubecfg__bar .btn--small:hover { border-color: var(--text-dim); }
/* Wrapped, not scrolled sideways. The token and the CA are each one unbroken
   string of a thousand-odd characters, so the default `white-space: pre` pushes
   every other line off-screen behind a horizontal scrollbar and the file becomes
   unreadable exactly where it matters. `anywhere` because base64 has no spaces
   or hyphens to break on. */
.kubecfg__yaml { max-height: 24rem; overflow-y: auto; overflow-x: hidden; }
.kubecfg__yaml, .kubecfg__yaml code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- print ------------------------------------------------------------ */

@media print {
  .site-header, .rail, .present-hud, .notes-panel, .copy-btn, .quiz__actions, .os-switch { display: none !important; }
  /* A credential is not something to leave on a printer. */
  .kubecfg { display: none !important; }
  /* On paper there is no switch to click, so print both. */
  .os-pane { display: block !important; }
  body { background: #fff; color: #3c3c3a; }
  .slide { min-height: 0; page-break-after: always; padding: 1rem 0; opacity: 1 !important; transform: none !important; }
  pre { background: #f6f5f4; border-color: #ddd; }
  pre code { color: #3c3c3a; }
}