/* Colours come from his Telegram theme; the values after them are for clients that send none. */
:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-secondary-bg-color, #f2f2f0);
  --card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
  --ink: var(--tg-theme-text-color, #17191c);
  --mute: var(--tg-theme-hint-color, #7d8187);
  --accent: var(--tg-theme-link-color, #2481cc);
  --line: var(--tg-theme-section-separator-color, rgba(125, 129, 135, .22));
  --track: color-mix(in srgb, var(--mute) 16%, transparent);
  --gutter: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.38 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

.tabs {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px var(--gutter);
  background: var(--bg);
}

.tabs[hidden] { display: none; }

.seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--track);
}

.tabs button {
  flex: 1 1 auto;
  min-height: 32px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  white-space: nowrap;
  transition: background-color .12s, color .12s;
}

.tabs button[aria-selected="true"] { color: var(--ink); background: var(--card); }
.tabs button:focus-visible, .notice:focus-visible, .retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.n { margin-left: 5px; font-weight: 400; color: var(--mute); font-variant-numeric: tabular-nums; }
.n:empty { display: none; }

.notice {
  display: block;
  width: calc(100% - 2 * var(--gutter));
  margin: 0 var(--gutter) 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  text-align: left;
  color: var(--ink);
  background: var(--track);
}
.notice[hidden] { display: none; }

main { padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)); }

.day { margin: 18px 4px 6px; font-size: 13px; font-weight: 600; color: var(--mute); }
.day:first-child { margin-top: 2px; }

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}

.list > li { padding: 11px 14px; overflow-wrap: anywhere; }
.list > li + li { border-top: 1px solid var(--line); }

.when { display: block; margin-top: 3px; font-size: 13px; color: var(--mute); }

.timed { display: grid; grid-template-columns: 46px 1fr; column-gap: 10px; }
.timed time { font-weight: 600; font-variant-numeric: tabular-nums; }

.empty { margin: 72px 24px; text-align: center; color: var(--mute); }
.retry { display: block; margin: 12px auto 0; padding: 8px 16px; color: var(--accent); font-weight: 500; }

.skeleton > li { height: 60px; }
.skeleton > li::before {
  content: "";
  display: block;
  height: 12px;
  width: 72%;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--track);
}
.skeleton > li:nth-child(even)::before { width: 54%; }

@media (prefers-reduced-motion: reduce) { .tabs button { transition: none; } }