/* ── Calendar — month view ──
   Mini-month sidebar navigator, full month grid + event chips,
   drag-to-create selection, and the "upcoming events" sidebar list. */

  /* ── Mini-month navigator in sidebar ── */
  .cal-mini {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
  }
  .cal-mini-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
  }
  .cal-mini-title {
    font-size: var(--font-sm); font-weight: 700; color: var(--ink);
  }
  .cal-mini-nav {
    display: flex; gap: 2px;
  }
  .cal-mini-btn {
    width: 22px; height: 22px; border-radius: 4px; border: none;
    background: transparent; color: var(--ink-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .cal-mini-btn:hover { background: var(--surface); color: var(--ink); }
  /* "Back to today" — appears in the mini-month nav whenever the displayed
     month differs from real today. Slightly accent-tinted so it reads as
     an action, not a generic chevron. */
  .cal-mini-btn--today { color: var(--accent); }
  .cal-mini-btn--today:hover { background: var(--accent-soft); color: var(--accent); }
  .cal-mini-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    /* Column-gap 0 lets in-week cells form one continuous pill across
       the row (Notion convention); 2px row-gap keeps vertical
       breathing room between weeks. */
    gap: 2px 0;
  }
  .cal-mini-dow {
    font-size: 10px; color: var(--ink-ghost); text-align: center;
    font-weight: 600; text-transform: uppercase;
  }
  .cal-mini-cell {
    aspect-ratio: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: var(--font-2xs); color: var(--ink-secondary);
    border-radius: 4px; cursor: pointer; position: relative;
  }
  .cal-mini-cell:hover { background: var(--surface); color: var(--ink); }
  .cal-mini-cell.other-month { color: var(--ink-ghost); }
  /* Notion-style continuous pill across the current week. The fill
     spans the full row (gap-x is 0); only the row's bookend cells get
     rounded outer corners — interior cells stay square so the segments
     join seamlessly. Today's accent block paints over the pill on its
     own cell (rule below wins by source order). */
  .cal-mini-cell.in-week {
    background: var(--surface);
    border-radius: 0;
  }
  .cal-mini-cell.in-week--start {
    border-top-left-radius: var(--radius-pill);
    border-bottom-left-radius: var(--radius-pill);
  }
  .cal-mini-cell.in-week--end {
    border-top-right-radius: var(--radius-pill);
    border-bottom-right-radius: var(--radius-pill);
  }
  /* Today is a rounded accent square sitting ON TOP of the pill — it
     must keep its full styling even when the cell is also .in-week or
     a bookend (i.e. when today is the week's first/last day). Declared
     after the .in-week rules so it wins by source order. */
  .cal-mini-cell.today {
    background: var(--accent); color: var(--on-accent); font-weight: 700;
    border-radius: 4px;
  }

  /* PR B2 — mini-month opt-in left gutter with ISO week numbers.
     `data-weeknums="on"` is set by JS when CAL_PREFS.show_week_numbers
     is on; the grid template grows a 22px first column. Attribute
     selector keeps the `class="cal-mini"` literal intact for the
     existing static-regex tests. */
  .cal-mini[data-weeknums="on"] .cal-mini-grid {
    grid-template-columns: 22px repeat(7, 1fr);
  }
  .cal-mini-weeknum {
    font-size: var(--font-2xs); color: var(--ink-ghost); text-align: center;
    align-self: center; user-select: none;
  }
  .cal-mini-weeknum--header { /* spacer above the day-of-week row */ }

  /* PR B2 — `body.cal-dim-weekends` desaturates Sat/Sun. We don't hide
     them outright (would break the 7-column grid and the in-week pill),
     just signal that they're "off-hours". Today's accent and the active
     week pill still win on top. */
  body.cal-dim-weekends .cal-mini-cell.is-weekend {
    color: var(--ink-muted);
    opacity: 0.55;
  }
  body.cal-dim-weekends .cal-mini-cell.is-weekend.today {
    color: var(--on-accent); opacity: 1;
  }

  /* ── Month grid ── */
  .calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
    background: var(--border); border: 1px solid var(--border);
  }

  /* PR C2 — left week-number gutter when CAL_PREFS.show_week_numbers
     is on. Grow the template by a 28-px leading column; the JS emits
     a `.calendar-weeknum` cell before every row (and a spacer one in
     the header row). */
  .calendar-grid[data-weeknums="on"] {
    grid-template-columns: 28px repeat(7, 1fr);
  }
  .calendar-weeknum {
    display: flex; align-items: center; justify-content: center;
    background: var(--deep);
    color: var(--ink-muted);
    font-size: var(--font-2xs);
    font-weight: 600;
    user-select: none;
  }
  .calendar-weeknum--header {
    /* spacer above the day-of-week row — same background as the
       weekday labels so the corner reads as a continuous header */
    background: var(--deep);
  }
  .calendar-weekday {
    padding: var(--space-sm); text-align: center; font-size: var(--font-2xs); font-weight: 600;
    color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em;
    background: var(--deep);
  }
  .calendar-day {
    min-height: 100px; padding: var(--space-xs); background: var(--surface);
    cursor: pointer; transition: background var(--transition); position: relative;
    display: flex; flex-direction: column;
  }
  .calendar-day:hover { background: var(--raised); }
  .calendar-day.other-month { opacity: 0.35; }
  .calendar-day.today { background: var(--accent-soft); }
  .calendar-day-num {
    font-size: var(--font-xs); font-weight: 500; color: var(--ink-secondary); padding: 2px 6px;
    align-self: flex-end;
    cursor: pointer; border-radius: var(--radius-pill);
    transition: background var(--transition);
  }
  .calendar-day-num:hover { background: var(--surface); }
  .calendar-day.today .calendar-day-num {
    background: var(--accent); color: white; border-radius: var(--radius-full);
    font-weight: 700; width: 24px; height: 24px; display: flex; align-items: center;
    justify-content: center; padding: 0;
  }
  .calendar-event {
    margin-top: 2px; padding: 3px 6px; border-radius: 4px; font-size: var(--font-2xs);
    font-weight: 500; color: var(--ink); cursor: pointer;
    transition: opacity var(--transition);
    display: flex; align-items: center; gap: var(--space-xs); line-height: 1.3;
  }
  .calendar-event:hover { opacity: 0.8; }
  /* Notion-style: title comes first, time is appended in muted weight. */
  .calendar-event-time {
    color: var(--ink-muted);
    font-weight: 400;
    margin-left: 4px;
  }
  /* Type identity lives in the background tint + the left rail; the
     text stays --ink so it's legible on the soft background. The
     previous pairing (color: var(--accent) on background:
     var(--accent-soft)) had near-zero contrast. */
  .calendar-event.video { background: var(--accent-soft); border-left: 2px solid var(--accent); }
  .calendar-event.audio { background: var(--live-soft); border-left: 2px solid var(--live); }
  .calendar-event.offline { background: var(--surface); border-left: 2px solid var(--border-mid); color: var(--ink-secondary); }
  /* PR D1 — non-meeting kinds. Same border-left + tinted background
     idiom; the bar inherits its solid color from the per-kind token. */
  .calendar-event.focus { background: var(--surface); border-left: 2px solid var(--event-type-focus); }
  .calendar-event.ooo { background: var(--surface); border-left: 2px solid var(--event-type-ooo); }
  .calendar-event.birthday { background: var(--surface); border-left: 2px solid var(--event-type-birthday); }
  .calendar-event--allday {
    background: var(--accent); color: white; border-left: none; font-weight: 600;
  }
  .calendar-event--allday:hover { filter: brightness(1.08); opacity: 1; }
  /* O.1 — per-event color override for month view. Same tinted-bg +
     coloured left rail idiom as the kind rules above. Lands AFTER
     .calendar-event--allday so an explicit colour wins even for
     all-day bars — without this order the multi-class selector below
     would lose to the later `--accent` rule (equal specificity, source
     order wins) and the override would silently be masked in month. */
  .calendar-event.color-red    { background: var(--cal-color-red-soft);    border-left: 2px solid var(--cal-color-red);    color: var(--ink); }
  .calendar-event.color-orange { background: var(--cal-color-orange-soft); border-left: 2px solid var(--cal-color-orange); color: var(--ink); }
  .calendar-event.color-yellow { background: var(--cal-color-yellow-soft); border-left: 2px solid var(--cal-color-yellow); color: var(--ink); }
  .calendar-event.color-green  { background: var(--cal-color-green-soft);  border-left: 2px solid var(--cal-color-green);  color: var(--ink); }
  .calendar-event.color-blue   { background: var(--cal-color-blue-soft);   border-left: 2px solid var(--cal-color-blue);   color: var(--ink); }
  .calendar-event.color-purple { background: var(--cal-color-purple-soft); border-left: 2px solid var(--cal-color-purple); color: var(--ink); }
  .calendar-event.color-gray   { background: var(--cal-color-gray-soft);   border-left: 2px solid var(--cal-color-gray);   color: var(--ink); }

  /* Multi-day spanning bars — Notion-style continuous look. The chip
     is still one element per day, but the rounded-corner / neg-margin
     trick bridges the 1px grid-gap + cell padding so adjacent days
     read as one bar across the week. Title shows only on the first
     day (set in JS), so the bar isn't a wall of repeated text. */
  .calendar-event--span-first {
    border-radius: 4px 0 0 4px;
    margin-right: -5px;
    padding-right: 8px;
    position: relative; z-index: 1;
  }
  .calendar-event--span-mid {
    border-radius: 0;
    margin: 0 -5px;
    padding: 3px 0;
    position: relative; z-index: 1;
  }
  .calendar-event--span-last {
    border-radius: 0 4px 4px 0;
    margin-left: -5px;
    padding-left: 8px;
    position: relative; z-index: 1;
  }

  /* P1-10: month drag-to-create range highlight. */
  .calendar-day.calendar-day--selecting {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 2px var(--accent);
  }
  .calendar-day.calendar-day--selecting.today {
    background: var(--accent-soft);
  }

  /* ── Upcoming events sidebar list ── */
  .calendar-upcoming { padding: var(--space-md); }
  .calendar-upcoming-title {
    font-size: var(--font-2xs); font-weight: 600; color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-sm);
  }
  .upcoming-event {
    display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-s); cursor: pointer; transition: background var(--transition);
    margin-bottom: 2px;
  }
  .upcoming-event:hover { background: var(--surface); }
  .upcoming-event-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }
  .upcoming-event-info { flex: 1; min-width: 0; }
  .upcoming-event-title { font-size: var(--font-sm); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .upcoming-event-time { font-size: var(--font-2xs); color: var(--ink-muted); overflow-wrap: anywhere; }
  /* Description URLs come pre-anchored from _kcRenderEventDescription
     (Google calendar gives us <a>…</a> markup). The browser-default
     visited-link purple is unreadable against --raised on this dark
     theme — use accent like every other link surface. */
  .upcoming-event-time a {
    color: var(--accent); text-decoration: underline;
  }
  .upcoming-event-time a:hover { color: var(--accent-hover); }
  .upcoming-event-join {
    padding: 4px 12px; border-radius: var(--radius-s); font-size: var(--font-2xs); font-weight: 600;
    background: var(--accent); color: white; border: none; cursor: pointer;
    font-family: inherit; opacity: 0; transition: opacity var(--transition);
  }
  .upcoming-event:hover .upcoming-event-join { opacity: 1; }