/* The events page's own styles, the date tiles and the globe, loaded
   only by events.html after theme.css. Cut from theme.css; no other
   page uses any of this. */

/* ==========================================================================
   Events
   ========================================================================== */

.cm-date-tile { width: 60px; flex: none; text-align: center; border-radius: var(--cm-radius-control); padding: 12px 0; }
.cm-date-tile .dd { font-family: var(--cm-font-head); font-size: 20px; font-weight: 600; line-height: 1; }
.cm-date-tile .mo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   The events globe

   Three geometries over one set of buttons. The canvas paints the
   geography; .cm-globe-list is the operable map, the keyboard path and the
   fallback when there is no canvas at all, which is why the canvas carries
   no invisible overlay and nothing in the DOM is transformed per frame.
   Every colour comes from a --cm-map-* or --cm-pin-* token.
   -------------------------------------------------------------------------- */

.cm-globe { position: relative; margin-bottom: 12px; }
.cm-globe-cv {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cm-radius-card);
  /* Across turns the globe, down scrolls the page, and pinch still
     zooms the page. touch-action: none here took the page's own vertical
     pan away on every touch screen wider than 420px, which trapped a
     member on the page at the map. globe.js locks the gesture to one
     axis at eight pixels so the two never fight. */
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

/* The stage holds the shape the renderer will land in, before the renderer
   is there: globe.js is fetched after first paint now. Keyed on the 8 by 8
   placeholder in the markup, so the reserve switches itself off the instant
   layout() writes the real bitmap size and can never constrain the canvas.
   Globe mode is min(520, 0.92 x stage) high, which is what an aspect ratio
   with a cap gives exactly; under a 420px stage, or under reduced motion,
   the renderer draws the flat map at 0.56 instead. The 420 is the stage's
   width, not the window's, so the stage is what is asked. */
.cm-globe { container-type: inline-size; }
.cm-globe-cv[width="8"] { aspect-ratio: 25 / 23; max-height: 520px; }
@container (max-width: 419.98px) {
  .cm-globe-cv[width="8"] { aspect-ratio: 25 / 14; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-globe-cv[width="8"] { aspect-ratio: 25 / 14; max-height: none; }
}
.cm-globe.is-drag .cm-globe-cv { cursor: grabbing; }
.cm-globe.is-hit .cm-globe-cv { cursor: pointer; }
.cm-globe.is-flat .cm-globe-cv { cursor: default; touch-action: auto; }
/* No 2d context at all: the list becomes the whole map. */
.cm-globe.is-list { display: none; }

/* Dragging is never the only way to turn it. The bar used to float over
   the canvas at the bottom of it, and layout() centres the sphere in the
   canvas, so at every stage size it sat on live pins: Brazil, South
   Africa, Australia, the Philippines and Singapore all came round under
   it. A control that eats the thing it is next to is worse than a
   control that takes its own 54px, so it takes them. */
.cm-globe-turn {
  display: flex;
  width: max-content;
  margin: 8px auto 0;
  gap: 4px;
  padding: 4px;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-glass);
  border: 1px solid var(--cm-glass-line);
  backdrop-filter: blur(12px);
  box-shadow: var(--cm-shadow-card);
}
.cm-globe-turn button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--cm-muted-strong);
  border-radius: var(--cm-radius-pill);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.cm-globe-turn button:hover { background: var(--cm-accent-tint); color: var(--cm-accent-deep); }

.cm-globe-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.cm-globe-pin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-pill);
  background: var(--cm-card);
  color: var(--cm-ink);
  font-family: var(--cm-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, opacity .2s ease;
}
.cm-globe-pin .sw { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cm-globe-pin .ct { font-weight: 600; color: var(--cm-muted-soft); }
.cm-globe-pin:hover { border-color: var(--cm-border-btn); }
.cm-globe-pin:focus-visible { border-color: var(--cm-accent); }
.cm-globe-pin.is-home { border-color: var(--cm-accent); }
.cm-globe-pin.is-on {
  background: var(--cm-accent-tint);
  border-color: var(--cm-accent);
  color: var(--cm-accent-deep);
}
.cm-globe-pin.is-on .ct { color: var(--cm-accent-deep); }
/* Dimmed by a filter, never removed: the country is still on the globe and
   still one click away from clearing the filter. The dimming is in the
   surface and the swatch, not in an opacity on the whole pill: 0.5 took
   the label of all thirty dimmed countries to about 2.8:1 on the card
   behind it. The text drops to the muted token, which is the quietest
   thing in the system that still clears 4.5:1. */
.cm-globe-pin.is-off {
  background: var(--cm-panel);
  border-color: var(--cm-border);
  color: var(--cm-muted);
}
.cm-globe-pin.is-off .ct { color: var(--cm-muted); }
.cm-globe-pin.is-off .sw { opacity: 0.5; }

/* Table */
.cm-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--cm-ink); }
.cm-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cm-muted-soft);
  border-bottom: 1px solid var(--cm-border-mid);
  font-weight: 600;
  white-space: nowrap;
}
.cm-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(28, 25, 23, 0.07);
  color: var(--cm-muted-strong);
  vertical-align: middle;
}
[data-theme="dark"] .cm-table tbody td { border-bottom-color: rgba(245, 243, 240, 0.07); }
.cm-table tbody tr:last-child td { border-bottom: none; }
.cm-table .cm-strong { color: var(--cm-ink); font-weight: 500; }
@media (max-width: 767.98px) {
  .cm-table { font-size: 12px; }
  .cm-table thead th { padding: 8px 6px; font-size: 11px; }
  .cm-table tbody td { padding: 8px 6px; }
}


/* touch target, moved with the rules it sizes */
.cm-globe-pin { min-height: 44px; padding: 0 16px; }