/* Employee pages for events across agreements (phase 4).
   Each agreement has a colour (--accent, set inline from Agreement.Accent). It is only used for
   stripes and dots, never behind text, so contrast does not depend on the colour an admin picks. */

/* Agreement name with a dot in its colour */
.agreement { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--adv-text-muted); }
.agreement__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--adv-indigo)); }
.agreement--dark { font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,0.8); }
.agreement--dark .agreement__dot { width: 10px; height: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }

/* Cards (lists, suggestions, my bookings): a stripe in the agreement colour on the left */
.event { border-left: 4px solid var(--accent, var(--adv-indigo)); }
.game.event:hover { border-left-color: var(--accent, var(--adv-indigo)); }
.event__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event .game__title { overflow-wrap: anywhere; }

/* Filter chips per agreement; the dot gets a ring on the selected (dark) chip */
.chip--agreement .agreement__dot { width: 10px; height: 10px; }
.chip--agreement[aria-current="page"] .agreement__dot { box-shadow: 0 0 0 2px #fff; }

/* Calendar: the stripe and a light tint show the agreement; the status keeps its colour as text and a dot */
.cal-game.cal-event { border-left-color: var(--accent, var(--adv-indigo)); background: var(--adv-surface-brand-tint); background: color-mix(in srgb, var(--accent, var(--adv-indigo)) 8%, #fff); }
.cal-game.cal-event:hover { background: color-mix(in srgb, var(--accent, var(--adv-indigo)) 15%, #fff); }
.cal-game.cal-event.cal-game--closed, .cal-game.cal-event.cal-game--played { background: var(--adv-surface-muted); }
.cal-game.cal-event.cal-game--postponed { background: var(--j-postponed-bg); }
.cal-event .cal-game__status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; }

/* Event page header: a bar in the agreement colour along the top */
.event-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accent, var(--adv-indigo)); }

/* Phones: hockey games show just the opponent (the full title stays for screen readers); the time keeps the status colour */
.cal-title-short { display: none; }
@media (max-width: 767px) {
  .cal-title-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cal-title-short { display: inline; }
  .cal-event .cal-game__status::before { display: none; }
}

/* The agreement's information about the tickets, on the event page */
.ticket-info { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.ticket-info h2 { font-size: 18px; }
.prose { font-size: 15px; line-height: 23px; color: var(--adv-text-body); overflow-wrap: anywhere; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 10px; }
.prose ul, .prose ol { margin: 0 0 10px; padding-left: 22px; }
.prose li + li { margin-top: 4px; }
.prose a { color: var(--adv-indigo); font-weight: 600; }
.event-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }