/* ============================================================
   THE ULTIMATE CALENDAR | calendar.css
   Uses the shared design tokens from styles.css.
   ============================================================ */

/* ── LIQUID GLASS TOKENS (scoped to the calendar page) ── */
.cal-page {
  min-height: 100vh;
  padding-top: var(--nav-h);
  /* SF Pro / system font stack */
  --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
  /* True-black ground, glass panels catch every accent */
  --page-bg: #000000;
  --label:   #F5F5F7;   /* primary label */
  --label-2: #9A9AA2;   /* secondary label */
  --label-3: #6E6E76;   /* tertiary label */
  --sep:     rgba(255,255,255,0.10);
  --fill:    rgba(255,255,255,0.07);   /* secondary system fill */
  --fill-2:  rgba(255,255,255,0.13);
  --ap-red: #B00020;
  /* Glass recipe: translucent panel + hairline + specular top edge + depth shadow */
  --glass-bg:      rgba(255,255,255,0.055);
  --glass-bg-2:    rgba(255,255,255,0.09);
  --glass-border:  rgba(255,255,255,0.16);
  --glass-shadow:  0 1px 1px rgba(255,255,255,0.06) inset,
                    0 18px 40px -18px rgba(0,0,0,0.85),
                    0 1px 0 rgba(255,255,255,0.03) inset;
  --glass-blur:    saturate(180%) blur(22px);
  /* legacy aliases kept for markup/JS that still reference --card */
  --card:    var(--glass-bg);
  --card-2:  var(--glass-bg-2);
  /* Solid (non-transparent) surfaces — used where content must read as
     an opaque panel rather than a see-through glass one, e.g. the
     Type/Impact filter dropdowns. */
  --solid-bg:   #1C1C1F;
  --solid-bg-2: #29292E;
  /* Apple UIKit sheet-spring easing: fast start, gentle settle, no overshoot */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  background: var(--page-bg);
  color: var(--label);
  font-family: var(--sf);
  letter-spacing: -0.01em;
}
/* True-black page background (this page only) */
body.cal-light, html:has(body.cal-light) { background: #000000; }
.cal-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

/* ── NAV (this page only: adds a Back-to-Portfolio link beside the links) ── */
.nav {
  justify-content: space-between;
  gap: 24px;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 0.2s;
}
.back-btn svg { flex-shrink: 0; transition: transform 0.2s var(--ease-out); }
.back-btn:hover { color: var(--text); }
.back-btn:hover svg { transform: translateX(-3px); }

/* Shared liquid-glass panel: frosted, hairline edge, soft specular highlight.
   The day-popup panel is intentionally excluded — it's a solid, opaque box. */
.cal-live, .cal-yearstats, .cal-day.has-events, .cal-card,
.cal-chip, .cal-search, .cal-nav, .cal-today-btn, .cal-agenda__clear {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ── HERO ── */
.cal-hero {
  padding: clamp(56px, 8vw, 104px) 0 clamp(10px, 1.5vw, 16px);
  text-align: center;
}
.cal-hero__eyebrow {
  font-family: var(--sf);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ap-red);
  margin-bottom: 12px;
}
.cal-hero__title {
  font-family: var(--sf);
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--label);
}
.cal-hero__title span { color: var(--ap-red); -webkit-text-stroke: 0; }
.cal-hero__sub {
  max-width: 640px;
  margin: 18px auto 0;
  font-family: var(--sf);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--label-2);
}
.cal-hero__sub strong { color: var(--label); font-weight: 500; }
/* Full copy on desktop; a shorter line on phones so the hero doesn't
   run four lines deep before anything else is visible. */
.cal-hero__sub--short { display: none; }
@media (max-width: 640px) {
  .cal-hero__sub--full { display: none; }
  .cal-hero__sub--short { display: block; }
}

/* ── LIVE BANNER + YEAR PROGRESS ── */
@property --cal-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
/* Grid, not flex: .cal-live__today and .cal-live__year sit in row 1
   and are centered against each other within that row's own height,
   independent of .cal-live__meta's caption in row 2 below. Flex's
   align-items:center previously centered the *whole* (track + meta)
   column as one block against the single-line "Today" text, which
   visually pinned the bar above the row's true middle once the
   caption's height was added in. */
.cal-live {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr);
  align-items: center;
  column-gap: 36px;
  row-gap: 10px;
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow), 0 0 28px rgba(176,0,32,0.14);
}
.cal-live__meta { grid-column: 2; }
/* Electric-red edge trail running around the banner */
.cal-live::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--cal-angle),
    transparent 0deg, transparent 200deg,
    rgba(176,0,32,0.35) 250deg,
    #B00020 300deg, #FF3B30 330deg, #FFFFFF 345deg, #B00020 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: cal-trail 3.2s linear infinite;
  pointer-events: none;
}
@keyframes cal-trail { to { --cal-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .cal-live::before { animation: none; background: linear-gradient(90deg, #B00020, #FF3B30); opacity: 0.5; }
}
.cal-live__today { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cal-live__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF453A;
  animation: cal-pulse 2s ease-in-out infinite;
}
@keyframes cal-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.cal-live__label {
  font-family: var(--sf); font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--label-3);
}
.cal-live__date {
  font-family: var(--sf); font-size: clamp(15px, 2vw, 17px);
  font-weight: 600; color: var(--label);
}
.cal-live__year { min-width: 0; }
.cal-live__track {
  position: relative; height: 6px; border-radius: 999px;
  background: var(--fill); overflow: visible; border: none;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
/* Larger invisible grab area via a non-flow pseudo-element, instead of
   the old padding + negative-margin trick — that hack pinned the
   visible bar to the top of its own box rather than centering it, so
   the bar sat visibly above the "Today" text once the meta caption
   below it grew the row taller than expected. This keeps the track's
   real box at a clean 6px, which centers correctly, while still
   giving pointer/touch a taller target to grab. */
.cal-live__track::after {
  content: '';
  position: absolute;
  inset: -10px 0;
}
.cal-live__fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 6px; border-radius: 999px;
  background: var(--ap-red);
  transition: width 0.9s var(--ease-out);
  pointer-events: none;
}
.cal-live__track.is-scrubbing .cal-live__fill { transition: none; }
.cal-live__marker {
  position: absolute; top: 50%; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ap-red);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 5px rgba(0,0,0,0.35);
  cursor: grab;
  transition: left 0.9s var(--ease-out), box-shadow 0.15s, transform 0.15s;
  pointer-events: none;
}
.cal-live__track:hover .cal-live__marker { box-shadow: 0 0 0 6px rgba(176,0,32,0.18), 0 1px 5px rgba(0,0,0,0.35); }
.cal-live__track.is-scrubbing { cursor: grabbing; }
.cal-live__track.is-scrubbing .cal-live__marker {
  transition: none;
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 0 8px rgba(176,0,32,0.22), 0 1px 6px rgba(0,0,0,0.4);
}
.cal-live__track:focus-visible .cal-live__marker { box-shadow: 0 0 0 6px rgba(176,0,32,0.28); }
/* Floating month bubble shown while scrubbing */
.cal-live__bubble {
  position: absolute;
  left: 0; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--ap-red);
  color: #fff;
  font-family: var(--sf); font-size: 12px; font-weight: 600;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.cal-live__track.is-scrubbing .cal-live__bubble { opacity: 1; }
.cal-live__meta {
  font-family: var(--sf); font-size: 13px; letter-spacing: 0; color: var(--label-3);
}

/* ── YEAR IN NUMBERS ──
   A single glass strip with four inline data rows, divided by hairlines
   — not four separate hero-metric cards. It lives after the agenda, as
   reference detail, so it never competes with the live calendar for the
   first viewport. */
.cal-yearstats-section { padding: 0 0 clamp(40px, 6vw, 64px); }
.cal-yearstats__head {
  font-family: var(--sf);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--label);
  margin-bottom: 16px;
}
.cal-yearstats__year { color: var(--ap-red); }
.cal-yearstats {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
/* One row per stat: dot, label + meaning, a right-aligned figure —
   a plain data list rather than prose, so it stays legible as a
   single column at any width instead of wrapping raggedly. */
.cal-yearstats__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  text-align: left;
}
.cal-yearstats__item + .cal-yearstats__item { border-top: 1px solid var(--sep); }
.cal-yearstats__icon {
  flex-shrink: 0;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
  font-size: 30px;
  line-height: 1;
}
.cal-yearstats__icon svg { width: 30px; height: 30px; }
.cal-yearstats__copy {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.cal-yearstats__label {
  font-family: var(--sf);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--label);
  line-height: 1.3;
}
.cal-yearstats__meaning {
  font-family: var(--sf);
  font-size: 12px;
  line-height: 1.3;
  color: var(--label-3);
  margin-top: 1px;
}
.cal-yearstats__num {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--sf);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c);
  text-align: right;
}
.cal-yearstats__unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--label-3);
}

/* ── CONTROLS ── */
.cal-controls {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  background: rgba(0,0,0,0.66);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: none;
  border-bottom: 1px solid var(--sep);
  padding: 14px 0;
  margin-top: 10px;
}
.cal-controls__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cal-controls__row + .cal-controls__row { margin-top: 10px; }

/* ── FILTER DROPDOWNS (Type / Impact) ──
   Replaces the old chip rows with two compact listbox-style dropdowns.
   Deliberately solid/opaque (not the page's glass-bg tokens) so the
   trigger and its open menu read as a clean panel rather than showing
   whatever's scrolled behind it. */
.cal-dropdown { position: relative; }
.cal-dropdown__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sf);
  padding: 8px 14px 8px 16px;
  color: var(--label);
  background: var(--solid-bg);
  border: 1px solid var(--glass-border);
  border-radius: 980px;
  transition: background 0.18s var(--ease-out), border-color 0.18s;
}
.cal-dropdown__btn:hover,
.cal-dropdown.is-open .cal-dropdown__btn { background: var(--solid-bg-2); }
.cal-dropdown__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--label-3);
}
.cal-dropdown__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--label);
  white-space: nowrap;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A non-"all" selection reads as an active filter, echoing the accent chip */
.cal-dropdown.has-filter .cal-dropdown__btn {
  background: color-mix(in srgb, var(--ap-red) 18%, var(--solid-bg));
  border-color: color-mix(in srgb, var(--ap-red) 55%, var(--glass-border));
}
.cal-dropdown.has-filter .cal-dropdown__value { color: var(--ap-red); }
.cal-dropdown__chev {
  flex-shrink: 0;
  color: var(--label-3);
  transition: transform 0.18s var(--ease-out), color 0.18s;
}
.cal-dropdown.is-open .cal-dropdown__chev { transform: rotate(180deg); color: var(--ap-red); }

.cal-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 224px;
  max-width: min(300px, calc(100vw - 32px));
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--solid-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow), 0 24px 60px rgba(0,0,0,0.55);
  opacity: 0;
  /* pointer-events (not visibility) gates interaction while closed — a
     visibility transition flips at a UA-timed step that can leave the
     menu still non-focusable for a frame or two right after opening,
     which broke keyboard focus landing in the list. Opacity alone never
     blocks focus, so this keeps the fade without that race. */
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top left;
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
#calImpDropdown .cal-dropdown__menu { left: auto; right: 0; transform-origin: top right; }
.cal-dropdown.is-open .cal-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.cal-dropdown__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--sf);
  font-size: 14px;
  font-weight: 500;
  color: var(--label-2);
  cursor: pointer;
  transition: background 0.14s;
  outline: none;
}
.cal-dropdown__opt:hover,
.cal-dropdown__opt:focus-visible { background: var(--fill); }
.cal-dropdown__opt.is-active { color: var(--label); background: var(--fill); }
.cal-dropdown__opt-text { flex: 1; min-width: 0; }
.cal-dropdown__dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--dot);
  box-shadow: 0 0 8px color-mix(in srgb, var(--dot) 70%, transparent);
}
.cal-dropdown__opt-icon { flex-shrink: 0; width: 18px; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; }
.cal-dropdown__opt-icon svg { width: 15px; height: 15px; }
.cal-dropdown__check { flex-shrink: 0; color: var(--ap-red); font-weight: 700; }

.cal-search {
  flex: 1 1 180px;
  min-width: 150px;
  font-family: var(--sf);
  font-size: 14px;
  padding: 8px 16px;
  color: var(--label);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 980px;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
}
.cal-search::placeholder { color: var(--label-3); }
.cal-search:focus { background: var(--glass-bg-2); border-color: color-mix(in srgb, var(--ap-red) 55%, var(--glass-border)); }

/* ── MONTH GRID (Apple / Outlook style) ── */
.cal-monthview {
  padding: 34px 0 6px;
  font-family: var(--sf);
}
.cal-monthbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cal-monthbar__title {
  font-family: var(--sf);
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--label);
  min-width: 200px;
}
.cal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--ap-red);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: background 0.18s var(--ease-out), border-color 0.18s;
}
.cal-nav:hover { background: var(--glass-bg-2); border-color: color-mix(in srgb, var(--ap-red) 45%, var(--glass-border)); }
/* ── TODAY / JUMP-TO-DATE PICKER ──
   The Today button opens a compact year+month+day picker, styled like
   the Type/Impact dropdowns (same solid, non-transparent panel) but
   right-anchored since it sits at the end of the month bar. */
.cal-datepicker { margin-left: auto; }
.cal-today-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sf);
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: 8px 16px 8px 18px; border-radius: 980px;
  color: var(--ap-red); background: var(--solid-bg); border: 1px solid var(--glass-border);
  transition: background 0.18s, border-color 0.18s;
}
.cal-today-btn:hover,
.cal-datepicker.is-open .cal-today-btn { background: var(--solid-bg-2); border-color: color-mix(in srgb, var(--ap-red) 45%, var(--glass-border)); }
.cal-today-btn .cal-dropdown__chev { color: var(--ap-red); }

.cal-datepicker__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 296px;
  padding: 16px;
  background: var(--solid-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow), 0 24px 60px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.cal-datepicker.is-open .cal-datepicker__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.cal-datepicker__yearRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
}
.cal-datepicker__year {
  font-family: var(--sf);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--label);
  min-width: 52px;
  text-align: center;
}
.cal-nav--sm { width: 28px; height: 28px; }
.cal-datepicker__months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.cal-datepicker__month {
  font-family: var(--sf);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 8px 0;
  border-radius: 8px;
  color: var(--label-2);
  background: var(--fill);
  border: none;
  transition: background 0.14s, color 0.14s;
}
.cal-datepicker__month:hover { background: var(--fill-2); }
.cal-datepicker__month.is-active { color: #fff; background: var(--ap-red); }
.cal-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.cal-datepicker__weekdays span {
  text-align: center;
  font-family: var(--sf);
  font-size: 10px;
  font-weight: 600;
  color: var(--label-3);
}
.cal-datepicker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-datepicker__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sf);
  font-size: 12px;
  font-weight: 500;
  color: var(--label);
  background: none;
  border: none;
  border-radius: 8px;
  transition: background 0.14s;
}
.cal-datepicker__day:hover { background: var(--fill); }
.cal-datepicker__day.is-out { color: var(--label-3); opacity: 0.5; }
.cal-datepicker__day.is-today { background: #FF453A; color: #fff; font-weight: 600; }
.cal-datepicker__day.is-selected { box-shadow: 0 0 0 2px var(--ap-red) inset; }
.cal-datepicker__jump {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 9px 0;
  border-radius: 980px;
  font-family: var(--sf);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--ap-red);
  background: var(--fill);
  border: none;
  transition: background 0.16s;
}
.cal-datepicker__jump:hover { background: var(--fill-2); }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.cal-weekdays span {
  text-align: center;
  font-family: var(--sf);
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--label-3);
  padding: 4px 0;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: clamp(74px, 8vw, 100px);   /* fixed row height → identical month size */
  gap: 6px;
  /* let vertical page-scroll pass through untouched; horizontal drags are
     read by the swipe-to-change-month gesture in calendar.js */
  touch-action: pan-y;
}
/* Month-change animation — plays on the incoming grid after a swipe,
   the prev/next buttons, or the arrow keys */
@keyframes cal-slide-right { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes cal-slide-left  { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.cal-days.cal-anim-right { animation: cal-slide-right 0.32s var(--ease-out); }
.cal-days.cal-anim-left  { animation: cal-slide-left 0.32s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .cal-days.cal-anim-right, .cal-days.cal-anim-left { animation: none; }
}
.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  height: 100%;               /* fill the fixed grid row so every month matches */
  padding: 7px 5px 6px;
  background: var(--glass-bg);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  color: var(--label);
  overflow: hidden;
  transition: background 0.16s var(--ease-out), border-color 0.16s, transform 0.16s;
}
.cal-day.has-events { cursor: pointer; }
/* Frosted glass tinted by impact colour (--dayc), lit from within */
.cal-day.has-events {
  background: color-mix(in srgb, var(--dayc) 20%, var(--glass-bg));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: color-mix(in srgb, var(--dayc) 45%, transparent);
  box-shadow: var(--glass-shadow),
              0 0 18px -4px color-mix(in srgb, var(--dayc) 55%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--dayc) 30%, transparent);
}
.cal-day.has-events:hover {
  background: color-mix(in srgb, var(--dayc) 32%, var(--glass-bg));
  border-color: color-mix(in srgb, var(--dayc) 65%, transparent);
  box-shadow: var(--glass-shadow),
              0 0 26px -2px color-mix(in srgb, var(--dayc) 75%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--dayc) 55%, transparent);
  transform: translateY(-2px);
}
/* Multi-day holidays: a glowing coloured top bar so runs read as one block */
.cal-day.is-span {
  box-shadow: inset 0 3px 0 var(--dayc),
              0 0 18px -4px color-mix(in srgb, var(--dayc) 55%, transparent);
}
.cal-day.is-span-start { border-top-left-radius: 12px; }
.cal-day.is-span-end   { border-top-right-radius: 12px; }

/* Event chips: readable alert + name inside the day box */
.cal-day { justify-content: flex-start; }
.cal-day__chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  margin-top: 6px;
}
.cal-day__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent),
              0 0 12px -4px color-mix(in srgb, var(--c) 70%, transparent);
  border: none;
  text-align: left;
  overflow: hidden;
}
.cal-day__chip--cont { opacity: 0.66; }
.cal-day__chip-emoji {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
}
.cal-day__chip-txt {
  flex: 1;
  min-width: 0;
  font-family: var(--sf);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-day__chip-flag {
  flex-shrink: 0;
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
  /* keep letter fallback (CN/UK) legible on non-Apple platforms */
  font-family: 'Apple Color Emoji', var(--sf);
  letter-spacing: 0;
}
.cal-day__more {
  font-family: var(--sf);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--label-3);
  padding-left: 4px;
}
.cal-day.is-out { opacity: 0.34; }
.cal-day.is-out .cal-day__num { color: var(--label-3); }
.cal-day__num {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 500;
  line-height: 1;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cal-day.is-today .cal-day__num {
  background: #FF453A;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 16px rgba(255,69,58,0.7);
}
/* Today and the currently-selected day get an obvious electric-glow
   ring around the whole cell, not just the small date badge, so
   "where am I" reads at a glance across the grid. */
.cal-day.is-today {
  border-color: #FF453A;
  box-shadow: 0 0 0 1.5px #FF453A,
              0 0 14px -1px rgba(255,69,58,0.85),
              0 0 34px -6px rgba(255,69,58,0.55);
}
.cal-day.is-selected {
  border-color: var(--ap-red);
  box-shadow: 0 0 0 1.5px var(--ap-red),
              0 0 14px -1px rgba(176,0,32,0.85),
              0 0 34px -6px rgba(176,0,32,0.55);
}
/* Selecting today itself: the deliberate click wins over the ambient
   "today" ring so the two states stay visually distinct. */
.cal-day.is-today.is-selected {
  border-color: var(--ap-red);
  box-shadow: 0 0 0 1.5px var(--ap-red),
              0 0 14px -1px rgba(176,0,32,0.85),
              0 0 34px -6px rgba(176,0,32,0.55);
}

/* ── AGENDA ── */
.cal-agenda__title {
  font-family: var(--sf);
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--label);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cal-agenda__clear {
  font-family: var(--sf);
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: 6px 14px; border-radius: 980px;
  color: var(--ap-red); background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: background 0.18s, border-color 0.18s;
}
.cal-agenda__clear:hover { background: var(--glass-bg-2); border-color: color-mix(in srgb, var(--ap-red) 45%, var(--glass-border)); }

/* ── GRID / MONTHS ──
   Same language as the Year in numbers list: one continuous glass
   panel, rows divided by hairlines, a colored icon badge on the left
   — not a grid of separate bordered/shadowed cards. */
.cal-grid { padding: 30px 0 40px; }
.cal-month__list {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

/* ── CARD (one row) ── */
.cal-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  transition: background 0.18s var(--ease-out);
  opacity: 0;
  animation: cal-card-in 0.5s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes cal-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cal-card + .cal-card { border-top: 1px solid var(--sep); }
.cal-card:hover { background: var(--glass-bg-2); }
/* Year-wide search results are jumpable: click a card to hop the month
   grid to that date and open its day popup. */
.cal-card--jump { cursor: pointer; }
.cal-card--jump:active { background: var(--glass-bg-2); }
.cal-card__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
  font-size: 16px;
  line-height: 1;
}
.cal-card__icon svg { width: 16px; height: 16px; }
.cal-card__body { flex: 1; min-width: 0; }
.cal-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.cal-card__name {
  font-family: var(--sf);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--label);
  line-height: 1.3;
  text-align: left;
}
.cal-card__status {
  flex-shrink: 0;
  font-family: var(--sf);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--label-2);
  background: var(--fill);
  border: none;
  border-radius: 980px;
  padding: 3px 10px;
}
.cal-card__status--today {
  color: #fff;
  background: #FF453A;
}
.cal-card__status--past { opacity: 0.5; }
.cal-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.cal-card__figure {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  padding-right: 16px;
  border-right: 1px solid var(--sep);
}
.cal-card__daynum {
  font-family: var(--sf);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--cat);
  font-variant-numeric: tabular-nums;
}
.cal-card__daynum sup {
  font-size: 11px;
  font-weight: 600;
  top: -0.5em;
}
.cal-card__dayunit {
  font-family: var(--sf);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--label-3);
}
.cal-tag {
  font-family: var(--sf);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 10px;
  border-radius: 980px;
  border: none;
  background: var(--fill);
  color: var(--label-2);
}
.cal-tag--cat { color: var(--cat); background: color-mix(in srgb, var(--cat) 16%, transparent); }
.cal-tag--imp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--imp);
  background: color-mix(in srgb, var(--imp) 16%, transparent);
}
.cal-tag__icon { display: flex; flex-shrink: 0; align-items: center; font-size: 11px; line-height: 1; }
.cal-tag__icon svg { width: 11px; height: 11px; }
.cal-card__note {
  font-family: var(--sf);
  font-size: 14px;
  line-height: 1.5;
  color: var(--label-2);
  text-align: left;
}
.cal-empty {
  font-family: var(--sf);
  font-size: 15px;
  color: var(--label-2);
  padding: 40px 0;
  text-align: center;
}

