/* =============================================================================
   Del Plaza — timetable
   Market Timetable (/timetable.html) — the weekly market rotation calendar.

   Governing rule of this page: HMT (Harmonic Mean Time, Makoua — UTC+01:00)
   always takes visual precedence. Every local conversion is subordinate in
   scale, weight and colour, and is labelled as a courtesy reading.

   DESIGN_BIBLE §2 (Provenance Mandate), §3 (Civic Grid Systems),
   §4 (Grid & Breakpoints), §5 (Spacing), §6 (Typography),
   §7 (Colour Architecture), §8 (Button Geometry), §10 (Card Patterns),
   §13 (Animation & Micro-interactions), §14 (Accessibility), §15 (Responsive)
   ============================================================================= */

/* =============================================================================
   1. Page Canvas & Avenue Rhythm
   ============================================================================= */
.timetable-page {
  padding-top: 0; /* the hero avenue rises to meet the header */
}

.tt-avenue {
  padding: var(--spacing-lg) 0;
}

@media (min-width: 660px) {
  .tt-avenue {
    padding: var(--spacing-xl) 0;
  }
}

@media (min-width: 1024px) {
  .tt-avenue {
    padding: var(--spacing-xxl) 0;
  }
}

/* ---- Shared avenue heading (Blocks within an Avenue) ---- */
.tt-avenue__header {
  margin-bottom: var(--spacing-sm);
  max-width: 760px;
}

.tt-avenue__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900; /* Univers Black */
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-nano);
}

.tt-avenue__lead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-content-primary);
  margin-bottom: 0;
}

/* =============================================================================
   2. Hero Avenue — Deep Navy
   The markup has always declared this avenue a Deep Navy ground (see the
   "Avenue 1 — Hero" comment in timetable.html); the stylesheet had drifted to
   Imperial Plum. This restores the documented intent.
   Parchment Cream on Deep Navy = 8.0:1 (DESIGN_BIBLE §7).
   Cognac is NOT used for text on this ground (1.8:1). Golden Milk carries every
   accent on this ground at 6.4:1.
   ============================================================================= */
.tt-hero {
  background-color: var(--deep-navy);
  color: var(--color-content-on-dark);
  padding: var(--spacing-xl) 0 var(--spacing-xxl);
}

.tt-hero__breadcrumb {
  /* Top lane matched to .account-breadcrumb on /my-account.php */
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.tt-hero__breadcrumb .breadcrumb {
  margin-bottom: 0;
}

.tt-hero__breadcrumb .breadcrumb-item {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.tt-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  /* Separator recast in Golden Milk: Cognac fails contrast on Deep Navy. */
  color: var(--golden-milk);
  content: "\203A";
}

.tt-hero__breadcrumb .breadcrumb-item a {
  color: rgba(249, 243, 229, 0.8);
  text-decoration: none;
}

.tt-hero__breadcrumb .breadcrumb-item a:hover {
  color: var(--golden-milk);
}

.tt-hero__breadcrumb .breadcrumb-item.active {
  color: #ffffff;
  font-weight: 600;
}

.tt-hero__overline {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--golden-milk);
  margin-bottom: var(--spacing-nano);
}

.tt-hero__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900; /* Univers Black */
  font-style: italic;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.04;
  color: #ffffff;
  margin-bottom: var(--spacing-xs);
}

.tt-hero__rule {
  display: block;
  width: 64px;
  height: 3px;
  background-color: var(--golden-milk);
  margin-bottom: var(--spacing-xs);
}

.tt-hero__lead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-content-on-dark);
  max-width: 620px;
  margin-bottom: var(--spacing-sm);
}

/* ---- Cycle facts — the four constants of the rotation ---- */
.tt-hero__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-border-on-dark);
  border: 1px solid var(--color-border-on-dark);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  overflow: hidden;
}

@media (min-width: 390px) {
  .tt-hero__facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The fact cells carry the avenue's own ground; the 1px gaps and the shared
   border inside .tt-hero__facts are what divide them. */
.tt-fact {
  background-color: var(--deep-navy);
  padding: var(--spacing-nano) var(--spacing-xxs);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-tiny);
}

