@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; background: var(--bg); color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) { body { font-size: 16px; padding-bottom: 0; } }

h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
time, .tnum { font-variant-numeric: tabular-nums; }
.tnum, .figure__num, .hours-block__num { font-family: var(--mono); }
.secondary { color: var(--ink-secondary); }
.mono { font-family: var(--mono); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 30;
  background: var(--accent); color: var(--on-accent); padding: 12px 16px; font-weight: 700;
}
.skip:focus { top: 8px; }

/* Layout */
.column { width: 100%; margin: 0 auto; }
main.column { flex: 1 0 auto; }
@media (min-width: 768px) { .column { max-width: 720px; } }
/* The board and the landing page use the full width, like the header. */
main.column--wide { max-width: none; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Header and navigation */
.site-header { border-bottom: 1px solid var(--rule); background: var(--bg); }
.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 56px; padding: 0 var(--gutter);
}
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 22px; font-weight: 800; letter-spacing: -0.04em; text-decoration: none;
}
.wordmark__dot { color: var(--accent); }
.topnav { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.site-header .site-header__post { display: none; }
/* On mobile the name is visually hidden but still the button's accessible name. */
.menu__button span:last-child {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (min-width: 768px) {
  .site-header { position: sticky; top: 0; z-index: 20; }
  .site-header__inner { max-width: 1440px; margin: 0 auto; height: 64px; }
  .topnav { display: block; flex: 1; }
  .topnav ul { display: flex; gap: 8px; }
  .topnav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
    color: var(--ink-secondary); text-decoration: none; font-size: 15px;
  }
  .topnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .topnav a:hover { color: var(--ink); background: var(--surface-alt); }
  .site-header__actions { gap: 16px; margin-left: 0; }
  .site-header .site-header__post { display: inline-flex; }
  .menu__button span:last-child { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: hidden; }
}

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--bg); border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav ul { display: flex; justify-content: space-around; }
.bottomnav li { flex: 1; }
.bottomnav a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 4px; text-decoration: none; font-size: 14px;
  color: var(--ink-secondary);
}
.bottomnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (min-width: 768px) { .bottomnav { display: none; } }

.site-footer { padding: 32px var(--gutter) 40px; border-top: 1px solid var(--rule); margin-top: 48px; }
.site-footer p { font-size: 13px; line-height: 1.5; color: var(--ink-secondary); }
.site-footer__slogan { color: var(--ink); font-weight: 600; }
.site-footer__links a { color: var(--ink-secondary); }
@media (min-width: 768px) { .site-footer { max-width: 100%; } }

/* Buttons: square corners (docs/DESIGN.md) */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 22px; border-radius: 0; border: 1.5px solid transparent;
  font: 700 15px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color 120ms, opacity 120ms;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: #ff8a55; }
.btn--secondary { background: var(--bg); color: var(--ink); border-color: var(--ink); font-weight: 600; }
.btn--secondary:hover { background: var(--surface-alt); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--rule); color: var(--ink-secondary); border-color: transparent; pointer-events: none;
}

.textbtn, .textlink {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  font: 600 14px/1 var(--font); color: var(--ink); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.textlink { font-weight: 500; text-decoration: none; }
.textbtn:hover, .textlink:hover { text-decoration: underline; }
.textbtn--danger { color: var(--danger); }

/* Page (forms, detail, placeholders) */
.page { padding: 12px var(--gutter) 32px; }
.backlink { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 14px; color: var(--ink-secondary); }
.page__title { font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; margin: 8px 0 12px; }
@media (min-width: 768px) { .page__title { font-size: 36px; } }

/* Board */
.boardhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--gutter);
}
.boardhead__summary { font-size: 13px; line-height: 1.4; color: var(--ink-secondary); }
.boardhead__week { padding: 0 var(--gutter) 8px; font: 400 12px/1.4 var(--mono); color: var(--ink-secondary); }
@media (min-width: 768px) {
  .boardhead__summary { font-size: 14px; }
  .boardhead .textbtn { display: none; } /* the top bar carries Post a lobby from 768px */
  .boardhead .boardhead__filters { display: inline-flex; }
}

