/* ==========================================================================
   Schedule template — presentation layer.

   THEME CONTRACT
   Every raw value in this file — colour, font, size, spacing, radius, border
   width, opacity, z-index, shadow — lives in the single :root block below.
   Nothing after that block contains a literal; it is all var() references.
   Re-theming this page means editing :root and nothing else.

   CURRENT THEME — "Laugaren"
   Extracted from laugaren.no (Bergen floating sauna) by rendering the live
   site and reading computed styles, not by eye:

     site background  hsl(336 100% 99.02%)  #fffafc
     brand colour     hsl(337.4 77.2% 53.5%) #e42d72   (magenta, not brown)
     secondary text   #333333
     type             Roboto / Roboto Condensed, weight 400 throughout,
                      UPPERCASE headings, tracking -0.03em, leading ~1.05
     radii            10px cards, 40px pill buttons
     shape            photographic hero, near-white cards, generous whitespace

   Two deliberate departures, both recorded in the PR:

   1. #e42d72 as *text* is 4.13:1 on #fffafc — it fails WCAG AA for body copy,
      and laugaren.no does set body copy in it. --color-accent is therefore
      the same hue deepened to #a8124f (7.10:1). The true brand magenta is
      kept as --light-border-strong, where it is non-text and 4.13:1 clears
      the 3:1 bar: the search pill and the filter chips are outlined in it.
   2. No web fonts are permitted, so Roboto Condensed cannot be shipped.
      --font-display falls back through Arial Narrow to the body stack; the
      condensed *feel* is carried by caps + tight tracking, which are tokens.
   ========================================================================== */