.tt-fact__label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: rgba(249, 243, 229, 0.78);
}

.tt-fact__value {
  font-family: var(--font-primary);
  font-weight: 700; /* Univers Black */
  font-size: 0.875rem;
  color: var(--golden-milk);
}

/* =============================================================================
   3. HMT Master Clock — the page's principal instrument
   HMT is the loudest reading on the page by design.
   ============================================================================= */
.tt-clock {
  background-color: rgba(249, 243, 229, 0.06);
  border: 1px solid var(--color-border-on-dark);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-xs);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tt-clock__overline {
  display: block;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--golden-milk);
  margin-bottom: var(--spacing-nano);
}

.tt-clock__primary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--spacing-quark);
  margin-bottom: var(--spacing-quark);
}

.tt-clock__time {
  font-family: 'Univers', var(--font-primary);
  font-weight: 700; /* Univers Black */
  font-size: clamp(2.5rem, 7vw, 3.25rem);
  line-height: 1;
  color: #ffffff;
  font-variant-numeric: tabular-nums; /* the ticking seconds never reflow */
}

.tt-clock__meridiem {
  font-family: 'Univers', var(--font-primary);
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: #ffffff;
  min-width: 2.25ch;
}

.tt-clock__unit {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-quark) var(--spacing-nano);
  background-color: var(--golden-milk);
  color: var(--slate-charcoal);
  font-family: 'Univers', var(--font-primary);
  font-weight: 700; /* Univers Black */
  font-size: 0.8125rem;
  text-transform: uppercase;
  border-radius: var(--border-radius-sticker);
  transform: translateY(-0.5rem);
}

.tt-clock__reference {
  display: block;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(249, 243, 229, 0.78);
  margin-bottom: var(--spacing-xxs);
}

.tt-clock__local {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-quark) var(--spacing-nano);
  margin-top: auto;
  padding-top: var(--spacing-xxs);
  border-top: 1px solid var(--color-border-on-dark);
}

.tt-clock__local-label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--golden-milk);
}

.tt-clock__local-time {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-content-on-dark);
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   4. Basket Notice — switchover advisory
   Deliberately NOT the Store Banner (§9.1 reserves that for Product, Basket
   and Checkout). This is a desk notice: white card, Cognac edge rule.
   ============================================================================= */
.tt-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xxs);
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-left: 4px solid var(--cognac);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  padding: var(--spacing-xs);
  box-shadow: var(--shadow-light);
}

.tt-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--golden-milk);
  color: var(--slate-charcoal);
  font-size: 1.25rem;
  border-radius: 0 0 9px 9px; /* DESIGN_BIBLE §8 sticker geometry */
}

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

.tt-notice__title {
  font-family: 'Univers Condensed', var(--font-primary);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-quark);
}

.tt-notice__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-content-primary);
  margin-bottom: 0;
  max-width: 880px;
}

.tt-notice__text strong {
  font-weight: 600;
  color: var(--color-content-heading);
}

/* =============================================================================
   5. Status Band — Now open · Countdown · Up next
   ============================================================================= */
.tt-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xxs);
}

@media (min-width: 768px) {
  .tt-status {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tt-status__panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-nano);
  padding: var(--spacing-sm) var(--spacing-xs);
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.tt-status__panel--now {
  border-top: 3px solid var(--cognac);
}

.tt-status__panel--next {
  border-top: 3px solid var(--tawny-umber);
}

/* ---- Countdown panel — a filled surface; the page's key figure ----
   Panel palette is expressed as local custom properties so the
   refresh-window state can invert the whole panel in one declaration. */
.tt-status__panel--count {
  --tt-panel-bg: var(--deep-navy);
  --tt-panel-fg: #ffffff;
  --tt-panel-muted: rgba(249, 243, 229, 0.78);
  --tt-panel-accent: var(--golden-milk);
  --tt-panel-rule: var(--color-border-on-dark);

  border-top-color: var(--deep-navy);
  background-color: var(--tt-panel-bg);
  color: var(--tt-panel-fg);
}

/* The 5-minute server refresh window — the floor is being reset. */
.tt-status.is-refresh .tt-status__panel--count {
  --tt-panel-bg: var(--golden-milk);
  --tt-panel-fg: var(--deep-navy);
  --tt-panel-muted: var(--slate-charcoal);
  --tt-panel-accent: var(--imperial-plum);
  --tt-panel-rule: rgba(94, 93, 90, 0.25);

  border-top-color: var(--tawny-umber);
}

.tt-status__overline {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-content-muted);
}

