/*
   Use this file to;

   1. provide reusable variables that can be applied for the theme and across components
   2. provide new themes by overriding the style variables consumed by components
   3. override any default bootstrap variables
   4. override any default styling

   Default component styles live in the CCTC_Components library. Bootstrap is
   loaded from the CDN in App.razor, so the --bs-* variables and utility
   classes are already in scope by the time this file is applied.
*/

/* Bootstrap font overrides — runtime equivalents of the old Sass-time
   $font-size-base: 0.875rem (i.e. 14px). Fonts are self-hosted in css/fonts.css. */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-font-sans-serif: var(--primary-font);
  --bs-font-monospace: var(--mono-font);
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.875rem;
  --bs-popover-header-font-size: 0.875rem;
  --bs-popover-font-size: 0.765625rem;
  --bs-tooltip-font-size: 0.765625rem;
}

/* ===== Brand tokens (single source of truth) =====
   Absolute brand hues sampled from the TrialView/CCTC brand sheets. These are
   the ONLY place a literal brand hex lives — themes below assign these tokens
   to the --cctc-* contract the components consume, so changing a hue here
   updates every colourway. Components never reference --brand-* directly.

   These are absolute hues only. Per-surface alpha roles (--muted*, --rule*)
   read differently against light vs dark backgrounds and so are declared
   inside each theme block, not here. */
:root {
  --brand-ink: #0f2537;          /* dark page surface (canvas) */
  --brand-ink-deep: #0a1a28;     /* deepest band — footer, selected tab (sourced from Footer Design.html) */
  --brand-active: #2E4D74;       /* cards / containers / hover on dark */
  --brand-highlight: #35a0d7;    /* cyan accent, focus on dark (= --focus-on-dark), selected */
  --brand-teal: #5EBBCC;         /* secondary accent — info on dark */
  --brand-teal-deep: #049CAF;    /* deep teal accent (CCTC-sheet colour) */
  --brand-cambridge: #A3C1D1;    /* institutional / co-branding accent */
  --brand-paper: #F6F4EF;        /* light page surface */
  --brand-signal: #f59e0b;       /* links/warnings on DARK surfaces only (signal-on-ink 7.30:1) */
  --brand-signal-ink: #8a5800;   /* darkened amber — links/warnings on LIGHT surfaces (on paper 5.50:1) */
  --brand-ink-text: #0f2537;     /* body text on light surfaces (ink-on-paper 14.26:1) */
  --brand-focus-ink: #03808f;    /* darkened teal — focus ring/accent on LIGHT surfaces (on paper 4.26:1) */
}

/* CDN Bootstrap headings use $font-size-base = 1rem; the previous SCSS build
   used 0.875rem, so re-declare heading sizes against that base. */
h1, .h1 { font-size: calc(1.3rem + 0.6vw); }
h2, .h2 { font-size: calc(1.278125rem + 0.3375vw); }
h3, .h3 { font-size: calc(1.25625rem + 0.075vw); }
h4, .h4 { font-size: 1.09375rem; }
h5, .h5 { font-size: 0.875rem; }
h6, .h6 { font-size: 0.875rem; }
@media (min-width: 80rem) {
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.53125rem; }
  h3, .h3 { font-size: 1.3125rem; }
}

code {
    color: var(--cctc-code-color);
}

a {
    color: var(--cctc-link-color);
}

.card {
    background-color: var(--cctc-active-background-color);
    color: var(--cctc-color);
}

/*
    at some point would be nice to set variables for these in media queries, but
    despite following the advice in this article it doesn't seem to work
    https://bholmes.dev/blog/alternative-to-css-variable-media-queries/
 */

/* ===== Dark colourway (brand "Default · dark") =====
   Each value maps a --brand-* token onto the --cctc-* contract. One-off shades
   with no matching brand token are kept as literals and flagged. */
.dark {
    --cctc-color: white;
    --cctc-success-color: var(--bs-success);
    --cctc-info-color: var(--brand-teal);            /* bug fix: was malformed invalid-hex reference */
    --cctc-warning-color: var(--bs-warning);
    --cctc-danger-color: var(--bs-danger);
    --cctc-selected-color: var(--brand-highlight);
    --cctc-highlight-color: var(--brand-highlight);
    --cctc-background-color: var(--brand-ink);
    --cctc-active-background-color: var(--brand-active);
    --cctc-border-radius: 0.25rem;
    --cctc-highlight-background-color: var(--brand-active);
    --cctc-icon-color: white;
    --cctc-icon-active-color: var(--brand-highlight);
    --cctc-readonly-icon-color: #3a474d;             /* one-off muted icon grey; no brand token fits */
    --cctc-link-color: var(--brand-signal);          /* bug fix: was `orange` */
    --cctc-code-color: #ff3ea0;                      /* brand has no code-colour token; kept as-is */

    /* Dark-surface alpha roles — white-alpha so muted text and hairline rules
       read against the ink background. Consumed by chrome such as the footer. */
    --muted: rgba(255, 255, 255, .62);
    --muted-2: rgba(255, 255, 255, .45);
    --rule: rgba(255, 255, 255, .10);
    --rule-strong: rgba(255, 255, 255, .18);
}

.tabs-dark {
    --cctc-tabs-color: var(--brand-highlight);
    --cctc-tabs-background-color: var(--brand-ink);
    --cctc-tabs-header-color: var(--brand-highlight);
    --cctc-tabs-header-selected-color: white;
    --cctc-tabs-header-background-color: var(--brand-ink);
    --cctc-tabs-header-selected-background-color: var(--brand-ink-deep);
    --cctc-tabs-header-highlight-color: white;
}

