/* ══════════════════════════════════════════════════════════════════════════
   /events/calendar — page kit  ·  scoped `.evp.evcal`

   Loaded by resources/views/livewire/public/events/calendar.blade.php, one
   class deeper than assets/css/events.css so every rule here out-cascades the
   shared kit without being able to leak onto the other nine `.evp` surfaces.

   It follows the seven rules the shared sheet's header sets out, because each
   of them is a bug that has already shipped on this module:
     1. every token is namespaced (`--cal-*` here, `--ev-*` upstream);
     2. every ink token has a dark twin — a missing twin IS the "text is
        hidden" report;
     3. hover lifts live inside @media (hover:hover), or :hover LATCHES after a
        tap and two tapped cells both look selected. :active covers touch;
     4. grids use minmax(min(N,100%),1fr) — a bare min is a hard floor and
        forces sideways scroll on a 360px phone;
     5. grid/flex children carry min-width:0 or long titles refuse to shrink;
     6. colour is never the only signal — every state carries an icon and a
        word as well as a hue (WCAG 1.4.1);
     7. targets are >= 24x24 (WCAG 2.5.8) and nothing sticky covers a focused
        element (2.4.11).

   BRANDING. The shared events kit ships a generic #2563eb. This page re-points
   the four `--ev-brand*` tokens at the AIToolsay ramp (#3680ED / #2060C0 /
   #60A4F5 and the ATD sidebar's blue tone inks) INSIDE `.evcal` only, so the
   shared components rendered here — badges, focus rings, the select — come out
   in the site's blue instead of a second, nearly-identical one.
   ══════════════════════════════════════════════════════════════════════════ */

.evp.evcal {
  /* ── Brand, re-pointed at AIToolsay ─────────────────────────────────── */
  --ev-brand:      #3680ED;
  --ev-brand-2:    #2060C0;
  --ev-brand-ink:  #1B5BB5;
  --ev-brand-soft: #EAF2FD;

  --cal-b1: #3680ED;   /* the blue */
  --cal-b2: #2060C0;   /* deep     */
  --cal-b3: #60A4F5;   /* light    */
  --cal-grad: linear-gradient(135deg, #2060C0 0%, #3680ED 52%, #60A4F5 100%);
  /* THE SAME RAMP CANNOT CARRY WHITE SMALL TEXT. #3680ED measures 3.84:1
     against white and #60A4F5 — the bright end — only 2.58:1, so the view
     switcher, the today chip and the up-next card all failed AA on their
     own brand fill. `--cal-grad` stays for display type and decoration;
     anything with a white label reads this deeper one, whose lightest
     point (#2060C0) is 6.01:1 and survives the white bloom laid over it. */
  --cal-grad-solid: linear-gradient(135deg, #123F80 0%, #1B5BB5 52%, #2060C0 100%);
  /* The up-next card is the one fill whose label does NOT flip with the
     theme — it is white in both — so it cannot use the ramp above, which
     goes light in dark mode to suit a near-black label. This one is deep
     in both themes: 6.54:1 at its lightest point, 5.03:1 once the white
     bloom is laid over it. */
  --cal-grad-card: linear-gradient(135deg, #0F3A78 0%, #17509F 52%, #1B5BB5 100%);
  --cal-rgb: 54, 128, 237;

  /* ── Geometry ───────────────────────────────────────────────────────── */
  --cal-r:    18px;
  --cal-r-sm: 12px;
  --cal-r-xs: 9px;
  --cal-cell: 138px;                 /* month cell floor on desktop */
  --cal-ease: cubic-bezier(.16, 1, .3, 1);

  /* The sticky offset. The site header is sticky and its height steps at
     three breakpoints and shaves 6px once scrolled, so the blade measures the
     live element and writes this back. The literal here is only the pre-JS
     fallback — never the source of truth. */
  --cal-stick: 62px;
  --cal-gap:   10px;

  --cal-sheen: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.5) 50%, transparent 82%);
}

body.theme-dark .evp.evcal {
  --ev-brand:      #60A4F5;
  --ev-brand-2:    #3680ED;
  --ev-brand-ink:  #8CBEFA;
  --ev-brand-soft: rgba(54,128,237,.18);

  --cal-b1: #60A4F5;
  --cal-b2: #3680ED;
  --cal-b3: #8CBEFA;
  --cal-grad: linear-gradient(135deg, #2A5FB8 0%, #3E7FD8 52%, #60A4F5 100%);
  /* Dark inverts the problem: the label is #0B1220, so the fill has to be
     LIGHT. #3E7FD8 is the darkest point at 4.66:1. */
  --cal-grad-solid: linear-gradient(135deg, #3E7FD8 0%, #60A4F5 52%, #8CBEFA 100%);
  --cal-rgb: 96, 164, 245;

  --cal-sheen: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.13) 50%, transparent 82%);
}

/* ══════════════════════════════════════════════════════════════════════════
   §TONE — the four event states.
   One class sets five variables and every component downstream reads them, so
   a chip, a dot, a rail bar and a badge for the same event cannot drift apart.
   `--t-rgb` exists so a shadow can be tinted without a sixth colour token.
   ══════════════════════════════════════════════════════════════════════════ */
.evp.evcal .t-live  { --t:#E11D48; --t-ink:#BE123C; --t-bg:#FFF1F2; --t-line:rgba(225,29,72,.28);  --t-rgb:225,29,72; }
.evp.evcal .t-free  { --t:#059669; --t-ink:#047857; --t-bg:#ECFDF5; --t-line:rgba(5,150,105,.26);  --t-rgb:5,150,105; }
.evp.evcal .t-brand { --t:#3680ED; --t-ink:#1B5BB5; --t-bg:#EAF2FD; --t-line:rgba(54,128,237,.26); --t-rgb:54,128,237; }
.evp.evcal .t-soon  { --t:#D97706; --t-ink:#A85B08; --t-bg:#FEF4E4; --t-line:rgba(217,119,6,.26);  --t-rgb:217,119,6; }

body.theme-dark .evp.evcal .t-live  { --t:#FB7185; --t-ink:#FDA4AF; --t-bg:rgba(225,29,72,.16);  --t-line:rgba(251,113,133,.34); --t-rgb:251,113,133; }
body.theme-dark .evp.evcal .t-free  { --t:#34D399; --t-ink:#6EE7B7; --t-bg:rgba(5,150,105,.16);  --t-line:rgba(52,211,153,.32);  --t-rgb:52,211,153; }
body.theme-dark .evp.evcal .t-brand { --t:#60A4F5; --t-ink:#8CBEFA; --t-bg:rgba(54,128,237,.18); --t-line:rgba(96,164,245,.34);  --t-rgb:96,164,245; }
body.theme-dark .evp.evcal .t-soon  { --t:#FBBF24; --t-ink:#FCD34D; --t-bg:rgba(217,119,6,.18);  --t-line:rgba(251,191,36,.32);  --t-rgb:251,191,36; }

/* ══════════════════════════════════════════════════════════════════════════
   §HERO — the aurora band.
   Two blurred radial blobs on their own layer rather than a background-image
   on the section: the section owns a background-COLOR that the dark twin
   swaps, and putting the blobs in the same shorthand would reset that colour
   the first time either is touched (the trap recorded on the card sheets).
   ══════════════════════════════════════════════════════════════════════════ */
.evp.evcal .evcal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 0 30px;
  background-color: var(--ev-bg-soft);
  border-bottom: 1px solid var(--ev-border);
}
.evp.evcal .evcal-aur {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 340px;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(42% 60% at 18% 42%, rgba(var(--cal-rgb), .26), transparent 68%),
    radial-gradient(38% 58% at 82% 30%, rgba(129, 140, 248, .22), transparent 66%);
  filter: blur(6px);
}
body.theme-dark .evp.evcal .evcal-aur {
  background-image:
    radial-gradient(42% 60% at 18% 42%, rgba(var(--cal-rgb), .22), transparent 68%),
    radial-gradient(38% 58% at 82% 30%, rgba(129, 140, 248, .18), transparent 66%);
}
/* A hairline grid, so the band reads as a calendar and not as a generic
   marketing hero. Masked to fade out before it reaches the copy. */
.evp.evcal .evcal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(to right, rgba(var(--cal-rgb), .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--cal-rgb), .10) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}

.evp.evcal .evcal-hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: end;
}
@media (min-width: 1024px) {
  .evp.evcal .evcal-hero-in { grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; }
}

/* The identity column. min-width:0 is rule 5 and not decoration: without it
   a long unbroken word in the H1 refuses to shrink below its intrinsic
   width and pushes the 360px-wide grid sideways. */
.evp.evcal .evcal-hero-main { min-width: 0; }

.evp.evcal .evcal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 9px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ev-brand-ink);
  background-color: var(--ev-brand-soft);
  border: 1px solid rgba(var(--cal-rgb), .26);
}
.evp.evcal .evcal-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background-color: var(--cal-b1);
  box-shadow: 0 0 0 0 rgba(var(--cal-rgb), .55);
  animation: evcal-ping 2.1s ease-out infinite;
}
@keyframes evcal-ping {
  0%   { box-shadow: 0 0 0 0 rgba(var(--cal-rgb), .55); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--cal-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--cal-rgb), 0); }
}

.evp.evcal .evcal-h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5.2vw, 50px);
  font-weight: 820;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--ev-ink);
}
/* The accent word. background-clip:text needs a real background-IMAGE, and a
   transparent fill needs a fallback colour underneath for the handful of
   engines that ignore it — hence the plain `color` first. */