.tt-status__panel--count .tt-status__overline {
  color: var(--tt-panel-accent);
}

.tt-status__market {
  display: flex;
  align-items: center;
  gap: var(--spacing-nano);
  min-width: 0;
}

.tt-status__flag {
  display: block;
  width: auto;
  height: 22px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tt-status__name {
  font-family: 'Univers Condensed', var(--font-primary);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--color-content-heading);
  min-width: 0;
}

.tt-status__count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--spacing-nano);
  font-family: 'Univers', var(--font-primary);
  font-weight: 700; /* Univers Black */
  color: var(--tt-panel-fg);
  font-variant-numeric: tabular-nums;
}

.tt-count__part {
  display: inline-flex;
  align-items: baseline;
}

.tt-count__num {
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
  line-height: 1;
}

.tt-count__unit {
  font-size: clamp(0.875rem, 1.6vw, 1.125rem);
  font-weight: 600;
  color: var(--tt-panel-accent);
  margin-left: 2px;
}

.tt-status__times {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-nano);
  margin-top: auto;
  padding-top: var(--spacing-nano);
  border-top: 1px solid var(--color-border-primary);
}

.tt-status__panel--count .tt-status__times {
  border-top-color: var(--tt-panel-rule);
}

@media (min-width: 390px) {
  .tt-status__times {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xxs);
  }
}

.tt-time {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-tiny);
  min-width: 0;
}

.tt-time__label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--color-content-muted);
}

.tt-time__value--hmt {
  font-family: var(--font-primary);
  font-weight: 700; /* Univers Black — HMT leads */
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color-content-heading);
}

.tt-time__value--local {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-content-muted);
}

.tt-status__panel--count .tt-time__label {
  color: var(--tt-panel-muted);
}

.tt-status__panel--count .tt-time__value--hmt {
  color: var(--tt-panel-fg);
}

.tt-status__panel--count .tt-time__value--local {
  color: var(--tt-panel-muted);
}

/* =============================================================================
   6. Cycle Rail — Close · Refresh · Open
   ============================================================================= */
.tt-cycle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: var(--spacing-xxs) 0 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-border-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  overflow: hidden;
}

@media (min-width: 768px) {
  .tt-cycle {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tt-cycle__step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-tiny);
  background-color: var(--alabaster);
  padding: var(--spacing-nano) var(--spacing-xxs);
}

.tt-cycle__index {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900; /* Univers Black Italic */
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--cognac);
}

.tt-cycle__label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-content-heading);
}

.tt-cycle__value {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--color-content-primary);
}

/* =============================================================================
   7. Timezone & Precedence
   ============================================================================= */
.tt-zone-card {
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  padding: var(--spacing-xs);
  height: 100%;
}

.tt-zone-card__detected {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-nano);
  background-color: var(--oxford-light);
  color: var(--deep-navy);
  padding: var(--spacing-nano) var(--spacing-xxs);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--spacing-xxs);
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.tt-zone-card__detected i {
  font-size: 1rem;
  flex-shrink: 0;
}

.tt-zone-card__detected-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-tiny);
  min-width: 0;
}

.tt-zone-card__source {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--deep-navy);
}

.tt-zone-card__detected strong {
  font-weight: 600;
}

.tt-zone-card__rows {
  margin: 0 0 var(--spacing-xs);
}