.panelmenu-dark {
    --cctc-panelmenu-background-color: var(--brand-ink);
    --cctc-panelmenu-hover-background-color: var(--brand-active);
    --cctc-panelmenu-active-background-color: #193E5D;   /* one-off mid navy between ink and active; no token fits */
    --cctc-panelmenu-border-color: var(--brand-ink);
    --cctc-panelmenu-highlight-border-color: var(--brand-highlight);
}

.concertina-dark {
    --cctc-concertina-icon-color: white;
    --cctc-concertina-icon-hover-color: var(--brand-highlight);
    --cctc-concertina-header-color: white;
    --cctc-concertina-header-background-color: var(--brand-ink);
    --cctc-concertina-subheader-color: var(--brand-highlight);
    --cctc-concertina-subheader-background-color: var(--brand-ink);

    --cctc-concertinaitem-icon-color: white;
    --cctc-concertinaitem-icon-hover-color: var(--brand-highlight);
    --cctc-concertinaitem-header-color: white;
    --cctc-concertinaitem-header-background-color: var(--brand-ink);
    --cctc-concertinaitem-subheader-color: var(--brand-highlight);
    --cctc-concertinaitem-subheader-background-color: var(--brand-ink);
}

.lister-dark {
    --cctc-lister-color: white;
    --cctc-lister-background-color: var(--brand-ink);
    --cctc-lister-hover-background-color: #193E5D;       /* one-off mid navy hover; no token fits */
    --cctc-lister-highlight-background-color: var(--brand-active);
    --cctc-lister-highlight-color: var(--brand-highlight);
    --cctc-lister-working-template-color: var(--brand-highlight);
    --cctc-lister-filter-header-color: white;
    --cctc-lister-filter-header-background-color: var(--brand-ink);
    --cctc-lister-items-header-color: var(--brand-active);
    --cctc-lister-items-header-background-color: var(--brand-ink-deep);
    --cctc-lister-display-counts-color: white;
    --cctc-lister-display-counts-background-color: var(--brand-ink);
}

.input-dark {
    --cctc-input-color: #3a474d;                         /* one-off input text grey; no brand token fits */
    --cctc-input-icon-color: var(--brand-highlight);
    --cctc-input-icon-hover-color: #193E5D;              /* one-off mid navy; no token fits */
    --cctc-input-readonly-icon-color: var(--brand-active);
    --cctc-input-background-color: white;
    --cctc-input-border-radius: 0.25rem;
    --cctc-input-border-width: 0px;
    --cctc-input-border-style: none;
}

.datatextbox-dark {
    --cctc-datatextbox-input-color: white;
    --cctc-datatextbox-input-background-color: var(--brand-ink);
    --cctc-datatextbox-input-border-color: white;
    --cctc-datatextbox-input-border-style: solid;
    --cctc-datatextbox-input-border-width: 1px;

    --cctc-datatextbox-dropdown-border-color: white;
    --cctc-datatextbox-dropdown-background-color: var(--brand-active);

    --cctc-datatextbox-icon-color: white;
    --cctc-datatextbox-icon-active-color: var(--brand-highlight);
    --cctc-datatextbox-icon-hover-color: white;
}

.steps-dark {
    --cctc-steps-header-background-color: var(--brand-ink);
    --cctc-steps-header-color: var(--brand-ink);
    --cctc-steps-icon-disabled-color: var(--brand-active);
    --cctc-steps-background-color: var(--brand-ink);
    --cctc-steps-icon-active-color: white;
}

.infotext-dark {
    --cctc-infotext-icon-color: white;
    --cctc-infotext-icon-hover-color: var(--brand-highlight);
    --cctc-infotext-popover-color: white;
    --cctc-infotext-popover-background-color: var(--brand-active);
}

.infoicon-dark {
    --cctc-infoicon-image-container-background-color: var(--brand-ink);
    --cctc-infoicon-image-container-border-radius: 0.25rem;
    --cctc-infoicon-image-border-radius: 0.25rem;
    --cctc-infoicon-popover-color: white;
    --cctc-infoicon-popover-header-color: white;
    --cctc-infoicon-popover-background-color: var(--brand-active);
    --cctc-infoicon-popover-header-background-color: #193E5D;   /* one-off mid navy header; no token fits */
}

.animatedplaceholder-dark {
    --cctc-animatedplaceholder-background-color: rgb(21, 53, 79);                /* one-off shimmer base; no token fits */
    --cctc-animatedplaceholder-background-image: linear-gradient(to left, rgb(35, 88, 131, .05), rgb(35, 88, 131, .3), rgb(35, 88, 131, .6), rgb(35, 88, 131, .3), rgb(35, 88, 131, .05));
    --cctc-animatedplaceholder-border-radius: 0.25rem;
}

.progress-dark {
    --cctc-progress-accent-color: var(--brand-highlight);
}

.pill-dark {
    --cctc-pill-color: white;
    --cctc-pill-background-color: var(--brand-active);
    --cctc-pill-border-color: white;
    --cctc-pill-success-color: white;
    --cctc-pill-success-background-color: var(--bs-success);
    --cctc-pill-success-border-color: var(--bs-success);
    --cctc-pill-info-color: white;
    --cctc-pill-info-background-color: var(--brand-teal);    /* bug fix: was malformed invalid-hex reference */
    --cctc-pill-info-border-color: var(--brand-teal);        /* bug fix: was malformed invalid-hex reference */
    --cctc-pill-warning-color: white;
    --cctc-pill-warning-background-color: var(--bs-warning);
    --cctc-pill-warning-border-color: var(--bs-warning);
    --cctc-pill-danger-color: white;
    --cctc-pill-danger-background-color: var(--bs-danger);
    --cctc-pill-danger-border-color: var(--bs-danger);
}

.confirmmodal-dark {
    --cctc-confirmmodal-background-color: var(--brand-active);
    --cctc-confirmmodal-border-radius: 0.25rem;
}

/* Button themes the outline/text/border treatment only — Button.razor.css
   hardcodes `background: transparent` and the --cctc-button-* contract has no
   background variable, so a filled CTA is a call-site ::deep concern. */
.button-dark {
    --cctc-button-color: white;
    --cctc-button-hover-color: var(--brand-highlight);
    --cctc-button-border-color: var(--brand-highlight);
    --cctc-button-border-hover-color: var(--brand-highlight);
    --cctc-button-border-radius: var(--cctc-border-radius);
    --cctc-button-border-style: solid;
    --cctc-button-border-width: 1px;
    --cctc-button-icon-color: white;
    --cctc-button-icon-hover-color: var(--brand-highlight);
    --cctc-button-x-padding: 0.75rem;
    --cctc-button-y-padding: 0.375rem;
}

.switch-dark {
    --cctc-switch-color: white;
    --cctc-switch-background-color: white;                       /* slider knob */
    --cctc-switch-disabled-color: var(--muted-2);
    --cctc-switch-disabled-background-color: var(--brand-active);
    --cctc-switch-active-hover-box-shadow: 0 0 0 2px var(--brand-highlight);
    --cctc-switch-inactive-hover-box-shadow: 0 0 0 2px var(--brand-active);
    --cctc-switch-slider-active-background-color: var(--brand-highlight);
    --cctc-switch-slider-inactive-background-color: var(--brand-active);
    --cctc-switch-slider-disabled-background-color: var(--brand-ink-deep);
}

/* ===== Light colourway (brand Light, contrast-safe) =====
   Paper page surface, ink text, darkened-amber links (--brand-signal-ink) and
   teal-deep accent/focus (--brand-focus-ink) — raw signal/highlight fail AA on
   paper, so they are never used on light surfaces. Raised surfaces (cards,
   inputs, popovers) are white; the selected/highlight surface is a light teal
   tint of the focus-ink family. */
.light {
    --cctc-color: var(--brand-ink-text);
    --cctc-success-color: var(--bs-success);
    --cctc-info-color: var(--brand-focus-ink);       /* teal-deep reads on paper; bs-info cyan fails AA */
    --cctc-warning-color: var(--bs-warning);
    --cctc-danger-color: var(--bs-danger);
    --cctc-selected-color: var(--brand-focus-ink);
    --cctc-highlight-color: var(--brand-focus-ink);
    --cctc-background-color: var(--brand-paper);
    --cctc-border-radius: 0.25rem;
    --cctc-highlight-background-color: #d9eef1;       /* light teal selected/highlight surface (focus-ink family); ink text ~13:1; no brand token for a light raised tint */
    --cctc-icon-color: var(--brand-ink-text);
    --cctc-icon-active-color: var(--brand-focus-ink);
    --cctc-readonly-icon-color: var(--brand-ink-text);
    --cctc-link-color: var(--brand-signal-ink);       /* darkened amber — raw --brand-signal is 1.95:1 on paper */
    --cctc-code-color: #b3261e;                        /* accessible red on paper (6.3:1); bare `red` was 3.6:1; no brand token */

    /* Light-surface alpha roles — ink-alpha so muted text and hairline rules read on paper. */
    --muted: rgba(15, 37, 55, .62);
    --muted-2: rgba(15, 37, 55, .45);
    --rule: rgba(15, 37, 55, .12);
    --rule-strong: rgba(15, 37, 55, .20);

    /* Card/raised surface (consumed by .card). White is brighter than the paper
       page, giving raised separation; ink text on white ~15.3:1. */
    --cctc-active-background-color: white;
}

.tabs-light {
    --cctc-tabs-color: var(--brand-ink-text);
    --cctc-tabs-background-color: var(--brand-paper);
    --cctc-tabs-header-color: var(--brand-ink-text);
    --cctc-tabs-header-selected-color: var(--brand-focus-ink);
    --cctc-tabs-header-background-color: var(--brand-paper);
    --cctc-tabs-header-selected-background-color: #d9eef1;   /* light teal selected tint */
    --cctc-tabs-header-highlight-color: var(--brand-focus-ink);
}

.panelmenu-light {
    --cctc-panelmenu-background-color: var(--brand-paper);
    --cctc-panelmenu-hover-background-color: white;
    --cctc-panelmenu-active-background-color: #d9eef1;       /* light teal selected tint */
    --cctc-panelmenu-border-color: var(--brand-paper);
    --cctc-panelmenu-highlight-border-color: var(--brand-focus-ink);
}

.concertina-light {
    --cctc-concertina-icon-color: var(--brand-ink-text);
    --cctc-concertina-icon-hover-color: var(--brand-focus-ink);
    --cctc-concertina-header-color: var(--brand-ink-text);
    --cctc-concertina-header-background-color: var(--brand-paper);
    --cctc-concertina-subheader-color: var(--brand-focus-ink);
    --cctc-concertina-subheader-background-color: var(--brand-paper);

    --cctc-concertinaitem-icon-color: var(--brand-ink-text);
    --cctc-concertinaitem-icon-hover-color: var(--brand-focus-ink);
    --cctc-concertinaitem-header-color: var(--brand-ink-text);
    --cctc-concertinaitem-header-background-color: var(--brand-paper);
    --cctc-concertinaitem-subheader-color: var(--brand-focus-ink);
    --cctc-concertinaitem-subheader-background-color: var(--brand-paper);
}

.lister-light {
    --cctc-lister-color: var(--brand-ink-text);
    --cctc-lister-background-color: var(--brand-paper);
    --cctc-lister-hover-background-color: white;
    --cctc-lister-highlight-background-color: #d9eef1;       /* light teal selected tint */
    --cctc-lister-highlight-color: var(--brand-focus-ink);
    --cctc-lister-working-template-color: var(--brand-focus-ink);
    --cctc-lister-filter-header-color: var(--brand-ink-text);
    --cctc-lister-filter-header-background-color: var(--brand-paper);
    --cctc-lister-items-header-color: var(--brand-ink-text);
    --cctc-lister-items-header-background-color: white;
    --cctc-lister-display-counts-color: var(--brand-ink-text);
    --cctc-lister-display-counts-background-color: var(--brand-paper);
}

.input-light {
    --cctc-input-color: var(--brand-ink-text);
    --cctc-input-icon-color: var(--brand-focus-ink);
    --cctc-input-icon-hover-color: var(--brand-focus-ink);
    --cctc-input-readonly-icon-color: var(--brand-ink-text);
    --cctc-input-background-color: white;
    --cctc-input-border-color: #767676;                       /* AA neutral border on white (3:1) */
    --cctc-input-border-radius: 0.25rem;
}

.datatextbox-light {
    --cctc-datatextbox-input-color: var(--brand-ink-text);
    --cctc-datatextbox-input-background-color: white;
    --cctc-datatextbox-input-border-color: #767676;
    --cctc-datatextbox-input-border-style: solid;
    --cctc-datatextbox-input-border-width: 1px;

    --cctc-datatextbox-dropdown-border-color: #767676;
    --cctc-datatextbox-dropdown-background-color: white;

    --cctc-datatextbox-icon-color: var(--brand-ink-text);
    --cctc-datatextbox-icon-active-color: var(--brand-focus-ink);
    --cctc-datatextbox-icon-hover-color: var(--brand-focus-ink);
}

.steps-light {
    --cctc-steps-header-background-color: var(--brand-paper);
    --cctc-steps-header-color: var(--brand-ink-text);
    --cctc-steps-icon-disabled-color: var(--muted-2);
    --cctc-steps-background-color: var(--brand-paper);
    --cctc-steps-icon-active-color: var(--brand-focus-ink);
}

.infotext-light {
    --cctc-infotext-icon-color: var(--brand-ink-text);
    --cctc-infotext-icon-hover-color: var(--brand-focus-ink);
    --cctc-infotext-popover-color: var(--brand-ink-text);
    --cctc-infotext-popover-background-color: white;
}

.infoicon-light {
    --cctc-infoicon-image-container-background-color: var(--brand-paper);
    --cctc-infoicon-image-container-border-radius: 0.25rem;
    --cctc-infoicon-image-border-radius: 0.25rem;
    --cctc-infoicon-popover-color: var(--brand-ink-text);
    --cctc-infoicon-popover-header-color: var(--brand-ink-text);
    --cctc-infoicon-popover-background-color: white;
    --cctc-infoicon-popover-header-background-color: #d9eef1;   /* light teal header tint */
}

.animatedplaceholder-light {
    --cctc-animatedplaceholder-background-color: rgb(167, 167, 167);                /* one-off shimmer base; no token fits */
    --cctc-animatedplaceholder-background-image: linear-gradient(to left, rgb(243, 243, 243, .05), rgb(243, 243, 243, .3), rgb(243, 243, 243, .6), rgb(243, 243, 243, .3), rgb(243, 243, 243, .05));
    --cctc-animatedplaceholder-border-radius: 0.25rem;
}

.progress-light {
    --cctc-progress-accent-color: var(--brand-focus-ink);
}

.pill-light {
    --cctc-pill-color: var(--brand-ink-text);
    --cctc-pill-background-color: #d9eef1;                     /* light teal pill */
    --cctc-pill-border-color: #767676;
    --cctc-pill-success-color: var(--brand-ink-text);
    --cctc-pill-success-background-color: var(--bs-success);
    --cctc-pill-success-border-color: var(--bs-success);
    --cctc-pill-info-color: var(--brand-ink-text);
    --cctc-pill-info-background-color: #d9eef1;               /* light teal info pill (ink text reads; teal-deep fill would not) */
    --cctc-pill-info-border-color: var(--brand-focus-ink);
    --cctc-pill-warning-color: var(--brand-ink-text);
    --cctc-pill-warning-background-color: var(--bs-warning);
    --cctc-pill-warning-border-color: var(--bs-warning);
    --cctc-pill-danger-color: var(--brand-ink-text);
    --cctc-pill-danger-background-color: var(--bs-danger);
    --cctc-pill-danger-border-color: var(--bs-danger);
}

.button-light {
    --cctc-button-color: var(--brand-ink-text);
    --cctc-button-hover-color: var(--brand-focus-ink);
    --cctc-button-border-color: var(--brand-focus-ink);
    --cctc-button-border-hover-color: var(--brand-focus-ink);
    --cctc-button-border-radius: var(--cctc-border-radius);
    --cctc-button-border-style: solid;
    --cctc-button-border-width: 1px;
    --cctc-button-icon-color: var(--brand-ink-text);
    --cctc-button-icon-hover-color: var(--brand-focus-ink);
    --cctc-button-x-padding: 0.75rem;
    --cctc-button-y-padding: 0.375rem;
}

.switch-light {
    --cctc-switch-color: var(--brand-ink-text);
    --cctc-switch-background-color: white;                       /* slider knob */
    --cctc-switch-disabled-color: var(--muted-2);
    --cctc-switch-disabled-background-color: #d9eef1;
    --cctc-switch-active-hover-box-shadow: 0 0 0 2px var(--brand-focus-ink);
    --cctc-switch-inactive-hover-box-shadow: 0 0 0 2px var(--muted);
    --cctc-switch-slider-active-background-color: var(--brand-focus-ink);
    --cctc-switch-slider-inactive-background-color: var(--muted);      /* ink-alpha inactive track, visible vs white knob */
    --cctc-switch-slider-disabled-background-color: var(--muted-2);
}

