/* Telegram publishes the current client theme as CSS variables, so following
   them is how the app stops looking like a website in a frame. The fallbacks
   are for a browser opened outside Telegram, which is mostly how it gets
   debugged. */
:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, Canvas);
  --fg: var(--tg-theme-text-color, CanvasText);
  --muted: var(--tg-theme-hint-color, #7a7a7a);
  --accent: var(--tg-theme-button-color, #2f7de1);
  --on-accent: var(--tg-theme-button-text-color, #fff);
  --line: color-mix(in srgb, var(--muted) 30%, transparent);
}

body {
  margin: 0;
  padding: 1rem 0.75rem 2rem;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.muted { color: var(--muted); }

.waiting {
  display: grid;
  place-items: center;
  min-height: 60vh;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Days scroll sideways rather than wrapping, so the grid below never jumps
   down the screen as the week changes length. */
.days {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.days::-webkit-scrollbar { display: none; }

.day {
  flex: 0 0 auto;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}

.day.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* The table is wider than a phone on purpose — eighteen hours will not fit —
   so it scrolls inside its own box while the page itself never does. */
.grid-scroll {
  overflow-x: auto;
  margin-top: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.grid {
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.grid th,
.grid td {
  padding: 0.25rem;
  text-align: center;
  min-width: 2.25rem;
}

.grid thead th {
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* The club column stays put while the hours scroll under it, otherwise you
   lose track of which row you are reading. */
.grid th.club {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg);
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  padding-right: 0.75rem;
  min-width: 0;
}

.grid td.free a {
  display: block;
  padding: 0.25rem 0;
  border-radius: 0.375rem;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.grid td.taken { color: var(--muted); }

/* A club that is shut simply has nothing here — deliberately not styled as
   taken, because nobody took it. */
.grid td.shut { color: transparent; }

.legend {
  margin-top: 1rem;
  font-size: 0.8125rem;
}

.swatch {
  display: inline-block;
  min-width: 1.25rem;
  text-align: center;
  border-radius: 0.25rem;
}

.swatch.free {
  background: var(--accent);
  color: var(--on-accent);
}