/* ============================================================
   LAYOUT LAYER — brand-blind timetable engine.
   Consumes ONLY semantic tokens from tokens.css. Never a brand
   hex, program name, or school string.

   Body state classes (set by js/timetable.js):
     .tt-on               enhancement active
     .v-a .v-b .v-c .v-f  layout variant
     .aud-adults .aud-kids  active audience
   Element state classes:
     .is-off      audience section hidden (screen only)
     .is-day-off  day hidden by mobile day view (screen only)
     .is-dim      card excluded by current filter (desktop)
     .is-hide     card excluded by current filter (mobile)
     .is-today    today's day section
   ============================================================ */

/* ---------- Base ---------- */

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

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--tt-surface);
  color: var(--tt-ink);
  font-family: var(--tt-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--tt-focus);
  outline-offset: 2px;
}

.tt-vh,
.tt-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Chrome band ---------- */

.tt-chrome {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(16px, 3vw, 32px);
  background: var(--tt-surface-inverse);
  color: var(--tt-ink-inverse);
}

.tt-brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 0; }

.tt-logo { width: 44px; height: 44px; flex: none; }

.tt-school { margin: 0; display: flex; flex-direction: column; min-width: 0; }

.tt-school-name {
  font-family: var(--tt-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tt-school-sub {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-ink-inverse-2);
  margin-top: 3px;
}

.tt-cta {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 26px;
  background: var(--tt-accent);
  color: var(--tt-accent-ink);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--tt-radius-sm);
  transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}
.tt-cta:hover { background: var(--tt-accent-hover); transform: translateY(-1px); }
.tt-cta:active { background: var(--tt-accent-pressed); transform: none; }
.tt-cta:focus-visible { outline-color: var(--tt-focus-inverse); }

/* ---------- Deck (ask + audience switch + chips) ---------- */

.tt-deck {
  padding: 20px clamp(16px, 3vw, 32px) 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.tt-ask {
  margin: 0;
  font-family: var(--tt-font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.94;
  color: var(--tt-ink);
}

.tt-seg {
  display: inline-flex;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-pill);
  padding: 3px;
  background: var(--tt-surface-2);
}

.tt-seg button {
  min-height: 38px;
  padding: 0 20px;
  border-radius: var(--tt-radius-pill);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tt-ink-3);
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.tt-seg button[aria-pressed="true"] {
  background: var(--tt-surface-inverse);
  color: var(--tt-ink-inverse);
}

.tt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Scrollable chip row: soft fade where more content hides (JS toggles) */
.tt-chips.fade-r {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
}
.tt-chips.fade-l {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px);
  mask-image: linear-gradient(90deg, transparent, #000 44px);
}
.tt-chips.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}

.tt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-radius-pill);
  background: var(--tt-surface);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tt-ink-2);
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out,
              color 0.2s ease-out, transform 0.2s ease-out;
}
.tt-chip:hover { border-color: var(--tt-ink-3); transform: translateY(-1px); }

.tt-chip .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--p, var(--tt-ink-3));
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.35);
}

.tt-chip[aria-pressed="true"] {
  background: var(--tt-surface-inverse);
  border-color: var(--tt-surface-inverse);
  color: var(--tt-ink-inverse);
}

/* Program/age chips fill with their own colour when active */
.tt-chip.has-p[aria-pressed="true"] {
  background: var(--p);
  border-color: var(--p);
}
.tt-chip.has-p.ink-light[aria-pressed="true"] { color: var(--tt-ink-inverse); }
.tt-chip.has-p.ink-dark[aria-pressed="true"] { color: var(--tt-ink); }
.tt-chip.has-p[aria-pressed="true"] .dot { background: currentColor; }

/* ---------- Legend ---------- */

.tt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
  padding: 14px clamp(16px, 3vw, 32px);
  border-top: 1px solid var(--tt-hairline);
  font-size: 13px;
  color: var(--tt-ink-2);
}

