/* Components, built only from the tokens in tokens.css.
   Three surfaces share this sheet: the public league site (.site-*), the
   parent app (.app-*), and the board console (.console-*). Anything used by
   more than one of them is unprefixed.

   Rules of the house:
   - No hex values, font sizes, or radii here. Use a token or add one.
   - Every interactive target is at least var(--tap) tall.
   - Status is never colour alone; the chip always carries a word. */

/* ============================================================ base */

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-900);
  font: var(--type-body-m);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -4);
  z-index: 10;
  background: var(--surface-raised);
  color: var(--ink-900);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font: var(--type-body-m-strong);
  transition: top 120ms ease;
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================ type */

.t-display  { font: var(--type-display-l);     letter-spacing: var(--track-display-l); }
.t-h1       { font: var(--type-heading-l);     letter-spacing: var(--track-heading-l); }
.t-h2       { font: var(--type-heading-m);     letter-spacing: var(--track-heading-m); }
.t-h3       { font: var(--type-heading-s); }
.t-body     { font: var(--type-body-m); }
.t-strong   { font: var(--type-body-m-strong); }
.t-small    { font: var(--type-body-s); }
.t-label    { font: var(--type-label-m);       letter-spacing: var(--track-label-m); }

.muted { color: var(--ink-500); }
.on-dark-muted { color: var(--ink-300); }

/* Section eyebrow: "TODAY AT THE PARK", "UP NEXT", "QUICK LINKS". */
.eyebrow {
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--space-3);
}

/* ============================================================ mark */

/* The league's initials in a clay pill — the stand-in for a logo until a
   league uploads one (WEB-140 onboarding supplies the real asset). */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--white);
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
}

/* ============================================================ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--white);
  font: var(--type-body-m-strong);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease;
}
.btn:hover { background: var(--brand-dark); }

.btn--secondary {
  background: var(--surface-raised);
  color: var(--ink-900);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-sunken); }

.btn--quiet {
  background: transparent;
  color: var(--ink-700);
  border-color: transparent;
  padding-inline: var(--space-3);
}
.btn--quiet:hover { background: var(--surface-sunken); }

.btn--block { display: flex; width: 100%; }
.btn--large { min-height: 55px; font: var(--type-body-m-strong); }

.btn[aria-disabled="true"], .btn:disabled {
  background: var(--surface-sunken);
  color: var(--ink-500);
  border-color: var(--border);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================ chips */

a.chip { text-decoration: none; min-height: var(--tap); }

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface-sunken);
  color: var(--ink-700);
}
.chip--open     { background: var(--field-100); color: var(--field-600); }
.chip--filling  { background: var(--amber-100); color: var(--amber-500); }
.chip--waitlist { background: var(--alert-100); color: var(--alert-500); }
.chip--full     { background: var(--alert-100); color: var(--alert-500); }
.chip--closed   { background: var(--surface-sunken); color: var(--ink-500); }
.chip--soon     { background: var(--clay-100); color: var(--clay-600); }
.chip--brand    { background: var(--brand); color: var(--white); }
.chip--count    { background: var(--clay-100); color: var(--clay-600); text-transform: none; }

/* ============================================================ cards + row lists */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* A card whose children are divided rows: game lists, checklists, attention
   lists, fee tables on mobile. The card owns the border; rows own the rules. */
.rows {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.rows > * + * { border-top: 1px solid var(--border); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
.row__grow { flex: 1; min-width: 0; }
.row__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
}

/* The 4px rule that flags an attention row by severity (Figma 02). */
.row--flagged { border-left: 4px solid var(--border-strong); }
.row--flagged.is-alert { border-left-color: var(--alert-500); }
.row--flagged.is-warn  { border-left-color: var(--amber-500); }

.stack > * + * { margin-top: var(--space-2); }
.section + .section { margin-top: var(--space-8); }
/* A section following anything else (a list, a form) still needs its air —
   `+ .section` only fires between siblings that are both sections. */
.rows + .section, .card + .section, .table__wrap + .section { margin-top: var(--space-8); }

/* ============================================================ callout */

.callout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--brand);
  background: var(--clay-100);
  color: var(--ink-900);
}
.callout--info  { background: var(--surface-raised); border: 1px solid var(--border); border-left: 4px solid var(--ink-300); }
.callout--good  { background: var(--field-100); border-left-color: var(--field-500); }
.callout--warn  { background: var(--amber-100); border-left-color: var(--amber-500); }
.callout--alert { background: var(--alert-100); border-left-color: var(--alert-500); }
.callout__title { font: var(--type-body-m-strong); }

