/* ==========================================================================
   f-events.css — CAT-09 only. Tokens only: no colours, no radii, no fonts
   declared here that are not already in tokens.css.
   ========================================================================== */

.ev-head { padding: var(--s-6) var(--gutter) var(--s-4); }
.ev-head h1 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  font-weight: var(--w-regular);
}
.ev-head p { margin-top: var(--s-3); color: var(--ink-muted); max-width: var(--measure); }

.ev-block { padding: var(--s-5) var(--gutter); border-top: 1px solid var(--hairline); }
.ev-block > * + * { margin-top: var(--s-4); }
.ev-foot { padding: var(--s-5) var(--gutter) var(--s-8); }

.ev-frame { border: 1px solid var(--ink); padding: var(--s-4); }
.ev-frame > * + * { margin-top: var(--s-3); }
.ev-alarm { border: 1px solid var(--ink-alarm); padding: var(--s-4); }
.ev-alarm .ev-big { color: var(--ink-alarm); }

.ev-big {
  font-family: var(--font-display);
  font-size: var(--t-sub);
  font-variant-numeric: tabular-nums;
}

.ev-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

/* ---- the dated event row -------------------------------------------------- */

.ev-row {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: var(--s-4) var(--gutter);
  border-bottom: 1px solid var(--hairline);
  min-height: var(--tap);
  background-image: none;
  color: inherit;
}
.ev-row:first-of-type { border-top: 1px solid var(--hairline); }
@media (hover: hover) and (pointer: fine) {
  a.ev-row:hover { background: var(--wash); }
}

.ev-row-date {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ev-row-date b { font-family: var(--font-display); font-size: var(--t-sub); font-variant-numeric: tabular-nums; font-weight: var(--w-regular); }
.ev-row-date small { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-muted); }

.ev-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-row-title { font-size: var(--t-body); }
.ev-row-meta { font-size: var(--t-small); color: var(--ink-muted); }

.ev-row[data-struck="true"] .ev-row-title { text-decoration: line-through; }
.ev-row[data-struck="true"] { opacity: 0.55; }

.ev-badge {
  display: inline-block;
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding: 1px var(--s-2);
  align-self: flex-start;
  white-space: nowrap;
}

.ev-avail { font-size: var(--t-small); }
.ev-avail[data-state="last"] { color: var(--ink-alarm); }
.ev-avail[data-state="soldout"] { color: var(--ink-muted); }

.ev-month { padding: var(--s-6) var(--gutter) var(--s-2); }

/* ---- the pinned buy bar --------------------------------------------------- */

.ev-buybar {
  position: sticky;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  background: var(--paper);
  border-top: 1px solid var(--ink);
  padding: var(--s-3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  z-index: 4;
}
.ev-buybar .btn { min-height: var(--tap-primary); }

/* ---- the ticket ------------------------------------------------------------ */

.ev-qr {
  display: block;
  width: min(240px, 70vw);
  aspect-ratio: 1;
  margin-inline: auto;
  background: var(--paper);
  color: var(--ink);
}

.ev-ticket-code {
  font-family: var(--font-display);
  font-size: var(--t-title);
  letter-spacing: 0.12em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- stepper ---------------------------------------------------------------- */

.ev-stepper { display: inline-flex; align-items: center; gap: var(--s-4); }
.ev-step-btn {
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--ink);
  background: transparent;
  font-size: var(--t-sub);
  display: inline-flex; align-items: center; justify-content: center;
}
.ev-step-btn[disabled] { opacity: 0.35; }
.ev-count { font-family: var(--font-display); font-size: var(--t-sub); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- ledger rows ------------------------------------------------------------ */

.ev-ledger { font-variant-numeric: tabular-nums; }
.ev-ledger-row { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); }
.ev-ledger-rule { border-top: 1px solid var(--hairline); margin-block: var(--s-2); }

/* ---- the static map --------------------------------------------------------- */

.ev-map {
  position: relative;
  border: 1px solid var(--hairline);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, var(--hairline) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, var(--hairline) 31px 32px),
    var(--wash);
}
.ev-map-road { position: absolute; background: var(--paper); border-block: 1px solid var(--hairline); }
.ev-map-pin {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.ev-map-label {
  position: absolute;
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper);
  padding: 1px var(--s-2);
}

/* ---- checkbox rows ----------------------------------------------------------- */

.ev-check { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); min-height: var(--tap); }
.ev-check input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 auto; }
.ev-check-body { flex: 1; min-width: 0; }

/* ---- signature pad ------------------------------------------------------------ */

.ev-sig { width: 100%; height: 140px; border: 1px solid var(--hairline); background: var(--paper); touch-action: none; display: block; }

/* ---- copyable block ----------------------------------------------------------- */

.ev-code-block {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--t-label);
  white-space: pre-wrap;
  word-break: break-all;
  border: 1px solid var(--hairline);
  background: var(--wash);
  padding: var(--s-3);
  max-height: 40vh;
  overflow-y: auto;
}

.ev-scroll { overflow-x: auto; }