/* The venue application form (/partners/apply; tools/site/apply.py, apply.js), on top of site.css's tokens and its
   .card, .field, .submit and .trap. Phone first; two columns for short fields from 40rem. */
.apply { display: grid; gap: 1rem; }
.apply [hidden] { display: none !important; }
.apply h3 { margin: 0; font-size: 1rem; }
.hint { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.eyebrow { margin: 0; font-size: 0.8125rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.step h2 { margin: 0; }
.step h2:focus, #sent-title:focus, #status-title:focus { outline: none; }
.step h2:focus-visible, #sent-title:focus-visible, #status-title:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 0.25rem; }
.step .lede { margin: 0; }
.step { gap: 1rem; }

.alert { margin: 0; padding: 0.75rem 1rem; border-radius: 0.75rem; font-weight: 600; color: var(--danger-text);
  background: var(--danger-soft); }
.lists-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.lists-alert[hidden] { display: none; }
.alert:focus { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Who it's for, and the steps as a wrapping row of pills. */
.who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; }
.who .note { margin: 0; overflow-wrap: anywhere; }
.steps { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; counter-reset: step; }
.steps li { counter-increment: step; }
.steps button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.75rem; padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--card); font-size: 0.9375rem; }
.steps button::before { content: counter(step); font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.steps button[aria-current="step"] { background: var(--accent-fill); color: #fff; font-weight: 600; }
.steps button[aria-current="step"]::before { color: inherit; }
.steps button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.steps button:disabled { cursor: progress; }

/* Controls not in site.css: selects, radios and checkboxes, buttons. */
.field select, .ticket-type input, .range input {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 0.625rem;
  padding: 0.625rem 0.75rem; min-height: 2.75rem; width: 100%; box-sizing: border-box;
}
.field input { box-sizing: border-box; }
.field select:focus-visible, .ticket-type input:focus-visible, .range input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 0.375rem; font-size: 0.9375rem; font-weight: 600; }
.choice-list { display: grid; gap: 0.5rem; }
.choice { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem;
  background: var(--bg); border: 1px solid var(--line); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input, .check input { flex: 0 0 auto; width: 1.375rem; height: 1.375rem; margin: 0.0625rem 0 0; accent-color: var(--accent-fill); }
.choice input:focus-visible, .check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.choice label { display: grid; gap: 0.125rem; flex: 1 1 auto; min-width: 0; cursor: pointer; font-weight: 600; }
.choice label .hint { font-weight: 400; }
.check { display: flex; align-items: flex-start; gap: 0.75rem; }
.check label { cursor: pointer; }
.check.inline { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.9375rem; }
.check.inline input { margin: 0; }

.secondary {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.625rem 1.25rem; border-radius: 0.875rem; background: var(--accent-soft);
  color: var(--accent); font-weight: 600; text-align: center;
}
.secondary:focus-visible, .link:focus-visible, .icon-button:focus-visible, .file:focus-visible + * { outline: 3px solid var(--accent); outline-offset: 2px; }
.secondary:disabled { opacity: 0.6; cursor: default; }
.link { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--accent); font-weight: 600; border-radius: 0.375rem; }
.link.danger, .danger { color: var(--danger-text); }
.icon-button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--muted); font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.icon-button:hover { background: var(--bg); }
.step-actions { display: flex; flex-wrap: wrap-reverse; gap: 0.75rem; justify-content: space-between; align-items: center; }
.step-actions .submit { justify-self: auto; margin-left: auto; }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.inline-actions a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.add { justify-self: start; }

/* Opening hours: a day per row; its ranges side by side. */
.hours [data-hours] { display: grid; gap: 0.25rem; }
.day-hours { display: grid; gap: 0.25rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.day-hours:first-child { border-top: 0; }
.day-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; }
.day-name { font-weight: 600; }
.ranges { display: grid; gap: 0.5rem; }
.range { display: flex; align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.time { display: grid; gap: 0.25rem; flex: 1 1 7rem; min-width: 0; font-size: 0.875rem; color: var(--muted); }
.day-hours > .link { justify-self: start; font-size: 0.9375rem; }

/* Ticket types: each in its own panel. */
.ticket-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ticket-type { display: grid; gap: 0.75rem; padding: 0.875rem; border-radius: 0.875rem; background: var(--bg); }
.ticket-type input { background: var(--card); }
.ticket-type > .link { justify-self: start; }
.with-unit { display: flex; align-items: center; gap: 0.5rem; }
.with-unit input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.unit { color: var(--muted); font-weight: 600; }

.saved-card { display: grid; gap: 0.5rem; padding: 0.875rem; border-radius: 0.875rem; background: var(--bg); }
.saved-card p { margin: 0; overflow-wrap: anywhere; }
[data-payout-form] { display: grid; gap: 1rem; }
[data-method] { display: grid; gap: 1rem; }

/* Uploads: the file input stays in the page (and the tab order) under its label button. */
.uploads { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.uploads li { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.uploads .file-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.file-button { justify-self: start; }
.file { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.file:focus-visible { outline: none; }
.file:focus-visible + * , .file-button:has(+ .file:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.missing { margin: 0; padding-left: 1.25rem; display: grid; gap: 0; }
.missing .link { min-height: 2.25rem; font-weight: 500; }

.apply [aria-invalid="true"] { border-color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger-text); }
.invalid > label, .invalid > legend { color: var(--danger-text); }
.field-error { margin: 0; color: var(--danger-text); font-weight: 600; font-size: 0.9375rem; }
#wizard { display: grid; gap: 1rem; }

@media (min-width: 40rem) {
  .ticket-type { grid-template-columns: 1fr 1fr; align-items: end; }
  .ticket-type > .ticket-title, .ticket-type > .link { grid-column: 1 / -1; }
  .choice-list { grid-template-columns: 1fr 1fr; }
}

:root { --danger-text: #c00011; --danger-soft: rgba(255, 59, 48, 0.12); }
@media (prefers-color-scheme: dark) {
  :root { --danger-text: #ff6961; --danger-soft: rgba(255, 69, 58, 0.18); }
}