:root {
  /* ---- raw palette: light ------------------------------------------------
     A magenta ramp plus warm near-neutrals. The neutrals carry a plum cast so
     they sit with the brand hue rather than next to it.                     */
  --light-bg:            #fffafc;  /* laugaren.no site background, verbatim  */
  --light-surface:       #fcecf2;
  --light-surface-alt:   #f7dae5;
  --light-text:          #241a1e;
  --light-text-muted:    #654952;  /* darkened so it still clears 4.5:1 when
                                      a past row dims it over --color-surface */
  --light-accent:        #a8124f;  /* brand magenta, deepened to pass AA     */
  --light-accent-strong: #7a0c39;
  --light-on-accent:     #fffafc;
  --light-border:        #efd7e1;
  --light-border-strong: #e42d72;  /* the true brand magenta, non-text only  */
  --light-alert:         #8a3a12;  /* terracotta — reads as warning, not brand */
  --light-alert-bg:      #fbeade;
  --light-shadow:        rgba(58, 6, 27, 0.08);
  --light-shadow-strong: rgba(58, 6, 27, 0.16);

  /* ---- raw palette: dark -------------------------------------------------
     laugaren.no has no dark mode; this is the same hue rotated onto a deep
     plum ground, held to the same contrast floors.                          */
  --dark-bg:             #16090f;
  --dark-surface:        #22121a;
  --dark-surface-alt:    #321c26;
  --dark-text:           #f7e9ef;
  --dark-text-muted:     #c0a3b0;
  --dark-accent:         #ff8fb6;
  --dark-accent-strong:  #ffc0d5;
  --dark-on-accent:      #2b0512;
  --dark-border:         #3a2029;
  --dark-border-strong:  #ff6fa2;
  --dark-alert:          #ffb98f;
  --dark-alert-bg:       #3b1f0e;
  --dark-shadow:         rgba(0, 0, 0, 0.5);
  --dark-shadow-strong:  rgba(0, 0, 0, 0.7);

  /* ---- semantic colour (defaults to the light palette) ------------------- */
  --color-bg:            var(--light-bg);
  --color-surface:       var(--light-surface);
  --color-surface-alt:   var(--light-surface-alt);
  --color-text:          var(--light-text);
  --color-text-muted:    var(--light-text-muted);
  --color-accent:        var(--light-accent);
  --color-accent-strong: var(--light-accent-strong);
  --color-on-accent:     var(--light-on-accent);
  --color-border:        var(--light-border);
  --color-border-strong: var(--light-border-strong);
  --color-alert:         var(--light-alert);
  --color-alert-bg:      var(--light-alert-bg);
  --color-shadow:        var(--light-shadow);
  --color-shadow-strong: var(--light-shadow-strong);

  /* roles composed from the semantic set */
  --color-badge-bg:      var(--color-surface-alt);
  --color-badge-text:    var(--color-text);
  --color-tag-bg:        var(--color-surface);
  --color-tag-text:      var(--color-text-muted);
  --color-focus:         var(--color-accent-strong);
  --color-heading:       var(--color-accent-strong);
  --color-link:          var(--color-accent);
  --color-pick-bg:       var(--color-accent);
  --color-pick-text:     var(--color-on-accent);
  --color-maybe-bg:      var(--color-surface);
  --color-maybe-text:    var(--color-text);

  /* ---- type -------------------------------------------------------------
     No CDN, no shipped font file. --font-sans prefers Roboto where the OS
     already has it (Android, ChromeOS, most Linux) and otherwise takes the
     platform neo-grotesque. --font-display prefers a condensed face for the
     display tier and degrades to --font-sans.                               */
  --font-sans:    Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto Condensed", "Helvetica Neue Condensed", "Arial Narrow", var(--font-sans);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-root:      16px;
  --text-3xs:       0.6875rem;   /* 11px — pick-button label                 */
  --text-2xs:       0.75rem;     /* 12px — room badge, tags                  */
  --text-xs:        0.8125rem;   /* 13px — meta line, hints, footer          */
  --text-sm:        0.875rem;    /* 14px — speaker, description              */
  --text-md:        0.9375rem;   /* 15px — lede, event meta, plan summary    */
  --text-lg:        1.0625rem;   /* 17px — session title                     */
  --text-xl:        1.75rem;     /* 28px — empty-state title                 */
  --text-2xl:       2rem;        /* 32px — day heading in the plan view      */
  --text-display:   clamp(2.25rem, 9vw, 3.5rem);
  --text-slot-time: clamp(1.375rem, 5.2vw, 1.75rem);
  --text-tab:       clamp(0.875rem, 3.2vw, 1rem);
  --text-tab-note:  clamp(0.6875rem, 2.4vw, 0.75rem);

  /* laugaren.no sets everything at 400 and builds hierarchy from size, case
     and colour. Medium/bold are held back for the two places a schedule
     genuinely needs weight: the session title and the selected day.         */
  --weight-light:    400;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;

  --leading-tight:  1.02;
  --leading-snug:   1.24;
  --leading-normal: 1.45;

  --tracking-tight:  -0.03em;    /* measured off the reference h1            */
  --tracking-snug:   -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;     /* micro-caps: badges, button labels        */

  --case-display: uppercase;     /* display tier — set to `none` to undo     */
  --case-micro:   uppercase;     /* badges and button labels                 */

  /* ---- spacing ----------------------------------------------------------
     Generous rhythm: the reference leans hard on whitespace between bands.  */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  10px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  28px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 104px;

  /* ---- radii ------------------------------------------------------------ */
  --radius-sm:     6px;
  --radius-md:     10px;         /* reference card radius                    */
  --radius-lg:     14px;
  --radius-pill:   999px;        /* reference button radius (40px, capped)   */
  --radius-circle: 50%;

  /* ---- borders ---------------------------------------------------------- */
  --border-hairline: 1px;
  --border-thin:     1.5px;
  --border-marker:   3px;

  /* ---- layout ----------------------------------------------------------- */
  --content-width:   760px;
  --gutter:          20px;
  --lede-width:      42ch;
  --header-height:   110px;         /* replaced at runtime by the real height */
  --slot-time-width: calc(var(--text-slot-time) * 2.6);
  --mark-size:       56px;
  --tap-min:         44px;          /* WCAG 2.5.8 minimum target             */
  --icon-size:       22px;
  --icon-stroke:     1.8;
  --dot-size:        7px;
  --tab-plan-grow:   1.45;
  --hero-ratio:      3 / 2;
  --hero-order:      -1;            /* photo above the title, as on the ref  */

  /* ---- effects ----------------------------------------------------------- */
  --shadow-card:   0 1px 1px var(--color-shadow), 0 6px 18px -8px var(--color-shadow);
  --shadow-raised: 0 2px 4px var(--color-shadow), 0 14px 30px -12px var(--color-shadow-strong);
  /* Past rows dim, but `opacity` dims the text too. 0.85 is the lowest value
     at which every pair inside a past row still clears 4.5:1 (worst case:
     muted text 4.85:1 light, picked-row label 4.97:1 dark).                 */
  --opacity-past:      0.85;
  --z-sticky:          10;
  --z-fab:             20;
  --focus-ring:        3px;
  --focus-ring-offset: 2px;
  --press-scale:       0.95;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark remaps. var() references only — no literals below this point. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            var(--dark-bg);
    --color-surface:       var(--dark-surface);
    --color-surface-alt:   var(--dark-surface-alt);
    --color-text:          var(--dark-text);
    --color-text-muted:    var(--dark-text-muted);
    --color-accent:        var(--dark-accent);
    --color-accent-strong: var(--dark-accent-strong);
    --color-on-accent:     var(--dark-on-accent);
    --color-border:        var(--dark-border);
    --color-border-strong: var(--dark-border-strong);
    --color-alert:         var(--dark-alert);
    --color-alert-bg:      var(--dark-alert-bg);
    --color-shadow:        var(--dark-shadow);
    --color-shadow-strong: var(--dark-shadow-strong);
  }
}