.confirmmodal-light {
    --cctc-confirmmodal-background-color: white;
    --cctc-confirmmodal-border-radius: 0.25rem;
}

/* ===== Cambridge colourway (institutional co-branding) =====
   Content reads exactly like brand Light (paper base, ink text, signal-ink
   links, focus-ink accent on paper). --brand-cambridge #A3C1D1 is used ONLY as
   an accent fill (selected/highlight/header surfaces) carrying INK text
   (ink-on-cambridge 8.29:1). Hard rule: never a link or focus indicator ON a
   cambridge fill — signal-ink (3.19:1) and focus-ink (2.47:1) both fail there,
   so those roles stay on the paper base. */
.cambridge {
    --cctc-color: var(--brand-ink-text);
    --cctc-success-color: var(--bs-success);
    --cctc-info-color: var(--brand-focus-ink);
    --cctc-warning-color: var(--bs-warning);
    --cctc-danger-color: var(--bs-danger);
    --cctc-selected-color: var(--brand-ink-text);        /* selected text sits on a cambridge fill → ink */
    --cctc-highlight-color: var(--brand-ink-text);       /* highlight text sits on a cambridge fill → ink */
    --cctc-background-color: var(--brand-paper);
    --cctc-border-radius: 0.25rem;
    --cctc-highlight-background-color: var(--brand-cambridge);
    --cctc-icon-color: var(--brand-ink-text);
    --cctc-icon-active-color: var(--brand-focus-ink);    /* active icon on the paper base */
    --cctc-readonly-icon-color: var(--brand-ink-text);
    --cctc-link-color: var(--brand-signal-ink);          /* links live on the paper base only */
    --cctc-code-color: #b3261e;

    --muted: rgba(15, 37, 55, .62);
    --muted-2: rgba(15, 37, 55, .45);
    --rule: rgba(15, 37, 55, .12);
    --rule-strong: rgba(15, 37, 55, .20);

    --cctc-active-background-color: white;
}

.tabs-cambridge {
    --cctc-tabs-color: var(--brand-ink-text);
    --cctc-tabs-background-color: var(--brand-paper);
    --cctc-tabs-header-color: var(--brand-ink-text);
    --cctc-tabs-header-selected-color: var(--brand-ink-text);          /* selected header sits on cambridge fill */
    --cctc-tabs-header-background-color: var(--brand-paper);
    --cctc-tabs-header-selected-background-color: var(--brand-cambridge);
    --cctc-tabs-header-highlight-color: var(--brand-focus-ink);        /* underline accent on the paper base */
}

.panelmenu-cambridge {
    --cctc-panelmenu-background-color: var(--brand-paper);
    --cctc-panelmenu-hover-background-color: white;
    --cctc-panelmenu-active-background-color: var(--brand-cambridge);
    --cctc-panelmenu-border-color: var(--brand-paper);
    --cctc-panelmenu-highlight-border-color: var(--brand-focus-ink);
}

.concertina-cambridge {
    --cctc-concertina-icon-color: var(--brand-ink-text);
    --cctc-concertina-icon-hover-color: var(--brand-focus-ink);
    --cctc-concertina-header-color: var(--brand-ink-text);
    --cctc-concertina-header-background-color: var(--brand-paper);
    --cctc-concertina-subheader-color: var(--brand-focus-ink);
    --cctc-concertina-subheader-background-color: var(--brand-paper);

    --cctc-concertinaitem-icon-color: var(--brand-ink-text);
    --cctc-concertinaitem-icon-hover-color: var(--brand-focus-ink);
    --cctc-concertinaitem-header-color: var(--brand-ink-text);
    --cctc-concertinaitem-header-background-color: var(--brand-paper);
    --cctc-concertinaitem-subheader-color: var(--brand-focus-ink);
    --cctc-concertinaitem-subheader-background-color: var(--brand-paper);
}

.lister-cambridge {
    --cctc-lister-color: var(--brand-ink-text);
    --cctc-lister-background-color: var(--brand-paper);
    --cctc-lister-hover-background-color: white;
    --cctc-lister-highlight-background-color: var(--brand-cambridge);
    --cctc-lister-highlight-color: var(--brand-ink-text);              /* highlighted row sits on cambridge fill */
    --cctc-lister-working-template-color: var(--brand-focus-ink);
    --cctc-lister-filter-header-color: var(--brand-ink-text);
    --cctc-lister-filter-header-background-color: var(--brand-paper);
    --cctc-lister-items-header-color: var(--brand-ink-text);
    --cctc-lister-items-header-background-color: var(--brand-cambridge);
    --cctc-lister-display-counts-color: var(--brand-ink-text);
    --cctc-lister-display-counts-background-color: var(--brand-paper);
}

.input-cambridge {
    --cctc-input-color: var(--brand-ink-text);
    --cctc-input-icon-color: var(--brand-focus-ink);
    --cctc-input-icon-hover-color: var(--brand-focus-ink);
    --cctc-input-readonly-icon-color: var(--brand-ink-text);
    --cctc-input-background-color: white;
    --cctc-input-border-color: #767676;
    --cctc-input-border-radius: 0.25rem;
}

.datatextbox-cambridge {
    --cctc-datatextbox-input-color: var(--brand-ink-text);
    --cctc-datatextbox-input-background-color: white;
    --cctc-datatextbox-input-border-color: #767676;
    --cctc-datatextbox-input-border-style: solid;
    --cctc-datatextbox-input-border-width: 1px;

    --cctc-datatextbox-dropdown-border-color: #767676;
    --cctc-datatextbox-dropdown-background-color: white;

    --cctc-datatextbox-icon-color: var(--brand-ink-text);
    --cctc-datatextbox-icon-active-color: var(--brand-focus-ink);
    --cctc-datatextbox-icon-hover-color: var(--brand-focus-ink);
}

