/* Choreing — the willperlak.com theme.
 *
 * The house style from WORKSPACE.md, spoken in this app's markup: near-black
 * starfield, Comic Sans, ridged purple frames, a cyan double border, a yellow
 * accent, square corners. There is no shared stylesheet across the apps and
 * there is not meant to be one — what they share is a vocabulary, and
 * static/home/index.html in willperlak.com is its source of truth.
 *
 * Every rule is scoped under [data-theme="retro"] because clean.css is linked
 * at the same time: an unscoped rule would leak onto the other theme the
 * moment somebody switched back. base.css owns layout; the house tokens
 * (--bg, --surface, --accent, --focus and the rest of the clean-theme plan's
 * contract names) come from css/kit/retro-tokens.css; this file only adds
 * this app's own retro tokens (--hue-*, --chore-*), the font, the starfield,
 * and every selector's colour, border texture and shape.
 */

/* Comic Sans MS ships with Windows and macOS but not with iOS, Android or
   most Linux boxes. The stack must not end in the generic script face: on iOS
   Safari that resolves to Snell Roundhand, a formal copperplate, which is the
   wrong joke entirely. Comic Relief is a metrically equivalent libre clone
   (SIL OFL), self-hosted by the edge at /fonts/ — this app no longer keeps
   its own copy (public/fonts/ is gone).

   Self-hosted, never a CDN: the CSP is `default-src 'none'` with `font-src
   'self'`, and a CDN would mean punching a hole in it for every app in the
   workspace. @font-face cannot be scoped to a theme, but only --font-body
   names the family and clean.css never does, so a visitor on Clean never
   downloads the file — and neither does a machine that has the real thing,
   because Comic Relief is listed second. */
@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Comic Relief";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comic-relief-latin-700-normal.woff2") format("woff2");
}

:root[data-theme="retro"] {
  /* Avatar colours, picked by id modulo ten. Bright fills with near-black
     initials: ten hues that stay apart from each other on a dark page. */
  --hue-0-bg: #ff66cc; --hue-0-fg: #2b0018;
  --hue-1-bg: #66ccff; --hue-1-fg: #001a2b;
  --hue-2-bg: #66ff99; --hue-2-fg: #00291a;
  --hue-3-bg: #ffcc66; --hue-3-fg: #2b1a00;
  --hue-4-bg: #cc99ff; --hue-4-fg: #1a0033;
  --hue-5-bg: #ff9966; --hue-5-fg: #2b0d00;
  --hue-6-bg: #66ffe0; --hue-6-fg: #002b26;
  --hue-7-bg: #ffee66; --hue-7-fg: #2b2600;
  --hue-8-bg: #99ff66; --hue-8-fg: #1a2b00;
  --hue-9-bg: #ff8888; --hue-9-fg: #2b0000;

  /* Chore colours, picked at chore-creation time from this twelve-swatch
     grid (`.color-grid`). Saturated 1998-web fills with a near-black tint of
     the same hue for text, spaced 30 degrees apart around the wheel so nobody
     can pick two that read as the same colour. */
  --chore-1-bg:  #ee2f2f; --chore-1-fg:  #260303;
  --chore-2-bg:  #c66b10; --chore-2-fg:  #261403;
  --chore-3-bg:  #a5a50d; --chore-3-fg:  #262603;
  --chore-4-bg:  #59a50d; --chore-4-fg:  #142603;
  --chore-5-bg:  #0da50d; --chore-5-fg:  #032603;
  --chore-6-bg:  #0da559; --chore-6-fg:  #032614;
  --chore-7-bg:  #0da5a5; --chore-7-fg:  #032626;
  --chore-8-bg:  #1380ec; --chore-8-fg:  #031426;
  --chore-9-bg:  #6868f3; --chore-9-fg:  #030326;
  --chore-10-bg: #a150f1; --chore-10-fg: #140326;
  --chore-11-bg: #de12de; --chore-11-fg: #260326;
  --chore-12-bg: #ed1d85; --chore-12-fg: #260314;
}