.tt-zone-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-tiny) var(--spacing-xxs);
  padding: var(--spacing-nano) 0;
  border-bottom: 1px solid var(--color-border-primary);
}

.tt-zone-card__row:last-child {
  border-bottom: 0;
}

.tt-zone-card__label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-content-muted);
}

.tt-zone-card__value {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-content-heading);
  text-align: right;
  margin: 0;
}

.tt-zone-card__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-nano);
  align-items: end;
  padding-top: var(--spacing-xxs);
  border-top: 2px solid var(--deep-navy);
}

@media (min-width: 660px) {
  .tt-zone-card__controls {
    grid-template-columns: 1fr auto;
  }
}

.tt-zone-card__select-label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-quark);
  grid-column: 1 / -1;
}

.tt-zone-card__select {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-content-primary);
  background-color: #ffffff;
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 9px 9px; /* DESIGN_BIBLE §8 geometry */
  padding: 0.5rem 0.75rem;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.tt-zone-card__select:focus {
  border-color: var(--cognac);
  box-shadow: 0 0 0 2px rgba(162, 99, 48, 0.15);
  outline: none;
}

.tt-zone-card__hint {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-content-muted);
  margin: var(--spacing-nano) 0 0;
}

/* ---- Precedence explanation ---- */
.tt-precedence {
  background-color: var(--alabaster);
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  padding: var(--spacing-xs);
  height: 100%;
}

.tt-precedence__title {
  font-family: 'Univers Condensed', var(--font-primary);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-nano);
}

.tt-precedence__list {
  list-style: none;
  margin: 0 0 var(--spacing-nano);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-nano);
}

.tt-precedence__list li {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-content-primary);
}

.tt-precedence__key {
  display: inline-block;
  margin-bottom: var(--spacing-tiny);
}

.tt-precedence__key--hmt {
  font-family: var(--font-primary);
  font-weight: 700; /* Univers Black */
  font-size: 0.9375rem;
  color: var(--deep-navy);
}

.tt-precedence__key--local {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--color-content-muted);
}

.tt-precedence__note {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-content-muted);
  margin-bottom: 0;
  padding-top: var(--spacing-nano);
  border-top: 1px solid var(--color-border-primary);
}

/* =============================================================================
   8. Calendar — Month Grids
   A ruled timetable, not a widget: day cells carry data only, so they carry
   no hover state (DESIGN_BIBLE §13 — tactility belongs to actionable elements).
   ============================================================================= */
.tt-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-nano) var(--spacing-xs);
  margin: 0 0 var(--spacing-sm);
  padding: 0;
  list-style: none;
}

.tt-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-quark);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-content-muted);
}

.tt-legend__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 0 0 3px 3px;
  flex-shrink: 0;
}

.tt-legend__swatch--live {
  background-color: var(--parchment-cream);
  box-shadow: inset 0 0 0 1px var(--cognac);
}

.tt-legend__swatch--refresh {
  background-color: var(--golden-milk);
  box-shadow: inset 0 0 0 1px var(--tawny-umber);
}

.tt-legend__swatch--today {
  background-color: var(--deep-navy);
}

.tt-legend__swatch--outside {
  background-color: var(--alabaster);
  box-shadow: inset 0 0 0 1px var(--muted-silver);
}

/* ---- Month Block ---- */
.tt-month + .tt-month {
  margin-top: var(--spacing-lg);
}

.tt-month__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-quark) var(--spacing-xxs);
  padding-bottom: var(--spacing-nano);
  border-bottom: 3px solid var(--deep-navy);
  margin-bottom: var(--spacing-xxs);
}

.tt-month__title {
  font-family: 'Univers', var(--font-primary);
  font-weight: 900; /* Univers Black Italic */
  font-style: italic;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-content-heading);
  margin-bottom: 0;
}

.tt-month__year {
  font-weight: 300;
  font-style: normal;
  color: var(--color-content-muted);
  margin-left: var(--spacing-quark);
}

.tt-month__meta {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-content-muted);
}