.evp.evcal .evcal-h1 .g {
  color: var(--cal-b2);
  background-image: var(--cal-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-dark .evp.evcal .evcal-h1 .g { color: var(--cal-b3); }

.evp.evcal .evcal-lede {
  margin: 0 0 18px;
  max-width: 60ch;
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 1.65;
  color: var(--ev-ink-2);
}
.evp.evcal .evcal-tz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ev-ink-2);
  background-color: var(--ev-panel-2);
  border: 1px solid var(--ev-border);
}
.evp.evcal .evcal-tz i { font-size: 10.5px; color: var(--ev-brand-ink); }

/* ── §HERO-STATS ──────────────────────────────────────────────────────────
   Four figures, as glass tiles. auto-FIT with a 1fr cap is wrong here — with
   four items and a wide hero the tiles would each take 300px and read as
   buttons; a fixed four-track grid that folds to two on a phone keeps the row
   reading as one instrument. */
.evp.evcal .evcal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 620px;
}
@media (max-width: 560px) { .evp.evcal .evcal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.evp.evcal .evcal-stat {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 12px 13px;
  border-radius: var(--cal-r-sm);
  background-color: color-mix(in srgb, var(--ev-panel) 78%, transparent);
  border: 1px solid var(--ev-border);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: transform .3s var(--cal-ease), border-color .24s ease, box-shadow .28s ease;
}
/* ::before is the tone wash that appears on hover; ::after is the top hairline
   that is always on. Two pseudos, two jobs — neither reused for the other. */
.evp.evcal .evcal-stat::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image: radial-gradient(90% 120% at 0% 0%, rgba(var(--t-rgb, var(--cal-rgb)), .16), transparent 70%);
  transition: opacity .3s ease;
}
.evp.evcal .evcal-stat::after {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background-color: rgb(var(--t-rgb, var(--cal-rgb)));
  opacity: .55;
  transform: scaleX(.34);
  transform-origin: left center;
  transition: transform .34s var(--cal-ease), opacity .24s ease;
}
.evp.evcal .evcal-stat-n {
  display: block;
  font-size: 24px;
  font-weight: 830;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ev-ink);
}
.evp.evcal .evcal-stat-l {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ev-ink-3);
}
.evp.evcal .evcal-stat-l i { font-size: 10px; color: rgb(var(--t-rgb, var(--cal-rgb))); }

