/*
 * Every player-facing surface except the landing page.
 *
 * Brand guide v1.0: black-first (50/35/15 black/white/red), Chakra Petch for
 * display only, Archivo for body, zero border radius, one red action per view,
 * tabular figures because numbers matter on an events site.
 *
 * The views emit semantic class names and no markup changes were needed to
 * style them — `.category`, `.availability`, `.buy`, `.price` and the rest were
 * already there, waiting for a stylesheet that never shipped.
 */

:root {
  --black: #000000;
  --coal: #181818;
  --line: #262626;
  --white: #ffffff;
  --steel: #a8a8a8;
  --red: #fc0000;
  --facet-shadow: #780000;
  --facet-light: #f84c4c;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem) 4rem;
  background: var(--black);
  color: var(--white);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
}

main,
body > h1,
body > p {
  width: min(48rem, 100%);
  margin-inline: auto;
}

h1 {
  font-family: "Chakra Petch", Archivo, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

h2 {
  font-family: "Chakra Petch", Archivo, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 2.5rem 0 0.75rem;
}

a {
  color: var(--facet-light);
}

.when,
.venue {
  margin: 0.15rem 0;
  color: var(--steel);
}

.description {
  margin: 1.25rem 0 0;
  max-width: 65ch;
  color: #e6e6e6;
}

.not-yet-on-sale {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--facet-light);
  background: var(--coal);
  color: #e6e6e6;
}

/* --- Ticket categories ------------------------------------------------- */

.categories {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.category {
  display: grid;
  /* name | price | availability | action. Four columns, not three: with three,
     the availability band and the buy button both land in the last one and the
     button wraps to a row of its own. */
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.6rem 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--coal);
  border: 1px solid var(--line);
}

.category .name {
  font-family: "Chakra Petch", Archivo, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}

.category .price {
  font-weight: 600;
}

.category .availability {
  min-width: 7ch;
  text-align: right;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

/* Never colour alone (NFR4.2/AC2.1.5) — the band is already text. */
.category .availability[data-kind="band"] {
  color: var(--facet-light);
}

.category.empty {
  display: block;
  color: var(--steel);
}

/* The one red action per view. Single notched corner, echoing the wordmark. */
.buy,
button[type="submit"] {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  font-family: "Chakra Petch", Archivo, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  background: var(--red);
  border: 2px solid var(--red);
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 66%, calc(100% - 12px) 100%, 0 100%);
}

.buy:hover,
.buy:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible {
  background: var(--facet-shadow);
  border-color: var(--facet-shadow);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--facet-light);
  outline-offset: 3px;
}

/* --- Forms: checkout and waitlist -------------------------------------- */

form {
  margin: 1.5rem 0 0;
  display: grid;
  gap: 1rem;
  max-width: 32rem;
}

.waitlist {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
}

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--steel);
}

input,
select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--white);
  background: var(--black);
  border: 1px solid #3a3a3a;
  border-radius: 0;
}

input:focus,
select:focus {
  border-color: var(--facet-light);
}

fieldset {
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
}

legend {
  padding: 0 0.4rem;
  font-family: "Chakra Petch", Archivo, sans-serif;
  font-weight: 700;
}

/* Errors say what happened; never colour alone, and never apologetic. */
.field-error,
.error {
  margin: 0.4rem 0 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--red);
  color: var(--facet-light);
  font-size: 0.9rem;
}

[aria-invalid="true"] {
  border-color: var(--red);
}

.summary,
.hold {
  color: var(--steel);
}

/* --- Confirmation ------------------------------------------------------- */

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--coal);
  border: 1px solid var(--line);
  padding: 0.15rem 0.4rem;
}

img[alt*="QR"],
.qr img,
img[src^="cid:"],
img[src^="data:image"] {
  display: block;
  margin: 1.5rem 0;
  width: min(260px, 70vw);
  height: auto;
  background: var(--white);
  padding: 0.75rem;
}

@media (max-width: 34rem) {
  .category {
    grid-template-columns: 1fr auto;
  }

  .category .name {
    grid-column: 1 / -1;
  }

  .category .availability {
    text-align: left;
  }
}

/* --- Multi-category purchase ------------------------------------------- */

/* The checkbox that adds a category to the purchase. It sits in the list item
   and reaches the single buy form by `form="buy"`, so the markup stays a list
   of categories rather than a table wrapped in a form. */
.choose {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.choose input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--red);
}

.choose label {
  margin: 0;
  color: var(--white);
  font-family: "Chakra Petch", Archivo, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.buy-selected {
  margin-top: 1.5rem;
  max-width: none;
}

/* What is being bought, on the checkout page. */
.purchase {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  max-width: 32rem;
}

.purchase li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.purchase .total {
  border-bottom: none;
  border-top: 2px solid var(--white);
  font-family: "Chakra Petch", Archivo, sans-serif;
  font-weight: 700;
}

/* One block per ticket on the confirmation screen. */
.ticket {
  margin: 2rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.ticket h2 {
  margin-top: 0;
}