.tt-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tt-legend .dot {
  width: 11px; height: 11px;
  border-radius: 3px;
  background: var(--p);
  flex: none;
  /* keeps any brand's darkest/lightest program visible on any surface */
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.35);
}

.tt-legend .lg b {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: 0.03em;
}

.tt-legend .lg i { font-style: normal; color: var(--tt-ink-3); }

/* ---------- Day strip (mobile) ---------- */

.tt-strip {
  display: none;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tt-surface);
  border-block: 1px solid var(--tt-hairline);
  padding: 6px 8px;
}

.tt-strip ol {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0; padding: 0;
  list-style: none;
}

.tt-strip button {
  width: 100%;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--tt-radius);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--tt-ink-2);
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.tt-strip button .n {
  font-size: 11px;
  font-weight: 400;
  color: var(--tt-ink-3);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* With a filter active: dot marks days that have matching classes,
   dayless buttons recede. --fp is the active filter's program colour. */
.tt-strip button.day-hit .n::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fp, var(--tt-accent));
  box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.35);
}
.tt-strip button.day-miss { opacity: 0.45; }
.tt-strip button.day-miss[aria-pressed="true"] { opacity: 1; }
.tt-strip button.n-soon .n { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }

.tt-strip button[aria-pressed="true"] {
  background: var(--tt-surface-inverse);
  color: var(--tt-ink-inverse);
}
.tt-strip button[aria-pressed="true"] .n { color: var(--tt-ink-inverse-2); }

.tt-strip button.is-today-tab:not([aria-pressed="true"]) {
  box-shadow: inset 0 -3px 0 var(--tt-accent);
}

/* ---------- Source section: no-JS agenda look ---------- */

main { padding: 0 clamp(16px, 3vw, 32px) 32px; }

.tt-source h2 {
  font-family: var(--tt-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1;
  margin: 40px 0 16px;
}

.tt-key h2 { font-size: 24px; }

.tt-programs {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 14px;
  color: var(--tt-ink-2);
  max-width: 72ch;
}

body:not(.tt-on) .tt-audience section[data-day] { max-width: 560px; }

.tt-audience h3 {
  font-family: var(--tt-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.03em;
  margin: 22px 0 8px;
}

.tt-audience ol {
  margin: 0; padding: 0;
  list-style: none;
}

body:not(.tt-on) .tt-audience li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--tt-hairline);
  font-variant-numeric: tabular-nums;
}
body:not(.tt-on) .tt-audience li b { font-weight: 700; }
body:not(.tt-on) .tt-audience li i { font-style: normal; color: var(--tt-ink-3); font-size: 14px; }

/* ============================================================
   ENHANCED MODE
   ============================================================ */

body.tt-on .tt-key { display: none; }
body.tt-on .tt-audience > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
body.tt-on .tt-audience.is-off { display: none; }

/* --- Audience board: 7 day columns (+ band rail in C/F) --- */

body.tt-on .tt-audience {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 10px;
  margin-top: 18px;
  scrollbar-width: thin;
}

body.tt-on .tt-audience section[data-day] {
  display: grid;
  grid-template-rows: var(--dayhead-h, 40px) 1fr;
  min-width: 0;
}

body.tt-on .tt-audience h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--tt-ink-2);
  border-bottom: 2px solid var(--tt-line);
  background: var(--tt-surface);
}

body.tt-on .tt-audience .is-today h3 { border-bottom-color: var(--tt-accent); color: var(--tt-ink); }

@media (min-width: 700px) {
  body.tt-on .tt-audience section[data-day].is-today {
    background: var(--tt-today-wash);
    box-shadow: 0 10px 0 var(--tt-today-wash);
  }
  body.tt-on .tt-audience section[data-day].is-today h3 { background: var(--tt-today-wash); }
}

.tt-today-tag {
  font-family: var(--tt-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tt-accent-ink);
  background: var(--tt-accent);
  padding: 2px 6px;
  border-radius: 3px;
}