@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--t-rgb, var(--cal-rgb)), .42);
    box-shadow: 0 16px 30px -20px rgba(var(--t-rgb, var(--cal-rgb)), .8);
  }
  .evp.evcal .evcal-stat:hover::before { opacity: 1; }
  .evp.evcal .evcal-stat:hover::after  { transform: scaleX(1); opacity: 1; }
}

/* ── §HERO-NEXT — the "up next" card ──────────────────────────────────────
   The one element on the page that is not a grid cell, so it carries the
   gradient. The countdown inside is driven by the shared kit's ticker via
   data-ev-countdown — no second timer, and it is anchored to SERVER time. */
.evp.evcal .evcal-next {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  padding: 18px 19px;
  border-radius: var(--cal-r);
  color: #fff;
  background-color: #17509F;
  background-image: var(--cal-grad-card);
  box-shadow: 0 20px 44px -26px rgba(var(--cal-rgb), .95);
  transition: transform .32s var(--cal-ease), box-shadow .3s ease;
}
.evp.evcal .evcal-next::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  /* .12, not .26. The bloom lightens the fill under the eyebrow and the
     meta row, both of which are small white text — at .26 the corner measured
     4.05:1. At .12 it is 5.03:1. */
  background-image: radial-gradient(70% 110% at 88% 8%, rgba(255,255,255,.12), transparent 62%);
}
/* The sheen. Parked off the left edge and swept across on hover — the reason
   the card is overflow:hidden. */
.evp.evcal .evcal-next::after {
  content: "";
  position: absolute; inset: 0 auto 0 -60%;
  width: 55%;
  background-image: var(--cal-sheen);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}
