@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/bebas-neue-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/bebas-neue-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

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

:root {
  /* ── Base palette ── */
  --bg:      #07090F;   /* page body — the near-black void behind everything */
  --surface: #0E1219;   /* card and panel backgrounds — slightly lighter than bg */
  --ice:     #3BAFDA;
  --ice-dim: rgba(59,175,218,.15);
  --ice-glow: rgba(59,175,218,.35);
  --white:   #F0F4F8;   /* primary text: names, values, headings */
  --dim:     #9EAEC0;   /* secondary readable: body text, descriptions, instructions */
  --muted:   #6B7A8D;   /* tertiary: timestamps, labels, hints, icons, placeholders */
  --border:  #1A2233;   /* dividers, card outlines */

  /* ── Semantic status ── */
  --clr-danger:  #EF4444;  /* destructive actions, error toast */

  /* ── RSVP / attendance ── */
  --clr-attend:  #34D399;
  --clr-decline: #F87171;
  --clr-pending: #FBBF24;  /* also: coach chip, championship event */

  /* ── Event type accent colors ── */
  --clr-event-friendly:     #A78BFA;       /* also: org role chip */
  --clr-event-championship: var(--clr-pending);
  --clr-event-party:        #F472B6;

  /* ── Subtle surfaces ── */
  --surface-hover: #111720;  /* slightly lighter than --surface; active state */
  --tint-card: rgba(255,255,255,.015);  /* barely-there background tint on field cards */
  --hairline:  rgba(255,255,255,.05);   /* thin divider lines between rows */

  /* ── Interactive states ── */
  --focus-ring:     var(--ice);
  --focus-ring-dim: var(--ice-dim);

  /* ── Backdrops (dark overlay behind slide-up sheets/drawers) ── */
  --backdrop:       rgba(0,0,0,.55);  /* bottom sheets, settings drawer */
  --backdrop-heavy: rgba(0,0,0,.75);  /* tooltip, full-screen overlays */

  /* ── Letter spacing ── */
  --ls-tight:  .05em;   /* compact display — badges, hero titles */
  --ls-normal: .08em;   /* buttons, tabs, headings */
  --ls-wide:   .10em;   /* section labels, allcaps UI chrome */
  --ls-brand:  .18em;   /* brand subtitle only */

  /* ── Font sizes ── */
  --fs-mini:  .70rem;
  --fs-xs:    .80rem;
  --fs-s:     .85rem;
  --fs-l:     1.0rem;
  --fs-xl:    1.10rem;
  --fs-xxl:   1.25rem;
  --fs-mega:  1.5rem;
  --fs-giga:  2.0rem;
  --fs-peta:  2.5rem;

  /* ── Monospace font stack (slugs, invite codes, identifiers) ── */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

}

html, body {
  background: var(--bg);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
.htmx-request { opacity: .5; pointer-events: none; }

/* ── Bespoke button vocabulary (Pico styles bare <button> as primary) ── */

/* Display typography — uppercase Bebas. Apply to big/important buttons. */
.btn-display {
  letter-spacing: var(--ls-normal); text-transform: uppercase;
  font-size: var(--fs-l);
}

/* Full-width buttons (single primary form submit, single confirm) */
.btn-full {
  width: 100%;
  padding: .75rem;
  font-size: var(--fs-xl);
}

/* Compact inline icon buttons (row actions, comment icons) */
.btn-sm {
  width: auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .35rem .55rem; min-height: 28px;
  font-size: var(--fs-mini); border-radius: 6px;
  margin: 0; line-height: 1;
}

/* Destructive variant — outlined danger (no Pico equivalent) */
.btn-danger {
  background: transparent !important;
  color: var(--clr-danger) !important;
  border: 1px solid var(--clr-danger) !important;
}
.btn-danger:hover, .btn-danger:focus {
  background: color-mix(in srgb, var(--clr-danger) 12%, transparent) !important;
}

/* Ghost variant — muted text, default border, transparent bg (cancel/close) */
.btn-ghost {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
}

/* Outline variant — ice text, ice border, transparent bg */
.btn-outline {
  background: transparent !important;
  color: var(--ice) !important;
  border: 1px solid var(--ice) !important;
}
.btn-outline:active { background: var(--ice-dim) !important; }

/* Floating action button (centered above bottom nav). Implies display typography. */
.btn-fab {
  position: fixed; bottom: calc(var(--full-nav-h) + .5rem);
  left: 50%; transform: translateX(-50%);
  z-index: 50; width: auto; min-width: 160px; height: 48px;
  border-radius: 24px; padding: 0 1.5rem;
  font-size: var(--fs-l); letter-spacing: var(--ls-normal); text-transform: uppercase;
  box-shadow: 0 4px 16px var(--ice-glow);
}
.btn-fab:active { opacity: .8; }

/* Stack of vertically-arranged buttons */
.btn-stack { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.btn-stack > * { margin: 0; }

/* ── Standard form layout. Apply `.app-form` to any <form> to get consistent
   section/hr/section rhythm: every direct child is separated by 1rem regardless
   of what it is (fieldset, hr, button). Flex gap avoids margin-collapse quirks.
   The wrapper owns horizontal padding so all `.app-form` consumers share the
   same gutter; pages MUST NOT add their own padding-inline to direct children
   or to the form itself. */
.app-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-inline: 1rem;
}
.app-form > * { margin: 0; }
.app-form > hr {
  border: 0;
  height: 0;
  border-top: 1px solid var(--border);
}
/* Adjacent duplicate <hr> — collapse to one visible line. */
.app-form > hr + hr { display: none; }

/* <a class="btn-*"> reset — Pico styles bare <a> as an underlined link.
   Buttons rendered as anchor tags need the same chrome <button> gets from Pico. */
a.btn-display, a.btn-full, a.btn-sm, a.btn-fab,
a.btn-outline, a.btn-ghost, a.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  border-radius: var(--pico-border-radius);
  padding: var(--pico-form-element-spacing-vertical)
           var(--pico-form-element-spacing-horizontal);
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  border: 1px solid var(--pico-primary-border);
  cursor: pointer;
  line-height: var(--pico-line-height);
  font-weight: var(--pico-font-weight);
  box-sizing: border-box;
}
a.btn-full { padding: .75rem; }