.steps-cambridge {
    --cctc-steps-header-background-color: var(--brand-paper);
    --cctc-steps-header-color: var(--brand-ink-text);
    --cctc-steps-icon-disabled-color: var(--muted-2);
    --cctc-steps-background-color: var(--brand-paper);
    --cctc-steps-icon-active-color: var(--brand-focus-ink);
}

.infotext-cambridge {
    --cctc-infotext-icon-color: var(--brand-ink-text);
    --cctc-infotext-icon-hover-color: var(--brand-focus-ink);
    --cctc-infotext-popover-color: var(--brand-ink-text);
    --cctc-infotext-popover-background-color: white;
}

.infoicon-cambridge {
    --cctc-infoicon-image-container-background-color: var(--brand-paper);
    --cctc-infoicon-image-container-border-radius: 0.25rem;
    --cctc-infoicon-image-border-radius: 0.25rem;
    --cctc-infoicon-popover-color: var(--brand-ink-text);
    --cctc-infoicon-popover-header-color: var(--brand-ink-text);
    --cctc-infoicon-popover-background-color: white;
    --cctc-infoicon-popover-header-background-color: var(--brand-cambridge);   /* cambridge accent header, ink text */
}

.animatedplaceholder-cambridge {
    --cctc-animatedplaceholder-background-color: rgb(167, 167, 167);                /* one-off shimmer base; no token fits */
    --cctc-animatedplaceholder-background-image: linear-gradient(to left, rgb(243, 243, 243, .05), rgb(243, 243, 243, .3), rgb(243, 243, 243, .6), rgb(243, 243, 243, .3), rgb(243, 243, 243, .05));
    --cctc-animatedplaceholder-border-radius: 0.25rem;
}

.progress-cambridge {
    --cctc-progress-accent-color: var(--brand-focus-ink);
}

.pill-cambridge {
    --cctc-pill-color: var(--brand-ink-text);
    --cctc-pill-background-color: var(--brand-cambridge);     /* cambridge pill, ink text 8.29:1 */
    --cctc-pill-border-color: #767676;
    --cctc-pill-success-color: var(--brand-ink-text);
    --cctc-pill-success-background-color: var(--bs-success);
    --cctc-pill-success-border-color: var(--bs-success);
    --cctc-pill-info-color: var(--brand-ink-text);
    --cctc-pill-info-background-color: var(--brand-cambridge);
    --cctc-pill-info-border-color: var(--brand-focus-ink);
    --cctc-pill-warning-color: var(--brand-ink-text);
    --cctc-pill-warning-background-color: var(--bs-warning);
    --cctc-pill-warning-border-color: var(--bs-warning);
    --cctc-pill-danger-color: var(--brand-ink-text);
    --cctc-pill-danger-background-color: var(--bs-danger);
    --cctc-pill-danger-border-color: var(--bs-danger);
}

.button-cambridge {
    --cctc-button-color: var(--brand-ink-text);
    --cctc-button-hover-color: var(--brand-focus-ink);
    --cctc-button-border-color: var(--brand-focus-ink);
    --cctc-button-border-hover-color: var(--brand-focus-ink);
    --cctc-button-border-radius: var(--cctc-border-radius);
    --cctc-button-border-style: solid;
    --cctc-button-border-width: 1px;
    --cctc-button-icon-color: var(--brand-ink-text);
    --cctc-button-icon-hover-color: var(--brand-focus-ink);
    --cctc-button-x-padding: 0.75rem;
    --cctc-button-y-padding: 0.375rem;
}

.switch-cambridge {
    --cctc-switch-color: var(--brand-ink-text);
    --cctc-switch-background-color: white;
    --cctc-switch-disabled-color: var(--muted-2);
    --cctc-switch-disabled-background-color: var(--brand-cambridge);
    --cctc-switch-active-hover-box-shadow: 0 0 0 2px var(--brand-focus-ink);
    --cctc-switch-inactive-hover-box-shadow: 0 0 0 2px var(--muted);
    --cctc-switch-slider-active-background-color: var(--brand-focus-ink);
    --cctc-switch-slider-inactive-background-color: var(--muted);
    --cctc-switch-slider-disabled-background-color: var(--muted-2);
}

.confirmmodal-cambridge {
    --cctc-confirmmodal-background-color: white;
    --cctc-confirmmodal-border-radius: 0.25rem;
}

/* ===== Brand-fill colourway (high-saturation marketing surface) =====
   Cyan page (--brand-highlight) with teal cards (--brand-teal) and INK text
   throughout — white on these fills fails AA (2.93 / 2.22:1) while ink passes
   (5.34 / 7.06:1). Accents/icons/borders use --brand-ink-deep (6–8:1 on the
   fills). Links use ink-deep + the default underline because amber fails on
   cyan/teal (2.06 / 2.72:1). NOT in the GridLayout rotation (Decision 8) — a
   surface treatment applied explicitly, not a general reading theme. */