.evp.evcal .evcal-next-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.evp.evcal .evcal-next-t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 9px 0 0;
  font-size: 17px;
  font-weight: 780;
  line-height: 1.32;
  letter-spacing: -.015em;
  color: #fff;
}
.evp.evcal .evcal-next-m {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.evp.evcal .evcal-next-m span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.evp.evcal .evcal-next-m i { font-size: 11px; opacity: .85; }

.evp.evcal .evcal-next-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.22);
}
.evp.evcal .evcal-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 20px;
  font-weight: 830;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.evp.evcal .evcal-count.is-live { color: #FFE4E6; }
.evp.evcal .evcal-next-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  color: var(--cal-b2);
  background-color: #fff;
  transition: gap .24s var(--cal-ease), box-shadow .24s ease;
}
body.theme-dark .evp.evcal .evcal-next-go { color: #12233F; }

@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-next:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -26px rgba(var(--cal-rgb), 1); }
  .evp.evcal .evcal-next:hover::after { opacity: 1; animation: evcal-sweep .85s var(--cal-ease); }
  .evp.evcal .evcal-next:hover .evcal-next-go { gap: 11px; box-shadow: 0 6px 18px -6px rgba(0,0,0,.4); }
}
.evp.evcal .evcal-next:active { transform: translateY(-1px); }
@keyframes evcal-sweep { from { transform: translateX(0) skewX(-16deg); } to { transform: translateX(340%) skewX(-16deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   §BAR — the sticky control bar.
   Sticky, not fixed: fixed would need the page to reserve its height and the
   bar would sit over the footer on a short month. `--cal-stick` is written by
   the blade from the live header, so it stays right when the header steps.
   ══════════════════════════════════════════════════════════════════════════ */
.evp.evcal .evcal-barwrap {
  position: sticky;
  top: calc(var(--cal-stick) + var(--cal-gap));
  z-index: 40;
  padding: 12px 0;
  margin-bottom: 6px;
}
.evp.evcal .evcal-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding: 10px 12px;
  border-radius: var(--cal-r);
  background-color: color-mix(in srgb, var(--ev-panel) 82%, transparent);
  border: 1px solid var(--ev-border);
  box-shadow: var(--ev-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
}
/* Below 1180px the three tracks cannot hold the segmented control and the
   filters on one line, so the bar folds to two rows with the period nav and
   the view switcher sharing the first. */
@media (max-width: 1180px) {
  .evp.evcal .evcal-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .evp.evcal .evcal-filters { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .evp.evcal .evcal-bar { grid-template-columns: minmax(0, 1fr); }
  .evp.evcal .evcal-seg, .evp.evcal .evcal-filters { grid-column: 1; }
}

/* ── Period navigation ─────────────────────────────────────────────────── */
.evp.evcal .evcal-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.evp.evcal .evcal-arrow,
.evp.evcal .evcal-today {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 730;
  cursor: pointer;
  color: var(--ev-ink-2);
  background-color: var(--ev-panel);
  border: 1px solid var(--ev-border);
  transition: color .2s ease, border-color .2s ease, transform .24s var(--cal-ease), box-shadow .24s ease;
}
.evp.evcal .evcal-arrow { width: 38px; }              /* >= 24x24, rule 7 */
.evp.evcal .evcal-today { padding: 0 15px; }
/* The fill grows from the centre on hover instead of the background snapping —
   ::before so the label (which is a real child) stays above it. */
.evp.evcal .evcal-arrow::before,
.evp.evcal .evcal-today::before {
  content: "";
  position: absolute; inset: 0;
  background-color: var(--ev-brand-soft);
  transform: scale(.4);
  opacity: 0;
  transition: transform .34s var(--cal-ease), opacity .24s ease;
}
.evp.evcal .evcal-arrow i,
.evp.evcal .evcal-today span { position: relative; z-index: 1; }
.evp.evcal .evcal-arrow i { transition: transform .26s var(--cal-ease); }

@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-arrow:hover,
  .evp.evcal .evcal-today:hover { color: var(--ev-brand-ink); border-color: rgba(var(--cal-rgb), .45); }
  .evp.evcal .evcal-arrow:hover::before,
  .evp.evcal .evcal-today:hover::before { transform: scale(1); opacity: 1; }
  .evp.evcal .evcal-arrow.is-prev:hover i { transform: translateX(-2px); }
  .evp.evcal .evcal-arrow.is-next:hover i { transform: translateX(2px); }
  .evp.evcal .evcal-today:hover { box-shadow: 0 8px 18px -12px rgba(var(--cal-rgb), .9); }
}
.evp.evcal .evcal-arrow:active,
.evp.evcal .evcal-today:active { transform: scale(.95); }

.evp.evcal .evcal-period {
  min-width: 0;
  margin: 0 0 0 8px;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ev-ink);
}

/* ── Segmented view switcher ───────────────────────────────────────────────
   The thumb is one absolutely positioned element moved by `--i` (the active
   index, written by the blade) — no JS, no per-button background, and the
   slide survives a Livewire re-render because it is pure CSS reading a server
   value. `--n` is the button count so the maths does not hard-code four. */
.evp.evcal .evcal-seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  padding: 4px;
  border-radius: 13px;
  background-color: var(--ev-panel-2);
  border: 1px solid var(--ev-border);
  justify-self: center;
}
@media (max-width: 720px) { .evp.evcal .evcal-seg { justify-self: stretch; } }

.evp.evcal .evcal-seg-thumb {
  position: absolute;
  z-index: 0;
  top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--n, 4));
  border-radius: 10px;
  background-color: #1B5BB5;
  background-image: var(--cal-grad-solid);
  box-shadow: 0 6px 16px -8px rgba(var(--cal-rgb), .95);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .38s var(--cal-ease);
  pointer-events: none;
}
.evp.evcal .evcal-segbtn {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 720;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ev-ink-3);
  transition: color .24s ease;
}
.evp.evcal .evcal-segbtn i { font-size: 12px; transition: transform .3s var(--cal-ease); }
.evp.evcal .evcal-segbtn.is-on { color: #fff; }
body.theme-dark .evp.evcal .evcal-segbtn.is-on { color: var(--dk-bg,#0E0E11); }
@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-segbtn:not(.is-on):hover { color: var(--ev-brand-ink); }
  .evp.evcal .evcal-segbtn:hover i { transform: translateY(-1px) scale(1.08); }
}
/* Under 520px the labels cannot all fit; the icons carry it and the label goes
   to the accessible name via aria-label on the button (set in the blade), so
   nothing is lost — rule 6 is still satisfied by the aria text + the thumb. */
@media (max-width: 520px) {
  .evp.evcal .evcal-segbtn { padding: 0 8px; gap: 0; }
  .evp.evcal .evcal-segbtn .lb { display: none; }
  .evp.evcal .evcal-segbtn i { font-size: 14px; }
}

/* ── Filters ───────────────────────────────────────────────────────────── */
.evp.evcal .evcal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-self: end;
  min-width: 0;
}
@media (max-width: 1180px) { .evp.evcal .evcal-filters { justify-self: start; } }

.evp.evcal .evcal-chipset { display: flex; align-items: center; gap: 5px; padding: 3px; border-radius: 11px; background-color: var(--ev-panel-2); border: 1px solid var(--ev-border); }
.evp.evcal .evcal-fchip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ev-ink-3);
  transition: color .2s ease, background-color .2s ease;
}
.evp.evcal .evcal-fchip i { font-size: 10.5px; }
.evp.evcal .evcal-fchip.is-on { color: var(--ev-brand-ink); background-color: var(--ev-brand-soft); }
@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-fchip:not(.is-on):hover { color: var(--ev-ink); background-color: color-mix(in srgb, var(--ev-ink) 7%, transparent); }
}
.evp.evcal .evcal-fchip:active { transform: scale(.96); }

.evp.evcal .evcal-select {
  height: 36px;
  min-width: 0;
  max-width: 190px;
  padding-block: 0; padding-inline: 12px 32px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ev-ink-2);
  background-color: var(--ev-panel);
  border: 1px solid var(--ev-border);
  appearance: none; -webkit-appearance: none;
  --selx-chev-size: 13px 13px;   /* a 36px chip; the 15px default would crowd it */
  background-image: var(--selx-chev);   /* §SELX — one glyph sitewide, dark twin included */
  background-repeat: no-repeat;
  background-position: var(--selx-chev-pos, right 10px center);
  background-size: var(--selx-chev-size, 13px 13px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.evp.evcal .evcal-select:focus { border-color: var(--ev-brand); box-shadow: var(--ev-ring); outline: 0; }
@media (hover: hover) and (pointer: fine) { .evp.evcal .evcal-select:hover { border-color: rgba(var(--cal-rgb), .45); } }

.evp.evcal .evcal-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--ev-border);
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ev-ink-3);
  transition: color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-reset:hover { color: var(--ev-live-ink); border-color: color-mix(in srgb, var(--ev-live) 45%, transparent); }
}

/* ── Legend ─────────────────────────────────────────────────────────────── */
.evp.evcal .evcal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 2px 2px 14px;
  font-size: 12px;
  font-weight: 650;
  color: var(--ev-ink-3);
}
.evp.evcal .evcal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.evp.evcal .evcal-legend .k { width: 9px; height: 9px; border-radius: 3px; background-color: var(--t, var(--cal-b1)); }

/* ══════════════════════════════════════════════════════════════════════════
   §MONTH — the grid.
   One border-collapsed plate rather than 42 floating cards: a month is a
   TABLE of time and gaps between the cells break the week lines that carry
   that meaning.
   ══════════════════════════════════════════════════════════════════════════ */