/* ---- Grid shell — 1px hairlines via gap over a silver ground ---- */
.tt-month__grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: var(--color-border-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  overflow: hidden;
}

.tt-grid-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tt-month__head-row {
  /* Below the desktop grid the calendar becomes an agenda: every cell names
     its own weekday, so the column header row would be redundant. */
  display: none;
}

@media (min-width: 1024px) {
  .tt-month__head-row {
    display: flex;
  }

  .tt-grid-row {
    flex-direction: row;
  }
}

.tt-dow {
  flex: 1 1 0;
  min-width: 0;
  background-color: var(--alabaster);
  padding: var(--spacing-nano) var(--spacing-xxs);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-content-heading);
}

/* ---- Day Cell ---- */
.tt-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xxs);
  background-color: #ffffff;
  transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

@media (min-width: 1024px) {
  .tt-cell {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-nano);
    min-height: 152px;
    padding: var(--spacing-nano) var(--spacing-xxs);
  }
}

.tt-cell__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-quark);
  flex: 0 0 76px;
}

@media (min-width: 1024px) {
  .tt-cell__head {
    flex: 0 0 auto;
  }
}

.tt-cell__dow {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-content-muted);
}

.tt-cell__day {
  display: inline-block;
  font-family: 'Univers', var(--font-primary);
  font-weight: 700; /* Univers Black */
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-content-heading);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .tt-cell__dow {
    display: none;
  }

  .tt-cell__day {
    font-size: 1.375rem;
  }
}

.tt-cell__month {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-content-muted);
}

.tt-cell__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-quark);
  min-width: 0;
  flex: 1 1 auto;
}

.tt-cell__market {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-quark) var(--spacing-nano);
  min-width: 0;
}

.tt-cell__flag {
  display: block;
  width: auto;
  height: 15px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tt-cell__market-name {
  font-family: 'Univers Condensed', var(--font-primary);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--color-content-heading);
}

.tt-cell__state {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-quark);
  margin-left: auto;
  padding: 2px var(--spacing-nano);
  background-color: var(--cognac);
  color: #ffffff;
  font-family: 'Univers', var(--font-primary);
  font-weight: 700;
  font-size: 0.5625rem;
  text-transform: uppercase;
  border-radius: var(--border-radius-sticker);
  white-space: nowrap;
}

.tt-cell__state--refresh {
  background-color: var(--golden-milk);
  color: var(--slate-charcoal);
  box-shadow: inset 0 0 0 1px var(--tawny-umber);
}

/* The sticker is written into every cell and revealed only while its market is
   on the floor. The explicit rule keeps [hidden] ahead of the sticker's own
   display declaration. */
.tt-cell__state[hidden] {
  display: none;
}

.tt-cell__times {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--spacing-nano);
  margin-top: auto;
}

@media (min-width: 1024px) {
  .tt-cell__times {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

.tt-cell__open-label {
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.5625rem;
  text-transform: uppercase;
  color: var(--color-content-muted);
}

/* The HMT reading is split so the unit can drop to its own line rather than
   overflow a narrow day cell. */
.tt-cell__hmt {
  font-family: var(--font-primary);
  font-weight: 700; /* Univers Black — the governing reading */
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--color-content-heading);
}

.tt-cell__hmt-time,
.tt-cell__hmt-unit {
  white-space: nowrap;
}

.tt-cell__hmt-unit {
  font-size: 0.6875rem;
  font-weight: 600;
}

.tt-cell__local {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--color-content-muted);
}

/* ---- Cell states ---- */
.tt-cell.is-outside {
  background-color: var(--alabaster);
}

.tt-cell.is-outside .tt-cell__day,
.tt-cell.is-outside .tt-cell__month {
  color: var(--color-content-muted);
}

.tt-cell.is-outside .tt-cell__flag { opacity: 0.5; }

.tt-cell.is-outside .tt-cell__market-name,
.tt-cell.is-outside .tt-cell__hmt {
  color: var(--color-content-muted);
}

