/* Shared dark/light theme layer for ccw-hands-on-lab pages.
   Page chrome and code panels both switch; each page keeps its own dark palette
   in :root, and html[data-theme="light"] below overrides it. */
:root {
  --bg-sticky: rgba(12, 17, 23, 0.92);
  --line-soft: #FFFFFF14;
  --row-alt: rgba(255, 255, 255, 0.03);
  --red: #FF5C85;
  --green-dim: rgba(63, 185, 80, 0.12);
  --orange-dim: rgba(255, 153, 0, 0.14);
  --dim: #7B8198;
  --pd-bg-a: #1d1433;
  --pd-bg-b: #12181F;
  --pd-line: #45306b;
  --pd-chip: #241a3d;
  --pd-chip-line: #45306b;
  --task-line: #3a2a57;
}

/* Light theme is for projector use in a lit room: washed-out mid-greys and
   hairline borders disappear on a projector, so text runs near-black, borders
   stay clearly visible, and accent colours are darkened for contrast on white. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;      --page: #E7EAEF;    --mail: #FFFFFF;
  --bg-card: #F1F4F8; --card: #F1F4F8;
  --bg-code: #EDF1F6; --code: #EDF1F6;
  --bg-inline: #E4E9F0;
  --code-text: #0F1720; --code-cmt: #4A5563; --code-amber: #7A4E00;
  --code-head-bg: rgba(0, 0, 0, .07);
  /* 3:1 against white — cards and table rules are separated by their border,
     not by fill, since a near-white card fill vanishes on a projector. */
  --line: #8D9AA9;    --line-soft: #00000033; --row-alt: rgba(0, 0, 0, .05);
  --text: #0B1219;    --muted: #3D4753;   --dim: #4A5563;  --charcoal: #232C36;
  --orange: #9A5B00;  --crimson: #A8002B; --green: #14682D; --red: #B01238;
  --purple: #5B21C7;  --lavender: #5B21C7;
  --orange-dim: rgba(255, 153, 0, .22); --green-dim: rgba(20, 104, 45, .14);
  --bg-sticky: rgba(255, 255, 255, .94);
  --pd-bg-a: #EAE1FB; --pd-bg-b: #FFFFFF; --pd-line: #B79CEF;
  --pd-chip: #EAE1FB; --pd-chip-line: #B79CEF; --task-line: #B79CEF;
}
html[data-theme="dark"] { color-scheme: dark; }

/* Pinned to the right edge of the page's own content column (1160px wide on most
   pages, so 580px half-width), not the viewport edge — outside the column it sits
   in the empty margin and reads as "not part of the page". */
.theme-toggle {
  position: fixed; top: 12px; z-index: 60;
  right: max(14px, calc(50% - var(--col-half, 580px) + 14px));
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  background: var(--bg-card, var(--card));
  border: 1.5px solid var(--orange); color: var(--orange);
  font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1;
  letter-spacing: .02em;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}
.theme-toggle svg { width: 16px; height: 16px; flex: none; }
.theme-toggle:hover { background: var(--orange); color: var(--bg); }

/* The lab pages' sticky timeline scrolls up under the button — keep its
   segments out from behind it. */
.timeline-inner { padding-right: 118px; }

@media (max-width: 560px) {
  .theme-toggle span { display: none; }
  .theme-toggle { padding: 8px; }
  .timeline-inner { padding-right: 52px; }
}