:root[data-theme="dark"] {
  --color-bg:            var(--dark-bg);
  --color-surface:       var(--dark-surface);
  --color-surface-alt:   var(--dark-surface-alt);
  --color-text:          var(--dark-text);
  --color-text-muted:    var(--dark-text-muted);
  --color-accent:        var(--dark-accent);
  --color-accent-strong: var(--dark-accent-strong);
  --color-on-accent:     var(--dark-on-accent);
  --color-border:        var(--dark-border);
  --color-border-strong: var(--dark-border-strong);
  --color-alert:         var(--dark-alert);
  --color-alert-bg:      var(--dark-alert-bg);
  --color-shadow:        var(--dark-shadow);
  --color-shadow-strong: var(--dark-shadow-strong);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  height: 100%;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-height));
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-root);
  line-height: var(--leading-normal);
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums;
}

button { font: inherit; color: inherit; }

.wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.noscript {
  padding: var(--space-7) var(--gutter);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
}

/* ==========================================================================
   Header
   ========================================================================== */

.top {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-7) var(--space-5);
}

.top h1 {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: var(--case-display);
  text-wrap: balance;
}

.hero {
  display: block;
  width: 100%;
  aspect-ratio: var(--hero-ratio);
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  order: var(--hero-order);
}

.event-meta {
  margin: var(--space-5) 0 0;
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.lede {
  margin: var(--space-2) 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-md);
  max-width: var(--lede-width);
  font-weight: var(--weight-regular);
}

.search {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-4) var(--space-6);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-root);
}

.search::placeholder { color: var(--color-text-muted); }

.search:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--color-accent);
}

/* ==========================================================================
   Practical info
   ========================================================================== */

.practical {
  margin-bottom: var(--space-6);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.practical, .practical summary:focus-visible { border-radius: var(--radius-lg); }

.practical summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-6);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  list-style: none;
}

.practical summary::-webkit-details-marker { display: none; }

.practical summary::after {
  content: "+";
  font-weight: var(--weight-light);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.practical[open] summary::after { content: "\2212"; }

.practical summary:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-lg);
}

.practical-body {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
}

.practical-body p { margin: 0 0 var(--space-3); }
.practical-body ul { margin: 0; padding-left: var(--space-6); }
.practical-body li { margin-bottom: var(--space-1); }
.practical-body a { color: var(--color-link); text-underline-offset: var(--focus-ring-offset); }

.practical-body code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-bg);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
}

/* ==========================================================================
   Sticky bar: day tabs + track filter chips
   ========================================================================== */

.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: var(--z-sticky);
  background: var(--color-bg);
  border-bottom: var(--border-thin) solid var(--color-accent);
  box-shadow: var(--shadow-card);
}

