/* ==========================================================================
   Tansi Calendar — /calendar page  ("Refined Clarity" design system)
   --------------------------------------------------------------------------
   Driven by the same design-system variables as crm.css (--card-bg,
   --card-border, --shadow-card, --radius-*, --text-*) plus the platform
   accent (light #0A728F / dark #4ACEF2). Light/dark handled automatically
   via the .mud-theme-light / .mud-theme-dark ancestor classes, same
   convention crm.css uses.

   Category color: the TansiCalendar accent palette (.cal-acc-*, defined in
   the TansiCalendar section below) is the ONLY calendar palette — grid
   chips, rail category rows, and the Upcoming panel all speak it.
   CalendarCssContrast_Tests parses this file (single source of truth; C#
   carries no hex values) and fails the build on any pair below WCAG AA.
   The legacy per-category cal-cat-*/cal-tag-*/cal-dot-* palette was retired
   when the Upcoming panel moved onto accents.
   ========================================================================== */

.calendar-page {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --------------------------------------------------------------------------
   Upcoming panel — sidebar list of the next 8 items in the next 14 days.
   Each card carries a .cal-acc-* accent class (measured tint background +
   accent ink, same pairs the grid chips and rail rows use); the left edge
   and the .ccode chip inherit the ink via currentColor, and the title/when
   lines re-pin to neutral text tokens — the same layering the .ev chip uses.
   Cascade rule: never declare a border-left SHORTHAND or a background on
   .cal-upcoming-item — the accent class supplies both colors.
   -------------------------------------------------------------------------- */
.calendar-page .cal-upcoming {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-page .cal-upcoming-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-left-width: 3px;
    border-left-style: solid; /* border-left-color defaults to currentColor = the accent ink */
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font: inherit;
    cursor: pointer;
}

.calendar-page .cal-upcoming-cat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-page .cal-upcoming-catlabel {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase; /* color: inherited accent ink */
}

.calendar-page .cal-upcoming-title {
    font-weight: 600;
    font-size: 13px;
    margin-top: 2px;
    color: var(--text-heading);
}

.calendar-page .cal-upcoming-when {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-caption);
}

.calendar-page .cal-upcoming-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.calendar-page .cal-upcoming-new {
    align-self: flex-start;
    border: 1px solid var(--card-border);
    background: transparent;
    color: #0A728F;
    font: inherit;
    font-weight: 600;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    cursor: pointer;
}

.mud-theme-dark .calendar-page .cal-upcoming-new {
    color: #4ACEF2;
}

.calendar-page .cal-upcoming-item:focus-visible,
.calendar-page .cal-upcoming-new:focus-visible {
    outline: 2px solid #0A728F;
    outline-offset: 2px;
}

.mud-theme-dark .calendar-page .cal-upcoming-item:focus-visible,
.mud-theme-dark .calendar-page .cal-upcoming-new:focus-visible {
    outline-color: #4ACEF2;
}

/* --------------------------------------------------------------------------
   Mini month calendar (Task 8 wiring; component built in Task 3) — first
   .railsect in TansiCalendar's RailContent (CalendarPage.razor), jumps the
   main surface's date without changing its current view.
   -------------------------------------------------------------------------- */
