/* Base layout primitives. Colors, fonts and focus come from theme tokens (src/pages/theme.ts). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}
main { flex: 1; padding-block: 2rem 3rem; }
.container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
main.container > * { max-width: 68ch; }

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 1rem;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 4.5vw, 1.75rem); }
p, li { text-wrap: pretty; overflow-wrap: anywhere; }
p { margin: 0 0 1rem; }
.muted { color: var(--text-muted); }
.ref { font-size: 0.875rem; }
img { max-width: 100%; height: auto; }
a { color: var(--text); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -4rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 6px;
  font-weight: 600;
}
.skip-link:focus { top: 8px; }

.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.site-header .container { display: flex; align-items: center; min-height: 56px; }
.brand { font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; text-decoration: none; overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding-block: 1.5rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer p { margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }

.field { display: block; margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.field .error, .error { color: var(--danger); font-size: 0.9375rem; margin-top: 0.25rem; }
.field input[aria-invalid="true"] { border-color: var(--danger); }

/* ---- Task 1.6: pages and the dashboard shell. Tokens only; no raw colors. ---- */
[hidden] { display: none !important; }
.balance { text-wrap: balance; }
.btn-quiet { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn:disabled { opacity: 0.6; cursor: default; filter: none; }
.muted.field-help { font-size: 0.9375rem; margin: 0.25rem 0 0; }
.notice { border-left: 4px solid var(--accent); padding: 0.5rem 0.75rem; background: var(--surface); }
fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; margin: 0 0 1rem; min-width: 0; }
legend { font-weight: 600; padding-inline: 0.25rem; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; min-height: 44px; padding-block: 0.375rem; }
.check input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.2rem; }
.role-help { display: block; color: var(--text-muted); font-size: 0.9375rem; }
.slug-row { display: flex; align-items: stretch; gap: 0.5rem; }
.slug-row input { flex: 1; min-width: 0; }
.slug-prefix { display: inline-flex; align-items: center; color: var(--text-muted); overflow-wrap: anywhere; max-width: 45%; font-size: 0.9375rem; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.choose-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.75rem; }