.tt-cell.is-outside .tt-cell__hmt { font-weight: 500; }

.tt-cell.is-today .tt-cell__day {
  color: var(--deep-navy);
  border-bottom: 2px solid var(--cognac);
  padding-bottom: 1px;
}

.tt-cell.is-live {
  background-color: var(--parchment-cream);
  box-shadow: inset 0 0 0 1px var(--cognac);
}

.tt-cell.is-refresh {
  background-color: var(--golden-milk);
  box-shadow: inset 0 0 0 1px var(--tawny-umber);
}

.tt-cell.is-refresh .tt-cell__hmt {
  color: var(--imperial-plum);
}

/* ---- No-JS fallback: the prescribed opening rotation, as a document ---- */
.tt-noscript {
  border: 1px solid var(--color-border-primary);
  border-left: 4px solid var(--tawny-umber);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  background-color: #ffffff;
  padding: var(--spacing-xs);
}

.tt-noscript__title {
  font-family: 'Univers Condensed', var(--font-primary);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-quark);
}

.tt-noscript__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-xxs);
}

.tt-noscript__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
}

.tt-noscript__table caption {
  text-align: left;
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-content-muted);
  padding-bottom: var(--spacing-nano);
}

.tt-noscript__table th,
.tt-noscript__table td {
  text-align: left;
  padding: var(--spacing-nano);
  border: 1px solid var(--color-border-primary);
}

.tt-noscript__table thead th {
  background-color: var(--alabaster);
  font-family: 'Univers Extended', var(--font-primary);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--color-content-heading);
}

.tt-noscript__table tbody th {
  font-weight: 600;
  color: var(--color-content-heading);
  white-space: nowrap;
}

.tt-noscript__table tbody td {
  color: var(--color-content-primary);
}

/* =============================================================================
   9. Notes
   ============================================================================= */
.tt-notes-avenue {
  background-color: var(--alabaster);
}

.tt-notes__list {
  margin: 0;
  padding-left: var(--spacing-xs);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-nano);
  max-width: 900px;
}

.tt-notes__list li {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--color-content-primary);
}

.tt-notes__list strong {
  font-weight: 600;
  color: var(--color-content-heading);
}

/* =============================================================================
   10. Responsive Refinements
   ============================================================================= */
@media (max-width: 659.98px) {
  .tt-hero {
    padding: var(--spacing-lg) 0 var(--spacing-xl);
  }

  .tt-notice {
    flex-direction: column;
    padding: var(--spacing-xxs);
  }

  .tt-clock {
    padding: var(--spacing-xs) var(--spacing-xxs);
  }

  .tt-status__panel {
    padding: var(--spacing-xxs);
  }

  .tt-zone-card__value {
    text-align: left;
  }

  .tt-month__title {
    font-size: 1.375rem;
  }
}

@media (max-width: 389.98px) {
  .tt-cell {
    gap: var(--spacing-xxs);
  }

  .tt-cell__head {
    flex: 0 0 62px;
  }
}

/* =============================================================================
   11. Reduced Motion — Accessibility (§13, §14)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .tt-cell,
  .tt-clock__time,
  .tt-count__num {
    transition: none;
  }
}

/* =============================================================================
   12. Print — the timetable is a document first (§16 spirit)
   ============================================================================= */
@media print {
  .timetable-page {
    padding: 0;
  }

  .tt-hero {
    background-color: #ffffff;
    color: #000000;
    padding: 0 0 12pt;
  }

  .tt-hero__title,
  .tt-hero__lead,
  .tt-hero__facts,
  .tt-clock,
  .tt-fact,
  .tt-fact__value,
  .tt-clock__time,
  .tt-clock__meridiem,
  .tt-status__panel--count {
    color: #000000;
    background-color: #ffffff;
    border-color: #000000;
  }

  .tt-cell,
  .tt-month__grid,
  .tt-status__panel,
  .tt-zone-card,
  .tt-notice {
    break-inside: avoid;
    box-shadow: none;
  }

  .tt-month {
    break-inside: avoid;
  }
}