.calendar-page .cal-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.calendar-page .cal-mini-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.calendar-page .cal-mini-prev,
.calendar-page .cal-mini-next {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.1rem;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.calendar-page .cal-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.calendar-page .cal-mini-dow {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.7;
    padding: 2px 0;
}

.calendar-page .cal-mini-day {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    min-height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.calendar-page .cal-mini-outside { opacity: 0.35; }

.calendar-page .cal-mini-today { box-shadow: inset 0 0 0 2px #0A728F; }

.calendar-page .cal-mini-selected {
    background: #0A728F;
    color: #FFFFFF;
    opacity: 1;
}

.mud-theme-dark .calendar-page .cal-mini-today { box-shadow: inset 0 0 0 2px #4ACEF2; }

.mud-theme-dark .calendar-page .cal-mini-selected {
    background: #4ACEF2;
    color: #0B1120;
}

.calendar-page .cal-mini-prev:focus-visible,
.calendar-page .cal-mini-next:focus-visible,
.calendar-page .cal-mini-day:focus-visible {
    outline: 2px solid #0A728F;
    outline-offset: 2px;
}

.mud-theme-dark .calendar-page .cal-mini-prev:focus-visible,
.mud-theme-dark .calendar-page .cal-mini-next:focus-visible,
.mud-theme-dark .calendar-page .cal-mini-day:focus-visible {
    outline-color: #4ACEF2;
}

/* --------------------------------------------------------------------------
   Current-time indicator (Task 10; re-targeted at TansiCalendar's Day view in
   Task 16) — a thin horizontal line positioned by
   window.tansiCalendar.startNowLine() (wwwroot/js/calendar.js), appended
   inside the current hour's ".dayv .hcell[data-day][data-hour]" (that cell
   is given position: relative by the JS, which is what left/right/top below
   resolve against), re-computed every 60s. Purely a JS-positioned element;
   this block only supplies its look.
   -------------------------------------------------------------------------- */
.calendar-page .cal-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #0A728F;
    pointer-events: none;
    z-index: 3;
}

.calendar-page .cal-now-line::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0A728F;
}

.mud-theme-dark .calendar-page .cal-now-line,
.mud-theme-dark .calendar-page .cal-now-line::before {
    background: #4ACEF2;
}

/* Now-line time chip — small pill anchored to the line's left edge, textContent set by
   calendar.js's paint() on every tick (h:mm AM/PM, the browser's own local time formatting via
   toLocaleTimeString). Lives inside .cal-now-line (its own position: absolute parent, which is
   what the chip's own position: absolute resolves against), and both are recreated from scratch
   on every tick (paint() removes any existing ".dayv .cal-now-line"/".cal-now-chip" first), so no
   reparent/update bookkeeping is needed here. */
.calendar-page .cal-now-chip {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #0A728F;
    color: #FFFFFF;
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}

.mud-theme-dark .calendar-page .cal-now-chip {
    background: #4ACEF2;
    color: #0B1120;
}

/* --------------------------------------------------------------------------
   Motion + a11y
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .calendar-page * {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   TansiCalendar (v2 redesign) — CSS foundation (Task 2 of the calendar rebuild)
   --------------------------------------------------------------------------
   Everything below is a from-scratch custom component (NOT Radzen). It HAS
   replaced the old Radzen scheduler: those .rz-* sections are gone, and what
   survives above is only the shared page chrome the rewrite still uses (the
   .calendar-page shell, the Upcoming panel — now on the accent palette
   below — and the now-line chip). Transliterated from
   tansi-calendar-v2.html (the
   accessibility-audited mockup), lines 1392-1763, token-mapped onto this
   app's EXISTING design-system variables so light/dark keep working via the
   .mud-theme-dark ancestor convention this whole codebase already uses (no
   [data-theme], unlike the mockup).

   Mockup token -> app value used throughout this section:
     --surface        -> var(--card-bg)
     --surface-2      -> var(--mud-palette-background-gray)   (MudBlazor's own
                         muted-panel grey; already the "surface-2" used
                         everywhere else — crm.css, workflow-builder.css, …)
                         SPELLING: MudThemeProvider emits this one American —
                         "gray", from Palette.BackgroundGray. The British
                         "-grey" is not a token MudBlazor defines, so it
                         resolves to nothing and every surface using it falls
                         back to transparent. Do not "correct" it.
     --surface-3      -> --tcal-surface-3, defined once on .tcal below as
                         color-mix(in srgb, var(--mud-palette-background-gray)
                         78%, var(--card-hover-border) 22%) — no ready-made
                         second-tier "muted surface" token exists app-wide, so
                         this derives one from two that DO, the same
                         color-mix technique ui.css already uses elsewhere.
     --border         -> var(--card-border)
     --border-strong  -> var(--card-hover-border)   (crm.css's own "stronger
                         border" step — same tokens, used the same way, e.g.
                         crm.css's .pport-* rules)
     --text           -> var(--text-heading)   \
     --text-2         -> var(--text-body)        }  the REAL theme-reactive
     --text-3         -> var(--text-caption)   /   text trio (app.css, under
                         .mud-theme-light/.mud-theme-dark) that crm.css
                         actually uses everywhere. NOT --text-primary/
                         --text-secondary/--text-muted (app.css:10-12) —
                         those three are declared once at :root with no dark
                         override and are referenced nowhere else in the
                         repo (verified via repo-wide grep); using them here
                         would print dark-grey ink on dark-theme surfaces.
     --primary        -> var(--mud-palette-primary)
     --primary-ink    -> var(--primary-ink)     — already real, GLOBAL app.css
     --primary-soft   -> var(--primary-soft)       tokens, byte-for-byte the
     --on-primary     -> var(--on-primary)         same hex the mockup uses
                         for these three (both light AND dark) — confirms the
                         mockup's token system was measured against this same
                         palette.
     --danger / --danger-soft, --warn-ink / --warn-soft, --success /
     --success-soft, --teal-ink / --teal-soft, --violet-ink / --violet-soft
                      -> var(--danger-ink)/var(--danger-soft), var(--warn-ink)/
                         var(--warn-soft), var(--success-ink)/var(--success-soft),
                         var(--teal-ink)/var(--teal-soft), var(--violet-ink)/
                         var(--violet-soft) — app.css defines this EXACT
                         semantic set already (its own header comment notes
                         each ratio was measured), just named "-ink" instead
                         of the mockup's bare state name.
     --field-border   -> var(--mud-palette-lines-inputs)  (this app's existing
                         input-border convention — workflow-builder.css,
                         requests.css, timetracker.css, naics-picker.css)
     --radius         -> var(--radius-sm, 10px)
     --radius-lg      -> var(--radius-md, 14px)
     --focus          -> var(--mud-palette-primary), 3px solid (unchanged)

   Category-color mechanism: the mockup's per-category .ev--delivery /
   .ccode--delivery / .evhead--delivery modifier rules are DROPPED entirely.
   Instead the chip/head root carries ONE of the 8 .cal-acc-* classes below
   (background = tint, color = ink); .evbar / .ev .ccode / .evhead pick the
   ink up via currentColor (plain CSS inheritance — none of them declare
   their own `color`), while .evtitle/.evsub/.evtime explicitly reset back
   to the neutral text tokens, so only the bar / code-border / head-edge /
   state-pill ever carry the accent hue, never the chip's own fill or body
   copy. See the "accent palette" + "accent consumption" blocks at the end
   of this section for the cascade-order contract this depends on.
   ========================================================================== */

.tcal {
    --tcal-surface-3: color-mix(in srgb, var(--mud-palette-background-gray) 78%, var(--card-hover-border) 22%);
    color: var(--text-heading);
}

/* -------------------------------------------------------------- header -- */
.tcal-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; margin: 0 0 16px; }
.tcal-head h1 { margin: 0; font-size: 26px; }
.tcal-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.tcal-count { font-size: 14px; font-weight: 400; color: var(--text-body); white-space: nowrap; }
.tcal-head-r { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tcal-nav { display: flex; align-items: center; gap: 6px; }
.tcal-arrow { width: 40px; height: 40px; border: 1px solid var(--card-hover-border); border-radius: 10px; background: var(--card-bg); color: var(--text-heading); }
.tcal-arrow:hover { border-color: var(--mud-palette-primary); color: var(--primary-ink); }
.tcal-arrow:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Today button — same button language as .tcal-arrow (border/radius/surface/hover/focus), just
   wider to fit its label + the visually-hidden date suffix. */
.tcal-today { height: 40px; padding: 0 16px; border: 1px solid var(--card-hover-border); border-radius: 10px; background: var(--card-bg); color: var(--text-heading); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.tcal-today:hover { border-color: var(--mud-palette-primary); color: var(--primary-ink); }
.tcal-today:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Keyboard-shortcuts button — same quiet chrome as .tcal-today, sits at the end of .tcal-head-r. */
.tcal-kbdbtn { height: 40px; padding: 0 14px; border: 1px solid var(--card-hover-border); border-radius: 10px; background: var(--card-bg); color: var(--text-heading); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.tcal-kbdbtn:hover { border-color: var(--mud-palette-primary); color: var(--primary-ink); }
.tcal-kbdbtn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* View switcher — a radio group (border + weight + name), not just a tint. */
.tcal-views { display: flex; gap: 2px; padding: 3px; background: var(--mud-palette-background-gray); border: 1px solid var(--card-hover-border); border-radius: 12px; }
.tcal-view { min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text-body); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.tcal-view:hover { color: var(--text-heading); background: var(--card-bg); }
.tcal-view:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.tcal-view.is-on { background: var(--card-bg); border-color: var(--mud-palette-primary); color: var(--primary-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }

/* -------------------------------------------------------------- layout -- */
.callayout { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 18px; align-items: start; }
.calrail { display: grid; gap: 14px; min-width: 0; }
.calmain { min-width: 0; }

/* ---------------------------------------------------------- rail: shell -- */
.railsect { padding: 14px 15px; background: var(--card-bg); border: 1px solid var(--card-hover-border); border-radius: var(--radius-md, 14px); }
.railhead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
/* margin-right:auto keeps the Show all / Hide all pair clustered on the right — with three
   space-between children the first button would otherwise float mid-row. */
.railhead h2 { margin: 0 auto 0 0; font-size: 15px; }
.railh { margin: 0 0 8px; font-size: 15px; }
/* "Show all" — a quiet reset next to the Categories heading, not a primary action. */
.tcal-catall { min-height: 32px; padding: 0 10px; border: 1px solid var(--card-hover-border); border-radius: 9px; background: none; color: var(--primary-ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tcal-catall:hover { background: var(--mud-palette-background-gray); }
.tcal-catall:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.railsearchlbl { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-body); margin-bottom: 6px; }
.railsearch { display: flex; align-items: center; gap: 8px; padding: 0 10px; min-height: 42px; border: 1.5px solid var(--mud-palette-lines-inputs); border-radius: var(--radius-sm, 10px); background: var(--mud-palette-background-gray); }
.railsearch svg { flex: none; color: var(--text-body); }
.railsearch input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: none; color: var(--text-heading); font: inherit; font-size: 14px; }
.railsearch input:focus { outline: none; }
.railsearch:focus-within { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ------------------------------------------------ rail: collapsible cats -- */
.catgroup { border-top: 1px solid var(--card-border); }
.catgroup:first-child { border-top: none; }
.catgh { margin: 0; }
.catgb { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--text-heading); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-align: left; }
.catgb:hover { color: var(--primary-ink); }
.catgb:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -2px; border-radius: 8px; }
.cgchev { flex: none; transition: transform .15s ease; color: var(--text-body); }
.catgb[aria-expanded="false"] .cgchev { transform: rotate(-90deg); }
.cgname { flex: 1; min-width: 0; }
.cgmeta { font-size: 11.5px; font-weight: 700; color: var(--text-body); }
.cgn { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--tcal-surface-3); color: var(--text-body); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cglist { padding: 0 0 10px; }
.cglist[hidden] { display: none; }
.cgd { margin: 0 0 8px; font-size: 12px; color: var(--text-body); line-height: 1.5; }
.catrow { display: flex; align-items: flex-start; gap: 9px; padding: 7px 6px; border-radius: 9px; cursor: pointer; }
.catrow:hover { background: var(--mud-palette-background-gray); }
.catrow input[type="checkbox"] { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--mud-palette-primary); cursor: pointer; }
.catrow input:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.cname { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.cdesc { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--text-body); line-height: 1.45; }
.cnum { flex: none; font-size: 12px; font-weight: 800; color: var(--text-body); font-variant-numeric: tabular-nums; padding-top: 2px; }
.catrow--src .cname { font-weight: 700; }

/* The code chip — the channel that is not colour. Shape only here (no color):
   omitting a color from the `border` shorthand already defaults it to
   currentColor per the CSS spec, so a bare .ccode (no .cal-acc-* on an
   ancestor) still renders a sane neutral-ink border via inheritance. */
.ccode { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 20px; padding: 0 6px; border-radius: 5px; border: 1px solid; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; flex: none; }

.srcwarn:empty { display: none; }
.srcwarn { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--warn-ink); border-left: 4px solid var(--warn-ink); border-radius: var(--radius-sm, 10px); background: var(--warn-soft); }
.srcwarn p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-heading); }
.srcwarnact { margin-top: 8px !important; }

