/* The events page. Sits on top of creators.css, which already owns the
   long-form page shell (.page, .page-head, .page-hero, .page-cards,
   .share-link) — this file adds only what a calendar needs that a document
   doesn't: rows with a time on them, and the room panel. */

/* The account control lives in the header here, unlike the creators page,
   which has nothing to sign in for. */
.ev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Arriving on an invite link: the pitch above the fold is for somebody who
   came to browse, and this visitor came for one match. Left in place rather
   than hidden — scrolling down to "what is this" is a real thing to want when
   a friend sends you a link to a site you've never used. */
.ev-quiet {
  padding-top: 4px;
  opacity: 0.65;
}
.ev-quiet h1 { font-size: clamp(0.95rem, 4.4vw, 1.4rem); }
.ev-quiet img { width: 48px; height: 48px; }

.ev-section { margin: 34px 0; }
.ev-section > h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  font-size: 0.95rem;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.ev-muted { color: var(--muted); font-size: 14px; line-height: 1.6; }
.ev-sub { color: var(--muted); font-size: 13px; margin: 14px 0 4px; }
.ev-hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 6px 0 0; }
.ev-optional { color: var(--muted); font-weight: normal; }
.ev-msg { color: var(--warn); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.ev-alert {
  color: var(--danger);
  font-weight: 600;
  font-size: 14px;
}

/* ------------------------------------------------------------- the invite */
.ev-invite { margin: 8px 0 28px; }

.ev-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
}
/* The invite is the one thing on the page that was linked to directly, so it
   gets the accent edge. Nothing else does, or it stops meaning anything. */
.ev-invite-card { border-color: var(--accent); }
/* An empty list or a failed load. Same panel as a row, so a list that has
   nothing in it still looks like the list it belongs to. */
.ev-note { padding: 16px 18px; }
.ev-note p { margin: 0; }
.ev-note button { margin-top: 12px; }

.ev-title { font-size: 1.5rem; margin: 6px 0 4px; }
.ev-when { font-size: 15px; margin: 0 0 2px; }
.ev-host { margin: 0; }
.ev-countdown { color: var(--accent); font-variant-numeric: tabular-nums; }
.ev-notes {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  /* Typed by a person, newlines and all, and shown as they wrote it. */
  white-space: pre-wrap;
  margin: 12px 0 0;
}
.ev-names { font-size: 14px; margin: 0; }

/* Cancelled, and events that have been and gone. Dimmed rather than removed:
   the link still has to say what happened to it. */
.ev-gone { opacity: 0.6; }

.ev-badge {
  display: inline-block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- the room */
.ev-room {
  margin: 18px 0 0;
  padding: 16px;
  background: var(--well);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.ev-room-live { margin: 0 0 10px; font-size: 15px; }
/* The same treatment the game gives a room code in its pause menu
   (.modal-card .room-code): accent, bold, widely tracked. The weight is not
   decoration — these are four characters somebody may be reading aloud or
   typing off a phone screen, and accent alone is thin on the light themes. */
.ev-room-live code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
}
/* An <a> wearing the primary button's clothes: it navigates into the game, so
   it has to be a real link — middle-click and "open in new tab" both matter
   when the thing on the other side is a match about to start. The look is
   restated rather than inherited, because style.css scopes the house button
   rules to `button` and `button.primary`, and widening those selectors to
   catch one anchor would repaint every link on the site. */
.ev-join {
  display: inline-block;
  font: inherit;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  text-decoration: none;
  text-align: center;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  transition: filter 0.15s ease, transform 0.08s ease;
}
.ev-join:hover { filter: brightness(1.07); }
.ev-join:active { transform: translateY(1px); }

.ev-rsvp { margin: 16px 0 0; }
.ev-rsvp-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ev-rsvp-btns button { flex: 0 1 auto; }

.ev-guests { margin: 14px 0 0; }
.ev-cancel { margin-top: 18px; font-size: 13px; }

/* ------------------------------------------------------------------ lists */
.ev-list { display: flex; flex-direction: column; gap: 10px; }

.ev-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.ev-row:hover { border-color: var(--border-hover); }
/* The whole job of `featured`: a championship should be findable in a column
   of Friday duels without reading any of them. */
.ev-row-featured { border-left-color: var(--gold); }

.ev-row-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ev-row-title {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.ev-row-title:hover { color: var(--accent); }

/* A room that is open right now is the only state worth interrupting the row
   for — it means "this is happening, go". */
.ev-live {
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ev-row-meta { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.ev-row-meta strong { color: var(--text); font-weight: 600; }
.ev-row-notes {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 6px 0 0;
  /* One line in a list. The full text is on the event's own page. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------- form */
/* Panelled rather than sitting straight on the page background, for the same
   reason .page-plain is in creators.css: the Arcade Cabinet theme's backdrop
   is a saturated green, and a form is mostly muted text — labels and hints —
   which is exactly what disappears against it. */
.ev-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px 24px;
}
.ev-form label:first-of-type { margin-top: 0; }
.ev-form label {
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px;
}
.ev-form input,
.ev-form textarea {
  background: var(--well);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
}
.ev-form textarea { resize: vertical; line-height: 1.5; }
.ev-form input:focus,
.ev-form textarea:focus { outline: none; border-color: var(--accent); }
/* Safari and Chrome hand datetime-local a light-mode clock icon that vanishes
   on this background. */
.ev-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}
.ev-form button { margin-top: 18px; align-self: flex-start; }

/* ------------------------------------------------------------- standings */
/* The ladder for one event. Deliberately not styled like the site's global
   leaderboard: that one is a wall of the all-time best and this is a handful
   of rows about one afternoon, so it reads as part of the invite card rather
   than as a second page inside it. */
.ev-standings { margin: 18px 0 0; }
.ev-ladder {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ev-ladder th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--border);
}
.ev-ladder td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}
.ev-ladder tr:last-child td { border-bottom: none; }
/* Tabular figures so the two number columns line up as columns rather than as
   whatever width the glyphs happen to be. */
.ev-num, .ev-rank { text-align: right; font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.ev-rank { text-align: left; color: var(--muted); }
.ev-ladder .ev-lead td { color: var(--gold); font-weight: 600; }
.ev-ladder .ev-lead .ev-rank { color: var(--gold); }

@media (max-width: 560px) {
  .ev-title { font-size: 1.25rem; }
  .ev-form button,
  .ev-join { width: 100%; }
}