/* ============================================================ empty states

   WEB-111: a data block with no data yet says so plainly. It never renders a
   broken layout, a zero, or lorem text. A league building its site in July
   has no Fall schedule, and that is a normal state, not an error. */

.empty {
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink-500);
  font: var(--type-body-m);
}
.empty__title { font: var(--type-body-m-strong); color: var(--ink-700); margin-bottom: var(--space-1); }

/* ============================================================ meter */

/* Enrolled-against-cap bar (Figma 06). The number above it is the fact; the
   bar is reinforcement, so the row still reads at 0% colour. */
.meter {
  width: 130px;
  max-width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}
.meter__fill { height: 100%; background: var(--field-500); border-radius: var(--radius-pill); }
.meter__fill.is-filling { background: var(--amber-500); }
.meter__fill.is-full    { background: var(--alert-500); }

.meter--wide { width: 100%; height: 10px; }

/* ============================================================ forms */

.field + .field { margin-top: var(--space-5); }
.field__label {
  display: block;
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--space-3);
}
.field__input {
  width: 100%;
  min-height: 58px;
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink-900);
  font: var(--type-body-m);
}
.field__input::placeholder { color: var(--ink-300); }
.field__help { margin-top: var(--space-2); font: var(--type-body-s); color: var(--ink-500); }
.field__error { margin-top: var(--space-2); font: var(--type-body-s); color: var(--alert-500); }

.form-errors {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--alert-100);
  color: var(--alert-500);
  font: var(--type-body-s);
}

/* ============================================================ public site */

.site-nav {
  background: var(--ink-900);
  color: var(--white);
}
.site-nav__bar {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
  min-width: 0;
  text-decoration: none;
}
/* A league's own logo, boxed to a fixed height so a tall or wide upload can't
   blow out the bar. object-fit keeps their aspect ratio intact. */