/* ------------------------------------------------------------- overdue -- */
.odue { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--danger-ink); border-left: 4px solid var(--danger-ink); border-radius: var(--radius-md, 14px); background: var(--danger-soft); }
.oduehead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.oduehead h2 { margin: 0; font-size: 15px; color: var(--danger-ink); display: flex; align-items: center; gap: 8px; }
/* Count pill inside the "Overdue" heading — the danger-ink/danger-soft pair used directly (no
   .mud-theme-dark override needed, same convention as .evst--overdue below), just with the
   roles swapped from how that rule uses them (ink as the fill, soft as the text) so the pill
   reads as a solid badge rather than a tinted card. Contrast is symmetric in the two colors, so
   this passes AA in both themes exactly like the ink-on-soft pairing already does. */
.odn { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--danger-ink); color: var(--danger-soft); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Show/Hide toggle — a quiet button, not competing with the danger-toned section around it. */
.tcal-oduetoggle { min-height: 32px; padding: 0 12px; border: 1px solid var(--card-hover-border); border-radius: 9px; background: var(--card-bg); color: var(--text-body); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tcal-oduetoggle:hover { color: var(--text-heading); border-color: var(--mud-palette-primary); }
.tcal-oduetoggle:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.oduelist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.oduelist[hidden] { display: none; }
.odbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 11px; border: 1px solid var(--card-hover-border); border-radius: 10px; background: var(--card-bg); color: var(--text-heading); font: inherit; text-align: left; cursor: pointer; }
.odbtn:hover { border-color: var(--danger-ink); }
.odbtn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.odtext { flex: 1; min-width: 0; }
.odtitle { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.35; }
.odmeta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-body); }
.odlate { flex: none; font-size: 12px; font-weight: 800; color: var(--danger-ink); white-space: nowrap; }

