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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--blue-dark); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

small { font-size: 0.85rem; }

/* The button classes below set a display, which would otherwise beat the user
   agent's rule for [hidden]. */
[hidden] { display: none !important; }

/* The ring must stay opaque: WCAG 1.4.11 asks 3:1 against the page, and the
   brand blue thinned against --paper drops below that from about 55% down. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

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

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 60ms ease;
}

.btn:hover { background: var(--blue-dark); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn--lg { padding: 0.9rem 1.6rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

.btn--secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--secondary:hover { background: var(--paper-deep); color: var(--ink); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--blue);
  padding: 0.35rem 0.6rem;
}

.btn--ghost:hover { background: var(--blue-light); color: var(--blue-dark); }

.btn--danger {
  background: transparent;
  border-color: color-mix(in srgb, var(--berry) 35%, transparent);
  color: var(--berry);
}

.btn--danger:hover { background: var(--berry); color: #fff; }

.btn--sm { padding: 0.35rem 0.7rem; font-size: 0.875rem; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ------------------------------------------------------------------ Pills */

.pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.pill--open, .pill--confirmed { background: var(--ok-light); color: var(--ok); }
.pill--new { background: var(--blue-light); color: var(--blue); }
.pill--upcoming, .pill--draft { background: var(--warn-light); color: var(--warn); }
.pill--closed, .pill--cancelled { background: var(--err-light); color: var(--err); }

/* ------------------------------------------------------------------ Flash */

.flash {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.flash--success { background: var(--ok-light); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.flash--error { background: var(--err-light); border-color: color-mix(in srgb, var(--err) 30%, transparent); color: var(--err); }
.flash--info { background: var(--gold-light); border-color: color-mix(in srgb, var(--gold) 35%, transparent); color: var(--warn); }

/* ------------------------------------------------------------------ Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card__body { padding: var(--space-5); }

.empty {
  padding: var(--space-7) var(--space-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}