/* Maelstrom calendar — brand-matched.
 *
 * Palette sampled from assets/logo-source.png, the same source mark.svg is
 * drawn from, so the calendar and the logo are the same two colours rather
 * than two people's memory of them:
 *   gold    #f8d858   crimson #e00048   field #0a0a0a
 *
 * Colours here are scoped tokens on .mx-cal rather than :root, so dropping the
 * calendar into a page cannot restyle the page around it. */

.mx-cal {
  --mx-gold: #f8d858;
  --mx-gold-dim: #b89a2c;
  --mx-crimson: #e00048;
  --mx-crimson-dim: #8f0030;
  --mx-ink: #0a0a0a;
  --mx-paper: #fefefe;
  --mx-line: rgba(255, 255, 255, 0.10);
  --mx-mute: rgba(255, 255, 255, 0.55);

  background: var(--mx-ink);
  color: var(--mx-paper);
  border: 1px solid var(--mx-line);
  border-radius: 14px;
  padding: 1rem;
  font-size: 0.95rem;
}

/* ---- header ---- */
.mx-cal-head { margin-bottom: 0.9rem; }

.mx-cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.6rem;
}
.mx-cal-title { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: 0.01em; }

.mx-cal-btn {
  background: transparent; color: var(--mx-gold);
  border: 1px solid var(--mx-line); border-radius: 8px;
  /* 44px: below this a thumb misses on a phone, and this product is used on
   * phones between meetings. */
  min-width: 44px; min-height: 44px;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.mx-cal-btn:hover { border-color: var(--mx-gold); }

.mx-cal-views { display: flex; gap: 0.35rem; }
.mx-cal-tab {
  flex: 1; min-height: 40px; cursor: pointer;
  background: transparent; color: var(--mx-mute);
  border: 1px solid var(--mx-line); border-radius: 8px;
  font-size: 0.85rem;
}
.mx-cal-tab.is-on {
  color: var(--mx-ink); background: var(--mx-gold);
  border-color: var(--mx-gold); font-weight: 650;
}

/* Never a bare time. The zone is part of the information, not a footnote. */
.mx-cal-tz { margin: 0.55rem 0 0; font-size: 0.78rem; color: var(--mx-mute); }

/* ---- month grid ---- */
.mx-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.mx-cal-dow {
  text-align: center; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--mx-mute); padding-bottom: 0.3rem;
}

.mx-cal-cell {
  position: relative; aspect-ratio: 1; min-height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent; border-radius: 8px;
  color: var(--mx-paper); cursor: pointer; font: inherit;
}
.mx-cal-cell.is-out { opacity: 0.3; }
.mx-cal-cell.is-weekend { background: rgba(255, 255, 255, 0.01); }
.mx-cal-cell.is-past { opacity: 0.22; cursor: default; }
.mx-cal-cell:not(.is-past):hover { border-color: var(--mx-gold-dim); }

/* Today: a gold ring, not a fill — a filled "today" competes with selection. */
.mx-cal-cell.is-today { border-color: var(--mx-gold); }
.mx-cal-cell.is-sel {
  background: var(--mx-gold); color: var(--mx-ink); border-color: var(--mx-gold);
}
.mx-cal-cell.has-slots::after {
  content: ''; position: absolute; inset-inline: 22%; bottom: 5px; height: 2px;
  background: var(--mx-gold); border-radius: 2px;
}
.mx-cal-cell.is-sel.has-slots::after { background: var(--mx-ink); }

.mx-cal-num { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.mx-cal-count {
  font-size: 0.62rem; color: var(--mx-gold); margin-top: 1px;
}
.mx-cal-cell.is-sel .mx-cal-count { color: var(--mx-ink); }

/* A booked meeting is crimson — the one thing on the grid that is already
 * committed, and the only place crimson appears in the grid. */
.mx-cal-dot.is-booked {
  position: absolute; top: 5px; right: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mx-crimson);
}

/* ---- slot list ---- */
.mx-cal-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }

.mx-cal-slot-btn {
  width: 100%; text-align: left; cursor: pointer;
  display: grid; gap: 0.2rem;
  background: rgba(255, 255, 255, 0.03); color: var(--mx-paper);
  border: 1px solid var(--mx-line); border-radius: 10px;
  padding: 0.7rem 0.85rem; font: inherit;
}
.mx-cal-slot-btn:hover { border-color: var(--mx-gold-dim); }
.mx-cal-slot.is-chosen .mx-cal-slot-btn {
  border-color: var(--mx-gold); background: rgba(248, 216, 88, 0.10);
}

.mx-cal-slot-when { display: flex; align-items: baseline; gap: 0.5rem; }
.mx-cal-slot-time { color: var(--mx-gold); font-variant-numeric: tabular-nums; }

/* Their time is never smaller than a footnote-in-passing. Both parties' times
 * carry equal weight because both people have to show up. */
.mx-cal-slot-their { font-size: 0.82rem; color: var(--mx-mute); }
.mx-cal-slot-their em { font-style: normal; opacity: 0.75; }

.mx-cal-warn {
  display: grid; gap: 0.15rem; margin-top: 0.3rem;
  font-size: 0.76rem; color: var(--mx-crimson);
}

/* ---- empty and loading ---- */
.mx-cal-empty { text-align: center; padding: 1.8rem 1rem; }
.mx-cal-empty-title { margin: 0 0 0.4rem; font-weight: 650; }
.mx-cal-empty-why {
  margin: 0 auto 0.9rem; max-width: 34ch;
  font-size: 0.86rem; color: var(--mx-mute); line-height: 1.5;
}
.mx-cal-loading { padding: 2rem 1rem; text-align: center; color: var(--mx-mute); }

.mx-cal-action {
  min-height: 44px; padding: 0 1.1rem; cursor: pointer;
  background: transparent; color: var(--mx-gold);
  border: 1px solid var(--mx-gold-dim); border-radius: 9px; font: inherit;
}
.mx-cal-action.is-primary {
  background: var(--mx-gold); color: var(--mx-ink);
  border-color: var(--mx-gold); font-weight: 650;
}
.mx-cal-confirm { display: flex; gap: 0.5rem; margin-top: 0.9rem; }

/* ---- reduced motion / focus ---- */
.mx-cal :focus-visible { outline: 2px solid var(--mx-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .mx-cal-cell, .mx-cal-slot-btn { transition: border-color 120ms ease, background 120ms ease; }
}

/* Narrow phones: the grid stays 7 columns (a calendar that reflows is not a
 * calendar), but cells shrink and the count label goes. */
@media (max-width: 380px) {
  .mx-cal { padding: 0.7rem; }
  .mx-cal-cell { min-height: 36px; }
  .mx-cal-count { display: none; }
}