.calkbd { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-body); max-width: 96ch; }
.calkbd kbd, .tcal-kbdtable kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--card-hover-border); border-bottom-width: 2px; border-radius: 5px; background: var(--mud-palette-background-gray); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.callegend { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-body); max-width: 96ch; }
.calnone { margin: 0; padding: 26px 20px; text-align: center; font-size: 14px; color: var(--text-body); border: 1px dashed var(--card-hover-border); border-radius: var(--radius-md, 14px); background: var(--card-bg); }

/* ---------------------------------------------------------- the surface -- */
.tcal-surface { min-width: 0; }
.wk, .mth, .dayv { border: 1px solid var(--card-hover-border); border-radius: var(--radius-md, 14px); background: var(--card-bg); overflow: hidden; }
.wkhead, .wkbody, .mrow, .mhead { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.wkdh, .mdh { padding: 9px 10px; background: var(--mud-palette-background-gray); border-bottom: 2px solid var(--card-hover-border); border-left: 1px solid var(--card-border); text-align: center; }
.wkdh:first-child, .mdh:first-child { border-left: none; }
.wkdow { display: block; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-body); }
.wkdd { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.wkdm { display: block; font-size: 11px; color: var(--text-body); }
.wkdh.is-today { background: var(--primary-soft); }
.wkdh.is-today .wkdd, .wkdh.is-today .wkdow, .wkdh.is-today .wkdm { color: var(--primary-ink); }
/* var(--on-primary) is already dark-aware (app.css), so unlike the mockup's
   hardcoded #fff + a [data-theme="dark"] override, one declaration covers
   both themes here — same simplification applied to .agtoday and
   .cellnum.is-today below. */
.wktoday { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 99px; background: var(--mud-palette-primary); color: var(--on-primary); font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.mdh { padding: 7px 10px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-body); }

.cell { min-height: 132px; padding: 8px; border-left: 1px solid var(--card-border); border-top: 1px solid var(--card-border); background: var(--card-bg); }
.wkbody .cell { border-top: none; min-height: 220px; }
.cell:first-child { border-left: none; }
.cell.is-today { background: var(--primary-soft); }
.cell.is-dim { background: var(--mud-palette-background-gray); }
.cell.is-dim .cellnum { color: var(--text-caption); }
.cell:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.cellnum { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 6px; margin-bottom: 5px; border-radius: 8px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-body); }
.cellnum.is-today { background: var(--mud-palette-primary); color: var(--on-primary); }
.cellevs { display: grid; gap: 5px; }
.cellempty { font-size: 12px; color: var(--text-caption); }