.site-nav__logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.site-nav__name {
  font: var(--type-heading-s);
  color: var(--white);
  text-decoration: none;
  /* One line. A long league name used to wrap to three and shove the account
     menu and Menu button into each other on a phone. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-nav__links { display: none; gap: var(--space-5); align-items: center; }
.site-nav__links a {
  color: var(--ink-300);
  text-decoration: none;
  font: var(--type-body-m);
  padding: var(--space-2) 0;
}
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--white); }
/* "More" (WEB-100): a plain toggle that opens a full-width second nav row
   below the bar — not a floating dropdown. */
.site-nav__more {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-300); font: var(--type-body-m);
  padding: var(--space-2) 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.site-nav__more::after { content: "\25be"; font-size: 0.75em; transition: transform .15s; }
.site-nav__more[aria-expanded="true"] { color: var(--white); }
.site-nav__more[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Second row: same dark band as the bar, its inner column aligned with the
   primary items above (matching .site-nav__bar's inset). */
.site-nav__row2 { border-top: 1px solid var(--ink-700); }
.site-nav__row2-inner {
  max-width: var(--site-max); margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  /* Right-aligned so the secondary links sit under the primary nav, which is
     itself right-aligned in the bar (WEB-100) — not off on the left. */
  display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center;
  justify-content: flex-end;
}
.site-nav__row2 a {
  color: var(--ink-300); text-decoration: none; font: var(--type-body-m);
  padding: var(--space-1) 0;
}
.site-nav__row2 a:hover, .site-nav__row2 a[aria-current="page"] { color: var(--white); }
.site-nav__toggle {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-300); font: var(--type-body-m-strong);
  min-height: var(--tap); padding: 0 var(--space-2);
}
.site-nav__drawer { border-top: 1px solid var(--ink-700); padding: var(--space-2) var(--space-5) var(--space-4); }
.site-nav__drawer a {
  display: block;
  color: var(--ink-300);
  text-decoration: none;
  padding: var(--space-3) 0;
  min-height: var(--tap);
  font: var(--type-body-m);
}
.site-nav__drawer a:hover { color: var(--white); }

.site-main {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-14);
}

/* The hero is a dark card, not a full-bleed band: it keeps the chalk page
   visible at the edges and holds its contrast in sunlight. */
.hero {
  margin-bottom: var(--space-8);
  background: var(--ink-900);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.hero__title {
  font: var(--type-display-l);
  letter-spacing: var(--track-display-l);
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  margin: var(--space-4) 0 var(--space-3);
}
.hero__lead { color: var(--ink-300); font: var(--type-body-m); }
.hero__cta { margin-top: var(--space-5); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.tile {
  display: block;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--ink-900);
  min-height: 88px;
}
.tile:hover { border-color: var(--border-strong); }
.tile__name { display: block; font: var(--type-heading-s); }
.tile__note {
  display: block;
  margin-top: var(--space-2);
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Game row: time + field on the left, matchup + division on the right. */
.game__when { width: 84px; flex-shrink: 0; }
.game__time { font: var(--type-body-m-strong); }
.game__field {
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-transform: uppercase;
  color: var(--ink-500);
}

.site-foot {
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  padding-block: var(--space-8);
  color: var(--ink-500);
  font: var(--type-body-s);
}
.site-foot__inner {
  max-width: var(--site-max); margin: 0 auto;
  padding-inline: var(--space-5);  /* matches .site-main; --space-8 at ≥720px */
}

/* At-a-glance season facts. A definition list, because that is what it is —
   and it degrades to a readable stack on a phone with no media query. */
.facts {
  margin: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-4) var(--space-5);
}
.facts__row + .facts__row { border-top: 1px solid var(--border); }
.facts dt {
  flex: 0 0 190px;
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-transform: uppercase;
  color: var(--ink-500);
  padding-top: 2px;
}
.facts dd { margin: 0; flex: 1; min-width: 200px; font: var(--type-body-m); }

/* One card per division: ages, the birthday band, today's price. */
.divisions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.division {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.division__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.division__name { font: var(--type-heading-m); letter-spacing: var(--track-heading-m); }
.division__ages { font: var(--type-body-m-strong); }
.division__born { font: var(--type-body-s); color: var(--ink-500); }
.division__fees {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.division__price { font: var(--type-heading-l); letter-spacing: var(--track-heading-l); }

/* Fee table — a real table at width, stacked rows on a phone. */
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table th {
  text-align: left;
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-transform: uppercase;
  color: var(--ink-500);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  white-space: nowrap;
}
.fee-table td {
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  font: var(--type-body-m);
  vertical-align: top;
}
.fee-table .is-now { font: var(--type-body-m-strong); }

.faq__q { font: var(--type-heading-s); }
.faq__cat {
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-transform: uppercase;
  color: var(--ink-500);
  margin: var(--space-6) 0 var(--space-3);
}

/* A selectable option row: division choice, payment method. The whole row is
   the target — a 16px radio is not a phone-friendly tap area (PAR-002). */
.choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
  min-height: var(--tap);
  cursor: pointer;
  background: var(--surface-raised);
}
.choice:hover { border-color: var(--border-strong); }
.choice:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.choice:has(input:disabled) { cursor: not-allowed; background: var(--surface-sunken); }
.choice--blocked .choice__body { opacity: 0.65; }
.choice input { margin-top: var(--space-1); flex-shrink: 0; }
.choice__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 0; }
.choice__head { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; }

/* --- account menu (public nav + app top bar, both dark) ----------------- */

.acct { position: relative; flex-shrink: 0; }
.acct__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-300);
  font: var(--type-body-m-strong);
  cursor: pointer;
  list-style: none;
}
.acct__trigger::-webkit-details-marker { display: none; }
.acct__trigger:hover { color: var(--white); background: var(--ink-700); }
.acct[open] .acct__trigger { color: var(--white); background: var(--ink-700); }
.acct__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--white);
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
}
/* On a phone the initials carry the identity; the name would cost the league
   name the room it needs. It comes back at tablet width. */
.acct__name { display: none; }
.acct__trigger > [aria-hidden="true"]:last-child { display: none; }

.acct__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 20;
  min-width: 220px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: 0 8px 24px rgb(16 23 32 / 18%);
}
.acct__menu a,
.acct__menu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-900);
  font: var(--type-body-m);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.acct__menu a:hover,
.acct__menu button:hover { background: var(--surface-sunken); }
.acct__menu form { margin-top: var(--space-1); border-top: 1px solid var(--border); padding-top: var(--space-1); }