.tabs { display: flex; }

.tab {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-1) var(--space-2);
  font-weight: var(--weight-medium);
  font-size: var(--text-tab);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: var(--border-marker) solid transparent;
  margin-bottom: calc(-1 * var(--border-thin));
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-snug);
}

.tab-plan { flex-grow: var(--tab-plan-grow); }

.tab small {
  display: block;
  font-weight: var(--weight-regular);
  font-size: var(--text-tab-note);
  letter-spacing: var(--tracking-normal);
}

.tab[aria-selected="true"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: var(--weight-bold);
}

.tab:focus-visible,
.chip:focus-visible,
.mark:focus-visible,
.link:focus-visible,
.now-btn:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--space-3);
}

.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-min);
  border: var(--border-hairline) solid var(--color-border-strong);
  background: transparent;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-radius: var(--radius-pill);
}

.chip b {
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: var(--tracking-wide);
}

.chip[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

.chip[aria-pressed="true"] b { color: var(--color-on-accent); }

/* ==========================================================================
   Day view: time slots and session rows
   ========================================================================== */

.hint {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin: var(--space-6) 0 var(--space-2);
}

.slot {
  display: grid;
  grid-template-columns: var(--slot-time-width) 1fr;
  column-gap: var(--space-5);
  padding-block: var(--space-2);
  border-bottom: var(--border-hairline) solid var(--color-border);
}

.slot-t {
  align-self: start;
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--header-height));
  padding: var(--space-5) 0;
}

.slot-t .t {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-slot-time);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: var(--leading-tight);
  color: var(--color-accent);
  letter-spacing: var(--tracking-tight);
}

.slot-t .live {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--case-micro);
  color: var(--color-accent);
}

.slot-t .live::before {
  content: "";
  display: inline-block;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: var(--radius-circle);
  background: currentColor;
  margin-right: var(--space-1);
}

.slot-list { min-width: 0; }

.row.go + .row.go,
.row.go + .row.maybe,
.row.maybe + .row.go,
.row.maybe + .row.maybe { margin-top: var(--space-2); }

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
  overflow-wrap: break-word;
}

/* Let the text column shrink past its longest word; break-word above then
   breaks that word instead of pushing the page wider than the viewport. */
.row > * { min-width: 0; }

.slot-list .row:first-child { border-top: 0; }
.row.past { opacity: var(--opacity-past); }

.row.go {
  background: var(--color-pick-bg);
  color: var(--color-pick-text);
  border-radius: var(--radius-md);
  border-top-color: transparent;
  padding-inline: var(--space-5);
  box-shadow: var(--shadow-card);
}

.row.go + .row { border-top-color: transparent; }

.row.go .meta,
.row.go .who,
.row.go .loc,
.row.go .desc,
.row.go .trkname { color: var(--color-pick-text); }

.row.go .rm,
.row.go .tag {
  background: transparent;
  border: var(--border-hairline) solid var(--color-pick-text);
  color: var(--color-pick-text);
}

.row.maybe {
  background: var(--color-maybe-bg);
  color: var(--color-maybe-text);
  border-radius: var(--radius-md);
  border-top-color: transparent;
  padding-inline: var(--space-5);
}

.row.maybe + .row { border-top-color: transparent; }

.row.brk {
  grid-template-columns: 1fr;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: center;
}

.rng { font-weight: var(--weight-medium); }

.rm {
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  color: var(--color-badge-text);
  background: var(--color-badge-bg);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--case-micro);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.tag {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--color-tag-text);
  background: var(--color-tag-bg);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
}

.title {
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  margin: var(--space-2) 0 0;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: pretty;
}

.kind { font-weight: var(--weight-regular); }
.who { font-size: var(--text-sm); color: var(--color-text-muted); }

.desc {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  line-height: var(--leading-normal);
}