.brand {
    --cctc-color: var(--brand-ink-text);
    --cctc-success-color: var(--bs-success);
    --cctc-info-color: var(--brand-ink-deep);
    --cctc-warning-color: var(--bs-warning);
    --cctc-danger-color: var(--bs-danger);
    --cctc-selected-color: var(--brand-ink-text);
    --cctc-highlight-color: var(--brand-ink-text);
    --cctc-background-color: var(--brand-highlight);
    --cctc-border-radius: 0.25rem;
    --cctc-highlight-background-color: white;            /* selected chip on the cyan fill, ink text */
    --cctc-icon-color: var(--brand-ink-text);
    --cctc-icon-active-color: var(--brand-ink-deep);
    --cctc-readonly-icon-color: var(--brand-ink-text);
    --cctc-link-color: var(--brand-ink-deep);            /* amber fails on cyan/teal — ink-deep + underline carries linkness */
    --cctc-code-color: var(--brand-ink-deep);

    --muted: rgba(15, 37, 55, .72);
    --muted-2: rgba(15, 37, 55, .55);
    --rule: rgba(15, 37, 55, .22);
    --rule-strong: rgba(15, 37, 55, .35);

    --cctc-active-background-color: var(--brand-teal);   /* teal cards */
}

.tabs-brand {
    --cctc-tabs-color: var(--brand-ink-text);
    --cctc-tabs-background-color: var(--brand-highlight);
    --cctc-tabs-header-color: var(--brand-ink-text);
    --cctc-tabs-header-selected-color: var(--brand-ink-text);
    --cctc-tabs-header-background-color: var(--brand-highlight);
    --cctc-tabs-header-selected-background-color: white;
    --cctc-tabs-header-highlight-color: var(--brand-ink-deep);
}

.panelmenu-brand {
    --cctc-panelmenu-background-color: var(--brand-highlight);
    --cctc-panelmenu-hover-background-color: var(--brand-teal);
    --cctc-panelmenu-active-background-color: white;
    --cctc-panelmenu-border-color: var(--brand-highlight);
    --cctc-panelmenu-highlight-border-color: var(--brand-ink-deep);
}

.concertina-brand {
    --cctc-concertina-icon-color: var(--brand-ink-text);
    --cctc-concertina-icon-hover-color: var(--brand-ink-deep);
    --cctc-concertina-header-color: var(--brand-ink-text);
    --cctc-concertina-header-background-color: var(--brand-teal);
    --cctc-concertina-subheader-color: var(--brand-ink-text);
    --cctc-concertina-subheader-background-color: var(--brand-highlight);

    --cctc-concertinaitem-icon-color: var(--brand-ink-text);
    --cctc-concertinaitem-icon-hover-color: var(--brand-ink-deep);
    --cctc-concertinaitem-header-color: var(--brand-ink-text);
    --cctc-concertinaitem-header-background-color: var(--brand-teal);
    --cctc-concertinaitem-subheader-color: var(--brand-ink-text);
    --cctc-concertinaitem-subheader-background-color: var(--brand-highlight);
}

.lister-brand {
    --cctc-lister-color: var(--brand-ink-text);
    --cctc-lister-background-color: var(--brand-highlight);
    --cctc-lister-hover-background-color: var(--brand-teal);
    --cctc-lister-highlight-background-color: white;
    --cctc-lister-highlight-color: var(--brand-ink-text);
    --cctc-lister-working-template-color: var(--brand-ink-deep);
    --cctc-lister-filter-header-color: var(--brand-ink-text);
    --cctc-lister-filter-header-background-color: var(--brand-highlight);
    --cctc-lister-items-header-color: var(--brand-ink-text);
    --cctc-lister-items-header-background-color: var(--brand-teal);
    --cctc-lister-display-counts-color: var(--brand-ink-text);
    --cctc-lister-display-counts-background-color: var(--brand-highlight);
}

.input-brand {
    --cctc-input-color: var(--brand-ink-text);
    --cctc-input-icon-color: var(--brand-ink-deep);
    --cctc-input-icon-hover-color: var(--brand-ink-deep);
    --cctc-input-readonly-icon-color: var(--brand-ink-text);
    --cctc-input-background-color: white;
    --cctc-input-border-color: var(--brand-ink-deep);
    --cctc-input-border-radius: 0.25rem;
}

.datatextbox-brand {
    --cctc-datatextbox-input-color: var(--brand-ink-text);
    --cctc-datatextbox-input-background-color: white;
    --cctc-datatextbox-input-border-color: var(--brand-ink-deep);
    --cctc-datatextbox-input-border-style: solid;
    --cctc-datatextbox-input-border-width: 1px;

    --cctc-datatextbox-dropdown-border-color: var(--brand-ink-deep);
    --cctc-datatextbox-dropdown-background-color: white;

    --cctc-datatextbox-icon-color: var(--brand-ink-text);
    --cctc-datatextbox-icon-active-color: var(--brand-ink-deep);
    --cctc-datatextbox-icon-hover-color: var(--brand-ink-deep);
}

.steps-brand {
    --cctc-steps-header-background-color: var(--brand-highlight);
    --cctc-steps-header-color: var(--brand-ink-text);
    --cctc-steps-icon-disabled-color: var(--muted-2);
    --cctc-steps-background-color: var(--brand-highlight);
    --cctc-steps-icon-active-color: var(--brand-ink-deep);
}

.infotext-brand {
    --cctc-infotext-icon-color: var(--brand-ink-text);
    --cctc-infotext-icon-hover-color: var(--brand-ink-deep);
    --cctc-infotext-popover-color: var(--brand-ink-text);
    --cctc-infotext-popover-background-color: white;
}

.infoicon-brand {
    --cctc-infoicon-image-container-background-color: var(--brand-highlight);
    --cctc-infoicon-image-container-border-radius: 0.25rem;
    --cctc-infoicon-image-border-radius: 0.25rem;
    --cctc-infoicon-popover-color: var(--brand-ink-text);
    --cctc-infoicon-popover-header-color: var(--brand-ink-text);
    --cctc-infoicon-popover-background-color: white;
    --cctc-infoicon-popover-header-background-color: var(--brand-teal);
}