body.tt-on .tt-audience ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  min-width: 0;
}

/* --- Band rail + banded rows (C/F only) --- */

.tt-bands { display: none; }

body.tt-on.v-b .tt-audience,
body.tt-on.v-c .tt-audience,
body.tt-on.v-f .tt-audience {
  grid-template-columns: 44px repeat(7, minmax(0, 1fr));
}

body.tt-on.v-b .tt-bands,
body.tt-on.v-c .tt-bands,
body.tt-on.v-f .tt-bands {
  display: grid;
  grid-template-rows: var(--dayhead-h, 40px) 1fr;
}

.tt-bands .rail {
  display: grid;
  grid-template-rows:
    repeat(var(--rows-m, 1), var(--row-h, 74px))
    var(--band-gap, 18px)
    repeat(var(--rows-d, 1), var(--row-h, 74px))
    var(--band-gap, 18px)
    repeat(var(--rows-e, 1), var(--row-h, 74px));
  row-gap: 8px;
  padding-top: 10px;
}

.tt-bands .bl {
  writing-mode: sideways-lr;
  justify-self: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-ink-3);
  border-left: 1px solid var(--tt-line);
  padding-left: 8px;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.tt-bands .bl.is-empty { visibility: hidden; }

body.tt-on.v-b .tt-audience ol,
body.tt-on.v-c .tt-audience ol,
body.tt-on.v-f .tt-audience ol {
  display: grid;
  grid-template-rows:
    repeat(var(--rows-m, 1), var(--row-h, 74px))
    var(--band-gap, 18px)
    repeat(var(--rows-d, 1), var(--row-h, 74px))
    var(--band-gap, 18px)
    repeat(var(--rows-e, 1), var(--row-h, 74px));
  row-gap: 8px;
}

body.tt-on.v-b .tt-card,
body.tt-on.v-c .tt-card,
body.tt-on.v-f .tt-card { grid-row: var(--row); }

/* --- Row-height measurement (JS adds these transiently) --- */

body.tt-on .tt-audience.m-ghost {
  display: grid !important;
  visibility: hidden;
  position: absolute;
  left: 0; right: 0;
}
body.tt-on .tt-audience.measuring ol {
  display: flex !important;
  flex-direction: column;
}
body.tt-on .tt-audience.measuring .tt-card { grid-row: auto !important; }
/* Stale inline row templates must not feed back into the measurement.
   The rail keeps its grid column (hiding it would shift every day section
   into the 44px track) but drops its stale inline row template. */
body.tt-on .tt-audience.measuring .tt-bands .rail { grid-template-rows: none !important; }
body.tt-on .tt-audience.measuring .tt-card-btn { height: auto !important; }

/* --- Class cards --- */

.tt-card { min-width: 0; }

.tt-card-btn {
  width: 100%;
  height: 100%;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 9px 12px;
  text-align: left;
  background: var(--p);
  border: 1px solid var(--tt-card-edge, transparent);
  border-radius: var(--tt-radius);
  box-shadow: var(--tt-shadow-xs);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out,
              background-color 0.2s ease-out;
}

.tt-card.ink-light .tt-card-btn { color: var(--tt-ink-inverse); }
.tt-card.ink-dark  .tt-card-btn { color: var(--tt-ink); }

/* Coming soon: outlined rather than filled, so "not running yet" reads
   at a glance without needing the legend. Keeps the program colour. */
.tt-card.is-soon .tt-card-btn {
  background: color-mix(in srgb, var(--p) 8%, var(--tt-surface));
  border: 1px dashed color-mix(in srgb, var(--p) 55%, var(--tt-surface));
  color: var(--tt-ink);
  box-shadow: none;
}
.tt-card.is-soon .tt-name { color: color-mix(in srgb, var(--p) 72%, var(--tt-ink)); }
.tt-card.is-soon .tt-time,
.tt-card.is-soon .tt-meta .tag { color: var(--tt-ink-3); }