/* ── DAY POPUP (modal) ──
   Solid, high-contrast box — no glass/blur on the panel itself,
   so text and tags stay clearly readable over any calendar state. */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.78);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--spring), visibility 0.22s;
  /* The site sets `body { text-align: center }` globally; without this
     override every text element in here — title, tags, the note
     paragraph — inherits that and reads as oddly centered instead of
     the plain left-aligned detail view it's meant to be. */
  text-align: left;
}
.cal-modal.is-open { opacity: 1; visibility: visible; }
.cal-modal__panel {
  width: min(420px, 100%);
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  background: #1C1C1E;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.32s var(--spring);
  overflow: hidden;
}
.cal-modal.is-open .cal-modal__panel { transform: translateY(0) scale(1); }
.cal-modal__grabber {
  display: none;
  flex-shrink: 0;
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  margin: 10px auto 0;
}
.cal-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cal-modal__title {
  font-family: var(--sf);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--label-2);
}
.cal-modal__sub {
  font-family: var(--sf);
  font-size: 13px;
  font-weight: 500;
  color: var(--label-2);
  margin-top: 3px;
}
.cal-modal__done {
  flex-shrink: 0;
  font-family: var(--sf);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ap-red);
  background: none;
  border: none;
  padding: 4px 0 4px 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cal-modal__done:hover { opacity: 0.65; }