/* Dense mode (compact week/month grids) — later view tasks toggle this on
   .tcal to shrink day-cell height when a page needs more rows on screen. */
.tcal--dense .cell { min-height: 84px; }

/* an event: a real button, with a code, a time, a title and a state */
.ev { display: flex; gap: 0; width: 100%; min-height: 44px; padding: 0; border: 1px solid var(--card-hover-border); border-radius: 9px; background: var(--card-bg); color: var(--text-heading); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.ev:hover { border-color: var(--mud-palette-primary); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.ev:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.evbar { flex: none; width: 5px; }
.evmain { flex: 1; min-width: 0; padding: 7px 9px; }
.evtop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.evtime { font-size: 11px; font-weight: 800; color: var(--text-body); font-variant-numeric: tabular-nums; }
.evunv { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--warn-ink); border: 1px solid var(--warn-ink); border-radius: 4px; padding: 0 4px; background: var(--warn-soft); }
.evtitle { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; color: var(--text-heading); }
.evsub { display: block; margin-top: 2px; font-size: 11px; color: var(--text-body); }
.ev--dl .evtitle { font-weight: 800; }
.ev--big { min-height: 56px; }
.ev--big .evtitle { font-size: 13.5px; }
.evst { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; border: 1px solid; }
.evst--overdue { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-ink); }
.evst--risk { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-ink); }
.evst--due { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--mud-palette-primary); }
.evst--progress { background: var(--teal-soft); color: var(--teal-ink); border-color: var(--teal-ink); }
.evst--done { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-ink); }
.evst--info { background: var(--tcal-surface-3); color: var(--text-body); border-color: var(--card-hover-border); }
.evmore { min-height: 32px; padding: 4px 9px; border: 1px dashed var(--card-hover-border); border-radius: 8px; background: none; color: var(--text-body); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.evmore:hover { border-color: var(--mud-palette-primary); color: var(--primary-ink); }
.evmore:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ----------------------------------------------------------- day view ---- */
.dayband { display: grid; grid-template-columns: 110px minmax(0, 1fr); border-bottom: 2px solid var(--card-hover-border); background: var(--mud-palette-background-gray); }
.daybandh { padding: 12px 12px; font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-body); }
.daybandc { padding: 10px 12px; display: grid; gap: 6px; background: var(--card-bg); }
.daybandc:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.hrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); border-top: 1px solid var(--card-border); }
.hlbl { padding: 10px 12px; font-size: 12px; font-weight: 700; color: var(--text-body); font-variant-numeric: tabular-nums; background: var(--mud-palette-background-gray); }
.hcell { padding: 8px 12px; min-height: 46px; display: grid; gap: 6px; align-content: start; }
.hcell:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.hrow.has-ev .hlbl { color: var(--text-heading); }

/* ----------------------------------------------------------- agenda ------ */
.agwrap { overflow: auto; contain: paint; border: 1px solid var(--card-hover-border); border-radius: var(--radius-md, 14px); background: var(--card-bg); }
.agwrap:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.agtable { width: 100%; min-width: 1040px; border-collapse: collapse; font-size: 13.5px; }
.agtable th, .agtable td { padding: 10px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--card-border); }
.agtable thead th { position: sticky; top: 0; z-index: 2; background: var(--mud-palette-background-gray); border-bottom: 2px solid var(--card-hover-border); font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-body); white-space: nowrap; }
.agdayrow th { background: var(--tcal-surface-3); font-size: 13px; font-weight: 800; border-bottom: 1px solid var(--card-hover-border); text-transform: none; letter-spacing: normal; }
.agday.is-today .agdayrow th { background: var(--primary-soft); color: var(--primary-ink); }
.agtoday { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--mud-palette-primary); color: var(--on-primary); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.agn { float: right; font-size: 11.5px; font-weight: 700; color: var(--text-body); }
.agtable tbody th { font-weight: 400; text-transform: none; letter-spacing: normal; }
.agwhen { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.aglink { padding: 4px 6px; margin: -4px -6px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--text-heading); font: inherit; font-size: 13.5px; font-weight: 800; text-align: left; cursor: pointer; min-height: 24px; }
.aglink:hover { border-color: var(--mud-palette-primary); color: var(--primary-ink); }
.aglink:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.agrec { display: block; font-weight: 800; font-size: 12.5px; }
.agrect { display: block; font-size: 11.5px; color: var(--text-body); }
.agnone { color: var(--text-caption); }

/* ---------------------------------------------------------------- year -- */
/* Year view has no mockup counterpart (the audited mockup only ships Day /
   Week / Month / Agenda) — this is a new minimal shell, built from the SAME
   tokens as everything above, for the later Year-view task to extend. */
