/*
  calendar-render.css - RENDER-LAYER COLOURS FOR THE CLASS CALENDAR (R-1023-11, R-1023-31)
  ===========================================================================
  Tokens only (--theme-*), no hex: every skin that defines the core Render tokens gets a
  readable calendar; structure lives in calendar.css (the Primer).

  STYLE COLOURS ARE THE SKIN'S (R-1023-31): each style the school teaches maps to a SLOT
  (1..8, assigned by the Api from SchoolStyles order; the block carries data-style-slot).
  The skin colours a slot by defining, per slot N, these custom properties:

      --theme-cal-style-N-bg     block / chip fill
      --theme-cal-style-N-edge   the 4px left edge and the legend swatch
      --theme-cal-style-N-fg     text on the fill

  Until a skin defines them every slot falls back to the SAME neutral surface, so no palette
  is hard-coded here and the style NAME in the block text (plus the edge line pattern in
  calendar.css) is what tells styles apart. A style colour must never reuse the semantic
  state colours (--theme-state-healthy / -warning / -error): those mean Live / Full / Error.
  Slot 0 = a class with no style.
*/

.bu-cal {
  --cal-line: var(--theme-border-inactive, currentColor);
  --cal-neutral-bg: var(--theme-bg-surface, transparent);
  --cal-neutral-edge: var(--theme-text-muted, currentColor);
  --cal-neutral-fg: var(--theme-text-main, inherit);
  color: var(--theme-text-main, inherit);
}

.bu-cal [data-style-slot] {
  --cal-style-bg: var(--cal-neutral-bg);
  --cal-style-edge: var(--cal-neutral-edge);
  --cal-style-fg: var(--cal-neutral-fg);
}

.bu-cal [data-style-slot="1"] { --cal-style-bg: var(--theme-cal-style-1-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-cal-style-1-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-cal-style-1-fg, var(--cal-neutral-fg)); }
.bu-cal [data-style-slot="2"] { --cal-style-bg: var(--theme-cal-style-2-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-cal-style-2-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-cal-style-2-fg, var(--cal-neutral-fg)); }
.bu-cal [data-style-slot="3"] { --cal-style-bg: var(--theme-cal-style-3-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-cal-style-3-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-cal-style-3-fg, var(--cal-neutral-fg)); }
.bu-cal [data-style-slot="4"] { --cal-style-bg: var(--theme-cal-style-4-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-cal-style-4-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-cal-style-4-fg, var(--cal-neutral-fg)); }
.bu-cal [data-style-slot="5"] { --cal-style-bg: var(--theme-cal-style-5-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-cal-style-5-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-cal-style-5-fg, var(--cal-neutral-fg)); }
.bu-cal [data-style-slot="6"] { --cal-style-bg: var(--theme-cal-style-6-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-cal-style-6-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-cal-style-6-fg, var(--cal-neutral-fg)); }
.bu-cal [data-style-slot="7"] { --cal-style-bg: var(--theme-cal-style-7-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-cal-style-7-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-cal-style-7-fg, var(--cal-neutral-fg)); }
.bu-cal [data-style-slot="8"] { --cal-style-bg: var(--theme-cal-style-8-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-cal-style-8-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-cal-style-8-fg, var(--cal-neutral-fg)); }

/* OWNER COLOURS (2026-10-24): a class, or its style, may carry a swatch KEY (data-color-key) chosen by the owner. The feed sends the RESOLVED key
   (class colour, else style colour); with no key the slot rules above apply. The key maps to the skin's --theme-swatch-KEY-bg/-edge/-fg; a skin
   without those tokens falls back to the same neutral surface as an undefined slot. Declared after the slot rules so the key wins. */