.daytabs {
  scroll-padding-left: var(--gutter);
  position: sticky; top: var(--header-h); z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.daytabs::-webkit-scrollbar { display: none; }
.daytabs ul { display: flex; gap: 22px; padding: 0 var(--gutter); width: max-content; }
.daytabs a {
  display: flex; align-items: center; min-height: 44px; scroll-snap-align: start;
  padding: 0 2px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 14px; font-weight: 500; color: var(--ink-secondary); text-decoration: none;
  white-space: nowrap;
}
.daytabs a[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

.group { scroll-margin-top: calc(var(--header-h) + 46px); }
.group__head {
  position: sticky; top: calc(var(--header-h) + 45px); z-index: 5;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 20px var(--gutter) 8px; background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.group__title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.group__count { font: 400 12px/1.4 var(--mono); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .group__title { font-size: 20px; } }

.notice {
  padding: 12px var(--gutter); background: var(--surface-alt);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: 13px; line-height: 1.4;
}
.notice { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
.notice a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; }

.endrow {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  margin: 24px var(--gutter) 0; border: 1.5px solid var(--ink); border-radius: 0;
  font-weight: 600; text-decoration: none;
}
.endrow:hover { background: var(--surface-alt); }

.state { padding: 32px var(--gutter); }
.state p { margin-bottom: 16px; }
.state__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* Column labels above the rows (desktop only; each row names its own parts for screen readers) */
.fixtures-head { display: none; }

/* Fixture row: the whole row is one link (docs/DESIGN.md) */
.fixture__link {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px;
  padding: 16px var(--gutter); border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; transition: background-color 120ms;
}
.fixture__time { font: 700 17px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.fixture__server { font: 600 17px/1.3 var(--font); display: block; }
.fixture__detail { font: 400 13px/1.4 var(--font); color: var(--ink-secondary); display: block; }
.fixture__meta, .fixture__needs, .fixture__captain { display: none; }
.fixture__open { text-align: right; }
.fixture__open b { font: 700 16px var(--mono); color: var(--accent); display: block; font-variant-numeric: tabular-nums; }
.fixture__open small { font-size: 12px; color: var(--ink-secondary); }
.fixture__open--full b { color: var(--ink-secondary); }
.fixture__strip { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }

/* Day bars: seven bars, the hatch is time that is not shared, the fill is shared time (docs/DESIGN.md) */
.dbars { display: flex; align-items: flex-end; gap: 3px; }
.dbars i { position: relative; display: block; width: 14px; height: 30px; background: var(--hatch); }
.dbars i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--accent); }
.dbars i.f1::after { height: 2px; } .dbars i.f2::after { height: 4px; } .dbars i.f3::after { height: 6px; }
.dbars i.f4::after { height: 8px; } .dbars i.f5::after { height: 10px; } .dbars i.f6::after { height: 12px; }
.dbars i.f7::after { height: 14px; } .dbars i.f8::after { height: 16px; } .dbars i.f9::after { height: 18px; }
.dbars i.f10::after { height: 20px; } .dbars i.f11::after { height: 22px; } .dbars i.f12::after { height: 24px; }
.dbars i.f13::after { height: 26px; } .dbars i.f14::after { height: 28px; } .dbars i.f15::after { height: 30px; }
.fixture__hours { font: 700 16px/1 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.fixture__hours--none { color: var(--ink-secondary); font-weight: 400; }
.fixture__hint { font-size: 12px; line-height: 1.4; color: var(--ink-secondary); }

a.fixture__link:hover { background: var(--surface-alt); text-decoration: none; }
.fixture__link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

@media (min-width: 760px) {
  .fixtures-head, .fixture:not(.fixture--status) .fixture__link {
    grid-template-columns: 76px 1.1fr 1.3fr .8fr 64px 190px; column-gap: 24px;
  }
  .fixtures-head {
    display: grid; padding: 12px var(--gutter) 10px; margin-top: 8px;
    border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule);
    font: 400 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-secondary);
  }
  .fixtures-head span:nth-child(5) { text-align: right; }
  .fixture:not(.fixture--status) .fixture__link { align-items: center; padding: 16px var(--gutter); }
  .fixture:not(.fixture--status) .fixture__detail { display: none; }
  .fixture__meta { display: block; font: 400 13px/1.4 var(--font); color: var(--ink-secondary); }
  .fixture__needs { display: block; font-size: 15px; color: var(--ink-soft); }
  .fixture__captain { display: block; font-size: 15px; color: var(--ink-soft); }
  .fixture:not(.fixture--status) .fixture__strip { grid-column: auto; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
  .fixture__hint { display: none; }
  .fixture__time { font-size: 20px; }
  .fixture__server { font-size: 17px; }
}

/* Skeleton: the real row grid with static bars */
.bar { display: block; height: 14px; background: var(--surface-alt); }
.bar--time { width: 36px; }
.bar--title { width: 60%; margin-bottom: 6px; }
.bar--detail { width: 85%; height: 12px; }
.bar--count { width: 28px; margin-left: auto; }
.bar--strip { width: 150px; height: 30px; }

/* Grain (docs/DESIGN.md, optional): a fixed film of noise over the whole page. It is one small tile drawn by an
   SVG feTurbulence filter, white at 5% opacity, and never takes clicks. Delete this rule to turn it off. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}