/* M4 Eternal — the schedule page (web-events): the clocks, the next moment, the week strip, the boss timers, the clan wars, the
   Valley of Life and Death, the resets and the calendar. Built on ds.css; every class here is ev-*. No inline style: the marks of
   the week and the progress bars are placed through CSS custom properties set from events.js (CSSOM, allowed by the CSP). */

.page-events {
  --ev-boss: var(--red-hi); --ev-war: var(--amber); --ev-dungeon: var(--jade); --ev-event: var(--cyan); --ev-reset: var(--gold);
}
.ev-tone--boss, .ev-dot--boss { --tone: var(--ev-boss); }
.ev-tone--war, .ev-dot--war { --tone: var(--ev-war); }
.ev-tone--dungeon, .ev-dot--dungeon { --tone: var(--ev-dungeon); }
.ev-tone--event, .ev-dot--event { --tone: var(--ev-event); }
.ev-tone--reset, .ev-dot--reset { --tone: var(--ev-reset); }

/* ---------- page head ---------- */
.page-events .page-head { min-height: clamp(220px, 22vw, 300px); }
.page-events .page-head__art img { object-position: 60% 30%; filter: brightness(1.15) contrast(1.06) saturate(1.05); }
.page-events .page-head__art::after {
  background:
    linear-gradient(90deg, rgba(5, 7, 11, 0.88) 0%, rgba(5, 7, 11, 0.55) 32%, rgba(5, 7, 11, 0.12) 62%, rgba(5, 7, 11, 0.25) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(5, 7, 11, 0.3) 32%, transparent 60%);
}
.page-events .page-head h1 { filter: drop-shadow(0 1px 1px #000) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.85)); }
.ev-lede { margin: var(--sp-3) 0 0; max-width: 58ch; color: var(--text-soft); font-size: var(--fs-md); text-shadow: 0 1px 8px #000; }

.ev-page { padding-top: var(--sp-8); }
.ev-page .wrap { display: grid; gap: var(--sp-6); }
.ev-empty { margin: 0; padding: var(--sp-4) 0; font-size: var(--fs-sm); }
.ev-count { font-variant-numeric: tabular-nums; color: var(--gold-hi); white-space: nowrap; }

/* ---------- clocks ---------- */
.ev-clocks {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-4) var(--sp-5); background: var(--panel); border: 1px solid var(--gold-hair); box-shadow: var(--sh-1);
}
.ev-clocks__list { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); margin: 0; }
.ev-clock { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 var(--sp-3); }
.ev-clock dt { grid-column: 1 / -1; font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.ev-clock dd { margin: 0; }
.ev-clock dd.num { font-size: var(--fs-xl); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.ev-clock__zone { font-size: var(--fs-xs); }
.ev-clocks__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ev-zone { margin-bottom: 0; }
.ev-zone > [aria-pressed="true"] { color: var(--gold-hi); background: var(--gold-wash); box-shadow: inset 0 -2px 0 var(--gold); }
.ev-stale { margin: calc(-1 * var(--sp-4)) 0 0; font-size: var(--fs-xs); color: var(--amber); }
.ev-stale:empty { display: none; }

/* ---------- next up ----------
   The headline: a sigil in the tone of the moment, its name, and a large countdown; the five after it in a ledger below. */
.ev-next {
  --tone: var(--gold);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-6) var(--sp-8);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tone) 16%, transparent) 0%, transparent 55%),
    linear-gradient(90deg, rgba(10, 15, 23, 0.6), rgba(10, 15, 23, 0.92)), var(--panel);
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  border-left: 4px solid var(--tone);
  box-shadow: var(--sh-2);
}
.ev-next[data-tone="boss"] { --tone: var(--ev-boss); }
.ev-next[data-tone="war"] { --tone: var(--ev-war); }
.ev-next[data-tone="dungeon"] { --tone: var(--ev-dungeon); }
.ev-next[data-tone="event"] { --tone: var(--ev-event); }
.ev-next[data-tone="reset"] { --tone: var(--ev-reset); }
/* A faint dial behind the countdown: concentric rings and ticks, pure CSS. */
.ev-next::after {
  content: ""; position: absolute; right: -90px; top: 50%; width: 360px; height: 360px; translate: 0 -50%; pointer-events: none;
  border-radius: 50%; opacity: 0.32;
  background:
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tone) 70%, transparent) 0deg 0.6deg, transparent 0.6deg 6deg),
    radial-gradient(circle, transparent 0 54%, color-mix(in srgb, var(--tone) 40%, transparent) 54.4% 55%, transparent 55.4% 70%,
      color-mix(in srgb, var(--tone) 30%, transparent) 70.4% 71%, transparent 71.4%);
  mask: radial-gradient(circle, transparent 0 46%, #000 47% 72%, transparent 73%);
  animation: ev-turn 120s linear infinite;
}
@keyframes ev-turn { to { rotate: 360deg; } }
.ev-next__main, .ev-next__count, .ev-next__list { position: relative; z-index: 1; }
.ev-next__kicker {
  margin: 0; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--tone);
}
.ev-next__name { margin: var(--sp-2) 0 0; font-size: var(--fs-3xl); line-height: var(--lh-tight); color: #fff; letter-spacing: 0.01em; }
.ev-next__when { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.ev-next__when:empty { display: none; }
.ev-chance { color: var(--amber); }
.ev-next__count { font-size: clamp(34px, 5vw, 60px); line-height: 1; color: var(--gold-hi); text-shadow: 0 0 28px color-mix(in srgb, var(--tone) 45%, transparent); }
.ev-count--big { color: inherit; letter-spacing: 0.02em; }
.ev-next__list {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--gold-hair);
  display: grid; gap: var(--sp-2);
}
.ev-next__list:empty { display: none; }
.ev-next__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.ev-next__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-next__at { font-size: var(--fs-xs); }
.ev-next__item .ev-count { min-width: 9ch; text-align: right; }
.ev-sk-line { display: block; width: min(320px, 70%); height: 1em; }

/* ---------- blocks ---------- */
.ev-block { min-width: 0; }
.ev-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-4); position: relative; z-index: 1; }
.ev-block__title { margin: 0; font-size: var(--fs-lg); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-hi); }
.ev-block > :not(.ev-block__head) { position: relative; z-index: 1; }
.ev-note { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }

.ev-dot { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); background: var(--tone, var(--gold)); box-shadow: 0 0 8px var(--tone, var(--gold)); flex: none; }
.ev-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--muted); }
.ev-legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* ---------- the week ----------
   Seven columns; each has a 24-hour bar with a mark per moment (--at = 0..1 of the day) and today a needle at now. */
.ev-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--gold-hair); border: 1px solid var(--gold-hair); }
.ev-day { min-width: 0; padding: var(--sp-3); background: var(--panel); display: grid; align-content: start; gap: var(--sp-3); }
.ev-day--today { background: linear-gradient(180deg, var(--gold-wash), transparent 60%), var(--panel); }
.ev-day__name { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.ev-day--today .ev-day__name { color: var(--gold-hi); }
.ev-day__date { font-size: var(--fs-lg); color: var(--text); letter-spacing: 0; }
.ev-day__bar { position: relative; height: 10px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 4)), var(--surface-1); border: 1px solid var(--line); }
.ev-mark, .ev-needle { position: absolute; top: 50%; left: calc(var(--at, 0) * 100%); translate: -50% -50%; }
.ev-mark { width: 7px; height: 7px; rotate: 45deg; background: var(--tone); box-shadow: 0 0 6px var(--tone); }
.ev-needle { width: 2px; height: 18px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); }
.ev-day__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ev-day__item { display: grid; gap: 1px; padding-left: var(--sp-2); border-left: 2px solid var(--tone); font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--text-soft); min-width: 0; }
.ev-day__item span { overflow-wrap: anywhere; }
.ev-day__item time { color: var(--tone); font-size: var(--fs-xs); }
.ev-day__empty { margin: 0; font-size: var(--fs-2xs); }

/* ---------- bosses ---------- */
.ev-tabs { margin-bottom: 0; }
.ev-tabs__n { margin-left: var(--sp-2); padding: 0 6px; font-size: var(--fs-2xs); color: var(--muted); border: 1px solid var(--line); }
.ev-tabs > [aria-selected="true"] .ev-tabs__n { color: var(--gold-hi); border-color: var(--gold-line); }
.ev-bosses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--sp-3); }
.ev-boss {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); align-items: start;
  padding: var(--sp-3) var(--sp-4); background: var(--surface-1); border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.ev-boss:hover { border-color: var(--gold-line); }
.ev-boss--soon { border-left-color: var(--amber); }
.ev-boss--open { border-left-color: var(--jade); background: linear-gradient(90deg, rgba(114, 194, 157, 0.1), transparent 60%), var(--surface-1); }
.ev-boss__name { min-width: 0; }
.ev-boss__name h3 { margin: 0; font-size: var(--fs-md); color: #fff; line-height: var(--lh-snug); }
.ev-boss__name p { margin: 2px 0 0; font-size: var(--fs-xs); }
.ev-boss__when { display: grid; justify-items: end; gap: 2px; font-size: var(--fs-xs); text-align: right; }
.ev-boss__when .ev-count { font-size: var(--fs-lg); }
.ev-boss--soon .ev-boss__when .ev-count { color: var(--amber); }
.ev-boss__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }

/* ---------- clan wars, dead valley and resets ---------- */
.ev-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.ev-wars, .ev-dv { display: grid; gap: var(--sp-4); }
.ev-war { padding: var(--sp-4); background: var(--surface-1); border: 1px solid var(--line); display: grid; gap: var(--sp-3); }
.ev-war__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.ev-war__head h3 { margin: 0; font-size: var(--fs-md); color: #fff; }
.ev-war__sub, .ev-dv__season { margin: 0; font-size: var(--fs-xs); }
.ev-war__count { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.ev-war__count .ev-count { font-size: var(--fs-lg); }
.ev-phase--battle { border-color: rgba(239, 106, 82, 0.45); background: linear-gradient(90deg, rgba(91, 19, 13, 0.4), transparent 70%), var(--surface-1); }

/* The siege's four steps: a rail of diamonds, done ones filled, the current one lit. */
.ev-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: ev-step; }
.ev-step { position: relative; display: grid; gap: 2px; padding: var(--sp-5) var(--sp-2) 0 0; font-size: var(--fs-2xs); min-width: 0; }
.ev-step::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; rotate: 45deg;
  border: 1px solid var(--gold-line); background: var(--night); z-index: 1;
}
.ev-step::after { content: ""; position: absolute; left: 10px; right: 0; top: 8px; height: 1px; background: var(--gold-hair); }
.ev-step:last-child::after { display: none; }
.ev-step--done::before { background: var(--gold-lo); border-color: var(--gold); }
.ev-step--done::after { background: var(--gold-line); }
.ev-step--now::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px var(--amber); }
.ev-phase--battle .ev-step--now::before { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 10px var(--danger); }
.ev-step__name { color: var(--text-soft); letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.ev-step--now .ev-step__name { color: var(--gold-hi); }
.ev-step__at { font-size: var(--fs-2xs); }

.ev-valleys { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ev-valley { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.ev-valley:first-child { border-top: 0; }
.ev-valley__name { color: var(--text); }
.ev-valley__at { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); }

.ev-resets { margin: var(--sp-4) 0 0; display: grid; gap: 1px; background: var(--gold-hair); border: 1px solid var(--gold-hair); }
.ev-resets:empty { display: none; }
.ev-reset { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--panel); }
.ev-reset dt { font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.ev-reset dd { margin: 0; display: flex; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-xs); }
.ev-reset .ev-count { font-size: var(--fs-md); }

/* ---------- calendar ---------- */
.ev-cal { display: grid; gap: var(--sp-6); }
.ev-cal__title { margin: 0 0 var(--sp-3); display: flex; align-items: center; font-size: var(--fs-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text); }
.ev-cal__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-3); }
.ev-ev { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface-1); border: 1px solid var(--line); align-content: start; }
.ev-ev--running { border-color: var(--cyan-line); }
.ev-ev--ended { opacity: 0.78; }
.ev-ev__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.ev-ev__name { margin: 0; font-size: var(--fs-md); color: #fff; line-height: var(--lh-snug); min-width: 0; overflow-wrap: anywhere; }
.ev-ev__range { margin: 0; font-size: var(--fs-xs); }
.ev-ev__bar { position: relative; height: 4px; background: var(--line); overflow: hidden; }
.ev-ev__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--cyan), var(--gold)); }
.ev-ev__count { margin: 0; display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); }
.ev-kind { font-size: var(--fs-2xs); }
.ev-kind--pass, .ev-kind--missionPass { color: var(--gold-hi); border-color: var(--gold-line); background: var(--gold-wash); }
.ev-kind--attendance, .ev-kind--goal { color: var(--cyan); border-color: var(--cyan-line); }
.ev-kind--bingo, .ev-kind--portrait, .ev-kind--wayfarer { color: #c9f0dc; border-color: rgba(114, 194, 157, 0.4); }
.ev-cal__past summary { cursor: pointer; display: inline-flex; align-items: center; font-size: var(--fs-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); padding: var(--sp-2) 0; }
.ev-cal__past summary:hover { color: var(--text); }
.ev-cal__past[open] summary { margin-bottom: var(--sp-3); }
.ev-cal > .ev-note { margin: 0; font-size: var(--fs-xs); }

/* ---------- small screens ---------- */
@media (max-width: 1080px) {
  .ev-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ev-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .page-events .page-head { min-height: 180px; }
  .ev-next { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); }
  .ev-next::after { width: 260px; height: 260px; right: -110px; }
  .ev-next__item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ev-next__at { display: none; }
  .ev-week { grid-template-columns: minmax(0, 1fr); }
  .ev-day { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .ev-day__bar { grid-column: 2; grid-row: 1; align-self: center; }
  .ev-day__list, .ev-day__empty { grid-column: 1 / -1; }
  .ev-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-3); }
  .ev-step:nth-child(2)::after { display: none; }
  .ev-clock dd.num { font-size: var(--fs-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .ev-next::after { animation: none; }
  .ev-boss { transition: none; }
}