.acct__signin {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  color: var(--white);
  font: var(--type-body-m-strong);
  text-decoration: none;
  flex-shrink: 0;
}
.acct__signin:hover { text-decoration: underline; }

/* ============================================================ banner + sponsors */

/* Full-bleed banner behind the league name — the pattern every incumbent rec
   site uses, and the one thing a board most wants control of. It sits behind
   a scrim so the name stays readable over whatever photo they upload. */
.site-banner {
  position: relative;
  background: var(--ink-900);
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.site-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-banner__scrim {
  position: relative;
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--space-10) var(--space-5) var(--space-6);
  background: linear-gradient(to top, rgb(16 23 32 / 82%), rgb(16 23 32 / 0%));
  color: var(--white);
}
.site-banner__title {
  font: var(--type-display-l);
  letter-spacing: var(--track-display-l);
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
}

.sponsor-strip {
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  /* Full-bleed band; the inner column carries the inline padding so its content
     lines up with .site-main above it (WEB-100) instead of sitting further left. */
  padding-block: var(--space-8);
}
.sponsor-strip__inner {
  max-width: var(--site-max); margin: 0 auto;
  padding-inline: var(--space-5);  /* matches .site-main base; --space-8 at ≥720px */
}

.sponsor-tier { margin-top: var(--space-6); }
.sponsor-tier + .sponsor-tier { margin-top: var(--space-8); }

/* Tier prominence is expressed as cell size, never colour — the grid has to
   read correctly in greyscale and for colour-blind visitors. */
.sponsor-grid {
  /* Unitless on purpose: this feeds calc(), and calc() cannot divide a %. */
  --sponsor-scale: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(150px * var(--sponsor-scale)), 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.sponsor-grid--strip { --sponsor-scale: 0.8; }

.sponsor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.sponsor__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  flex: 1;
  text-decoration: none;
  color: var(--ink-900);
}
.sponsor__logo {
  max-height: calc(64px * var(--sponsor-scale));
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.sponsor__name { font: var(--type-body-m-strong); text-align: center; }
.sponsor__blurb { font: var(--type-body-s); color: var(--ink-500); text-align: center; }

/* ============================================================ parent app */

.app-top {
  background: var(--ink-900);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 5;
}
.app-top__inner {
  max-width: var(--app-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.app-top__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
  min-width: 0;
  text-decoration: none;
  color: var(--white);
}
.app-top__logo { height: 32px; width: auto; max-width: 120px; object-fit: contain; }
.app-top__org { display: block; font: var(--type-heading-s); }
.app-top__sub { display: block; font: var(--type-body-s); color: var(--ink-300); }
.app-top__avatar {
  width: 38px; height: 32px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--ink-700);
  color: var(--white);
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-decoration: none;
}

/* Section nav. Scrolls horizontally on a narrow phone rather than wrapping to
   two rows or hiding behind a hamburger — five destinations is not a menu. */
.app-nav { border-top: 1px solid var(--ink-700); }
.app-nav__inner {
  max-width: var(--app-max);
  margin: 0 auto;
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.app-nav__inner::-webkit-scrollbar { display: none; }
.app-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  color: var(--ink-300);
  text-decoration: none;
  font: var(--type-body-m-strong);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.app-nav__link:hover { color: var(--white); }
.app-nav__link[aria-current="page"] { color: var(--white); border-bottom-color: var(--brand); }
/* A link out of this surface entirely (the board console). Tinted so it does
   not read as another parent section. */
.app-nav__link--elsewhere { color: var(--brand); }
.app-nav__link--elsewhere:hover { color: var(--white); }

.app-main {
  max-width: var(--app-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-14);
}

.app-foot {
  margin-top: var(--space-14);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  font: var(--type-body-s);
}

/* Sign-in (Figma 01): dark hero, then the form on the chalk page. */
.signin { min-height: 100dvh; display: flex; flex-direction: column; }
.signin__hero {
  background: var(--ink-900);
  color: var(--white);
  padding: var(--space-14) var(--space-6) var(--space-10);
}
.signin__hero-inner { max-width: var(--app-max); margin: 0 auto; }
.signin__title {
  font: var(--type-display-l);
  letter-spacing: var(--track-display-l);
  margin: var(--space-5) 0 var(--space-4);
}
.signin__body { flex: 1; max-width: var(--app-max); width: 100%; margin: 0 auto; padding: var(--space-6); }
.signin__foot { padding: var(--space-6); text-align: center; color: var(--ink-500); font: var(--type-body-m); }

.event-card__who { display: flex; align-items: center; gap: var(--space-3); }
.event-card__name { font: var(--type-heading-l); letter-spacing: var(--track-heading-l); margin-right: auto; }
.event-card__when { font: var(--type-heading-l); letter-spacing: var(--track-heading-l); }
.event-card__rule { height: 1px; background: var(--border); margin: var(--space-4) 0; }

/* Guided registration (REG-010/011). One compact progress model follows the
   family from division choice through payment; it wraps rather than scrolling
   off a phone. */
.registration-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.registration-step {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--ink-500);
  font: var(--type-label-s);
}
.registration-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
}
.registration-step.is-current { color: var(--ink-900); }
.registration-step.is-current .registration-step__number {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--white);
}
.registration-step.is-complete .registration-step__number {
  border-color: var(--field-500);
  background: var(--field-100);
  color: var(--field-600);
}
.registration-player__requests {
  display: none;
  border-top: 1px solid var(--border);
  margin-top: var(--space-4);
  padding-top: var(--space-1);
}
.registration-player:has(input[type="radio"]:checked) .registration-player__requests { display: block; }
.agreement-copy {
  white-space: pre-wrap;
  max-height: 16rem;
  overflow: auto;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font: var(--type-body-s);
}