.tcal-year { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tcal-ymonth { background: var(--card-bg); border: 1px solid var(--card-hover-border); border-radius: var(--radius-md, 14px); padding: 12px; min-width: 0; }

/* Month-name button — quiet, month-name weight, opens Month view at that month's 1st. */
.tcal-ymonth-name { display: block; width: 100%; margin: 0 0 8px; padding: 4px 2px; border: 0; background: none; color: var(--text-heading); font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
.tcal-ymonth-name:hover { color: var(--primary-ink); }
.tcal-ymonth-name:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 6px; }

/* Mini month grid — 7 columns like .cal-mini-grid (upcoming-panel's own mini calendar), scaled
   down further to fit 12-up in .tcal-year. */
.tcal-ymini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.tcal-ymini-dow { font-size: 10px; font-weight: 700; opacity: .65; padding: 2px 0; }
.tcal-ymini-pad { display: block; }
.tcal-ymini-day { position: relative; border: 0; background: transparent; color: inherit; font: inherit; font-size: 11px; min-height: 26px; border-radius: 50%; cursor: pointer; }
.tcal-ymini-day:hover { background: var(--mud-palette-background-gray); }
.tcal-ymini-day:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
/* Density dot — a day that has at least one event, drawn via ::after so it never competes with
   the day number's own text. */
.tcal-ymini-day.has-ev::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--mud-palette-primary); transform: translateX(-50%); }
.tcal-ymini-day.is-today { box-shadow: inset 0 0 0 2px var(--mud-palette-primary); font-weight: 800; }

/* ------------------------------------------------------------- dialogs --- */
dialog .kbox { display: flex; flex-direction: column; width: min(560px, 92vw); max-height: 88vh; background: var(--card-bg); border: 1px solid var(--card-hover-border); border-radius: var(--radius-md, 14px); box-shadow: 0 24px 60px rgba(16, 24, 40, .28); overflow: hidden; }
.mud-theme-dark dialog .kbox { box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
dialog:focus { outline: none; }
dialog:focus .kbox { outline: 3px solid var(--mud-palette-primary); outline-offset: 3px; }
dialog .khead { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--card-border); background: var(--mud-palette-background-gray); }
dialog .khead h2 { margin: 0; font-size: 18px; font-weight: 800; }
dialog .khead h2:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 3px; border-radius: 4px; }
dialog .khead .iconbtn { margin-left: auto; flex: none; }
dialog .kbody { padding: 18px 20px; overflow-y: auto; overflow-x: hidden; }
dialog .kfoot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--card-border); background: var(--mud-palette-background-gray); }
.lndlgspacer { flex: 1 1 auto; }
.lndlgsub { margin: 4px 0 0; font-size: 13px; color: var(--text-body); }

dialog .evbox { width: min(660px, 94vw); }
/* .evhead's accent edge is set once, far below, in the "accent consumption"
   block (border-left-color: currentColor) — width/style only here so a
   later shorthand `border-left` can never silently reset that color. */