.animatedplaceholder-brand {
    --cctc-animatedplaceholder-background-color: rgb(94, 187, 204);                  /* teal shimmer base (= --brand-teal) */
    --cctc-animatedplaceholder-background-image: linear-gradient(to left, rgb(15, 37, 55, .05), rgb(15, 37, 55, .15), rgb(15, 37, 55, .3), rgb(15, 37, 55, .15), rgb(15, 37, 55, .05));
    --cctc-animatedplaceholder-border-radius: 0.25rem;
}

.progress-brand {
    --cctc-progress-accent-color: var(--brand-ink-deep);
}

.pill-brand {
    --cctc-pill-color: var(--brand-ink-text);
    --cctc-pill-background-color: white;
    --cctc-pill-border-color: var(--brand-ink-deep);
    --cctc-pill-success-color: var(--brand-ink-text);
    --cctc-pill-success-background-color: var(--bs-success);
    --cctc-pill-success-border-color: var(--bs-success);
    --cctc-pill-info-color: var(--brand-ink-text);
    --cctc-pill-info-background-color: white;
    --cctc-pill-info-border-color: var(--brand-ink-deep);
    --cctc-pill-warning-color: var(--brand-ink-text);
    --cctc-pill-warning-background-color: var(--bs-warning);
    --cctc-pill-warning-border-color: var(--bs-warning);
    --cctc-pill-danger-color: var(--brand-ink-text);
    --cctc-pill-danger-background-color: var(--bs-danger);
    --cctc-pill-danger-border-color: var(--bs-danger);
}

.button-brand {
    --cctc-button-color: var(--brand-ink-text);
    --cctc-button-hover-color: var(--brand-ink-deep);
    --cctc-button-border-color: var(--brand-ink-deep);
    --cctc-button-border-hover-color: var(--brand-ink-deep);
    --cctc-button-border-radius: var(--cctc-border-radius);
    --cctc-button-border-style: solid;
    --cctc-button-border-width: 1px;
    --cctc-button-icon-color: var(--brand-ink-text);
    --cctc-button-icon-hover-color: var(--brand-ink-deep);
    --cctc-button-x-padding: 0.75rem;
    --cctc-button-y-padding: 0.375rem;
}

.switch-brand {
    --cctc-switch-color: var(--brand-ink-text);
    --cctc-switch-background-color: white;                       /* slider knob */
    --cctc-switch-disabled-color: var(--muted-2);
    --cctc-switch-disabled-background-color: var(--brand-teal);
    --cctc-switch-active-hover-box-shadow: 0 0 0 2px var(--brand-ink-deep);
    --cctc-switch-inactive-hover-box-shadow: 0 0 0 2px var(--muted);
    --cctc-switch-slider-active-background-color: var(--brand-ink-deep);
    --cctc-switch-slider-inactive-background-color: var(--muted);
    --cctc-switch-slider-disabled-background-color: var(--muted-2);
}

.confirmmodal-brand {
    --cctc-confirmmodal-background-color: white;
    --cctc-confirmmodal-border-radius: 0.25rem;
}

/* ===== Under-construction site-wide indicator =====
   Signals that the public site is a work-in-progress. Two parts:
   1. a diagonal corner ribbon in the top-right
   2. a thin hazard strip pinned to the bottom of the viewport
   Both are pointer-events: none so they never intercept clicks, and both
   honour prefers-reduced-motion. */

.under-construction-ribbon,
.under-construction-strip {
    --uc-yellow: #ffd400;
    --uc-black:  #111111;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-family: var(--mono-font, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--uc-black);
}

.under-construction-ribbon {
    top: 3rem;
    right: -5.5rem;
    width: 20rem;
    padding: 0.45rem 0;
    text-align: center;
    font-size: 0.8rem;
    transform: rotate(45deg);
    transform-origin: center;
    background:
        repeating-linear-gradient(
            135deg,
            var(--uc-yellow) 0 14px,
            var(--uc-black) 14px 28px
        );
    color: #ff1744;
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.9),
        0 1px 0 rgba(0, 0, 0, 0.5);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.25),
        inset 0 0 0 2px rgba(0, 0, 0, 0.4);
    animation: uc-wobble 3.2s ease-in-out infinite;
}

.under-construction-ribbon::before,
.under-construction-ribbon::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0.55rem;
    height: 0.55rem;
    background: var(--uc-yellow);
    border: 2px solid var(--uc-black);
    border-radius: 50%;
    transform: translateY(-50%);
}
.under-construction-ribbon::before { left: 0.6rem; }
.under-construction-ribbon::after  { right: 0.6rem; }

.under-construction-strip {
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background:
        repeating-linear-gradient(
            45deg,
            var(--uc-yellow) 0 16px,
            var(--uc-black) 16px 32px
        );
    background-size: 200% 100%;
    animation: uc-march 180s linear infinite;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
}

@keyframes uc-wobble {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50%      { transform: rotate(45deg) translateY(2px); }
}

@keyframes uc-march {
    from { background-position: 0 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .under-construction-ribbon,
    .under-construction-strip {
        animation: none !important;
    }
}

@media print {
    .under-construction-ribbon,
    .under-construction-strip {
        display: none !important;
    }
}

/* Forced colours (Windows High Contrast): the bright red ribbon text
   against the yellow/black stripe pattern fails axe's contrast check
   under emulation (axe reads the underlying canvas as the background).
   Opt into system colours so the OS palette wins, matching the
   Login.razor.css precedent (issue #8). */
@media (forced-colors: active) {
    .under-construction-ribbon {
        color: CanvasText;
        background: Canvas;
        text-shadow: none;
        box-shadow: none;
        border: 2px solid CanvasText;
    }
    .under-construction-ribbon::before,
    .under-construction-ribbon::after {
        background: Canvas;
        border-color: CanvasText;
    }
    .under-construction-strip {
        background: Canvas;
        border-top: 2px solid CanvasText;
    }
}