.family-schedule { display: grid; gap: var(--space-4); }
.family-event {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-4);
}
.family-event__date { display: flex; flex-direction: column; }
.family-event__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.family-event.is-called-off { background: var(--alert-100); }

.page-head__actions, .schedule-day-event__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.schedule-day-event, .schedule-day-slot { align-items: flex-start; }
.schedule-day-event__time { flex: 0 0 8rem; }
.schedule-day-event__actions { justify-content: flex-end; }

/* ============================================================ board console */

.console { min-height: 100dvh; }
.console__side {
  background: var(--ink-900);
  color: var(--ink-300);
  padding: var(--space-6) var(--space-4);
}
.console__brand {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--white); font: var(--type-heading-s);
  text-decoration: none;
  padding: 0 var(--space-3) var(--space-5);
}
.console__nav { display: flex; gap: var(--space-1); overflow-x: auto; }
.console__menu { margin-bottom: var(--space-3); }
.console__menu-trigger {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-3);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  color: var(--white);
  cursor: pointer;
  font: var(--type-body-m-strong);
}
.console__mobile-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.console__mobile-nav .console__link { white-space: normal; }
.console__nav--desktop { display: none; }
.console__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-300);
  text-decoration: none;
  font: var(--type-body-m);
  white-space: nowrap;
}
.console__link:hover { color: var(--white); background: var(--ink-700); }
.console__link[aria-current="page"] { color: var(--white); background: var(--ink-700); }

.console__main { padding: var(--space-6) var(--space-5) var(--space-14); }
.console__inner { max-width: var(--console-max); margin: 0 auto; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.page-head__text { flex: 1; min-width: 240px; }
.page-head__title { font: var(--type-display-l); letter-spacing: var(--track-display-l); }
.page-head__sub { margin-top: var(--space-2); color: var(--ink-500); }

/* Data table (Figma 06). Below 900px each row becomes a labelled stack — the
   header cells are hidden and td::before carries the label. */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  font: var(--type-label-s);
  letter-spacing: var(--track-label-s);
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.table td { padding: var(--space-4); border-top: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { background: var(--surface-raised); }
/* Wide content scrolls inside its own container — the page body must never
   scroll sideways. .table stacks on mobile and never needs this; .fee-table
   keeps its shape and scrolls. */
.table__wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}
.table__handle { color: var(--ink-300); font: var(--type-body-m); white-space: nowrap; }
/* A row that is one big link to its record's settings. The real link lives in
   the row (keyboard/screen-reader path); this is the pointer affordance. */
.table__row--link { cursor: pointer; }
.table__row--link:hover { background: var(--surface-sunken); }
.table__row--link a { text-decoration: none; color: inherit; }

/* Settings-at-a-glance detail pages (division editor): a grid of cards, each
   stating its current values, one at a time expandable into a form. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}
.settings-card--wide { grid-column: span 2; }
.settings-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-8);
}
.settings-card__head .eyebrow { flex: 1; margin: 0; }
.settings-card__fact {
  font: var(--type-heading-m);
  letter-spacing: var(--track-heading-m);
  margin-top: var(--space-3);
}
.settings-card.is-editing {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-card);
}
.settings-card .field + .field { margin-top: var(--space-4); }
.settings-grid .field__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.field__cols--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field__cols .field + .field { margin-top: 0; }
.settings-well {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}
.danger-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.btn--danger {
  background: var(--surface-raised);
  color: var(--alert-500);
  border: 1px solid var(--border-strong);
}
.btn--danger:hover { background: var(--alert-100); }
@media (max-width: 900px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-card--wide { grid-column: auto; }
  .settings-grid .field__cols { grid-template-columns: minmax(0, 1fr); }
  .settings-well { flex-direction: column; align-items: stretch; }
}
.table__note { margin-top: var(--space-4); color: var(--ink-500); font: var(--type-body-s); }

.season-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.season-switcher select { max-width: 320px; min-height: var(--tap); }

/* Program context sits below the season context on registration surfaces. */
.program-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: calc(-1 * var(--space-3)) 0 var(--space-6);
}
.program-switcher label { margin: 0; }
.program-switcher select {
  width: min(100%, 320px);
  min-height: var(--tap);
  padding-block: var(--space-2);
}