.evhead { border-left-width: 5px; border-left-style: solid; }
.evheadtext { min-width: 0; }
.evkind { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 5px; font-size: 12px; font-weight: 700; color: var(--text-body); }
.evrec { font-weight: 800; color: var(--text-heading); }
.evwhen { margin: 6px 0 0; font-size: 13.5px; color: var(--text-body); }
.evsts { font-size: 12.5px; }
.evbody { background: var(--mud-palette-background-gray); }
.evwarn { margin: 0 0 12px; padding: 11px 13px; border: 1px solid var(--warn-ink); border-left: 4px solid var(--warn-ink); border-radius: var(--radius-sm, 10px); background: var(--warn-soft); font-size: 13px; line-height: 1.6; }
.evdetail { margin: 0 0 14px; font-size: 14px; line-height: 1.65; max-width: 70ch; }
.evprog { margin: 0 0 14px; padding: 11px 13px; background: var(--card-bg); border: 1px solid var(--card-hover-border); border-radius: var(--radius-sm, 10px); }
.evproghead { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.evproglbl { font-size: 12px; font-weight: 800; }
.evprogval { font-size: 12.5px; color: var(--text-body); font-variant-numeric: tabular-nums; }
.evprogbar { margin-top: 8px; height: 10px; border-radius: 99px; background: var(--tcal-surface-3); border: 1px solid var(--card-border); overflow: hidden; }
.evprogbar > span { display: block; height: 100%; background: var(--mud-palette-primary); border-radius: 99px; }
.evmeta { margin: 0; display: grid; gap: 0; }
.evmeta > div { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--card-border); }
.evmeta > div:first-child { border-top: none; }
.evmeta dt { flex: 0 0 34%; min-width: 130px; font-size: 12.5px; color: var(--text-body); }
.evmeta dd { flex: 1 1 55%; margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.evmeta dd a { display: inline-block; padding: 4px 5px; margin: -4px -5px; border-radius: 6px; min-height: 24px; line-height: 16px; }
.evfoot { justify-content: flex-start; }

/* ------------------------------------------------------------ new event -- */
dialog .newbox { width: min(760px, 95vw); }
.newbody { background: var(--mud-palette-background-gray); }
.newkind { margin: 0 0 16px; padding: 0; border: 0; }
.newkind legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 800; }
.kindgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.kindopt { display: block; position: relative; padding: 11px 13px 11px 42px; background: var(--card-bg); border: 1.5px solid var(--card-hover-border); border-radius: var(--radius-sm, 10px); cursor: pointer; }
.kindopt:hover { border-color: var(--mud-palette-primary); }
.kindopt.is-on { border-color: var(--mud-palette-primary); background: var(--primary-soft); }
.kindopt input { position: absolute; left: 11px; top: 12px; width: 24px; height: 24px; margin: 0; accent-color: var(--mud-palette-primary); cursor: pointer; }
.kindopt input:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.kindl { display: block; font-size: 13.5px; font-weight: 800; }
.kindd { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-body); line-height: 1.45; }
#kind-note { margin: 8px 0 0; }
.newgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; margin-top: 4px; }
.nf { min-width: 0; }
.nf--wide { grid-column: 1 / -1; }
.nf .lbl { margin-bottom: 5px; }
.nf label { font-size: 12.5px; font-weight: 800; }
.nf input, .nf select, .nf textarea { width: 100%; min-height: 42px; padding: 9px 11px; font: inherit; font-size: 14px; border: 1.5px solid var(--mud-palette-lines-inputs); border-radius: var(--radius-sm, 10px); background: var(--card-bg); color: var(--text-heading); color-scheme: light; }
.mud-theme-dark .nf input, .mud-theme-dark .nf select, .mud-theme-dark .nf textarea { color-scheme: dark; }
.nf textarea { min-height: 70px; resize: vertical; }
.nf input:focus-visible, .nf select:focus-visible, .nf textarea:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.nf .note { margin: 5px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-body); }
.newfoot { align-items: center; }
.newsum { margin: 0; font-size: 12.5px; color: var(--text-body); line-height: 1.45; min-width: 0; }
.newsum b { display: block; font-size: 14px; color: var(--text-heading); overflow-wrap: anywhere; }
.errsum { margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--danger-ink); border-left: 4px solid var(--danger-ink); border-radius: var(--radius-sm, 10px); background: var(--danger-soft); }
.errsum[hidden] { display: none; }
.errsum:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.errsum h3 { margin: 0 0 6px; font-size: 14px; color: var(--danger-ink); }
.errsum ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.errsum li { font-size: 13px; line-height: 1.55; }
.errsum a { color: var(--text-heading); }

dialog .daybox { width: min(620px, 94vw); }
.daylist { display: grid; gap: 8px; }

/* --------------------------------------------------------- inline overlays (Task 19) -----
   TansiCalendar's day-overflow (.tcal-daydlg) and shortcuts (.tcal-kbddlg) dialogs are plain
   `role="dialog"` divs, not <dialog>/<MudDialog> — no separate backdrop element in the markup.
   Both fake a centered, dimmed overlay from ONE element: fixed + centered via
   top/left/transform, "surface panel" look via the same card-bg/border/radius/shadow tokens
   the mockup's `dialog .kbox` block (above) already uses, and the "fixed inset-0 backdrop" via
   the classic 100vmax box-shadow trick stacked onto the panel's own drop shadow — no extra DOM,
   no extra stacking context to manage. */
.tcal-daydlg, .tcal-kbddlg {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1300;
    width: min(620px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 20px 22px;
    background: var(--card-bg);
    border: 1px solid var(--card-hover-border);
    border-radius: var(--radius-md, 14px);
    transform: translate(-50%, -50%);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .28), 0 0 0 100vmax rgba(16, 24, 40, .45);
}
.mud-theme-dark .tcal-daydlg, .mud-theme-dark .tcal-kbddlg {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 100vmax rgba(0, 0, 0, .65);
}
.tcal-daydlg:focus-visible, .tcal-kbddlg:focus-visible { outline: none; }
.tcal-daydlg h2, .tcal-kbddlg h2 { margin: 0 0 12px; font-size: 17px; font-weight: 800; }

.tcal-daydlg-actions, .tcal-kbddlg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tcal-kbddlg-actions { justify-content: flex-end; }
/* .tcal-kbddlg-close is the shortcuts dialog's own close button, styled by the same shared rule
   as .tcal-daydlg-close (day-overflow's) rather than reusing that class directly. */
.tcal-daydlg-close, .tcal-kbddlg-close, .tcal-daydlg-open { min-height: 40px; padding: 0 16px; border-radius: 10px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.tcal-daydlg-close, .tcal-kbddlg-close { border: 1px solid var(--card-hover-border); background: var(--card-bg); color: var(--text-heading); }
.tcal-daydlg-close:hover, .tcal-kbddlg-close:hover { border-color: var(--mud-palette-primary); color: var(--primary-ink); }
.tcal-daydlg-open { border: 1px solid var(--mud-palette-primary); background: var(--mud-palette-primary); color: var(--on-primary); }
.tcal-daydlg-open:hover { opacity: .92; }
.tcal-daydlg-close:focus-visible, .tcal-kbddlg-close:focus-visible, .tcal-daydlg-open:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Shortcuts table — the keys/action rows from the mockup's keyboard-help panel. */
.tcal-kbdtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.tcal-kbdtable th, .tcal-kbdtable td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--card-border); }
.tcal-kbdtable thead th { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-body); }
.tcal-kbdtable td:first-child { white-space: nowrap; }