.cal-modal__body {
  padding: 8px 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* ── DAY DETAIL (modal only) ──
   A dedicated single-column layout, not the compact list-card reused:
   the modal header already states the date once, so each event here
   just needs an icon + name + status row, its tags, and its note —
   no per-event date sidebar competing for the same narrow width. */
.cal-detail {
  width: 100%;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-detail + .cal-detail { border-top: 1px solid rgba(255,255,255,0.08); }
.cal-detail__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cal-detail__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 24%, #2C2C2E);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
}
.cal-detail__name {
  flex: 1;
  min-width: 0;
  font-family: var(--sf);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #fff;
}
.cal-detail__status {
  flex-shrink: 0;
  font-family: var(--sf);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--label-2);
  background: #2C2C2E;
  border-radius: 980px;
  padding: 4px 10px;
  align-self: flex-start;
}
.cal-detail__status--today { color: #fff; background: var(--ap-red); }
.cal-detail__status--past { color: var(--label-3); }
.cal-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 48px;
}
.cal-detail__tags .cal-tag { background: #2C2C2E; }
.cal-detail__tags .cal-tag--cat { background: color-mix(in srgb, var(--cat) 22%, #2C2C2E); }
.cal-detail__tags .cal-tag--imp { background: color-mix(in srgb, var(--imp) 22%, #2C2C2E); }
.cal-detail__note {
  font-family: var(--sf);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--label-2);
  padding-left: 48px;
}
@media (prefers-reduced-motion: reduce) {
  .cal-modal, .cal-modal__panel { transition: none; }
}

/* ── FOOTER NOTE ── */
.cal-foot {
  border-top: 0.5px solid var(--sep);
  padding: 28px 0 60px;
}
.cal-foot p {
  font-family: var(--sf);
  font-size: 12px;
  line-height: 1.6;
  color: var(--label-3);
  max-width: 780px;
}

/* ── RESPONSIVE ── */
@media (max-width: 720px) {
  .cal-days, .cal-weekdays { gap: 4px; }
  .cal-day { border-radius: 10px; padding: 6px 2px 4px; gap: 4px; }
  .cal-day__num { width: 26px; height: 26px; font-size: 13px; }
  .cal-monthbar__title { min-width: 0; font-size: 20px; }
  .cal-today-btn { padding: 8px 14px; }
  /* Chips collapse to emoji-only on phones */
  .cal-day__chips { flex-direction: row; flex-wrap: wrap; gap: 2px; justify-content: center; margin-top: 4px; }
  .cal-day__chip { width: auto; padding: 0; border: none; background: none; }
  .cal-day__chip-emoji { font-size: 15px; }
  .cal-day__chip-txt, .cal-day__more, .cal-day__chip-flag { display: none; }
  .cal-day__chip--cont { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE-OPTIMIZED VIEW (phones)
   Denser hero, edge-to-edge month grid, swipeable filter
   chips, bigger touch targets, bottom-sheet day popup.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cal-container { padding: 0 16px; }

  /* ── HERO: tighter, no wasted air ── */
  .cal-hero { padding: clamp(28px, 8vw, 40px) 0 20px; text-align: center; }
  .cal-hero__title { font-size: clamp(32px, 11vw, 44px); }
  .cal-hero__eyebrow { margin-bottom: 8px; }
  .cal-hero__sub { margin: 12px 0 0; }
  .cal-live {
    grid-template-columns: 1fr;
    row-gap: 14px;
    margin-top: 22px;
    padding: 16px 18px;
  }
  .cal-live__today { justify-content: space-between; }
  .cal-live__year, .cal-live__meta { grid-column: 1; }
  .cal-yearstats__item { padding: 12px 14px; }

  /* ── CONTROLS: dropdown buttons + full-width search below ── */
  .cal-controls { margin-top: 8px; padding: 10px 0; }
  .cal-controls .cal-container { padding: 0; }
  .cal-controls__row { padding: 0 16px; align-items: center; justify-content: center; }
  .cal-dropdown__value { max-width: 30vw; }
  .cal-search { flex: 1 1 100%; margin-top: 8px; width: 100%; }

  /* ── MONTH GRID: edge-to-edge, roomier touch targets ── */
  .cal-monthview { padding: 24px 0 4px; }
  .cal-monthview .cal-container { padding: 0 10px; }
  .cal-monthbar { padding: 0 6px; margin-bottom: 12px; }
  .cal-monthbar__title { font-size: 19px; }
  .cal-nav { width: 34px; height: 34px; }
  .cal-today-btn { font-size: 13px; padding: 7px 14px; }
  .cal-weekdays span { font-size: 11px; }
  .cal-days { grid-auto-rows: clamp(52px, 15vw, 64px); gap: 3px; }
  .cal-day { border-radius: 9px; padding: 4px 1px 3px; }
  .cal-day__num { width: 24px; height: 24px; font-size: 12px; }
  .cal-day__chips { margin-top: 2px; gap: 1px; }
  .cal-day__chip-emoji { font-size: 13px; }

  /* Agenda cards: reclaim padding, keep tap-friendly row height */
  .cal-agenda__title { font-size: 18px; margin-bottom: 12px; }
  .cal-grid { padding: 22px 0 60px; }
  .cal-card { padding: 14px 14px; gap: 12px; }
  .cal-card__icon { width: 30px; height: 30px; font-size: 14px; }
  .cal-card__icon svg { width: 14px; height: 14px; }
  .cal-card__daynum { font-size: 22px; }
  .cal-card__figure { padding-right: 12px; }
  .cal-card__name { font-size: 15px; }
  .cal-card__head { flex-wrap: wrap; gap: 6px 10px; }

}
@media (prefers-reduced-motion: reduce) {
  .cal-card { transition: none; animation: none; opacity: 1; }
  .cal-card:hover { transform: none; }
}