/* One season may contain several independent programs. Their settings and
   divisions read as bounded workspaces instead of one ambiguous global table. */
.program-workspace {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}
.program-workspace__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.program-workspace__head .eyebrow { margin-bottom: var(--space-1); }
.program-workspace .table__wrap { box-shadow: none; }
.division-table__enrollment { min-width: 72px; width: 100%; }

/* Progressive disclosure keeps uncommon controls available without making
   every new division or question feel like an expert-mode workflow. */
.disclosure-card { padding: 0; overflow: hidden; }
.disclosure-card > summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style-position: inside;
}
.disclosure-card > summary:hover { background: var(--surface-sunken); }
.disclosure-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--border);
}
.disclosure-card__body.rows {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

/* Registration form composer. Wide screens show an honest family preview;
   phones use one column so actions never depend on a horizontal table. */
.form-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--space-6);
  align-items: start;
}
.form-builder-section-head,
.form-item-card__title,
.form-item-card__actions,
.order-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.form-builder-section-head {
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.form-item-list { display: grid; gap: var(--space-3); }
.form-item-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}
.form-item-card__position {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-500);
  font: var(--type-label-s);
}
.form-item-card__body { min-width: 0; }
.form-item-card__title { flex-wrap: wrap; }
.form-item-card__actions { justify-content: flex-end; flex-wrap: wrap; }
.order-actions { gap: var(--space-1); }
.order-actions .btn { min-width: var(--tap); padding-inline: var(--space-3); }
.reporting-detail { margin-top: var(--space-3); }
.reporting-detail summary { cursor: pointer; }
.reporting-detail p { margin-top: var(--space-2); }
.form-preview {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.form-preview__sticky { position: sticky; top: var(--space-6); }
.form-preview__field + .form-preview__field { margin-top: var(--space-5); }
.preview-control {
  height: 48px;
  margin-top: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.preview-control--textarea { height: 84px; }
.preview-choice {
  width: 65%;
  height: 18px;
  margin-top: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--border);
}

/* Setup checklist status pips (Figma 04). */
.pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  font: var(--type-label-s);
  background: var(--surface-sunken);
  color: var(--ink-500);
}
.pip--done    { background: var(--field-100); color: var(--field-600); }
.pip--blocked { background: var(--alert-100); color: var(--alert-500); }

.progress-head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-3); }
.progress-head__state { margin-left: auto; font: var(--type-label-m); letter-spacing: var(--track-label-m); color: var(--amber-500); }
.progress-head__state.is-live { color: var(--field-600); }

/* --- branding settings ------------------------------------------------- */

.brand-form__cols { display: grid; gap: var(--space-6); align-items: start; }

.colour-row { display: flex; gap: var(--space-3); align-items: center; }
.colour-swatch {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
}

/* The preview uses the real components, so it cannot drift from the site. */
.preview { position: sticky; top: var(--space-6); }
.preview__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--ink-900);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

/* ============================================================ responsive */