.tt-soon {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 1px 7px;
  border-radius: var(--tt-radius-pill);
  background: var(--p);
  color: #FCFCFC;
  white-space: nowrap;
}
.tt-card.ink-dark .tt-soon,
.tt-card.is-soon.ink-soon .tt-soon { color: var(--tt-ink-inverse); }

.tt-soon-note {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tt-ink-3);
  margin-left: 6px;
}

.tt-card-btn:hover { transform: translateY(-2px); box-shadow: var(--tt-shadow-sm); }
.tt-card-btn:active { transform: none; }
.tt-card-btn:focus-visible {
  outline: 2px solid var(--tt-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--tt-surface);
}

.tt-name {
  font-family: var(--tt-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.02;
  letter-spacing: 0.015em;
}

.tt-time {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tt-meta {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tt-kind {
  font-weight: 700;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
}

.tt-flag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 1px 7px;
  border-radius: var(--tt-radius-pill);
  text-transform: uppercase;
}
.tt-flag.now  { background: var(--tt-accent); color: var(--tt-accent-ink); }
.tt-flag.next { background: var(--tt-surface); color: var(--tt-ink); box-shadow: var(--tt-shadow-xs); }

/* --- Filter dim / hide --- */

body.tt-on .tt-card.is-dim .tt-card-btn {
  /* each card recedes into a pale tint of its own program colour */
  background: color-mix(in srgb, var(--p) 12%, var(--tt-surface));
  color: var(--tt-dim-ink);
  box-shadow: none;
}
body.tt-on .tt-card.is-dim .tt-card-btn:hover { transform: none; }
body.tt-on .tt-card.is-dim .tt-flag { display: none; }

/* --- Empty day note (mobile) --- */

.tt-empty {
  padding: 28px 16px;
  color: var(--tt-ink-3);
  font-size: 15px;
  display: none;
}

/* ============================================================
   VARIANTS
   ============================================================ */

/* A — dial hero */
body.v-a .tt-deck { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 36px; }
body.v-a .tt-ask { font-size: clamp(40px, 6vw, 72px); }
body.v-a .tt-seg { display: none; }   /* audience folded into chips */
body.v-a .tt-legend { border-top: 0; padding-top: 0; }

/* B — audience folded into chips at every width */
body.v-b .tt-seg { display: none; }

/* C — toolbar */
body.v-c .tt-deck { padding-top: 14px; }
body.v-c .tt-ask { display: none; }

/* F — fusion */
body.v-f .tt-ask { font-size: clamp(22px, 2.6vw, 30px); margin-right: 6px; }

/* B — side rail (desktop ≥1280) */
@media (min-width: 1280px) {
  body.v-b {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    min-height: 100dvh;
  }
  body.v-b .tt-chrome {
    grid-column: 1; grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 24px 12px;
    background: var(--tt-surface-inverse);
  }
  body.v-b .tt-brand { flex: none; }
  body.v-b .tt-cta { margin-left: 0; align-self: stretch; justify-content: center; }
  body.v-b .tt-deck {
    grid-column: 1; grid-row: 2;
    background: var(--tt-surface-inverse);
    color: var(--tt-ink-inverse);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 8px 24px 24px;
  }
  body.v-b .tt-ask { color: var(--tt-ink-inverse); font-size: 26px; }
  body.v-b .tt-chips { flex-direction: column; align-items: stretch; }
  body.v-b .tt-chip {
    justify-content: flex-start;
    background: transparent;
    border-color: var(--tt-hairline-inverse);
    color: var(--tt-ink-inverse-2);
  }
  body.v-b .tt-chip:hover { border-color: var(--tt-ink-inverse-2); color: var(--tt-ink-inverse); }
  body.v-b .tt-chip[aria-pressed="true"] {
    background: var(--tt-surface);
    border-color: var(--tt-surface);
    color: var(--tt-ink);
  }
  body.v-b .tt-chip:focus-visible { outline-color: var(--tt-focus-inverse); }
  body.v-b .tt-legend {
    grid-column: 1; grid-row: 3;
    align-self: start;
    background: var(--tt-surface-inverse);
    color: var(--tt-ink-inverse-2);
    border-top: 1px solid var(--tt-hairline-inverse);
    padding: 16px 24px 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  body.v-b .tt-legend .lg i { color: var(--tt-ink-inverse-2); }
  body.v-b .tt-legend .lg b { color: var(--tt-ink-inverse); }
  /* rail column stays visually continuous: dark page, light content area */
  body.v-b { background: var(--tt-surface-inverse); }
  body.v-b main { grid-column: 2; grid-row: 1 / span 3; padding-top: 8px; background: var(--tt-surface); }
  body.v-b .tt-foot { grid-column: 2; grid-row: 4; background: var(--tt-surface); margin: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: bounded calendar scrollport */
@media (min-width: 700px) and (max-width: 1099px) {
  body.tt-on .tt-audience {
    overflow: auto;
    max-height: calc(100dvh - 140px);
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    border: 1px solid var(--tt-hairline);
    border-radius: var(--tt-radius);
    padding: 0 10px 10px;
    /* scroll shadows: covers travel with content, shadows pin to edges */
    background:
      linear-gradient(90deg, var(--tt-surface) 40%, transparent) left/28px 100% no-repeat local,
      linear-gradient(-90deg, var(--tt-surface) 40%, transparent) right/28px 100% no-repeat local,
      linear-gradient(90deg, var(--tt-scroll-shadow), transparent) left/12px 100% no-repeat scroll,
      linear-gradient(-90deg, var(--tt-scroll-shadow), transparent) right/12px 100% no-repeat scroll,
      var(--tt-surface);
  }
  body.tt-on.v-b .tt-audience,
  body.tt-on.v-c .tt-audience,
  body.tt-on.v-f .tt-audience {
    grid-template-columns: 40px repeat(7, minmax(150px, 1fr));
  }
  body.tt-on .tt-audience section[data-day] { scroll-snap-align: start; }
  body.tt-on .tt-audience h3 {
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .tt-name { font-size: 15px; }
  .tt-card-btn { padding: 8px 10px; }
}

/* Mobile: day strip + one day */
@media (max-width: 699px) {
  .tt-chrome { padding-block: 10px; }
  .tt-school-name { font-size: 18px; }
  .tt-cta { min-height: 40px; padding: 0 14px; font-size: 12.5px; }
  body.tt-on .tt-strip { display: block; }
  body.tt-on .tt-audience { display: block; }
  body.tt-on .tt-audience section[data-day] { display: block; }
  body.tt-on .tt-audience section[data-day].is-day-off { display: none; }
  .tt-bands { display: none !important; }
  body.tt-on .tt-audience h3 {
    border-bottom: 0;
    font-size: 20px;
    margin: 18px 0 4px;
    background: none;
  }
  /* Selectors repeated at variant specificity so band-grid rules
     (body.tt-on.v-c/.v-f) cannot out-specify the phone layout. */
  body.tt-on .tt-audience ol,
  body.tt-on.v-b .tt-audience ol,
  body.tt-on.v-c .tt-audience ol,
  body.tt-on.v-f .tt-audience ol {
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-template-rows: none;
  }
  body.tt-on .tt-card,
  body.tt-on.v-b .tt-card,
  body.tt-on.v-c .tt-card,
  body.tt-on.v-f .tt-card { grid-row: auto; }
  body.tt-on .tt-card.is-hide { display: none; }
  .tt-card-btn { min-height: 72px; }
  .tt-name { font-size: 17px; }
  .tt-time { font-size: 14px; }
  .tt-empty.is-on { display: block; }
  body.v-a .tt-ask { font-size: clamp(34px, 11vw, 44px); }
  body.v-a .tt-deck { padding-top: 22px; }
  .tt-deck { padding-top: 14px; }
  .tt-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .tt-chips::-webkit-scrollbar { display: none; }
  .tt-chip { white-space: nowrap; }

  /* The audience toggle is the primary control — full width, unmissable */
  .tt-seg { display: flex; width: 100%; }
  .tt-seg button {
    flex: 1;
    min-height: 48px;
    font-size: 15px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }

  /* One legend entry per line — mixed wrapping reads as noise */
  .tt-legend { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   DIALOG
   ============================================================ */

.tt-dialog {
  border: 0;
  padding: 0;
  border-radius: var(--tt-radius-lg);
  max-width: min(430px, calc(100vw - 32px));
  width: 100%;
  box-shadow: var(--tt-shadow-lg);
  background: var(--tt-surface);
  color: var(--tt-ink);
}
.tt-dialog::backdrop { background: var(--tt-scrim, rgba(26, 26, 26, 0.55)); }

.tt-dialog-head {
  padding: 20px 22px 16px;
  background: var(--p);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tt-dialog-head.ink-light { color: var(--tt-ink-inverse); }
.tt-dialog-head.ink-dark { color: var(--tt-ink); }

.tt-dialog-head h2 {
  margin: 0;
  font-family: var(--tt-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 0.98;
  flex: 1;
}

.tt-dialog-close {
  flex: none;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  background: rgba(26, 26, 26, 0.14);
}
.tt-dialog-head.ink-light .tt-dialog-close { background: rgba(252, 252, 252, 0.18); }

.tt-dialog-body { padding: 18px 22px 22px; }

.tt-dialog-body .row {
  display: flex;
  gap: 10px;
  font-size: 14px;
  padding: 5px 0;
  color: var(--tt-ink-2);
  font-variant-numeric: tabular-nums;
}
.tt-dialog-body .row b { min-width: 84px; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; color: var(--tt-ink-3); padding-top: 1px; }

.tt-dialog-body p.desc { margin: 12px 0 4px; font-size: 15px; line-height: 1.55; color: var(--tt-ink-2); }

.tt-dialog-body .tt-cta { margin: 18px 0 0; width: 100%; justify-content: center; }

/* ============================================================
   FOOTER + SWITCHER
   ============================================================ */

.tt-foot {
  padding: 20px clamp(16px, 3vw, 32px) 28px;
  font-size: 13px;
  color: var(--tt-ink-3);
  border-top: 1px solid var(--tt-hairline);
}
.tt-foot p { margin: 0; }

/* ============================================================
   MOTION
   ============================================================ */

.tt-card-btn, .tt-chip, .tt-seg button, .tt-strip button { will-change: auto; }

body.tt-on .tt-card { transition: opacity 0.2s ease-out; }

/* First paint must arrive settled: without this the audience toggle and
   chips visibly animate into their initial state on load. */
html.tt-preload *,
html.tt-preload *::before,
html.tt-preload *::after {
  transition: none !important;
  animation: none !important;
}

/* The one authored moment: an incoming view rises into place */
@keyframes tt-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
body.tt-on .tt-audience.tt-anim,
body.tt-on section[data-day].tt-anim { animation: tt-in 0.22s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   PRINT — A4 landscape, both audiences always, one per sheet
   ============================================================ */

@media print {
  @page { size: A4 landscape; margin: 9mm; }

  /* Paper is always light — a dark skin must not print white-on-white */
  :root, :root[data-theme="dark"] {
    --tt-surface: #FCFCFC;
    --tt-ink: #1A1A1A;
    --tt-ink-2: #333333;
    --tt-ink-3: #575756;
    --tt-ink-inverse: #FCFCFC;
    --tt-card-edge: transparent;
  }

  body { background: #fff; font-size: 8.5pt; }

  .tt-chrome, .tt-deck, .tt-strip, .tt-legend,
  .tt-foot, .tt-dialog, .tt-key { display: none !important; }

  main { padding: 0; }

  /* Reverse every screen-state hide */
  body.tt-on .tt-audience.is-off { display: grid !important; }
  body.tt-on .tt-audience section[data-day].is-day-off { display: grid !important; }
  body.tt-on .tt-card.is-hide { display: block !important; }
  .tt-empty { display: none !important; }

  body.tt-on .tt-audience {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    column-gap: 2mm;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    padding: 0 !important;
    break-inside: avoid-page;
  }
  .tt-audience[data-aud="adults"] { break-after: page; }

  .tt-bands { display: none !important; }
  body.tt-on .tt-audience ol {
    display: flex !important;
    flex-direction: column;
    gap: 1.6mm;
    padding-top: 2mm;
  }
  body.tt-on .tt-card { grid-row: auto !important; }

  body.tt-on .tt-audience h3 {
    position: static !important;
    font-size: 10pt;
    border-bottom: 1.5pt solid #1A1A1A;
  }
  .tt-today-tag { display: none; }
  .tt-flag { display: none; }

  .tt-card-btn {
    min-height: 0;
    padding: 1.8mm 2.2mm;
    border-radius: 1.5mm;
    box-shadow: none;
    border-left: 2.5pt solid var(--p);
    background: var(--p);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    break-inside: avoid;
  }
  .tt-name { font-size: 8.5pt; }
  .tt-time { font-size: 7.5pt; }
  .tt-meta { font-size: 6.5pt; }

  /* Dim state resets — filters never survive onto paper. Ink-specific
     selectors out-rank the screen dim rule for every card state. */
  body.tt-on .tt-card.is-dim.ink-light .tt-card-btn,
  body.tt-on .tt-card.ink-light .tt-card-btn {
    background: var(--p);
    color: var(--tt-ink-inverse);
  }
  body.tt-on .tt-card.is-dim.ink-dark .tt-card-btn,
  body.tt-on .tt-card.ink-dark .tt-card-btn {
    background: var(--p);
    color: var(--tt-ink);
  }
  body.tt-on .tt-card.is-dim .tt-name::before { display: none; }

  /* Coming soon prints outlined too — a printed sheet must not imply
     the class already runs. */
  body.tt-on .tt-card.is-soon .tt-card-btn,
  body.tt-on .tt-card.is-soon.is-dim .tt-card-btn {
    background: #fff;
    color: #1A1A1A;
    border: 1pt dashed #575756;
    border-left: 2.5pt solid var(--p);
  }
  .tt-soon {
    background: transparent;
    color: #1A1A1A;
    border: 0.75pt solid #575756;
    padding: 0 3pt;
  }

  /* Injected per-sheet furniture */
  .tt-print-head {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    grid-column: 1 / -1;
    border-bottom: 2pt solid #1A1A1A;
    padding-bottom: 2mm;
    margin-bottom: 2mm;
  }
  .tt-print-head .t {
    font-family: var(--tt-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16pt;
  }
  .tt-print-head .s { font-size: 9pt; color: #333; }

  .tt-print-legend {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1mm 6mm;
    grid-column: 1 / -1;
    margin-top: 3mm;
    padding-top: 2mm;
    border-top: 0.75pt solid #C6C6C6;
    font-size: 7.5pt;
  }
  .tt-print-legend .lg { display: inline-flex; align-items: center; gap: 1.6mm; }
  .tt-print-legend .dot {
    width: 2.6mm; height: 2.6mm; border-radius: 0.8mm;
    background: var(--p);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    border: 0.5pt solid #575756;
  }

  .tt-print-foot {
    display: block !important;
    grid-column: 1 / -1;
    margin-top: 2mm;
    font-size: 7pt;
    color: #575756;
  }
}

/* Print furniture hidden on screen */
.tt-print-head, .tt-print-legend, .tt-print-foot { display: none; }