/* ==========================================================================
   signup.css — the sheet that replaced signup.php

   Always loaded, like the other component sheets, because the sheet's markup
   is emitted whether or not the modern layer is on. Tokens carry literal
   fallbacks so it looks right either way.
   ========================================================================== */

.cs-signup-sheet {
  display: flex;
  flex-direction: column;
  padding-bottom: 2px;
}

/* --- head ---------------------------------------------------------------- */

.cs-signup-head { margin-bottom: 12px; }

.cs-signup-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--cs-ink, #0b0b10);
  text-wrap: balance;
}

.cs-signup-when {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cs-muted, #6b6b76);
}

/* --- spots --------------------------------------------------------------- */

.cs-signup-spots { margin-bottom: 12px; }

.cs-signup-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--cs-surface-3, #eeeef2);
  color: var(--cs-ink-2, #3a3a44);
}
.cs-signup-pill.is-full {
  background: rgba(225, 29, 72, 0.12);
  color: #c62828;
}

/* --- description --------------------------------------------------------- */

/* The long text that used to be shoved through a browser alert() from the
   little icon on the row. It reads as a paragraph here instead. */
.cs-signup-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cs-ink-2, #3a3a44);
  margin-bottom: 16px;
}
.cs-signup-desc :last-child { margin-bottom: 0; }
.cs-signup-desc a { color: var(--cs-accent, #2f6fed); }

/* --- notes and flashes --------------------------------------------------- */

.cs-signup-note,
.cs-signup-flash {
  font-size: 14px;
  line-height: 1.5;
  padding: 11px 13px;
  border-radius: var(--cs-r-sm, 10px);
  background: var(--cs-surface-2, #f6f6f8);
  color: var(--cs-ink-2, #3a3a44);
  margin-bottom: 12px;
}

.cs-signup-note.is-good,
.cs-signup-flash.is-good {
  background: rgba(22, 163, 74, 0.11);
  color: #14713a;
}
.cs-signup-note.is-wait,
.cs-signup-flash.is-wait {
  background: rgba(245, 158, 11, 0.14);
  color: #92610a;
}
.cs-signup-flash.is-bad {
  background: rgba(225, 29, 72, 0.11);
  color: #b0173c;
}

.cs-signup-fineprint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cs-faint, #9a9aa5);
  margin-bottom: 12px;
}

.cs-signup-loading {
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: var(--cs-faint, #9a9aa5);
}

/* --- form ---------------------------------------------------------------- */

.cs-signup-form {
  display: flex;
  flex-direction: column;
}

.cs-signup-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cs-muted, #6b6b76);
  margin-bottom: 6px;
}

.cs-signup-optional {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--cs-faint, #9a9aa5);
}

.cs-signup-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 16px; /* keeps iOS from zooming the page on focus */
  font-family: inherit;
  color: var(--cs-ink, #0b0b10);
  background: var(--cs-surface-2, #f6f6f8);
  border: 1px solid var(--cs-line-strong, rgba(15, 15, 25, 0.12));
  border-radius: var(--cs-r-sm, 10px);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-signup-input:focus {
  border-color: var(--cs-accent, #2f6fed);
  box-shadow: 0 0 0 4px var(--cs-accent-soft, rgba(47, 111, 237, 0.16));
}
.cs-signup-input::placeholder { color: var(--cs-faint, #9a9aa5); }

/* --- actions ------------------------------------------------------------- */

.cs-signup-action {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 0;
  border-radius: var(--cs-r-sm, 10px);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s var(--cs-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), filter 0.15s ease, opacity 0.15s ease;
}
.cs-signup-action:active { transform: scale(0.985); }

.cs-signup-action.is-primary { background: var(--cs-green, #16a34a); color: #fff; }
.cs-signup-action.is-wait    { background: var(--cs-amber, #f59e0b); color: #fff; }
.cs-signup-action.is-pay     { background: var(--cs-accent, #2f6fed); color: #fff; }

/* Leaving is available but never the loudest thing in the sheet */
.cs-signup-action.is-cancel {
  background: transparent;
  color: var(--cs-red, #e11d48);
  box-shadow: inset 0 0 0 1px var(--cs-line-strong, rgba(15, 15, 25, 0.12));
}

.cs-signup-action:disabled,
.cs-signup-action.is-busy {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* --- the row button ------------------------------------------------------ */

/* GOING is a state, not an invitation. It used to be the same solid green as
   SIGN UP, so a list of slots read as a wall of identical buttons and you had
   to read every label to find the ones you were already on. It is now a quiet
   tinted chip with a tick, which leaves the solid green to mean "you can still
   join this one". */
.cs-signup-btn.cs-signup-going {
  /* Opaque, not a tint: on the schedule these buttons sit on cards in whatever
     colour the camp picked, and a translucent green over lavender came out
     grey. */
  background: #e6f5ec !important;
  color: #15803d !important;
  box-shadow: inset 0 0 0 1.5px rgba(22, 163, 74, 0.32) !important;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cs-signup-btn.cs-signup-going::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: currentColor;
  -webkit-mask: url("../check-solid.svg") center / contain no-repeat;
  mask: url("../check-solid.svg") center / contain no-repeat;
}

/* Dark mode here is a body class, not a media query — the app lets you pick. */
body.theme-dark .cs-signup-title { color: #f4f5f7; }
body.theme-dark .cs-signup-desc { color: #c7cad2; }
body.theme-dark .cs-signup-pill { background: #2b2f36; color: #d5d7dd; }
body.theme-dark .cs-signup-pill.is-full { background: rgba(225, 29, 72, 0.2); color: #ff9d9d; }
body.theme-dark .cs-signup-note,
body.theme-dark .cs-signup-flash { background: #23262c; color: #c7cad2; }
body.theme-dark .cs-signup-note.is-good,
body.theme-dark .cs-signup-flash.is-good { background: rgba(22, 163, 74, 0.18); color: #67d99a; }
body.theme-dark .cs-signup-note.is-wait,
body.theme-dark .cs-signup-flash.is-wait { background: rgba(245, 158, 11, 0.18); color: #f0b95a; }
body.theme-dark .cs-signup-flash.is-bad { background: rgba(225, 29, 72, 0.18); color: #ff8fab; }
body.theme-dark .cs-signup-input {
  background: #23262c;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f4f5f7;
}
body.theme-dark .cs-signup-action.is-cancel { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
body.theme-dark .cs-signup-btn.cs-signup-going {
  background: #1c3527 !important;
  color: #6fdd9f !important;
  box-shadow: inset 0 0 0 1.5px rgba(34, 197, 94, 0.45) !important;
}