.bu-cal [data-color-key="red"] { --cal-style-bg: var(--theme-swatch-red-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-red-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-red-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="orange"] { --cal-style-bg: var(--theme-swatch-orange-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-orange-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-orange-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="amber"] { --cal-style-bg: var(--theme-swatch-amber-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-amber-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-amber-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="lime"] { --cal-style-bg: var(--theme-swatch-lime-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-lime-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-lime-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="green"] { --cal-style-bg: var(--theme-swatch-green-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-green-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-green-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="teal"] { --cal-style-bg: var(--theme-swatch-teal-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-teal-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-teal-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="cyan"] { --cal-style-bg: var(--theme-swatch-cyan-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-cyan-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-cyan-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="blue"] { --cal-style-bg: var(--theme-swatch-blue-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-blue-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-blue-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="indigo"] { --cal-style-bg: var(--theme-swatch-indigo-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-indigo-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-indigo-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="violet"] { --cal-style-bg: var(--theme-swatch-violet-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-violet-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-violet-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="magenta"] { --cal-style-bg: var(--theme-swatch-magenta-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-magenta-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-magenta-fg, var(--cal-neutral-fg)); }
.bu-cal [data-color-key="slate"] { --cal-style-bg: var(--theme-swatch-slate-bg, var(--cal-neutral-bg)); --cal-style-edge: var(--theme-swatch-slate-edge, var(--cal-neutral-edge)); --cal-style-fg: var(--theme-swatch-slate-fg, var(--cal-neutral-fg)); }

.bu-cal__panel,
.bu-cal-grid,
.bu-cal-month,
.bu-cal-rail__item {
  background-color: var(--theme-bg-card, transparent);
  border-color: var(--cal-line);
}

.bu-cal__panel {
  border-color: var(--theme-border-active, var(--cal-line));
}

.bu-cal-grid__dayhead,
.bu-cal-grid__alldaycell,
.bu-cal-grid__allday,
.bu-cal-grid__scroll,
.bu-cal-col,
.bu-cal-slot,
.bu-cal-month__cell,
.bu-cal-roster li {
  border-color: var(--cal-line);
}

.bu-cal-hour,
.bu-cal-zone,
.bu-cal-month__dow,
.bu-cal-item__meta {
  color: var(--theme-text-muted, inherit);
}

.bu-cal-slot:hover {
  background-color: color-mix(in srgb, var(--theme-accent-primary, currentColor) 10%, transparent);
}

/* Today: highlighted column / cell / day header. */
.bu-cal-col.is-today,
.bu-cal-month__cell.is-today {
  background-color: color-mix(in srgb, var(--theme-accent-primary, currentColor) 8%, transparent);
}

/* #430: the accent (cobalt) on the near-black header was ~2:1. The text stays the main text colour (WCAG 1.4.3); "today" is carried by
   the bold weight and an accent underline, which are not text. */
.bu-cal-grid__dayhead.is-today,
.bu-cal-month__cell.is-today .bu-cal-month__daynum {
  color: var(--theme-text-main, inherit);
  font-weight: var(--structure-weight-bold, 700);
}

.bu-cal-grid__dayhead.is-today {
  box-shadow: inset 0 -3px 0 var(--theme-accent-primary, currentColor);
}

.bu-cal-month__cell.is-today .bu-cal-month__daynum {
  border-bottom: 2px solid var(--theme-accent-primary, currentColor);
}

/* Class blocks / list items / month chips take the slot's colours. */
.bu-cal-block,
.bu-cal-item,
.bu-cal-month__chip {
  background-color: var(--cal-style-bg);
  color: var(--cal-style-fg);
  border-color: var(--cal-line);
  border-left-color: var(--cal-style-edge);
}

.bu-cal-block:hover,
.bu-cal-item:hover,
.bu-cal-month__chip:hover {
  border-color: var(--theme-border-active, currentColor);
  border-left-color: var(--cal-style-edge);
}

.bu-cal-block.is-selected,
.bu-cal-item.is-selected {
  outline: 2px solid var(--theme-accent-primary, currentColor);
  outline-offset: 0;
}

.bu-cal-block.is-cancelled,
.bu-cal-item.is-cancelled,
.bu-cal-month__chip.is-cancelled {
  color: var(--theme-text-muted, inherit);
}

.bu-cal-swatch {
  background-color: var(--cal-style-bg);
  border-color: var(--cal-style-edge);
}

/* #510: the legend reads as a LEGEND (swatch + style name, no button outline); it is still a toggle (aria-pressed), and a hidden style is muted AND
   struck through (calendar.css), never colour alone. The toolbar's real buttons keep their outline, so the two no longer look alike. */
.bu-cal-chip {
  background-color: transparent;
  color: inherit;
  border-color: transparent;
}

.bu-cal-chip[aria-pressed="false"] {
  color: var(--theme-text-muted, inherit);
}

.bu-cal-chip:hover {
  background-color: color-mix(in srgb, var(--theme-accent-primary, currentColor) 8%, transparent);
}

/* #510: the active view (Week / Day / Agenda / Month) is SELECTED, not just labelled: a tinted fill + accent edge here, and a heavier weight + 2px
   border in calendar.css, so the cue survives greyscale and colour-blindness (WCAG 1.4.1). Text stays the main ink on a tint of the card (contrast holds). */
.bu-cal-toolbar [aria-pressed="true"] {
  background-color: color-mix(in srgb, var(--theme-accent-primary, currentColor) 22%, var(--theme-bg-card, transparent));
  border-color: var(--theme-accent-primary, currentColor);
  color: var(--theme-text-main, inherit);
}

/* State tags (these DO use the semantic state colours; style colours never do). */
.bu-cal-tag {
  border-color: currentColor;
}

.bu-cal-tag--now {
  color: var(--theme-text-main, inherit);
  border-color: var(--theme-accent-primary, currentColor);
}

.bu-cal-tag--full {
  color: var(--theme-state-warning, inherit);
}

.bu-cal-tag--cancelled {
  color: var(--theme-text-muted, inherit);
}

/* Lead bookings (slice D1): an outlined block on the card surface with the accent edge; NOT a style colour, NOT a state colour. */
.bu-cal-appt,
.bu-cal-appt-chip,
.bu-cal-appt-item {
  background-color: var(--theme-bg-card, transparent);
  color: var(--theme-text-main, inherit);
  border-color: var(--theme-accent-primary, currentColor);
}

.bu-cal-appt.is-selected {
  outline: 2px solid var(--theme-accent-primary, currentColor);
  outline-offset: 0;
}

.bu-cal-appt.is-attended,
.bu-cal-appt.is-noshow {
  color: var(--theme-text-muted, inherit);
}

/* Events: coloured BY TYPE (Grading, Seminar, Tournament, Open mat, Other, Closure) from the skin's --theme-cal-event-TYPE-* tokens.
   Without those tokens an event is the accent-outlined transparent block it always was. The type word is in the text (a tag), and the
   outline is double/dashed (calendar.css), so colour is never the only signal. A closure is a hatched all-day band. */
.bu-cal-event {
  --cal-ev-bg: transparent;
  --cal-ev-edge: var(--theme-accent-primary, currentColor);
  --cal-ev-fg: var(--theme-text-main, inherit);
  background-color: var(--cal-ev-bg);
  color: var(--cal-ev-fg);
  border-color: var(--cal-ev-edge);
}

.bu-cal-event[data-event-type="Grading"]    { --cal-ev-bg: var(--theme-cal-event-grading-bg, transparent);    --cal-ev-edge: var(--theme-cal-event-grading-edge, var(--theme-accent-primary, currentColor));    --cal-ev-fg: var(--theme-cal-event-grading-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-event-type="Seminar"]    { --cal-ev-bg: var(--theme-cal-event-seminar-bg, transparent);    --cal-ev-edge: var(--theme-cal-event-seminar-edge, var(--theme-accent-primary, currentColor));    --cal-ev-fg: var(--theme-cal-event-seminar-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-event-type="Tournament"] { --cal-ev-bg: var(--theme-cal-event-tournament-bg, transparent); --cal-ev-edge: var(--theme-cal-event-tournament-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-cal-event-tournament-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-event-type="OpenMat"]    { --cal-ev-bg: var(--theme-cal-event-openmat-bg, transparent);    --cal-ev-edge: var(--theme-cal-event-openmat-edge, var(--theme-accent-primary, currentColor));    --cal-ev-fg: var(--theme-cal-event-openmat-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-event-type="Other"]      { --cal-ev-bg: var(--theme-cal-event-other-bg, transparent);      --cal-ev-edge: var(--theme-cal-event-other-edge, var(--theme-accent-primary, currentColor));      --cal-ev-fg: var(--theme-cal-event-other-fg, var(--theme-text-main, inherit)); }

.bu-cal-event--closure {
  --cal-ev-bg: color-mix(in srgb, var(--theme-text-muted, currentColor) 22%, transparent);
  --cal-ev-edge: var(--theme-text-muted, currentColor);
  --cal-ev-fg: var(--theme-text-main, inherit);
}

.bu-cal-event--closure[data-event-type="Closure"] {
  --cal-ev-bg: var(--theme-cal-event-closure-bg, color-mix(in srgb, var(--theme-text-muted, currentColor) 22%, transparent));
  --cal-ev-edge: var(--theme-cal-event-closure-edge, var(--theme-text-muted, currentColor));
  --cal-ev-fg: var(--theme-cal-event-closure-fg, var(--theme-text-main, inherit));
  /* The hatch: 135-degree diagonal stripes of the edge colour at 30%, over the fill (text stays >= 4.5:1 on the stripe too). */
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--cal-ev-edge) 30%, transparent) 0 3px, transparent 3px 9px);
}

/* The hatch is a background image: print drops backgrounds and forced-colors replaces them. A closure keeps a thick DASHED outline (not a
   colour) and its CLOSURE tag, in print and in forced-colors (system colours there), so it is still not mistaken for another event. */
@media print {
  .bu-cal-event--closure {
    border-width: 3px;
    border-style: dashed;
    border-color: currentColor;
    background-image: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (forced-colors: active) {
  .bu-cal-event--closure {
    border-width: 3px;
    border-style: dashed;
    border-color: CanvasText;
    color: CanvasText;
    background-image: none;
    forced-color-adjust: auto;
  }
}


/* An event the owner coloured: its swatch replaces the colour of its type (declared after the type rules). */
.bu-cal-event[data-color-key="red"] { --cal-ev-bg: var(--theme-swatch-red-bg, transparent); --cal-ev-edge: var(--theme-swatch-red-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-red-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="orange"] { --cal-ev-bg: var(--theme-swatch-orange-bg, transparent); --cal-ev-edge: var(--theme-swatch-orange-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-orange-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="amber"] { --cal-ev-bg: var(--theme-swatch-amber-bg, transparent); --cal-ev-edge: var(--theme-swatch-amber-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-amber-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="lime"] { --cal-ev-bg: var(--theme-swatch-lime-bg, transparent); --cal-ev-edge: var(--theme-swatch-lime-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-lime-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="green"] { --cal-ev-bg: var(--theme-swatch-green-bg, transparent); --cal-ev-edge: var(--theme-swatch-green-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-green-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="teal"] { --cal-ev-bg: var(--theme-swatch-teal-bg, transparent); --cal-ev-edge: var(--theme-swatch-teal-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-teal-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="cyan"] { --cal-ev-bg: var(--theme-swatch-cyan-bg, transparent); --cal-ev-edge: var(--theme-swatch-cyan-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-cyan-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="blue"] { --cal-ev-bg: var(--theme-swatch-blue-bg, transparent); --cal-ev-edge: var(--theme-swatch-blue-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-blue-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="indigo"] { --cal-ev-bg: var(--theme-swatch-indigo-bg, transparent); --cal-ev-edge: var(--theme-swatch-indigo-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-indigo-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="violet"] { --cal-ev-bg: var(--theme-swatch-violet-bg, transparent); --cal-ev-edge: var(--theme-swatch-violet-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-violet-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="magenta"] { --cal-ev-bg: var(--theme-swatch-magenta-bg, transparent); --cal-ev-edge: var(--theme-swatch-magenta-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-magenta-fg, var(--theme-text-main, inherit)); }
.bu-cal-event[data-color-key="slate"] { --cal-ev-bg: var(--theme-swatch-slate-bg, transparent); --cal-ev-edge: var(--theme-swatch-slate-edge, var(--theme-accent-primary, currentColor)); --cal-ev-fg: var(--theme-swatch-slate-fg, var(--theme-text-main, inherit)); }

/* The colour picker (calendar.css structure): option outline and the swatch dot. */
.bu-colour-opt {
  color: var(--theme-text-main, inherit);
  border-color: var(--cal-line, var(--theme-border-inactive, currentColor));
}

.bu-colour-opt:has(input:checked) {
  border-color: var(--theme-border-active, currentColor);
}

.bu-colour-dot {
  background-color: var(--theme-text-muted, currentColor);
  border-color: var(--theme-text-muted, currentColor);
}
.bu-colour-dot[data-color-key="red"] { background-color: var(--theme-swatch-red-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-red-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="orange"] { background-color: var(--theme-swatch-orange-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-orange-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="amber"] { background-color: var(--theme-swatch-amber-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-amber-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="lime"] { background-color: var(--theme-swatch-lime-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-lime-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="green"] { background-color: var(--theme-swatch-green-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-green-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="teal"] { background-color: var(--theme-swatch-teal-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-teal-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="cyan"] { background-color: var(--theme-swatch-cyan-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-cyan-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="blue"] { background-color: var(--theme-swatch-blue-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-blue-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="indigo"] { background-color: var(--theme-swatch-indigo-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-indigo-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="violet"] { background-color: var(--theme-swatch-violet-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-violet-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="magenta"] { background-color: var(--theme-swatch-magenta-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-magenta-bg, var(--theme-text-muted, currentColor)); }
.bu-colour-dot[data-color-key="slate"] { background-color: var(--theme-swatch-slate-edge, var(--theme-text-muted, currentColor)); border-color: var(--theme-swatch-slate-bg, var(--theme-text-muted, currentColor)); }

.bu-cal-nowline {
  border-top-color: var(--theme-accent-primary, currentColor);
}

.bu-cal-nowline::before {
  color: var(--theme-accent-primary, inherit);
  background-color: var(--theme-bg-card, transparent);
}

/* #426 "+N" chip and its expanded list take the neutral Render surface. */
.bu-cal-stack__chip {
  background-color: var(--theme-bg-surface, transparent);
  color: var(--theme-text-main, inherit);
  border-color: var(--cal-line);
  border-left-color: var(--theme-text-muted, currentColor);
}

.bu-cal-stack__chip:hover {
  border-color: var(--theme-border-active, currentColor);
}

.bu-cal-stack__list {
  /* Opaque: the card tint is layered over the canvas, so a chip or block behind the open list can never show through it (F2). */
  background-color: var(--theme-bg-canvas, Canvas);
  background-image: linear-gradient(var(--theme-bg-card, transparent), var(--theme-bg-card, transparent));
  border-color: var(--theme-border-active, var(--cal-line));
}

/* #491: the phone's side panel is a viewport sheet (calendar.css), so it must be opaque: the skin's own canvas, not the translucent card fill. */
@media (max-width: 720px) {
  :root[data-theme] .bu-cal__panel {
    background-color: var(--theme-bg-canvas, Canvas);
  }
}

/* RW-23: the overdue call-back mark on a prospect row and on the Overview tile: the semantic error state, added to the words and the "!" already in the markup. */
.bu-pros-overdue {
  border-color: var(--theme-state-error, currentColor);
  color: var(--theme-state-error, inherit);
}