/* ============================================================
   SUM — /calendar/ page styles (PRD §10.1)
   Layered on tokens.css + main.css. Tokens only; no new colours.

   The schedule is a ledger, not a card grid: `.record` from
   main.css carries the rows (figure = the date, entry = the
   event, meta = the category). Everything here is the small
   amount of event-specific typography that main.css cannot know
   about.

   The next upcoming event is framed in crimson and carries a gold
   countdown chip. That is the only emphasis on this page now; the
   crimson drench that used to sit above the ledger is gone.
   ============================================================ */

/* ---------- Compact page head ----------
   Overrides .section's --section-y, which is clamp(5rem, 9vw, 11rem) and
   would make this band taller than the hero it replaced. Same approach as
   .auth-page (login.css) and .members-shell (members.css): a page-scoped
   padding class, not a new global header pattern. Dates are what people
   came for, so the announcements clear the fold. */
.cal-head { padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(1.1rem, 2vw, 1.6rem); }
.cal-head .hero__meta { margin-bottom: var(--s-4); }

/* ---------- The ledger's own ground ----------
   The head and the ledger were both s-paper, so they read as one
   continuous bone field with the schedule floating in it. Putting the
   ledger on s-deep gives it a surface of its own using the alternating
   band the whole site already runs on, rather than inventing a boxed
   container that DESIGN.md does not have. The band edge does the work
   a border would, so the gap above can close right up. */
.cal-sched { padding-block: clamp(1.6rem, 3vw, 2.6rem) clamp(3rem, 6vw, 5rem); }
/* The ledger's own top hairline would sit a pixel under the band edge
   and read as a double rule. */
.cal-sched .record { border-top: 0; }

/* ---------- The schedule ledger ---------- */
/* Dates never break across two lines; the narrow phone figure
   column in main.css is sized for numbers, not "Aug 24". */
.ev-list .record__fig { white-space: nowrap; }
@media (max-width: 700px) {
  .ev-list > li { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

/* The figure column carries date PLATES now (main.css .figplate);
   baseline alignment would hang the other columns off the plate's
   month line, so the ledger rows top-align instead. */
.ev-list > li { align-items: start; }

/* ---------- Flagship rows ----------
   The two DiscoverFest days: the rows the whole semester funnels
   toward get a paper plate ground so twelve rows stop reading
   identical. Painted in a pseudo at z -1 with a gutter bleed, so the
   row keeps the grid it shares with every other row: the same law
   as the temple frame, which always outranks this (calendar.js never
   sets both classes). The row's own bottom hairline yields to the
   plate's border to avoid a doubled rule. */
.ev-list > li.is-flag {
  position: relative;
  isolation: isolate;
  border-bottom-color: transparent;
}
.ev-list > li.is-flag::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--s-3) * -1);
  background: var(--paper);
  border: 1px solid var(--rule);
  z-index: -1;
}
@media (max-width: 700px) {
  .ev-list > li.is-flag::before { inset: 0 calc(var(--s-2) * -1); }
}

/* ---------- The next event: the docket row ----------
   The temple frame is RETIRED (owner's call, Aug 2026): once the
   ledger gained date plates and flagship grounds, an architectural
   frame over-decorated the row, and the cream inside it could not
   carry the emphasis. The replacement is COLOUR, by the site's own
   law: crimson is the surface that asks, and the next event is the
   ledger's ask. Ground and text mirror the members docket; the date
   plate goes gold with ink text (the --cta pairing) beside the gold
   countdown chip. Contrast, measured against the real tokens:
   on-crimson body 7.9:1, on-crimson-2 meta 5.6:1, ink on gold
   10.3:1 (AA floor 4.5). Options rejected on render: an ink ground
   read as the footer's material (ground, not ask) and a gold ground
   outshouted every gold button on the page.
   The alignment law survives the frame: the ground paints in a
   pseudo at z -1 with a gutter bleed (s-4, s-3 on phones), and
   nothing here may ever touch padding-inline, grid-template-columns
   or the figure width on .is-next, so the docket row's columns
   always line up with the rows below it. */