.loc { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.trkname { font-weight: var(--weight-medium); color: var(--color-text); }

.warn {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-alert);
  background: var(--color-alert-bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  display: inline-block;
}

.row.go .warn { background: var(--color-bg); }

.warn.soft {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  background: transparent;
  padding: 0;
}

.row.go .warn.soft { color: var(--color-pick-text); background: transparent; }

/* ==========================================================================
   Pick button
   ========================================================================== */

.mark {
  align-self: start;
  width: var(--mark-size);
  height: var(--mark-size);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: var(--border-thin) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
}

.mark svg {
  width: var(--icon-size);
  height: var(--icon-size);
  stroke-width: var(--icon-stroke);
}

.mark span {
  font-size: var(--text-3xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--case-micro);
}

.mark[data-state="go"] {
  background: var(--color-pick-text);
  color: var(--color-accent);
  border-color: var(--color-pick-text);
}

.mark[data-state="maybe"] { background: var(--color-bg); }
.mark:active { transform: scale(var(--press-scale)); }

/* ==========================================================================
   Plan view
   ========================================================================== */

.day-h {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-2xl);
  color: var(--color-heading);
  margin: var(--space-8) 0 var(--space-3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: var(--case-display);
}

.plan-day .row { border-top: var(--border-hairline) solid var(--color-border); }
.gap { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-3) var(--space-4); }

.summary {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-md);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.summary b { font-weight: var(--weight-bold); }
.summary.bad { background: var(--color-alert-bg); color: var(--color-alert); }

/* ==========================================================================
   Empty states, footer, jump button
   ========================================================================== */

.empty {
  overflow-wrap: break-word;
  padding: var(--space-9) var(--space-6);
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: var(--lede-width);
}

.empty strong {
  display: block;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: var(--case-display);
  margin-bottom: var(--space-3);
}

.foot { color: var(--color-text-muted); font-size: var(--text-xs); padding: var(--space-8) 0 var(--space-10); }

.link {
  display: inline-block;
  background: none;
  border: 0;
  padding-block: var(--space-4);
  padding-inline: 0;
  min-height: var(--tap-min);
  color: var(--color-alert);
  text-decoration: underline;
  text-underline-offset: var(--focus-ring-offset);
  cursor: pointer;
  font-size: var(--text-xs);
}

.now-btn {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-fab);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--case-micro);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-7);
  cursor: pointer;
  display: none;
  box-shadow: var(--shadow-raised);
}

.now-btn.show { display: block; }

/* ==========================================================================
   Wide viewports — the column stops growing, so give the time gutter and the
   session block more room instead. Breakpoint is where --content-width plus
   two gutters stops fitting, not a device size.
   ========================================================================== */

@media (min-width: 50rem) {
  .top { padding-block: var(--space-9) var(--space-6); }
  .hero { margin-bottom: var(--space-8); }
  .slot { column-gap: var(--space-7); }
  .row { padding-inline: var(--space-5); }
  .empty { padding: var(--space-9) var(--space-8); }
}

/* ==========================================================================
   Print — the schedule as a handout. Interactive chrome goes, the light
   palette is forced (no dark ink on dark paper), rows stay whole.
   ========================================================================== */

@media print {
  :root {
    --color-bg:            var(--light-bg);
    --color-surface:       var(--light-surface);
    --color-surface-alt:   var(--light-surface-alt);
    --color-text:          var(--light-text);
    --color-text-muted:    var(--light-text-muted);
    --color-accent:        var(--light-accent);
    --color-accent-strong: var(--light-accent-strong);
    --color-on-accent:     var(--light-on-accent);
    --color-border:        var(--light-border);
    --color-border-strong: var(--light-border-strong);
    --color-alert:         var(--light-alert);
    --color-alert-bg:      var(--light-alert-bg);
    --shadow-card:         none;
    --shadow-raised:       none;
    --opacity-past:        1;
    --content-width:       100%;
  }

  .bar, .now-btn, .search, .mark, .hint, .link { display: none; }
  /* A handout is more use with the practical info on it than folded away. */
  .practical .practical-body { display: block; }
  .practical[open] summary::after, .practical summary::after { content: ""; }
  .bar { position: static; }
  .slot-t { position: static; }
  .row, .slot, .summary, .practical { break-inside: avoid; }
  .day-h { break-after: avoid; }
  .foot { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}