:root {
  --color-bg: #f9f9f9;
  --color-text: #212121;
  --color-text-secondary: #535459;
  --color-border: #e0e0e0;
  --color-accent: #c45d3c;
  --color-accent-ink: #a8431f;
  --color-error: #9b1c1c;
  --color-success: #2f6b4f;
  --color-text-light: #fff;
  --radius: 4px;
  --font-display:
    "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Lato", "Helvetica Neue", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

body {
  min-width: 320px;
  margin: 0;
}

.signup-page {
  width: min(100% - 2rem, 58rem);
  margin-inline: auto;
  padding-block: 2.5rem 4rem;
}

.signup-header,
.error-summary {
  width: min(100%, 34rem);
}

.signup-header {
  margin: 0 auto 2rem;
}

.eyebrow,
.preview-kicker,
.porch-card-type {
  margin: 0 0 0.35rem;
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.lede {
  margin: 1rem 0 0;
  color: var(--color-text-secondary);
  font-size: 1.05rem;
}

.signup-layout {
  display: grid;
  gap: 2.5rem;
  justify-content: center;
}

.signup-single-column {
  width: min(100%, 34rem);
  margin-inline: auto;
}

.signup-form {
  width: min(100%, 34rem);
}

.signup-form > fieldset {
  margin: 0 0 2.5rem;
  padding: 0;
  border: 0;
}

.signup-form > fieldset > legend {
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0 0 0.5rem;
  border-bottom: 2px solid var(--color-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.field {
  margin: 0 0 1.25rem;
  padding-left: 0;
}

.field.has-error {
  padding-left: 0.75rem;
  border-left: 4px solid var(--color-error);
}

label,
.field-heading,
.choice-group > legend {
  display: block;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.field-heading {
  font-family: var(--font-body);
}

input,
textarea,
button,
.secondary-action {
  font: 400 1rem/1.4 var(--font-body);
}

/* Every text-like control, by exclusion rather than by list. The enumerated
   version silently missed url, date and time when the setup form introduced
   them, so those inputs rendered at the browser's default width beside
   full-width neighbours. A new input type should not need a CSS edit. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.75rem;
  border: 1px solid #8c8d91;
  border-radius: var(--radius);
  color: var(--color-text);
  background: #fff;
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
.choice:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.help {
  margin: 0.35rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.field-error-slot {
  min-height: 1.55rem;
}

.field-error {
  margin: 0.2rem 0;
  color: var(--color-error);
  font-weight: 700;
}

.choice-group {
  padding: 0;
  border: 0;
}

.choices,
.checkboxes {
  display: grid;
  gap: 0.35rem;
}

.choice {
  display: flex;
  min-height: 44px;
  padding: 0.55rem 0.65rem;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  font-weight: 400;
}

.choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-accent-ink);
}

.availability-row {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--color-border);
}

.availability-row .field {
  margin-bottom: 0.5rem;
}

.error-summary {
  margin: 0 auto 2rem;
  padding: 1rem 1rem 1rem 1.25rem;
  border-left: 6px solid var(--color-error);
  border-radius: var(--radius);
  background: #fff;
}

.error-summary h2 {
  margin: 0;
  color: var(--color-error);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.error-summary ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.error-summary a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-error);
  font-weight: 700;
}

.primary-action,
.secondary-action {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 0.7rem 1rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-accent-ink);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.primary-action {
  width: 100%;
  color: #fff;
  background: var(--color-accent-ink);
}

.secondary-action {
  color: var(--color-accent-ink);
  background: transparent;
}

.preview-column {
  width: min(100%, 22rem);
}

.porch-card {
  margin-top: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 5px 18px rgb(33 33 33 / 12%);
  overflow: hidden;
}

.porch-card-band {
  padding: 1rem;
  border-bottom: 4px solid var(--color-accent);
  color: var(--color-text-light);
  background: #535459;
}

.porch-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.porch-card .porch-card-type,
.porch-card .porchfest-venue-title,
.porch-card .porchfest-venue-address {
  color: var(--color-text-light);
}

.porch-card-band > p:last-child,
.porch-card-body p {
  margin: 0.4rem 0 0;
  overflow-wrap: anywhere;
}

.porch-card-body {
  padding: 1rem;
}

.porch-card-details {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 700;
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.confirmation-page {
  width: min(100% - 2rem, 34rem);
}

.confirmation {
  padding-left: 1rem;
  border-left: 6px solid var(--color-success);
}

.success-mark {
  color: var(--color-success);
}

.email-notice {
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}

.confirmation-card {
  margin: 2rem 0;
}

.confirmation-card > h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

/* Confirmation read-back. The public/private split is the point of this section,
   so the two groups are visually distinct rather than one long undifferentiated
   list: a participant should be able to tell at a glance which answers will be
   on the map before the season opens, not after. */
.submission {
  margin-top: 2.5rem;
}

.submission > h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.submission-group {
  border-left: 3px solid var(--color-border);
  padding: 0.25rem 0 0.25rem 1rem;
  margin-bottom: 1.5rem;
}

.submission-public {
  border-left-color: var(--color-accent);
}

.submission-private {
  border-left-color: var(--color-success);
}

.submission-group > h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

.submission-list {
  display: grid;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0 0;
}

.submission-row {
  display: grid;
  gap: 0.125rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.submission-row:last-child {
  border-bottom: 0;
}

.submission-row dt {
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.submission-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The challenge widget sits in the normal field rhythm rather than looking
   bolted on, and reserves height so the form does not jump when it mounts. */
.challenge-field {
  min-height: 5.5rem;
}

/* The activity queue. An organizer scans this on a Tuesday night looking for what
   changed, so the item's kind and its title carry the weight and the review
   control sits out of the reading path until it is wanted. */
.queue-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.queue-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}

.queue-item-body {
  min-width: 0;
}

.queue-item-kind {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.queue-item h3 {
  margin: 0.125rem 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
}

.queue-item h3 a {
  color: var(--color-text);
}

.queue-item form {
  margin: 0;
}

.queue-item .secondary-action {
  min-height: 44px;
  padding: 0 1rem;
}

.matching-slot,
.matching-venue {
  border-top: 1px solid var(--color-border);
  padding-block: 1.25rem;
}

.matching-candidates {
  display: grid;
  gap: 1rem;
  padding-left: 1.5rem;
}

.matching-candidate {
  padding-left: 0.25rem;
}

.matching-explanation ul {
  margin-top: 0.35rem;
}

.matching-warnings {
  color: var(--color-error);
}

.compact-form {
  margin-top: 0.75rem;
}

@media (min-width: 56rem) {
  .signup-layout {
    grid-template-columns: minmax(0, 34rem) minmax(16rem, 22rem);
    align-items: start;
  }

  .preview-column {
    position: sticky;
    top: 1.5rem;
  }

  .availability-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .submission-row {
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: 1rem;
    align-items: baseline;
  }
}

/* Outbox review: a rendered message body is arbitrary organizer text, so it
   scrolls inside its own box rather than pushing the page sideways. */
.outbox-body {
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-text-light);
  font-family: var(--font-body);
  font-size: 0.95rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 24rem;
  overflow-y: auto;
}

.outbox-recipients {
  margin: 0.5rem 0 0;
  padding-left: 1.15rem;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.outbox-recipients li {
  overflow-wrap: anywhere;
}

.outbox-preview {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-text-light);
  overflow-wrap: anywhere;
}

.outbox-preview > :first-child {
  margin-top: 0;
}

.outbox-preview > :last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}