/* ── Form field (underline style) ── */
.field { display: flex; flex-direction: column; gap: .4rem; position: relative; }
.field label {
  font-size: var(--fs-mini); font-weight: 500; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--muted); transition: color .2s;
}
.field:focus-within label { color: var(--ice); }
.field input {
  background: transparent; border: none;
  border-bottom: 1.5px solid var(--border);
  color: var(--white);
  font-size: var(--fs-l); font-weight: 400; padding: .55rem 0;
  outline: none; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field input::placeholder { color: var(--muted); }
.field input:focus {
  border-bottom-color: var(--ice);
  box-shadow: 0 2px 0 -1px var(--ice-glow);
}

/* ── Error message ── */
.error-msg {
  font-size: var(--fs-s); color: var(--clr-danger);
  letter-spacing: var(--ls-tight); min-height: 1.2em; animation: fadein .25s ease;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Brand block ── */
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-hex { width: 32px; height: 32px; fill: var(--ice); }
.brand-name {
  font-size: var(--fs-peta); letter-spacing: var(--ls-wide);
  color: var(--white); line-height: 1;
}
.brand-sub {
  font-size: var(--fs-mini); font-weight: 500; letter-spacing: var(--ls-brand);
  text-transform: uppercase; color: var(--muted);
}

/* ── Rink-line divider ── */
.rink-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ice), transparent);
  position: relative; overflow: hidden;
}
.rink-line::after {
  content: ''; position: absolute; top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--white) 50%, transparent);
  animation: skate 2.4s ease-in-out infinite;
}
@keyframes skate {
  0%   { left: -60%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* ── Type utilities ── */
.text-sub     { font-size: var(--fs-xs); color: var(--muted); }
.text-body    { font-size: var(--fs-s); color: var(--white); }
.text-title   { font-size: var(--fs-xxl);
  letter-spacing: var(--ls-normal); color: var(--white); }
.text-display { font-size: var(--fs-mega);
  letter-spacing: var(--ls-wide);  color: var(--white); }

/* ── Color utilities ── */
.text-ice     { color: var(--ice); }
.text-dim     { color: var(--dim); }
.text-white   { color: var(--white); }
.text-attend  { color: var(--clr-attend); }
.text-decline { color: var(--clr-decline); }
.text-pending { color: var(--clr-pending); }

html, body { height: 100%; }

.rink {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 2rem 1.5rem;
  max-width: 320px;
  margin: 0 auto;
  gap: 1.5rem;
}

/* ── Form container ── */
.auth-form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Description paragraph used across auth pages ── */
.auth-desc {
  font-size: var(--fs-s); color: var(--dim); text-align: center;
  margin-bottom: .8rem; max-width: 320px; line-height: 1.5;
}
.auth-desc strong { color: var(--white); font-weight: 500; }

/* ── Footer links ── */
.auth-footer {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: .2rem;
}

.auth-footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}