.evp.evcal .evcal-grid {
  border-radius: var(--cal-r);
  overflow: hidden;
  background-color: var(--ev-panel);
  border: 1px solid var(--ev-border);
  box-shadow: var(--ev-shadow);
}
.evp.evcal .evcal-dows,
.evp.evcal .evcal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.evp.evcal .evcal-dows {
  background-color: var(--ev-panel-2);
  border-bottom: 1px solid var(--ev-border);
}
.evp.evcal .evcal-dow {
  padding: 11px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ev-ink-3);
}
.evp.evcal .evcal-dow.is-we { color: var(--ev-brand-ink); }

.evp.evcal .evcal-week { border-bottom: 1px solid var(--ev-border); }
.evp.evcal .evcal-week:last-child { border-bottom: 0; }

.evp.evcal .evcal-cell {
  position: relative;
  isolation: isolate;
  min-width: 0;                                  /* rule 5 */
  min-height: var(--cal-cell);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 8px 10px;
  border-right: 1px solid var(--ev-border);
  transition: background-color .24s ease;
}
.evp.evcal .evcal-cell:last-child { border-right: 0; }
.evp.evcal .evcal-cell.is-we { background-color: color-mix(in srgb, var(--ev-bg-soft) 62%, transparent); }
/* Adjacent-month days stay READABLE, not ghosted. `opacity:.6` on the cell —
   what this used to do — takes the event titles inside it under 3:1 as well,
   which is the "text is hidden" report in its literal form. Only the day
   number is muted; the events keep full contrast because they are still real
   events someone may want. */
.evp.evcal .evcal-cell.is-other { background-color: var(--ev-bg-soft); }
.evp.evcal .evcal-cell.is-other .evcal-day { color: var(--ev-ink-muted); }

/* ::before is the hover wash, ::after the inset ring. The ring is also what
   marks today, so it is declared once and switched on by two different
   selectors rather than drawn twice. */
.evp.evcal .evcal-cell::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  opacity: 0;
  background-image: radial-gradient(80% 100% at 50% 0%, rgba(var(--cal-rgb), .12), transparent 72%);
  transition: opacity .28s ease;
}
.evp.evcal .evcal-cell::after {
  content: "";
  position: absolute; inset: 3px; z-index: -1;
  border-radius: var(--cal-r-sm);
  border: 1.5px solid transparent;
  transition: border-color .26s ease;
}
.evp.evcal .evcal-cell.is-today::after { border-color: rgba(var(--cal-rgb), .55); }
.evp.evcal .evcal-cell.is-today { background-color: var(--ev-brand-soft); }
@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-cell:hover::before { opacity: 1; }
  .evp.evcal .evcal-cell:hover::after { border-color: rgba(var(--cal-rgb), .3); }
}

.evp.evcal .evcal-dayrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.evp.evcal .evcal-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  color: var(--ev-ink-2);
  transition: background-color .22s ease, color .22s ease;
}
.evp.evcal .evcal-cell.is-today .evcal-day {
  color: #fff;
  background-color: #1B5BB5;
  background-image: var(--cal-grad-solid);
  box-shadow: 0 4px 10px -4px rgba(var(--cal-rgb), .95);
}
body.theme-dark .evp.evcal .evcal-cell.is-today .evcal-day { color: var(--dk-bg,#0E0E11); }
.evp.evcal .evcal-count-pill {
  font-size: 10.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--ev-ink-3);
  background-color: color-mix(in srgb, var(--ev-ink) 8%, transparent);
}

/* ── The event chip ───────────────────────────────────────────────────────
   TWO LINES, clamped — not `white-space:nowrap` + ellipsis, which is what the
   old grid did and why every title read "Computer Vision …". A clamp shows
   roughly forty characters instead of eighteen and still cannot overflow. */
.evp.evcal .evcal-chip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 3px 7px;
  padding: 5px 8px 5px 10px;
  border-radius: var(--cal-r-xs);
  background-color: var(--t-bg);
  border: 1px solid var(--t-line);
  transition: transform .26s var(--cal-ease), border-color .22s ease, box-shadow .24s ease;
}
/* The tone bar. Grows from 3px to 4px and full height on hover, so the row
   reads as "picked up" without the layout moving. */
.evp.evcal .evcal-chip::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px;
  background-color: var(--t);
  transition: width .26s var(--cal-ease);
}
.evp.evcal .evcal-chip::after {
  content: "";
  position: absolute; inset: 0 auto 0 -60%; z-index: -1;
  width: 50%;
  background-image: var(--cal-sheen);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}
.evp.evcal .evcal-chip-t {
  grid-column: 1;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--t-ink);
}
.evp.evcal .evcal-chip-n {
  grid-column: 2;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 640;
  line-height: 1.35;
  color: var(--ev-ink);
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-chip:hover {
    transform: translateX(2px);
    border-color: rgba(var(--t-rgb), .55);
    box-shadow: 0 10px 20px -14px rgba(var(--t-rgb), .95);
  }
  .evp.evcal .evcal-chip:hover::before { width: 4px; }
  .evp.evcal .evcal-chip:hover::after { opacity: 1; animation: evcal-sweep .8s var(--cal-ease); }
  .evp.evcal .evcal-chip:hover .evcal-chip-n { color: var(--t-ink); }
}
.evp.evcal .evcal-chip:active { transform: translateX(1px) scale(.99); }

.evp.evcal .evcal-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-top: 1px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
  color: var(--ev-brand-ink);
  background-color: var(--ev-brand-soft);
  border: 1px solid rgba(var(--cal-rgb), .22);
  transition: gap .22s var(--cal-ease), background-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-more:hover { gap: 8px; background-color: rgba(var(--cal-rgb), .2); }
}

/* The whole-cell tap target. Desktop keeps the individual chips as the
   links; below 861px the chips are display:none and this overlay is what a
   finger hits, jumping to that day in the list underneath. An overlay rather
   than wrapping the cell in an <a>, because the chips are anchors and anchors
   cannot nest. */
.evp.evcal .evcal-jump { display: none; }

/* Dots — the mobile month map only. Hidden above the fold-over breakpoint so
   the desktop grid never pays for them. */
.evp.evcal .evcal-dots { display: none; }

/* ── Month, tablet ────────────────────────────────────────────────────────
   Between 861 and 1100px the cell is too narrow for a two-line title beside a
   time, so the time moves above the name and the cell floor drops. */
@media (max-width: 1100px) and (min-width: 861px) {
  .evp.evcal { --cal-cell: 124px; }
  .evp.evcal .evcal-chip { grid-template-columns: minmax(0, 1fr); padding-inline: 9px 7px; }
  .evp.evcal .evcal-chip-t { grid-column: 1; }
  .evp.evcal .evcal-chip-n { grid-column: 1; -webkit-line-clamp: 2; }
}

/* ── Month, phone and small tablet ────────────────────────────────────────
   THE MONTH MAP. A 360px screen gives each column 46px — there is no title
   that fits, so trying is what produced "Comput…" in the old grid. The grid
   becomes an orientation device (number + up to three tone dots, tappable),
   and every event is rendered in full underneath in `.evcal-mlist`. Nothing
   is truncated and nothing is hidden; the two blocks are the same data at two
   densities. */
@media (max-width: 860px) {
  .evp.evcal { --cal-cell: 62px; }
  .evp.evcal .evcal-cell { gap: 3px; padding: 6px 4px; align-items: center; }
  .evp.evcal .evcal-dayrow { justify-content: center; }
  .evp.evcal .evcal-count-pill,
  .evp.evcal .evcal-chip,
  .evp.evcal .evcal-more { display: none; }
  .evp.evcal .evcal-dots { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 7px; }
  .evp.evcal .evcal-dot { width: 5px; height: 5px; border-radius: 50%; background-color: var(--t); }
  .evp.evcal .evcal-dot.is-plus { width: auto; height: auto; border-radius: 0; background: none; font-size: 9px; font-weight: 800; color: var(--ev-ink-3); }
  .evp.evcal .evcal-jump {
    display: block;
    position: absolute; inset: 0; z-index: 3;
    border-radius: var(--cal-r-sm);
    font-size: 0;
  }
  .evp.evcal .evcal-day { min-width: 24px; height: 24px; font-size: 12.5px; }
  .evp.evcal .evcal-dow { padding: 9px 2px; font-size: 9.5px; letter-spacing: .04em; }
  .evp.evcal .evcal-cell:active { background-color: var(--ev-brand-soft); }
}
@media (min-width: 861px) { .evp.evcal .evcal-mlist { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   §WEEK — seven day cards.
   Equal columns on desktop; a snap rail on tablet, because seven 1fr columns
   below ~1000px give each 130px and the cards start clipping; a plain stack on
   a phone, where a horizontal rail hides five of the seven days.
   ══════════════════════════════════════════════════════════════════════════ */
.evp.evcal .evcal-week7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}
.evp.evcal .evcal-daycard {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--cal-r-sm);
  overflow: hidden;
  background-color: var(--ev-panel);
  border: 1px solid var(--ev-border);
  transition: transform .3s var(--cal-ease), border-color .24s ease, box-shadow .28s ease;
}
.evp.evcal .evcal-daycard::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 3px;
  background-image: var(--cal-grad);
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: left center;
  transition: opacity .24s ease, transform .34s var(--cal-ease);
}
.evp.evcal .evcal-daycard.is-today { border-color: rgba(var(--cal-rgb), .5); }
.evp.evcal .evcal-daycard.is-today::before { opacity: 1; transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-daycard:hover { transform: translateY(-3px); border-color: rgba(var(--cal-rgb), .42); box-shadow: var(--ev-shadow-lg); }
  .evp.evcal .evcal-daycard:hover::before { opacity: 1; transform: scaleX(1); }
}
.evp.evcal .evcal-dhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background-color: var(--ev-panel-2);
  border-bottom: 1px solid var(--ev-border);
}
.evp.evcal .evcal-daycard.is-today .evcal-dhead { background-color: var(--ev-brand-soft); }
.evp.evcal .evcal-dhead-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evp.evcal .evcal-dhead-dow { font-size: 10.5px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; color: var(--ev-ink-3); }
.evp.evcal .evcal-dhead-num { font-size: 19px; font-weight: 820; line-height: 1.05; letter-spacing: -.02em; color: var(--ev-ink); }
.evp.evcal .evcal-daycard.is-today .evcal-dhead-num { color: var(--ev-brand-ink); }
.evp.evcal .evcal-dhead-n {
  font-size: 10.5px; font-weight: 780; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: 999px;
  color: var(--ev-brand-ink); background-color: var(--ev-brand-soft);
}
.evp.evcal .evcal-dbody { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-height: 132px; }
.evp.evcal .evcal-dnone {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1 1 auto; min-height: 84px;
  border-radius: var(--cal-r-xs);
  border: 1px dashed var(--ev-border-strong);
  font-size: 11.5px; font-weight: 650; color: var(--ev-ink-muted);
}