@media (min-width: 560px) {
  .acct__name { display: inline; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct__trigger > [aria-hidden="true"]:last-child { display: inline; }
}

@media (min-width: 720px) {
  .site-nav__links { display: flex; }
  .site-nav__toggle, .site-nav__drawer { display: none; }
  .site-main { padding-inline: var(--space-8); }
  /* Keep the full-bleed bands' content aligned with .site-main at every width. */
  .sponsor-strip__inner, .site-foot__inner { padding-inline: var(--space-8); }
  .hero { padding: var(--space-10); }
}

@media (min-width: 1000px) {
  .brand-form__cols { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (min-width: 900px) {
  .console {
    display: grid;
    grid-template-columns: var(--console-sidebar) 1fr;
  }
  .console__side { position: sticky; top: 0; align-self: start; height: 100dvh; }
  .console__menu { display: none; }
  .console__nav--desktop { display: flex; flex-direction: column; overflow: visible; }
  .console__main { padding: var(--space-10); }
}

@media (max-width: 899px) {
  .form-builder-layout { grid-template-columns: minmax(0, 1fr); }
  .form-preview { display: none; }
  .program-workspace__head { flex-direction: column; }

  /* Stacked table rows. Each cell announces its own column so the row still
     reads as a record on a phone (PAR-002). */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { border-top: 1px solid var(--border); padding: var(--space-3) 0; }
  .table tr:first-child { border-top: 0; }
  .table td { border: 0; display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); }
  .table td::before {
    content: attr(data-label);
    flex: 0 0 116px;
    font: var(--type-label-s);
    letter-spacing: var(--track-label-s);
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .table td:empty { display: none; }

  .schedule-day-event, .schedule-day-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .schedule-day-event__time { flex-basis: auto; }
  .schedule-day-event__actions { justify-content: flex-start; }
  .schedule-day-event__actions .btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .app-nav__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
  }
  .app-nav__link {
    justify-content: center;
    min-height: 40px;
    padding-inline: var(--space-1);
    font: var(--type-body-s);
  }
  .registration-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-event { grid-template-columns: minmax(0, 1fr); }
  .family-event__date { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .program-switcher { align-items: stretch; flex-direction: column; }
  .program-switcher select { width: 100%; max-width: none; }
  .program-workspace { padding: var(--space-4); }
  .program-workspace__head .page-head__actions,
  .form-item-card__actions { width: 100%; }
  .program-workspace__head .page-head__actions .btn,
  .form-item-card__actions > .btn,
  .form-item-card__actions > form { flex: 1 1 auto; }
  .form-item-card__actions > form .btn { width: 100%; }
  .form-item-card { grid-template-columns: auto minmax(0, 1fr); }
  .form-item-card__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  /* WEB-125: boards hand the registration page out at schools. */
  .site-nav, .app-nav, .app-top, .site-nav__drawer, .hero__cta { display: none; }
  body { background: var(--white); }
  .card, .rows, .table__wrap { box-shadow: none; }
}

/* Dated notices banner (WEB-132) — time-boxed announcements above the nav. */
.site-notices { display: flex; flex-direction: column; }
.site-notice {
  padding: var(--space-3) var(--space-4);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.site-notice--info { background: var(--brand); color: var(--brand-ink); }
.site-notice--alert { background: #b3261e; color: #fff; }
.site-notice__body { max-width: 72rem; margin: 0 auto; display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.site-notice__body a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Calendar (console): division-coded events, scrollable day cells so a packed
   Saturday shows everything scheduled, not a "+9 more" ellipsis. */
.cal-cell {
  max-height: 11rem;
  overflow-y: auto;
  display: block;
}
.cal-event {
  border-left: 3px solid var(--border-strong);
  padding-left: var(--space-2);
  margin-top: var(--space-1);
}
.cal-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--border-strong);
  margin-right: var(--space-1);
  vertical-align: baseline;
}
.cal-div-0 { border-left-color: var(--cat-0); } .cal-dot-0 { background: var(--cat-0); }
.cal-div-1 { border-left-color: var(--cat-1); } .cal-dot-1 { background: var(--cat-1); }
.cal-div-2 { border-left-color: var(--cat-2); } .cal-dot-2 { background: var(--cat-2); }
.cal-div-3 { border-left-color: var(--cat-3); } .cal-dot-3 { background: var(--cat-3); }
.cal-div-4 { border-left-color: var(--cat-4); } .cal-dot-4 { background: var(--cat-4); }
.cal-div-5 { border-left-color: var(--cat-5); } .cal-dot-5 { background: var(--cat-5); }
.cal-div-6 { border-left-color: var(--cat-6); } .cal-dot-6 { background: var(--cat-6); }
.cal-div-7 { border-left-color: var(--cat-7); } .cal-dot-7 { background: var(--cat-7); }

/* Week grid (console): fields as columns, time down the page — the
   coordinator's mental model, rendered. Blocks are placed by inline
   grid-row/column coordinates from the view. */
.wk-grid {
  display: grid;
  gap: 2px;
  align-items: stretch;
}
.wk-head {
  grid-row: 1;
  font: var(--type-label-s);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  position: sticky;
  top: 0;
}
.wk-head .muted { font-weight: 400; }
.wk-time {
  grid-column: 1;
  font: var(--type-label-s);
  font-weight: 400;
  color: var(--ink-500);
  text-align: right;
  padding-right: var(--space-2);
  white-space: nowrap;
}
.wk-block {
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font: var(--type-body-s);
  line-height: 1.3;
  overflow: hidden;
  min-width: 0;
}
.wk-block--event {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-left-color: var(--border-strong);
  display: block;
  color: inherit;
  text-decoration: none;
  z-index: 1;
}
a.wk-block--event:hover { border-color: var(--border-strong); }
.wk-block--off {
  background: var(--surface-page);
  border: 1px dashed var(--border);
  color: var(--ink-300);
  text-decoration: none;
  display: block;
}
.wk-block--open {
  border: 1px dashed var(--border-strong);
  color: var(--ink-500);
  background: transparent;
}
.wk-block--held {
  background: var(--amber-100);
  border: 1px dashed var(--amber-500);
  color: var(--amber-500);
}
.wk-block--reserved {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-left-width: 4px;
  color: var(--ink-500);
}
.wk-block--reserved.cal-div-0, .wk-block--event.cal-div-0 { border-left-color: var(--cat-0); }
.wk-block--reserved.cal-div-1, .wk-block--event.cal-div-1 { border-left-color: var(--cat-1); }
.wk-block--reserved.cal-div-2, .wk-block--event.cal-div-2 { border-left-color: var(--cat-2); }
.wk-block--reserved.cal-div-3, .wk-block--event.cal-div-3 { border-left-color: var(--cat-3); }
.wk-block--reserved.cal-div-4, .wk-block--event.cal-div-4 { border-left-color: var(--cat-4); }
.wk-block--reserved.cal-div-5, .wk-block--event.cal-div-5 { border-left-color: var(--cat-5); }
.wk-block--reserved.cal-div-6, .wk-block--event.cal-div-6 { border-left-color: var(--cat-6); }
.wk-block--reserved.cal-div-7, .wk-block--event.cal-div-7 { border-left-color: var(--cat-7); }

/* Week grid move mode (P2): valid landings glow, swap targets outline,
   everything irrelevant recedes. */
.wk-form { display: flex; }
.wk-form button {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  text-align: left;
  font: var(--type-body-s);
  line-height: 1.3;
}
.wk-block--target {
  background: var(--field-100);
  border: 2px solid var(--field-500);
  color: var(--field-600);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}
.wk-block--target:hover { background: var(--field-500); color: var(--white); }
.wk-block--swap {
  background: var(--surface-raised);
  border: 2px dashed var(--clay-500);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  overflow: hidden;
}
.wk-block--swap:hover { background: var(--clay-100); }
.wk-moving { outline: 3px solid var(--clay-500); outline-offset: 1px; }
.wk-dim { opacity: 0.3; pointer-events: none; }
.wk-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--clay-100);
  border: 1px solid var(--clay-500);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

/* Week grid drag layer (P7): while a block is in the air, valid landings
   glow and everything else quiets down. */
[data-event][draggable] { cursor: grab; }
.wk-dragging .wk-block, .wk-dragging .wk-time { opacity: 0.45; }
.wk-dragging .wk-droppable,
.wk-dragging .wk-swappable,
.wk-dragging .wk-moving { opacity: 1; }
.wk-droppable {
  border: 2px dashed var(--field-500) !important;
  background: var(--field-100) !important;
  color: var(--field-600) !important;
}
.wk-swappable {
  border: 2px dashed var(--clay-500) !important;
}
.wk-drop-hover.wk-droppable { background: var(--field-500) !important; color: var(--white) !important; }
.wk-drop-hover.wk-swappable { background: var(--clay-100) !important; }