.record > li.is-next {
  position: relative;
  isolation: isolate;
  color: var(--on-crimson);
  border-bottom-color: transparent;
  padding-block: var(--s-4);
}
.record > li.is-next::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--s-4) * -1);
  z-index: -1;
  background: linear-gradient(168deg, var(--crimson), var(--crimson-deep));
  pointer-events: none;
}
@media (max-width: 700px) {
  .record > li.is-next::before {
    left: calc(var(--s-3) * -1);
    right: calc(var(--s-3) * -1);
  }
}
.record > li.is-next .d-4 { color: var(--on-crimson); }
.record > li.is-next .ev__where,
.record > li.is-next .ev__note,
.record > li.is-next .ev__cat { color: var(--on-crimson-2); }
.record > li.is-next .figplate { background: var(--gold); border-color: transparent; }
.record > li.is-next .figplate__day { color: var(--ink); }
.record > li.is-next .figplate__mon { color: var(--ink-2); }
.record > li.is-next .tlink { color: var(--on-crimson); }
.record > li.is-next .btn-line { color: var(--on-crimson); border-color: var(--on-crimson-2); }
.record > li.is-next .btn-line:hover,
.record > li.is-next .btn-line:focus-visible { color: var(--on-crimson); border-color: var(--on-crimson); }
/* The RSVP mini-form opens inside the row: wells stay one step
   lighter than the ground (the members law; the default paper-edge
   well already is), with the drench colours for label, note and
   error text. */
.record > li.is-next .field label,
.record > li.is-next .field .opt,
.record > li.is-next .form-note { color: var(--on-crimson-2); }
.record > li.is-next .form-error { color: oklch(84% 0.11 45); }
.record > li.is-next .ev-rsvp__done { color: var(--on-crimson); }

/* Gold FILL with ink text, per the --cta-bg / --cta-fg pairing in
   tokens.css: "gold always carries ink, never white". Gold set as
   text on bone paper is roughly 1.6:1 and unreadable, so the
   countdown is a chip. */
.ev__count {
  display: inline-block;
  /* 0.7rem, not 0.55: box-to-box the chip sat at 0px from the title
     (only the title's leading separated them), which read cramped
     inside the docket row's 24px frame. Measured on render. */
  margin: 0 0 0.7rem;
  padding: 0.25rem 0.55rem;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
/* main.css flattens .record__body p (colour AND margins), so the
   chip's own values must win at this specificity: ink text, and the
   0.7rem gap to the title measured for the docket row's frame. */
.record__body p.ev__count { color: var(--ink); margin-bottom: 0.7rem; }

/* Row entry. main.css flattens `.record__body p`; these two
   lines need their own rhythm inside the entry column. */
.record__body .ev__where {
  font-family: var(--font-display);
  font-stretch: 104%;
  font-size: var(--t-sm);
  font-weight: 550;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  margin: 0 0 0.5rem;
}
.record__body .ev__note {
  color: var(--ink-2);
  margin: 0;
  max-width: 58ch;
}
.record__body .d-4 { margin-bottom: 0.3rem; }

/* Row actions: a quiet text link plus the RSVP toggle. Gold is
   spent on the featured block, not eleven times down a list. */
.ev__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-3);
}
.ev__act .btn { min-height: 48px; }
.ev__act .tlink {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

/* Meta column: the category label, right-aligned on the
   ledger, folded onto one line on small screens. */
.ev__meta {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
}
.ev__cat { color: var(--ink-3); }
@media (max-width: 700px) {
  .ev__meta {
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
    gap: 0 var(--s-4);
  }
}

/* Empty state: every public event has passed. Still a ledger
   row, so it opts out of the three-column bed. */
.record > li.ev-empty {
  display: block;
  padding-block: var(--s-5);
}
.ev-empty p { margin: 0; color: var(--ink-2); }

/* ---------- Inline RSVP mini-form ---------- */
.ev-rsvp {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  max-width: 30rem;
}
.ev-rsvp[hidden] { display: none; }
.ev-rsvp .form-note { margin: 0.7rem 0 0; }
.ev-rsvp__done {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 600;
  font-size: var(--t-base);
  color: var(--ink);
}

/* ---------- Members-only note ----------
   A hairline and a sentence, not a boxed aside. */
.ev-members {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
}
.ev-members p {
  margin: 0;
  color: var(--ink-2);
  max-width: 52ch;
}