/* The starfield, drawn entirely in CSS so the page never fetches an image —
   the two woff2 files are the only thing this theme ever requests. Copied in
   spirit from static/home/index.html, which is the canonical version. */
@keyframes retro-twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

[data-theme="retro"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 25% 65%, #fff, transparent),
    radial-gradient(2px 2px at 35% 15%, #fff, transparent),
    radial-gradient(1px 1px at 45% 80%, #fff, transparent),
    radial-gradient(1px 1px at 55% 35%, #fff, transparent),
    radial-gradient(2px 2px at 65% 55%, #fff, transparent),
    radial-gradient(1px 1px at 75% 10%, #fff, transparent),
    radial-gradient(1px 1px at 85% 75%, #fff, transparent),
    radial-gradient(2px 2px at 95% 40%, #fff, transparent),
    radial-gradient(1px 1px at 5% 90%, #fff, transparent),
    radial-gradient(1px 1px at 15% 45%, #fff, transparent),
    radial-gradient(1px 1px at 30% 95%, #fff, transparent),
    radial-gradient(2px 2px at 50% 5%, #fff, transparent),
    radial-gradient(1px 1px at 70% 85%, #fff, transparent),
    radial-gradient(120px 120px at 80% 25%, rgba(200, 120, 255, 0.28), transparent 70%),
    radial-gradient(160px 160px at 15% 70%, rgba(80, 160, 255, 0.24), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
}

[data-theme="retro"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 12%, #fff, transparent),
    radial-gradient(1px 1px at 88% 62%, #fff, transparent),
    radial-gradient(1px 1px at 42% 88%, #fff, transparent);
  animation: retro-twinkle 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="retro"] body::after { animation: none; }
}

/* ============================== Controls =================================
 * This comes first on purpose: it is the fallback every <button> in the app
 * lands on, and everything below that carries its own look out-specifies it.
 * :not(.wp-segment) throughout: without it this rule (0,1,1) outranks Kit's
 * `.wp-segment { background: transparent; border: 0 }` (0,1,0), drawing a
 * purple outset frame inside every segment of the appearance control, which
 * Kit's own retro block does not draw (review F1).
 */
[data-theme="retro"] button:not(.wp-segment),
[data-theme="retro"] .button {
  background-color: var(--surface);
  color: var(--accent);
  border: 2px outset var(--border);
  font-family: inherit;
  font-weight: bold;
}

[data-theme="retro"] button:not(.wp-segment):hover,
[data-theme="retro"] .button:hover {
  background-color: #2a0044;
  color: #66ff66;
}

[data-theme="retro"] button:not(.wp-segment):active,
[data-theme="retro"] .button:active {
  border-style: inset;
}

[data-theme="retro"] button:not(.wp-segment)[disabled],
[data-theme="retro"] .button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

[data-theme="retro"] input,
[data-theme="retro"] select,
[data-theme="retro"] textarea {
  background-color: var(--surface-alt);
  color: var(--text);
  border: 2px inset var(--border);
}

[data-theme="retro"] ::placeholder { color: var(--text-muted); opacity: 1; }

[data-theme="retro"] .field-row > label,
[data-theme="retro"] .field-label {
  color: var(--focus);
}

[data-theme="retro"] .primary {
  background-color: var(--accent);
  color: var(--accent-text);
  border: 3px outset #66ff66;
}

[data-theme="retro"] .primary:hover {
  background-color: #66ff66;
  color: var(--accent-text);
}

[data-theme="retro"] .danger {
  background-color: var(--danger);
  color: var(--danger-text);
  border: 3px outset #ff99aa;
}

[data-theme="retro"] .budget-warn {
  color: var(--danger);
}

[data-theme="retro"] .danger:hover {
  background-color: #ff6677;
  color: var(--danger-text);
}

[data-theme="retro"] .link-btn {
  color: var(--link);
  font-weight: normal;
}

[data-theme="retro"] .link-btn:hover { color: var(--focus); }

[data-theme="retro"] .errors {
  background-color: var(--toast-error-bg);
  color: var(--toast-error-fg);
  border: 2px solid var(--danger);
}

[data-theme="retro"] .muted,
[data-theme="retro"] .empty,
[data-theme="retro"] .week-item-meta,
[data-theme="retro"] .week-item-why,
[data-theme="retro"] .fair-count,
[data-theme="retro"] .chore-card-meta,
[data-theme="retro"] .cal-count,
[data-theme="retro"] .sched-day-empty,
[data-theme="retro"] .sched-time-label,
[data-theme="retro"] .sched-interval-time,
[data-theme="retro"] #demo-note {
  color: var(--text-muted);
}

/* ============================== The chrome =============================== */

[data-theme="retro"] #topbar {
  background-color: var(--surface-alt);
  border-top: 3px ridge var(--border);
  border-bottom: 4px double var(--border-alt);
}

[data-theme="retro"] #brand {
  color: var(--accent);
  text-shadow: 2px 2px 0 var(--border), -1px -1px 0 var(--border-alt);
}

[data-theme="retro"] #brand:hover { color: var(--focus); }

[data-theme="retro"] .badge {
  background-color: var(--danger);
  color: var(--danger-text);
  border: 1px solid var(--border-alt);
}

[data-theme="retro"] #unavailable-banner,
[data-theme="retro"] .banner {
  background-color: var(--toast-error-bg);
  color: var(--toast-error-fg);
  border-top: 3px ridge var(--border);
  border-bottom: 3px ridge var(--border);
}

[data-theme="retro"] #demo-bar {
  background-color: var(--surface);
  color: var(--text);
  border-bottom: 3px ridge var(--border);
}

/* ================================= Nav =================================== */

[data-theme="retro"] #nav {
  background-color: var(--surface-alt);
  border-bottom: 3px ridge var(--border);
}

[data-theme="retro"] .nav-link {
  color: var(--accent);
  border: 2px outset var(--border);
  background-color: var(--surface);
  font-weight: bold;
}

[data-theme="retro"] .nav-link:hover {
  background-color: #2a0044;
  color: #66ff66;
}

[data-theme="retro"] .nav-link[aria-current="page"] {
  background-color: var(--border);
  color: var(--bg);
  border-style: inset;
}

/* ============================== Panels =================================== */

/* 3px ridge outside, 4px double cyan inside: the landing page's two frames,
   one drawn as a border and one as an overlay so the padding stays base's. */
[data-theme="retro"] .panel {
  position: relative;
  background-color: rgba(0, 0, 20, 0.82);
  border: 3px ridge var(--border);
  padding: 1.15rem 1.25rem;
}

[data-theme="retro"] .panel::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 4px double var(--border-alt);
  pointer-events: none;
}

[data-theme="retro"] .view-title { color: var(--focus); }

/* The signed-out landing's heading (server/landing.js) wears the view
   headings' look: .view-title's size and the Retro colour. */
[data-theme="retro"] .landing h1 {
  color: var(--focus);
  font-size: 2.1rem;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

[data-theme="retro"] .panel h2,
[data-theme="retro"] .panel h3 { color: var(--border-alt); }

/* ============================== Segmented ================================ */

[data-theme="retro"] .segmented {
  background-color: var(--surface-alt);
  border: 2px inset var(--border);
}

[data-theme="retro"] .seg-btn {
  background-color: var(--surface);
  color: var(--accent);
  border: 2px outset var(--border);
  font-weight: bold;
}

[data-theme="retro"] .seg-btn[aria-selected="true"],
[data-theme="retro"] .seg-btn[aria-pressed="true"] {
  background-color: var(--focus);
  color: var(--surface);
  border-style: inset;
}

/* ================================ Avatars ================================ */

/* Square, not round: there is no border radius anywhere in this theme. */
[data-theme="retro"] .avatar {
  border-radius: 0;
  border: 2px outset var(--border);
}

[data-theme="retro"] .avatar[data-hue="0"] { background-color: var(--hue-0-bg); color: var(--hue-0-fg); }
[data-theme="retro"] .avatar[data-hue="1"] { background-color: var(--hue-1-bg); color: var(--hue-1-fg); }
[data-theme="retro"] .avatar[data-hue="2"] { background-color: var(--hue-2-bg); color: var(--hue-2-fg); }
[data-theme="retro"] .avatar[data-hue="3"] { background-color: var(--hue-3-bg); color: var(--hue-3-fg); }
[data-theme="retro"] .avatar[data-hue="4"] { background-color: var(--hue-4-bg); color: var(--hue-4-fg); }
[data-theme="retro"] .avatar[data-hue="5"] { background-color: var(--hue-5-bg); color: var(--hue-5-fg); }
[data-theme="retro"] .avatar[data-hue="6"] { background-color: var(--hue-6-bg); color: var(--hue-6-fg); }
[data-theme="retro"] .avatar[data-hue="7"] { background-color: var(--hue-7-bg); color: var(--hue-7-fg); }
[data-theme="retro"] .avatar[data-hue="8"] { background-color: var(--hue-8-bg); color: var(--hue-8-fg); }
[data-theme="retro"] .avatar[data-hue="9"] { background-color: var(--hue-9-bg); color: var(--hue-9-fg); }

/* ================================ Chores ================================== */

[data-theme="retro"] .chore-card {
  background-color: var(--surface);
  border: 2px solid var(--border-alt);
  color: var(--text);
}

[data-theme="retro"] .chore-card-title { color: var(--accent); }

[data-theme="retro"] .chore-swatch {
  border: 1px solid var(--border-alt);
}

[data-theme="retro"] .chore-pref {
  background-color: var(--surface);
  color: var(--accent);
  border: 2px outset var(--border);
}

[data-theme="retro"] .chore-pref[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--accent-text);
  border-style: inset;
}

[data-theme="retro"] .template-btn {
  background-color: var(--surface);
  color: var(--text);
  border: 2px solid var(--border-alt);
}

[data-theme="retro"] .template-btn:hover {
  border-color: var(--focus);
}

/* Chore colours: the only place a colour id turns into paint. Same twelve
   classes, same order, everywhere one is used — the swatch on a card, the
   button in the picker, the fill of a calendar banner. */
[data-theme="retro"] .banner-color-1,  [data-theme="retro"] .chore-swatch.banner-color-1,  [data-theme="retro"] .color-btn.banner-color-1  { background-color: var(--chore-1-bg);  color: var(--chore-1-fg); }
[data-theme="retro"] .banner-color-2,  [data-theme="retro"] .chore-swatch.banner-color-2,  [data-theme="retro"] .color-btn.banner-color-2  { background-color: var(--chore-2-bg);  color: var(--chore-2-fg); }
[data-theme="retro"] .banner-color-3,  [data-theme="retro"] .chore-swatch.banner-color-3,  [data-theme="retro"] .color-btn.banner-color-3  { background-color: var(--chore-3-bg);  color: var(--chore-3-fg); }
[data-theme="retro"] .banner-color-4,  [data-theme="retro"] .chore-swatch.banner-color-4,  [data-theme="retro"] .color-btn.banner-color-4  { background-color: var(--chore-4-bg);  color: var(--chore-4-fg); }
[data-theme="retro"] .banner-color-5,  [data-theme="retro"] .chore-swatch.banner-color-5,  [data-theme="retro"] .color-btn.banner-color-5  { background-color: var(--chore-5-bg);  color: var(--chore-5-fg); }
[data-theme="retro"] .banner-color-6,  [data-theme="retro"] .chore-swatch.banner-color-6,  [data-theme="retro"] .color-btn.banner-color-6  { background-color: var(--chore-6-bg);  color: var(--chore-6-fg); }
[data-theme="retro"] .banner-color-7,  [data-theme="retro"] .chore-swatch.banner-color-7,  [data-theme="retro"] .color-btn.banner-color-7  { background-color: var(--chore-7-bg);  color: var(--chore-7-fg); }
[data-theme="retro"] .banner-color-8,  [data-theme="retro"] .chore-swatch.banner-color-8,  [data-theme="retro"] .color-btn.banner-color-8  { background-color: var(--chore-8-bg);  color: var(--chore-8-fg); }
[data-theme="retro"] .banner-color-9,  [data-theme="retro"] .chore-swatch.banner-color-9,  [data-theme="retro"] .color-btn.banner-color-9  { background-color: var(--chore-9-bg);  color: var(--chore-9-fg); }
[data-theme="retro"] .banner-color-10, [data-theme="retro"] .chore-swatch.banner-color-10, [data-theme="retro"] .color-btn.banner-color-10 { background-color: var(--chore-10-bg); color: var(--chore-10-fg); }
[data-theme="retro"] .banner-color-11, [data-theme="retro"] .chore-swatch.banner-color-11, [data-theme="retro"] .color-btn.banner-color-11 { background-color: var(--chore-11-bg); color: var(--chore-11-fg); }
[data-theme="retro"] .banner-color-12, [data-theme="retro"] .chore-swatch.banner-color-12, [data-theme="retro"] .color-btn.banner-color-12 { background-color: var(--chore-12-bg); color: var(--chore-12-fg); }

[data-theme="retro"] .color-btn {
  border: 2px outset var(--border-alt);
}

[data-theme="retro"] .color-btn[aria-pressed="true"] {
  outline: 3px solid var(--focus);
}

/* ================================ Wizard =================================== */

[data-theme="retro"] .wizard-step {
  background-color: var(--surface);
  color: var(--text-muted);
  border: 2px solid var(--border-alt);
}

[data-theme="retro"] .wizard-step-active {
  background-color: var(--border);
  color: var(--bg);
  border-color: var(--border);
}

[data-theme="retro"] .member-row {
  background-color: var(--surface);
  border: 1px solid var(--border-alt);
  color: var(--text);
}

/* =========================== Schedule editor ============================= */

[data-theme="retro"] .sched-day {
  background-color: var(--surface);
  border: 2px solid var(--border-alt);
  color: var(--text);
}

[data-theme="retro"] .sched-day-name,
[data-theme="retro"] .sched-day-label { color: var(--focus); }

[data-theme="retro"] .sched-interval {
  background-color: #001a00;
  color: var(--accent);
  border: 1px solid var(--accent);
}

[data-theme="retro"] .sched-interval .sched-time-label,
[data-theme="retro"] .sched-interval .sched-interval-time { color: var(--accent); }

[data-theme="retro"] .check-row label { color: var(--text); }

/* ================================ Calendar =============================== */

[data-theme="retro"] .cal-weekday { color: var(--border-alt); }

[data-theme="retro"] .cal-day {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-alt);
  font-weight: bold;
}

[data-theme="retro"] .cal-day-today {
  border: 2px solid var(--focus);
}

[data-theme="retro"] .cal-day-outside {
  opacity: 0.5;
}

[data-theme="retro"] .cal-week-selected .cal-day {
  border-color: var(--focus);
}

[data-theme="retro"] .cal-banner {
  border: 1px solid var(--border-alt);
  font-weight: bold;
}

[data-theme="retro"] .cal-banner-unpin {
  background-color: var(--danger);
  color: var(--danger-text);
  border: 1px solid var(--border-alt);
}

[data-theme="retro"] .cal-more {
  background-color: var(--border);
  color: var(--bg);
}

[data-theme="retro"] .week-row {
  background-color: var(--surface);
  border: 1px solid var(--border-alt);
  color: var(--text);
}

[data-theme="retro"] .week-row-today {
  border-color: var(--focus);
}

[data-theme="retro"] .week-row-date { color: var(--focus); }

[data-theme="retro"] .month-nav-day {
  background-color: var(--surface);
  border: 1px solid var(--border-alt);
  color: var(--text);
}

[data-theme="retro"] .month-nav-selected {
  background-color: var(--focus);
  color: var(--surface);
  border-color: var(--focus);
}

[data-theme="retro"] .cal-bar.banner-color-1  { background-color: var(--chore-1-bg); }
[data-theme="retro"] .cal-bar.banner-color-2  { background-color: var(--chore-2-bg); }
[data-theme="retro"] .cal-bar.banner-color-3  { background-color: var(--chore-3-bg); }
[data-theme="retro"] .cal-bar.banner-color-4  { background-color: var(--chore-4-bg); }
[data-theme="retro"] .cal-bar.banner-color-5  { background-color: var(--chore-5-bg); }
[data-theme="retro"] .cal-bar.banner-color-6  { background-color: var(--chore-6-bg); }
[data-theme="retro"] .cal-bar.banner-color-7  { background-color: var(--chore-7-bg); }
[data-theme="retro"] .cal-bar.banner-color-8  { background-color: var(--chore-8-bg); }
[data-theme="retro"] .cal-bar.banner-color-9  { background-color: var(--chore-9-bg); }
[data-theme="retro"] .cal-bar.banner-color-10 { background-color: var(--chore-10-bg); }
[data-theme="retro"] .cal-bar.banner-color-11 { background-color: var(--chore-11-bg); }
[data-theme="retro"] .cal-bar.banner-color-12 { background-color: var(--chore-12-bg); }

/* ------------------------------ Week list ---------------------------------- */

[data-theme="retro"] .week-list-item {
  background-color: var(--surface);
  border: 2px solid var(--border-alt);
  color: var(--text);
}

[data-theme="retro"] .overdue-item {
  background-color: var(--surface);
  border: 2px solid var(--accent);
  color: var(--text);
}

[data-theme="retro"] .is-pinned {
  border-color: var(--accent);
}

[data-theme="retro"] .is-done {
  border-color: var(--text-muted);
  opacity: 0.7;
}

[data-theme="retro"] .is-done .week-item-title {
  text-decoration: line-through;
}

[data-theme="retro"] .is-placing {
  outline-color: var(--focus);
}

[data-theme="retro"] .week-item-pin,
[data-theme="retro"] .week-item-done {
  background-color: var(--surface);
  color: var(--accent);
  border: 2px outset var(--border);
}

[data-theme="retro"] .week-item-pin[aria-pressed="true"],
[data-theme="retro"] .week-item-done[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--accent-text);
  border-style: inset;
}

[data-theme="retro"] #pin-status { color: var(--focus); }

[data-theme="retro"] .fair-row + .fair-row {
  border-top: 1px solid var(--border-alt);
}

[data-theme="retro"] .fair-name { color: var(--text); }

[data-theme="retro"] .today-item {
  background-color: var(--surface);
  border: 1px solid var(--border-alt);
  color: var(--text);
}

[data-theme="retro"] .today-done {
  color: var(--text-muted);
  border-color: var(--text-muted);
}

[data-theme="retro"] .today-toggle {
  background-color: var(--surface);
  color: var(--accent);
  border: 2px outset var(--border);
}

[data-theme="retro"] .today-toggle[aria-pressed="true"] {
  background-color: var(--accent);
  color: var(--accent-text);
  border-style: inset;
}

/* ================================ Profile ================================= */

[data-theme="retro"] .profile-card {
  background-color: var(--surface);
}

[data-theme="retro"] .profile-app-link { color: var(--link); }

/* ================================= Toast ================================= */

[data-theme="retro"] .toast {
  border: 3px outset var(--border);
}

[data-theme="retro"] .toast-info { background-color: var(--toast-info-bg); color: var(--toast-info-fg); }
[data-theme="retro"] .toast-success { background-color: var(--toast-success-bg); color: var(--toast-success-fg); }
[data-theme="retro"] .toast-error { background-color: var(--toast-error-bg); color: var(--toast-error-fg); }

/* ============================ Compact widths ============================= */

@media (max-width: 700px) {
  [data-theme="retro"] #nav {
    border-top: 4px double var(--border-alt);
    border-bottom: 0;
    background-color: var(--surface-alt);
  }
  [data-theme="retro"] .nav-link {
    border: 0;
    background: none;
  }
  [data-theme="retro"] .nav-link[aria-current="page"] {
    background-color: var(--border);
    color: var(--bg);
  }
}

/* The count under a navigator day sits on the day button's own background,
   so it takes the button's colour, not the muted one. */
[data-theme="retro"] .month-nav-day .cal-count {
  color: inherit;
}