/* Mobile first. One column of cards; the layout widens into a grid on tablets
   and up, but nothing about a card depends on the extra width. */

:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #16181d;
  --ink-soft: #5c6270;
  --line: #e2e5ea;
  --bar: #c8cdd6;
  --bar-now: #1f6feb;
  --open: #0f7b3f;
  --open-bg: #e3f5ea;
  --shut: #8a3324;
  --shut-bg: #fbe9e5;
  --warn: #7a5200;
  --warn-bg: #fdf3dc;
  --warn-line: #efd9a4;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --card: #1c1f25;
    --ink: #e8eaee;
    --ink-soft: #9aa1ae;
    --line: #2b2f37;
    --bar: #3a404a;
    --bar-now: #4a9eff;
    --open: #6ee7a0;
    --open-bg: #14301f;
    --shut: #ff9d8a;
    --shut-bg: #33201c;
    --warn: #f0cd82;
    --warn-bg: #2d2617;
    --warn-line: #4a3d1f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.page-head { margin: 0 auto 1rem; max-width: 60rem; }
.page-head h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; }
.page-head .sub { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }

.banner {
  max-width: 60rem;
  margin: 0 auto 0.85rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: var(--radius);
  font-size: 0.85rem;
}

.banner code {
  background: transparent;
  border: 0;
  font-weight: 600;
}

main {
  display: grid;
  gap: 0.85rem;
  max-width: 60rem;
  margin: 0 auto;
}

@media (min-width: 40rem) {
  main { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
}

.place {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem 1rem;
  /* Column layout so the meta line can sit on the bottom edge, keeping cards
     in a row visually aligned even when the status text wraps. */
  display: flex;
  flex-direction: column;
}

.place-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.place-head h2 { margin: 0; font-size: 1.05rem; }

.pill {
  flex: none;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pill.is-open { background: var(--open-bg); color: var(--open); }
.pill.is-shut { background: var(--shut-bg); color: var(--shut); }

/* Hours block. Stays a two-column definition list so the labels line up. */
/* Opening hours sit at the foot of the card, opposite the links. */
.meta .hours { margin-left: auto; text-align: right; }

.busy-now { margin: 0.85rem 0 0.4rem; }

/* "30%, expected 51%" on one line, Google's own wording under it. */
.busy-figures { margin: 0; font-size: 0.95rem; }

.busy-word { margin: 0.1rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }

/* Quieter than usual is good news at a gym, busier is not, so the live figure
   reads as one or the other before the numbers are. It carries the same colour
   as the marker drawn over the graph. */
.live-value { font-weight: 700; }
.live-value.is-below { color: var(--open); }
.live-value.is-above { color: var(--shut); }
.live-value.is-same { color: var(--ink); }

/* 24 bars, one per hour. Flex rather than grid so the bars keep equal widths
   at any card size without a fixed column count. */
.graph {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 68px;
  margin-top: 0.2rem;
}

.bar {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.bar-fill {
  display: block;
  width: 100%;
  background: var(--bar);
  border-radius: 2px 2px 0 0;
}

.bar.is-now .bar-fill { background: var(--bar-now); }

/* Two bars in one column, both rising from the same zero on the same 0-100
   scale: the wide one behind is what is expected at this hour, the narrow one
   in front is what it is now. Which of the two is taller answers the question
   without reading a number. Its colour matches the live figure above. */
.bar-live {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  min-width: 3px;
  bottom: 0;
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}

.bar-live.is-below { background: var(--open); }
.bar-live.is-above { background: var(--shut); }
.bar-live.is-same { background: var(--ink-soft); }

/* One cell per bar, so a label sits under the hour it names. Labels are allowed
   to overflow their cell; only every sixth hour is labelled, so they never
   collide. */
.axis {
  display: flex;
  gap: 2px;
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.axis span {
  flex: 1;
  overflow: visible;
  white-space: nowrap;
}

.no-data, .note {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.meta {
  margin: 0;
  padding-top: 0.75rem;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.meta a { color: var(--bar-now); text-decoration: none; }
.meta a:hover { text-decoration: underline; }

.page-foot {
  max-width: 60rem;
  margin: 1.25rem auto 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.page-foot code {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 0.25rem;
}