@media (max-width: 1000px) {
  .evp.evcal .evcal-week7 {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .evp.evcal .evcal-daycard { flex: 0 0 clamp(210px, 62vw, 260px); scroll-snap-align: start; }
}
@media (max-width: 620px) {
  .evp.evcal .evcal-week7 { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .evp.evcal .evcal-daycard { flex: none; }
  .evp.evcal .evcal-dbody { min-height: 0; }
  .evp.evcal .evcal-dnone { min-height: 54px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §AGENDA — date medallion, rail, rich rows.
   ══════════════════════════════════════════════════════════════════════════ */
.evp.evcal .evcal-ag { display: flex; flex-direction: column; gap: 26px; }
.evp.evcal .evcal-agday {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.evp.evcal .evcal-med {
  position: sticky;
  top: calc(var(--cal-stick) + var(--cal-gap) + 86px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 11px 6px 12px;
  border-radius: var(--cal-r-sm);
  background-color: var(--ev-panel);
  border: 1px solid var(--ev-border);
  box-shadow: var(--ev-shadow);
}
.evp.evcal .evcal-med.is-today { border-color: rgba(var(--cal-rgb), .5); background-color: var(--ev-brand-soft); }
.evp.evcal .evcal-med-dow { font-size: 10.5px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; color: var(--ev-ink-3); }
.evp.evcal .evcal-med-num { font-size: 26px; font-weight: 830; line-height: 1.05; letter-spacing: -.03em; color: var(--ev-ink); }
.evp.evcal .evcal-med.is-today .evcal-med-num { color: var(--ev-brand-ink); }
.evp.evcal .evcal-med-mon { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ev-ink-3); }

.evp.evcal .evcal-aglist { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.evp.evcal .evcal-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 18px;
  border-radius: var(--cal-r-sm);
  background-color: var(--ev-panel);
  border: 1px solid var(--ev-border);
  transition: transform .3s var(--cal-ease), border-color .24s ease, box-shadow .28s ease;
}
.evp.evcal .evcal-row::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px;
  background-color: var(--t);
  transform: scaleY(.42);
  transition: transform .32s var(--cal-ease), width .26s var(--cal-ease);
}
.evp.evcal .evcal-row::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  opacity: 0;
  background-image: linear-gradient(100deg, rgba(var(--t-rgb), .14), transparent 58%);
  transition: opacity .3s ease;
}
.evp.evcal .evcal-rtime {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-variant-numeric: tabular-nums;
}
.evp.evcal .evcal-rtime b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ev-ink); }
.evp.evcal .evcal-rtime small { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ev-ink-muted); }
.evp.evcal .evcal-rbody { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.evp.evcal .evcal-rtitle {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15.5px; font-weight: 740; line-height: 1.35; letter-spacing: -.012em;
  color: var(--ev-ink);
  transition: color .22s ease;
}
.evp.evcal .evcal-rmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--ev-ink-3);
}
.evp.evcal .evcal-rmeta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.evp.evcal .evcal-rmeta i { font-size: 10.5px; opacity: .85; }
.evp.evcal .evcal-rside { display: flex; align-items: center; gap: 10px; flex: none; }
.evp.evcal .evcal-rgo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--ev-ink-3);
  background-color: var(--ev-panel-2);
  border: 1px solid var(--ev-border);
  transition: transform .28s var(--cal-ease), color .22s ease, background-color .22s ease, border-color .22s ease;
}
.evp.evcal .evcal-rgo i { font-size: 11px; }

@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-row:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--t-rgb), .48);
    box-shadow: 0 18px 34px -22px rgba(var(--t-rgb), .9);
  }
  .evp.evcal .evcal-row:hover::before { transform: scaleY(1); width: 4px; }
  .evp.evcal .evcal-row:hover::after { opacity: 1; }
  .evp.evcal .evcal-row:hover .evcal-rtitle { color: var(--t-ink); }
  .evp.evcal .evcal-row:hover .evcal-rgo {
    transform: translateX(3px);
    color: #fff; background-color: var(--t); border-color: var(--t);
  }
}
.evp.evcal .evcal-row:active { transform: translateY(-1px); }

@media (max-width: 720px) {
  .evp.evcal .evcal-agday { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .evp.evcal .evcal-med {
    position: static;
    flex-direction: row; align-items: baseline; gap: 8px;
    padding: 8px 13px; align-self: start;
  }
  .evp.evcal .evcal-med-num { font-size: 18px; }
  .evp.evcal .evcal-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 13px 13px 13px 16px; }
  .evp.evcal .evcal-rtime { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 7px; }
  .evp.evcal .evcal-rtime b { font-size: 13.5px; }
  .evp.evcal .evcal-rtitle { font-size: 14.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §TIMELINE — the same events on a spine.
   Genuinely different from Agenda, which it used to duplicate class-for-class:
   one continuous rail, a node per event, the day as a chip ON the rail. Use it
   to read a fortnight as a sequence; use Agenda to read it as a list.
   ══════════════════════════════════════════════════════════════════════════ */
.evp.evcal .evcal-tl { position: relative; padding-inline-start: 30px; }
.evp.evcal .evcal-tl::before {
  content: "";
  position: absolute; inset-block: 6px 6px; inset-inline-start: 8px;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(to bottom,
    rgba(var(--cal-rgb), 0) 0%, rgba(var(--cal-rgb), .38) 8%,
    rgba(var(--cal-rgb), .38) 92%, rgba(var(--cal-rgb), 0) 100%);
}
.evp.evcal .evcal-tlday { position: relative; margin-bottom: 8px; }
.evp.evcal .evcal-tlchip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 20px 0 12px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px; font-weight: 780; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ev-brand-ink);
  background-color: var(--ev-brand-soft);
  border: 1px solid rgba(var(--cal-rgb), .26);
}
.evp.evcal .evcal-tlday:first-child .evcal-tlchip { margin-top: 0; }
.evp.evcal .evcal-tlchip.is-today { color: #fff; background-color: #1B5BB5; background-image: var(--cal-grad-solid); border-color: transparent; }
body.theme-dark .evp.evcal .evcal-tlchip.is-today { color: var(--dk-bg,#0E0E11); }

.evp.evcal .evcal-tlitem { position: relative; margin-bottom: 10px; }
/* The node. Positioned against the item so it tracks the row's height, and
   ring-shaped so the spine reads through it. */
.evp.evcal .evcal-tlitem::before {
  content: "";
  position: absolute; inset-inline-start: -26px; top: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  background-color: var(--ev-panel);
  border: 2.5px solid var(--t);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 18%, transparent);
  transition: transform .3s var(--cal-ease), box-shadow .26s ease;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-tlitem:hover::before { transform: scale(1.28); box-shadow: 0 0 0 5px color-mix(in srgb, var(--t) 24%, transparent); }
}
@media (max-width: 720px) {
  .evp.evcal .evcal-tl { padding-inline-start: 22px; }
  .evp.evcal .evcal-tl::before { inset-inline-start: 5px; }
  .evp.evcal .evcal-tlitem::before { inset-inline-start: -21px; top: 19px; width: 10px; height: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   §BADGE — state pills used by every view.
   Icon + word + hue, never hue alone (rule 6).
   ══════════════════════════════════════════════════════════════════════════ */
.evp.evcal .evcal-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--t-ink);
  background-color: var(--t-bg);
  border: 1px solid var(--t-line);
}
.evp.evcal .evcal-pill i { font-size: 9.5px; }
.evp.evcal .evcal-pill .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background-color: var(--t);
  animation: evcal-ping2 1.7s ease-out infinite;
}
@keyframes evcal-ping2 {
  0%   { box-shadow: 0 0 0 0 rgba(var(--t-rgb), .6); }
  70%  { box-shadow: 0 0 0 6px rgba(var(--t-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--t-rgb), 0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   §EMPTY
   ══════════════════════════════════════════════════════════════════════════ */
.evp.evcal .evcal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 54px 24px 58px;
  border-radius: var(--cal-r);
  background-color: var(--ev-panel);
  border: 1px dashed var(--ev-border-strong);
}
.evp.evcal .evcal-empty-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: 16px;
  border-radius: 20px;
  font-size: 24px;
  color: var(--ev-brand-ink);
  background-color: var(--ev-brand-soft);
  border: 1px solid rgba(var(--cal-rgb), .22);
}
.evp.evcal .evcal-empty h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ev-ink); }
.evp.evcal .evcal-empty p { margin: 0 0 18px; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--ev-ink-3); }
.evp.evcal .evcal-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }

.evp.evcal .evcal-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 740;
  cursor: pointer;
  transition: transform .26s var(--cal-ease), box-shadow .26s ease, border-color .22s ease, color .22s ease;
}
.evp.evcal .evcal-btn i { transition: transform .26s var(--cal-ease); }
.evp.evcal .evcal-btn-solid {
  color: #fff;
  background-color: #1B5BB5;
  background-image: var(--cal-grad-solid);
  box-shadow: 0 12px 26px -14px rgba(var(--cal-rgb), .95);
}
body.theme-dark .evp.evcal .evcal-btn-solid { color: var(--dk-bg,#0E0E11); }
.evp.evcal .evcal-btn-ghost { color: var(--ev-ink-2); background-color: var(--ev-panel); border-color: var(--ev-border); }
.evp.evcal .evcal-btn::after {
  content: "";
  position: absolute; inset: 0 auto 0 -60%;
  width: 55%;
  background-image: var(--cal-sheen);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .evp.evcal .evcal-btn:hover { transform: translateY(-2px); }
  .evp.evcal .evcal-btn:hover i { transform: translateX(3px); }
  .evp.evcal .evcal-btn-solid:hover { box-shadow: 0 18px 34px -14px rgba(var(--cal-rgb), 1); }
  .evp.evcal .evcal-btn-ghost:hover { color: var(--ev-brand-ink); border-color: rgba(var(--cal-rgb), .45); }
  .evp.evcal .evcal-btn:hover::after { opacity: 1; animation: evcal-sweep .8s var(--cal-ease); }
}
.evp.evcal .evcal-btn:active { transform: translateY(0) scale(.98); }

/* ── The mobile month list ────────────────────────────────────────────────
   Its day headings are anchor targets for the month map above, so they need
   room under the sticky bar when jumped to (WCAG 2.4.11). */
.evp.evcal .evcal-mlist { margin-top: 22px; display: flex; flex-direction: column; gap: 20px; }
.evp.evcal .evcal-mlist-h {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 10px;
  font-size: 14px; font-weight: 800; letter-spacing: -.01em;
  color: var(--ev-ink);
  scroll-margin-top: calc(var(--cal-stick) + 84px);
}
.evp.evcal .evcal-mlist-h small { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ev-ink-3); }
.evp.evcal .evcal-mlist-h.is-today { color: var(--ev-brand-ink); }

.evp.evcal .evcal-body { padding-bottom: 46px; }
.evp.evcal .evcal-foot {
  margin-top: 22px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ev-ink-3);
}
.evp.evcal .evcal-foot a { color: var(--ev-brand-ink); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { }

/* ══════════════════════════════════════════════════════════════════════════
   §MOTION — one place, so a preference cannot be honoured in nine and missed
   in the tenth.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .evp.evcal *,
  .evp.evcal *::before,
  .evp.evcal *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
  .evp.evcal .evcal-next:hover,
  .evp.evcal .evcal-row:hover,
  .evp.evcal .evcal-daycard:hover,
  .evp.evcal .evcal-stat:hover,
  .evp.evcal .evcal-btn:hover { transform: none; }
}

/* Forced-colours: the tone system is all custom properties, which High
   Contrast Mode discards. Give every surface a system border so the grid does
   not collapse into one undifferentiated block. */
@media (forced-colors: active) {
  .evp.evcal .evcal-chip,
  .evp.evcal .evcal-row,
  .evp.evcal .evcal-daycard,
  .evp.evcal .evcal-stat,
  .evp.evcal .evcal-pill { border: 1px solid CanvasText; }
  .evp.evcal .evcal-seg-thumb { background: Highlight; }
  .evp.evcal .evcal-segbtn.is-on { color: HighlightText; }
}