/* --------------------------------------------------------- breakpoints --- */
@media (max-width: 1080px) {
    .callayout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .wkhead, .wkbody { grid-template-columns: repeat(7, minmax(96px, 1fr)); min-width: 700px; }
    .tcal-surface .wk { overflow-x: auto; contain: paint; }
    .mrow, .mhead { grid-template-columns: repeat(7, minmax(74px, 1fr)); min-width: 540px; }
    .tcal-surface .mth { overflow-x: auto; contain: paint; }
}

@media (max-width: 620px) {
    .tcal-head-r { width: 100%; }
    .tcal-views { width: 100%; flex-wrap: wrap; }
    .tcal-view { flex: 1 1 88px; min-width: 0; }
    .dayband, .hrow { grid-template-columns: 82px minmax(0, 1fr); }
    .evmeta dt { flex: 1 1 100%; }
}

/* --------------------------------------------------------------- a11y ---- */
@media (prefers-reduced-motion: reduce) {
    .tcal *, .tcal *::before, .tcal *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    .tcal-arrow, .tcal-view, .ev, .evst, .ccode, .odbtn, .evmore, .kindopt, .aglink,
    .tcal-today, .tcal-kbdbtn, .tcal-oduetoggle, .tcal-daydlg-close, .tcal-kbddlg-close, .tcal-daydlg-open,
    .tcal-ymonth-name, .tcal-ymini-day, .tcal-daydlg, .tcal-kbddlg {
        border: 1px solid ButtonBorder;
    }
}

/* --------------------------------------------------------------------------
   Accent palette — 8 generic accents (SINGLE SOURCE OF TRUTH for the new
   TansiCalendar; TansiCalendarFormat.AccentClass, Task 1, returns one of
   these 8 class names per category/source). Convention: unscoped
   ".cal-acc-*" for light, one
   background/color pair, and ".mud-theme-dark .cal-acc-*" for dark.
   CalendarCssContrast_Tests parses this file and fails the build if any
   pair drops below WCAG AA 4.5:1 — keep one selector per line and
   six-digit hex, the test's regex depends on this shape. All 16 pairs were
   measured before shipping (see task-2-report.md); none needed darkening.
   -------------------------------------------------------------------------- */
.cal-acc-cyan { background: #e4f6fb; color: #09637c; }
.cal-acc-teal { background: #e2f8f4; color: #0d775d; }
.cal-acc-green { background: #e7f6ee; color: #0f7b46; }
.cal-acc-amber { background: #fdf3e2; color: #8a5300; }
.cal-acc-red { background: #fdecea; color: #b42318; }
.cal-acc-violet { background: #f5eeff; color: #6b21a8; }
.cal-acc-pink { background: #fdeef6; color: #a3196b; }
.cal-acc-slate { background: #eef1f5; color: #4a5462; }

.mud-theme-dark .cal-acc-cyan { background: #12363f; color: #5dd3f3; }
.mud-theme-dark .cal-acc-teal { background: #153731; color: #6ce5cd; }
.mud-theme-dark .cal-acc-green { background: #12281d; color: #4ed08c; }
.mud-theme-dark .cal-acc-amber { background: #2a2010; color: #f0bf6a; }
.mud-theme-dark .cal-acc-red { background: #331a17; color: #ff8b7e; }
.mud-theme-dark .cal-acc-violet { background: #231a33; color: #d5b6ff; }
.mud-theme-dark .cal-acc-pink { background: #331323; color: #ff9ec7; }
.mud-theme-dark .cal-acc-slate { background: #232b36; color: #9aa6b5; }

/* --------------------------------------------------------------------------
   Accent consumption — ORDER MATTERS: everything in this block must stay
   AFTER the .cal-acc-* palette above. The chip root (.ev) carries a
   .cal-acc-* class directly, which sets that element's OWN background+color
   (the palette block above). .cal-acc-* never declares `border`, so .ev's
   border (set once, above) is never actually at risk — restated here only
   to mirror the brief's own "consume them longhand" example and make the
   contract explicit. `background` IS at risk (same property, same
   specificity, cal-acc-* comes later in source) — this re-declaration is
   the one that's load-bearing: it wins the cascade tie and keeps the
   chip's fill on the neutral card surface regardless of which accent class
   is also present. `color` is deliberately left alone here, so the accent
   ink set by .cal-acc-* keeps flowing down via plain CSS inheritance to any
   descendant that does not declare its own `color` (.evbar, .ccode).
   .evtitle/.evsub/.evtime (declared earlier, above) already pin their OWN
   neutral text color unconditionally, so only the bar / code-border /
   dialog-head-edge / state-pill ever show the accent hue. */
.ev { border: 1px solid var(--card-hover-border); background: var(--card-bg); }
.evbar { background: currentColor; opacity: .9; }
.ev .ccode { border-color: currentColor; }
.evhead { border-left-color: currentColor; }