main.container > .dash { max-width: none; }
.dash-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.dash-org { margin: 0; font-weight: 700; font-size: 1.125rem; overflow-wrap: anywhere; }
.dash-panel { border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.dash-nav { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.dash-nav a { display: flex; align-items: center; min-height: 44px; padding-inline: 0.25rem; }
.dash-nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 3px; }
.dash-account { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.dash-account .btn-quiet { align-self: flex-start; }
.dash-email { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.dash-switch label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.dash-switch select { min-height: 44px; max-width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.dash-body > * { max-width: 68ch; }
.dash-body :is(p, li, dd) { text-wrap: balance; }
.dash-section { margin-block: 2rem; }
.card-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.member-card { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: var(--surface); }
.member-card h3 { margin: 0 0 0.25rem; font-size: 1.125rem; }
.member-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0.5rem 0 1rem; }
.member-card dt { font-weight: 600; }
.member-card dd { margin: 0; overflow-wrap: anywhere; }
.member-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.member-actions .field { margin: 0; flex: 1 1 14rem; }
.member-actions .error { flex-basis: 100%; margin: 0; }
.confirm-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.you-tag { font-weight: 400; color: var(--text-muted); }

@media (max-width: 47.99em) {
  .dash-panel[hidden] { display: none !important; }
}
@media (min-width: 48em) {
  .dash-menu-button { display: none; }
  .dash-bar { margin-bottom: 0.25rem; }
  .dash-panel { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; }
  .dash-panel[hidden] { display: flex !important; }
  .dash-nav { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; }
  .dash-account { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; }
}

/* ---- Task 2.14: public pages (/e/, /h/). Tokens only; no raw colors. ---- */
main.container > .event-page, main.container > .host-page { max-width: 760px; }
.event-page__cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; margin-bottom: 1.5rem; background: var(--surface); }
/* Task 7.3 deslop: the modality is a plain fact line, not a tracked uppercase eyebrow. */
.event-page__tag, .class-card__tag { margin: 0 0 0.375rem; font-size: 0.9375rem; font-weight: 600; color: var(--text-muted); }
.event-page__head h1 { margin-bottom: 0.5rem; }
.event-page__host { color: var(--text-muted); margin-bottom: 1.5rem; }
.event-facts { display: grid; gap: 0.75rem; margin: 0 0 2rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.event-facts div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; }
.event-facts dt { font-weight: 700; }
.event-facts dd { margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.event-section { margin-block: 2rem; }
.event-section h3 { font-size: 1.125rem; margin: 1.25rem 0 0.5rem; }
.event-before { padding: 1rem; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; }
.event-before h2 { margin-bottom: 0.75rem; }
.event-before p:last-child { margin-bottom: 0; }
.event-cta { margin-block: 2rem; }
.event-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.event-date { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.event-date p { margin: 0; }
.event-date__day { font-weight: 700; }
.event-date__day { white-space: nowrap; }
.event-date__when { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.host-page__head { margin-bottom: 1.5rem; }
.host-page__lede { color: var(--text-muted); max-width: 40ch; }
.cert-badge a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.25rem 0.875rem; border: 1px solid var(--border); border-radius: 999px; font-weight: 600; text-decoration: none; background: var(--surface); }
.class-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.class-card { display: grid; gap: 0.375rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.class-card p { margin: 0; }
.class-card__image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; margin-bottom: 0.5rem; }
.class-card__title { margin: 0; font-size: 1.1875rem; text-wrap: balance; }
.class-card__title a { text-decoration: none; }
.class-card__title a:hover { text-decoration: underline; }
.class-card__when { font-weight: 600; }
.class-card__where, .class-card__price { color: var(--text-muted); font-size: 0.9375rem; font-style: normal; overflow-wrap: anywhere; }
.class-card__cta { margin-top: 0.5rem !important; }
/* Short info lines read like captions: balance them so no zone name or last words hang alone (line-shape). */
.event-facts dd, .event-page__host, .event-date__when, .class-card__when, .class-card__where, .class-card__price, .host-page__lede { text-wrap: balance; }
/* Task 5.5: seat-state badges (text, never images; one per date, same text on every surface). */
.avail { display: inline-block; font-weight: 700; color: var(--text); white-space: nowrap; }
.avail--sold_out, .avail--waitlist { color: var(--text-muted); }
.event-date__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.class-card__avail { font-size: 0.9375rem; }

/* Task 2.16: discovery pages (/<modality>[/<state>[/<city>]]) reuse the host page and class cards. */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 1rem; padding: 0; font-size: 0.9375rem; color: var(--text-muted); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--text-muted); }
.class-card__host { color: var(--text-muted); font-size: 0.9375rem; text-wrap: balance; }
.discover-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.discover-children { margin-top: 2rem; }
.pager { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }

/* Task 4.3: the payment settings page (/dashboard/payments). */
.pay-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0.125rem 0.75rem; border-radius: 999px; font-weight: 700; background: var(--surface); border: 1px solid var(--accent); margin-right: 0.5rem; }
.pay-due { margin: 0 0 1rem; padding-left: 1.25rem; }
.pay-connect { margin-block: 1rem; }
.pay-example { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow-wrap: anywhere; }
.pay-merchant, #payment-settings h2 { text-wrap: balance; }
.pay-msg:empty { display: none; }

/* Task 4.8: the shared price blocks (src/pages/components/price.tsx) and the /pricing calculator.
   Short money lines are balanced so no line ends on one or two words (line-shape rule). */
.price-tiers { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.price-tier { display: grid; gap: 0.25rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.price-tier p { margin: 0; }
.price-tier__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; align-items: baseline; }
.price-tier__name { font-weight: 600; text-wrap: balance; }
.price-tier__total { font-size: 1.375rem; }
.price-tier__includes, .price-tier__compare { font-size: 0.9375rem; }
.price-tier__includes, .price-tier__compare, .event-section > p.muted,
.co-facts li, .co-break td, #co-policy, .co-notice, #co-pick .muted, #co-form > p.muted { text-wrap: balance; }

/* Task 7.3: short info lines balanced so no time zone or last words hang alone at 390 (line-shape):
   booking facts (when, where, host), the seller line before payment, host-written class text and
   the agents page example labels. */
.booking-facts li, .rsvp-facts li, .waitlist-facts li, #legal-seller, .event-section > p, .agents li > p { text-wrap: balance; }

/* Task 7.3: text fields and selects get an outline at 3:1 against the page (WCAG 1.4.11). The html
   prefix outranks the per-page `.x input { border: 1px solid var(--border) }` rules; an invalid
   field keeps its danger outline. */
html :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="range"], [type="color"]), select, textarea) { border-color: var(--field-border); }
html :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }