/*
 * The internal pages, brought onto the same system as the home page.
 *
 * Audited page by page first. The inline colours — 102 of them across nine
 * templates, including one slate-to-indigo-to-violet gradient that was the
 * hero banner on seven pages — are gone at source. What is left are component
 * classes: the catalogue's tiles and pills, the partners page's category tabs
 * and badges, and the theme's own round buttons.
 *
 * Loaded after layout.css, and every selector is scoped a level deeper than
 * the rule it replaces, because catalogue.css, subjects.css and programme.css
 * are linked in the BODY of their pages and win ties on source order.
 */

/* ======================================================= page headers ===== */

/* Every internal page opens with the theme's breadcrumb banner. It now carries
   the same navy ground and academic tile as the home page's hero, so arriving
   on /courses and arriving on / feel like the same site. */
html body .rbt-page-banner-wrapper,
html body .breadcrumb-image-container,
html body .rbt-breadcrumb-default {
    background-color: var(--sc-ink) !important;
    background-image: var(--sc-pattern) !important;
    background-size: 480px auto !important;
}

html body .rbt-breadcrumb-default .title,
html body .rbt-page-banner-wrapper .title { color: var(--sc-paper) !important; }

/* ========================================================== catalogue ===== */

/* The level tiles were bordered in #E4E9EF and #0F2942 — a cold grey and a
   cold slate, neither in the palette. */
html body .cat .cat-tile,
html body .cat-tile {
    border-color: var(--sc-line) !important;
    background: var(--sc-paper) !important;
    color: var(--sc-ink) !important;
}

html body .cat .cat-tile:hover,
html body .cat-tile:hover {
    border-color: var(--sc-accent) !important;
    background: var(--sc-paper-deep) !important;
}

html body .cat .cat-tile.is-active,
html body .cat-tile.is-active {
    background: var(--sc-ink) !important;
    border-color: var(--sc-ink) !important;
    color: var(--sc-paper) !important;
}

html body .cat .cat-tile.is-active *,
html body .cat-tile.is-active * { color: var(--sc-paper) !important; }

/* The count pill was the logo blue as a *field*. Gold is never a field and the
   blue is no longer the interface accent, so the pill becomes a navy chip —
   and on the active tile, which is already navy, it inverts to cream. */
html body .cat .cat-pill,
html body .cat-pill {
    background: var(--sc-ink) !important;
    color: var(--sc-paper) !important;
}

html body .cat .cat-tile.is-active .cat-pill,
html body .cat-tile.is-active .cat-pill {
    background: color-mix(in srgb, var(--sc-paper) 18%, transparent) !important;
    color: var(--sc-accent) !important;
}

/* The programme cards sit on the cream ground like the awarding-body cards. */
html body .cat .cat-card,
html body .cat-card {
    background: #fff !important;
    border: 1px solid var(--sc-line) !important;
}

/* ============================================================ partners ===== */

/* The category tabs were slate text on a cold grey — Tailwind's #334155 on
   #F1F5F9, two more colours from nowhere. */
html body .essex-cat-tab-btn,
html body .partner-cat-tab-btn {
    background: var(--sc-paper-deep) !important;
    border: 1px solid var(--sc-line) !important;
    color: var(--sc-ink) !important;
}

html body .essex-cat-tab-btn.active,
html body .essex-cat-tab-btn:hover {
    background: var(--sc-ink) !important;
    border-color: var(--sc-ink) !important;
    color: var(--sc-paper) !important;
}

/* The credential badges came in four Tailwind hues for four claims that are
   the same kind of claim. One treatment, and the words carry the meaning. */
html body .academic-partner-showcase-card .badge,
html body .partner-creds-label + .badge,
html body span.badge {
    background: var(--sc-paper-deep) !important;
    border: 1px solid color-mix(in srgb, var(--sc-accent) 50%, transparent) !important;
    color: var(--sc-ink) !important;
}

/* The partner logo plate, the treatment the owner asked for on the home page
   and which belongs here too: wide, filling its card, on white. */
html body .partner-feature-thumb {
    background: #fff !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px 32px !important;
    height: 180px !important;
    border-bottom: 1px solid var(--sc-line) !important;
}

html body .partner-feature-thumb img {
    max-height: 100px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* The monogram panel stands in when a partner has no logo file — and most of
   them do not, which is why these plates were empty. It has to be legible at
   plate size rather than thumbnail size. */
html body .partner-feature-thumb .partner-thumb-mark {
    font-family: var(--sc-font-display) !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    color: var(--sc-ink) !important;
}

html body .academic-partner-showcase-card {
    background: #fff !important;
    border: 1px solid var(--sc-line) !important;
}

/* ============================================================ theme bits === */

html body .rbt-round-btn {
    background: var(--sc-paper-deep) !important;
    color: var(--sc-ink) !important;
    border: 1px solid var(--sc-line) !important;
}

html body .rbt-round-btn:hover { border-color: var(--sc-accent) !important; }

/* Links inside page content: the blue was the logo colour doing interface
   work. On a light surface the readable gold is the deep one. */
html body .rbt-course-area a.text-decoration-none,
html body .partner-about-body a { color: var(--sc-accent-deep) !important; }

/* ======================================================= page sections ===== */

/* Cream for the surfaces you read on, navy for the bands between them — the
   same alternation the home page uses, applied to the internal templates. */
html body .rbt-course-area,
html body .rbt-section-gap,
html body .bg-color-white { background-color: var(--sc-paper) !important; }

html body .bg-color-extra2,
html body .bg-color-darker { background-color: var(--sc-ink) !important; }

/* Headings on the cream surfaces go back to ink: the dark-mode blanket rule
   paints them cream, which on cream is nothing at all. */
html body.active-dark-mode .rbt-course-area h1,
html body.active-dark-mode .rbt-course-area h2,
html body.active-dark-mode .rbt-course-area h3,
html body.active-dark-mode .rbt-course-area h4,
html body.active-dark-mode .rbt-course-area h5 { color: var(--sc-ink) !important; }

html body.active-dark-mode .rbt-course-area p,
html body.active-dark-mode .rbt-course-area li,
html body.active-dark-mode .rbt-course-area span { color: var(--sc-muted) !important; }

/* …except where the section is deliberately dark, where cream is correct. */
html body.active-dark-mode .sc-ground h1,
html body.active-dark-mode .sc-ground h2,
html body.active-dark-mode .sc-ground h3,
html body.active-dark-mode .sc-ground p,
html body.active-dark-mode .sc-ground span,
html body.active-dark-mode .rbt-breadcrumb-default h1,
html body.active-dark-mode .rbt-breadcrumb-default p,
html body.active-dark-mode .rbt-breadcrumb-default span { color: var(--sc-paper) !important; }

/* ------------------------------------------------------------ fixes ------ */

/* The logo plate measured 64px wide inside a 350px card: `display: grid` makes
   the element shrink-to-fit unless it is told to fill, and the card is a flex
   column whose children do not stretch by default. */
html body .partner-feature-thumb {
    width: 100% !important;
    inline-size: 100% !important;
    justify-self: stretch !important;
    align-self: stretch !important;
}

/* The awarding-body strip on /courses carried the same cold #E4E9EF border as
   the level tiles; it was a different class and the first pass missed it. */
html body .cat .cat-partner,
html body .cat-partner,
html body .cat .cat-chip,
html body .cat-chip {
    border-color: var(--sc-line) !important;
    background: var(--sc-paper) !important;
    color: var(--sc-ink) !important;
}

html body .cat .cat-partner:hover,
html body .cat-partner:hover { border-color: var(--sc-accent) !important; }

/* In-content links were still the logo blue, which is a brand fact and not the
   interface accent. On a cream surface the readable gold is the deep one;
   on a navy ground it is the bright one. */
html body .rbt-course-area a:not(.rbt-btn):not(.cat-tile):not(.cat-partner):not(.sc-header-cta),
html body .cat a.font-13,
html body main a.text-decoration-none { color: var(--sc-accent-deep) !important; }

html body .sc-ground a:not(.rbt-btn),
html body .hero a:not(.hero-btn--solid) { color: var(--sc-paper) !important; }

/* A stray border left on partner logo images by the theme. */
html body .cat img,
html body .partner-feature-thumb img,
html body .hp-mark img { border-color: var(--sc-line) !important; }

/* ---------------------------------------------- bootstrap leftovers ------ */

/* The accordion on /accreditations still carried Bootstrap's own blue — the
   #0C63E4 link colour and its #E7F1FF open-state wash. Both are variables,
   so redefining them is cheaper and safer than chasing the rules. */
:root {
    --bs-accordion-active-color: var(--sc-ink);
    --bs-accordion-active-bg: var(--sc-paper-deep);
    --bs-accordion-btn-focus-border-color: var(--sc-accent);
    --bs-accordion-border-color: var(--sc-line);
    --bs-link-color: var(--sc-accent-deep);
    --bs-link-hover-color: var(--sc-ink);
    --bs-body-color: var(--sc-muted);
    --bs-border-color: var(--sc-line);
}

html body .accordion-button:not(.collapsed) {
    background-color: var(--sc-paper-deep) !important;
    color: var(--sc-ink) !important;
    box-shadow: none !important;
}

html body .accordion-item { border-color: var(--sc-line) !important; }

/* The remaining slate text and surfaces on the accreditation page. */
html body .rbt-course-area .text-dark,
html body .accordion-body { color: var(--sc-muted) !important; }

/* The last three, all Bootstrap or theme defaults rather than decisions:
   #212529 on a closed accordion button, #F6F7F9 on a table head, and a
   near-cream #FFF9EE that was within a shade of the palette's own paper. */
html body .accordion-button { color: var(--sc-ink) !important; }
html body thead,
html body .table > thead { background-color: var(--sc-paper-deep) !important; }
html body table { --bs-table-bg: transparent; --bs-table-color: var(--sc-muted); }

/* ==================================================== programme pages ===== */

/*
 * Two defects measured on every one of the 125 programme pages, both caused by
 * palette-enforce's blanket `p { color: cream }` landing on a cream surface:
 *
 *   - body copy in `.prog-section--tint` measured **1.01:1** — cream on cream,
 *     which is not low contrast, it is invisible. This is the page's actual
 *     content: the overview, the modules, the entry requirements.
 *   - the Apply button measured **1.11:1**, cream text on the cream field.
 *
 * A blanket rule that assumes a dark ground cannot be left to meet a light
 * section. These name the light surfaces and put the ink back.
 */

html body.active-dark-mode .prog-section--tint,
html body.active-dark-mode .prog-section--tint p,
html body.active-dark-mode .prog-section--tint li,
html body.active-dark-mode .prog-section--tint td,
html body.active-dark-mode .prog-section--tint span:not(.prog-badge):not([class*="pill"]),
html body.active-dark-mode .prog-rich,
html body.active-dark-mode .prog-rich p,
html body.active-dark-mode .prog-rich li { color: var(--sc-ink) !important; }

html body.active-dark-mode .prog-section--tint h2,
html body.active-dark-mode .prog-section--tint h3,
html body.active-dark-mode .prog-section--tint h4,
html body.active-dark-mode .prog-rich strong { color: var(--sc-ink) !important; }

/* This rule used to paint the plain sections' text cream, on the assumption
   that they sat on the navy page ground. Two steps later those sections were
   given back their light surface, and the rule started putting cream text on
   white cards — the entry requirements measured 1.10:1. It is gone; the light
   rules below own this text now. A rule written for one ground has to be
   revisited when the ground moves. */

/* Every theme button on a programme page: cream field, navy label. The label
   is usually a nested span, which the blanket rule reaches and the button's
   own colour does not. */
/* This rule used to force every button label to ink, including the labels on
   navy buttons — four of them measured 1.00:1, navy on navy. A button's label
   must follow its own button, never be coloured independently of it; the
   `inherit` rule below is the only thing that should touch `.btn-text`. */

/* …except where the button is deliberately an outline on a dark ground. */
html body.active-dark-mode .prog-hero a.rbt-btn,
html body.active-dark-mode .prog-hero a.rbt-btn span,
html body.active-dark-mode .sc-ground a.rbt-btn,
html body.active-dark-mode .sc-ground a.rbt-btn span,
html body.active-dark-mode .rbt-breadcrumb-default a.rbt-btn,
html body.active-dark-mode .rbt-breadcrumb-default a.rbt-btn span { color: var(--sc-ink) !important; }

/* The programme title was 28px — smaller than an h2 elsewhere on the site, on
   the page whose whole job is to name one programme. */
html body .prog h1,
html body .prog-title {
    font-family: var(--sc-font-display) !important;
    font-size: clamp(28px, 3.4vw, 44px) !important;
    line-height: 1.2 !important;
    text-wrap: balance;
}

/* programme.css is linked in the BODY of coursedetail.blade.php, so it wins
   ties on source order against anything in the head. Two classes, not one. */
html body .prog .prog-title,
html body .prog-hero .prog-title,
html body h1.prog-title {
    font-family: var(--sc-font-display) !important;
    font-size: clamp(28px, 3.4vw, 44px) !important;
    line-height: 1.2 !important;
}

/* ---------------------------------------------- the programme page ground --- */

/*
 * programme.css was written for a light page: `.prog-rich` is ink, the sticky
 * nav is `--sc-muted`, the badges are ink on tint. When the body background
 * became navy, every one of those became a light colour on a dark ground, and
 * six elements measured under 3:1 on a page that is 125 pages.
 *
 * Patching each component would mean re-deciding colours that were already
 * correct. Giving the sections back the light surface they were designed for
 * restores all of them at once — and it matches the rest of the site, where
 * content reads on cream and only the bands between sections are navy.
 */
html body .prog,
html body .prog-section,
html body .prog-section:not(.prog-section--tint) {
    background-color: var(--sc-paper) !important;
}

html body .prog-section--tint { background-color: var(--sc-paper-deep) !important; }

/* With the ground light again, the blanket dark-mode text rule has to let go
   of everything inside it. */
html body.active-dark-mode .prog p,
html body.active-dark-mode .prog li,
html body.active-dark-mode .prog td,
html body.active-dark-mode .prog dd { color: var(--sc-muted) !important; }

html body.active-dark-mode .prog h1,
html body.active-dark-mode .prog h2,
html body.active-dark-mode .prog h3,
html body.active-dark-mode .prog h4,
html body.active-dark-mode .prog strong,
html body.active-dark-mode .prog .prog-title { color: var(--sc-ink) !important; }

html body.active-dark-mode .prog .prog-eyebrow,
html body.active-dark-mode .prog .prog-badge { color: var(--sc-accent-deep) !important; }

html body.active-dark-mode .prog .prog-nav-list a { color: var(--sc-muted) !important; }
html body.active-dark-mode .prog .prog-nav-list a.is-current {
    background: var(--sc-ink) !important;
    color: var(--sc-paper) !important;
}

/* The hero band at the top of the programme keeps its navy, so it needs the
   opposite treatment. */
html body .prog-hero {
    background-color: var(--sc-ink) !important;
    background-image: var(--sc-pattern) !important;
    background-size: 480px auto !important;
}

html body.active-dark-mode .prog-hero,
html body.active-dark-mode .prog-hero h1,
html body.active-dark-mode .prog-hero p,
html body.active-dark-mode .prog-hero span,
html body.active-dark-mode .prog-hero .prog-title { color: var(--sc-paper) !important; }

html body.active-dark-mode .prog-hero .prog-eyebrow,
html body.active-dark-mode .prog-hero .prog-badge { color: var(--sc-accent) !important; }

/* The sticky section nav is a dark band — `rgba(10, 16, 51, .95)`, the old
   palette's navy, hardcoded in programme.css. Its links were caught by the
   light-ground rule above and painted warm brown on near-black. A dark band
   reads in cream, and the current section is the one place a gold rule earns
   its place. */
html body.active-dark-mode .prog .prog-nav-list a,
html body .prog .prog-nav-list a {
    color: color-mix(in srgb, var(--sc-paper) 72%, transparent) !important;
}

html body .prog .prog-nav-list a:hover { color: var(--sc-paper) !important; }

html body.active-dark-mode .prog .prog-nav-list a.is-current,
html body .prog .prog-nav-list a.is-current {
    background: transparent !important;
    color: var(--sc-paper) !important;
    border-bottom: 2px solid var(--sc-accent) !important;
}

html body .prog .prog-nav { background: color-mix(in srgb, var(--sc-ink) 95%, transparent) !important; }


/* The module index chip was a 10% wash of the old logo blue — the last place
   that colour was still doing interface work on this page. */
html body .prog .prog-index,
html body .prog-index {
    background: color-mix(in srgb, var(--sc-accent) 16%, transparent) !important;
    color: var(--sc-accent-deep) !important;
}

/* Cards are white plates on the cream section, and everything in them is ink. */
html body.active-dark-mode .prog .prog-card,
html body .prog .prog-card { background: #fff !important; border: 1px solid var(--sc-line) !important; }

html body.active-dark-mode .prog .prog-card p,
html body.active-dark-mode .prog .prog-card li,
html body.active-dark-mode .prog .prog-rich p,
html body.active-dark-mode .prog .prog-rich li,
html body.active-dark-mode .prog .prog-card-body,
html body.active-dark-mode .prog .prog-card-body * { color: var(--sc-muted) !important; }

html body.active-dark-mode .prog .prog-card h2,
html body.active-dark-mode .prog .prog-card h3,
html body.active-dark-mode .prog .prog-card h4,
html body.active-dark-mode .prog .prog-card strong,
html body.active-dark-mode .prog .prog-rich strong { color: var(--sc-ink) !important; }

/* ===================================================== the last contrast === */

/*
 * Measured with a probe that composites every translucent layer before
 * comparing — the earlier ones treated `rgba(255,255,255,.08)` as solid white
 * and reported nonsense in both directions. With that fixed, two real faults
 * were left on the programme pages.
 */

/* The footer is navy, and `--sc-muted` is a warm brown written for cream
   surfaces: 1.98:1 on every footer link. The muted rules above are meant for
   light sections and must not reach down here. */
html body.active-dark-mode .rbt-footer,
html body.active-dark-mode .rbt-footer p,
html body.active-dark-mode .rbt-footer li,
html body.active-dark-mode .rbt-footer a,
html body.active-dark-mode .rbt-footer span,
html body.active-dark-mode .rbt-footer .text-muted,
html body .rbt-footer .text-muted {
    color: color-mix(in srgb, var(--sc-paper) 80%, transparent) !important;
}

html body.active-dark-mode .rbt-footer a:hover { color: var(--sc-paper) !important; }
html body.active-dark-mode .rbt-footer h1,
html body.active-dark-mode .rbt-footer h2,
html body.active-dark-mode .rbt-footer h3,
html body.active-dark-mode .rbt-footer h4,
html body.active-dark-mode .rbt-footer h5 { color: var(--sc-paper) !important; }

/* `.btn-text` is the label span inside every theme button, and it measured
   1.00:1 — the label and the field were the same colour. A button's label
   follows its own button, so it inherits rather than being painted. */
html body .rbt-btn .btn-text,
html body.active-dark-mode .rbt-btn .btn-text,
html body .prog-apply .btn-text,
html body.active-dark-mode .prog-apply .btn-text { color: inherit !important; }

/* …and the buttons themselves, by the ground they stand on. */
html body.active-dark-mode .prog-section a.rbt-btn,
html body.active-dark-mode .prog-card a.rbt-btn,
html body .prog-section a.rbt-btn,
html body .prog-card a.rbt-btn {
    background: var(--sc-ink) !important;
    background-image: none !important;
    color: var(--sc-paper) !important;
    border: 1px solid var(--sc-ink) !important;
}

html body.active-dark-mode .prog-hero a.rbt-btn,
html body .prog-hero a.rbt-btn,
html body .prog-aside a.rbt-btn,
html body.active-dark-mode .prog-aside a.rbt-btn {
    background: var(--sc-paper) !important;
    background-image: none !important;
    color: var(--sc-ink) !important;
    border: 1px solid var(--sc-accent) !important;
}

/* ------------------------------------------- the footer, said once ------- */

/*
 * Written last and deliberately blunt, because three earlier attempts each
 * fixed one thing and broke another:
 *
 *   - the links were still `--sc-muted`, a warm brown meant for cream
 *     surfaces, sitting on the navy footer at 1.98:1;
 *   - and the fix for that caught the three cream badges inside the footer,
 *     putting cream text on their cream field at 1.07:1.
 *
 * So: everything in the footer reads cream, EXCEPT the badges, which are cream
 * plates and keep their deep-gold label. The `:not()` is the whole point —
 * a container rule has to name its exceptions or it will find them itself.
 */
html body.active-dark-mode footer.rbt-footer *:not(.footer-badge):not(.footer-badge *):not(.uk-license-badge-pill):not(.uk-license-badge-pill *),
html body footer.rbt-footer *:not(.footer-badge):not(.footer-badge *):not(.uk-license-badge-pill):not(.uk-license-badge-pill *) {
    color: color-mix(in srgb, var(--sc-paper) 82%, transparent) !important;
}

html body footer.rbt-footer a:hover { color: var(--sc-paper) !important; }

html body footer.rbt-footer h1,
html body footer.rbt-footer h2,
html body footer.rbt-footer h3,
html body footer.rbt-footer h4,
html body footer.rbt-footer h5,
html body footer.rbt-footer .ft-title { color: var(--sc-accent) !important; }

/* The badges keep the cream plate and the only gold readable on it. */
html body footer.rbt-footer .footer-badge,
html body footer.rbt-footer .footer-badge *,
html body footer.rbt-footer .uk-license-badge-pill,
html body footer.rbt-footer .uk-license-badge-pill * {
    color: var(--sc-accent-deep) !important;
}

html body footer.rbt-footer .footer-badge,
html body footer.rbt-footer .uk-license-badge-pill {
    background: var(--sc-paper-deep) !important;
    border: 1px solid color-mix(in srgb, var(--sc-accent) 55%, transparent) !important;
}


/* The label follows the button. Stated last, and with enough specificity to
   outrank everything above it, because every other attempt in this file to
   colour a button label independently produced a label the same colour as its
   own field. */
html body a.rbt-btn .btn-text,
html body button.rbt-btn .btn-text,
html body .rbt-btn span.btn-text,
html body.active-dark-mode a.rbt-btn .btn-text,
html body.active-dark-mode button.rbt-btn .btn-text,
html body.active-dark-mode .rbt-btn span.btn-text { color: inherit !important; }

/* ------------------------------------------- accreditation badge cards --- */

/* Measured at 1.09:1. The caption is NOT brown on navy, which is what the
   name `text-muted` suggests — it is cream on white: these cards carry
   `bg-white`, and the theme's blanket `body.active-dark-mode span { color:
   #fff }` paints the caption the same colour as the card it sits on.
   The same fault, and the same fix, as the programme sections: name the light
   ground and send its text back to ink. */
html body.active-dark-mode .badge-card .text-muted,
html body.active-dark-mode .bg-white .text-muted,
html body .badge-card .text-muted,
html body .bg-white .text-muted {
    color: var(--sc-muted) !important;
}

html body.active-dark-mode .badge-card h6,
html body.active-dark-mode .bg-white h6,
html body .badge-card h6 {
    color: var(--sc-ink) !important;
}

/* The badge icon was Bootstrap's amber #ffc107 — 1.63:1 on white, and a
   colour from no palette, which is exactly the "unrelated colours" the owner
   objected to. The deep gold is the one gold that reads on a light surface,
   and an icon mark is a mark, not a field. */
html body.active-dark-mode .badge-card .text-warning,
html body .badge-card .text-warning,
html body .bg-white .text-warning {
    color: var(--sc-accent-deep) !important;
}

/* --------------------------------------------- footer newsletter button --- */

/* The Subscribe button measured 1.00:1 — a cream label on a cream field, i.e.
   an invisible button in the footer of every page that shows the newsletter.
   `.btn-gradient` resolves to the paper token here, and the earlier
   `span.btn-text { color: inherit }` fix then faithfully inherits cream onto
   cream. Giving it the navy field makes it the same primary button as
   everywhere else, and the label has something to sit on. */
html body footer .newsletter-form .rbt-btn,
html body.active-dark-mode footer .newsletter-form .rbt-btn {
    background: var(--sc-ink) !important;
    background-image: none !important;
    border-color: var(--sc-ink) !important;
}

html body footer .newsletter-form .rbt-btn .btn-text,
html body footer .newsletter-form .rbt-btn .btn-icon,
html body.active-dark-mode footer .newsletter-form .rbt-btn .btn-text,
html body.active-dark-mode footer .newsletter-form .rbt-btn .btn-icon {
    color: var(--sc-paper) !important;
}

/* ------------------------------------------- accreditation attribution --- */

/* The note sits on the navy band; the cards on it are white. Two grounds in
   one section, so each element names its own. */
html body .badge-strip-note,
html body.active-dark-mode .badge-strip-note {
    color: color-mix(in srgb, var(--sc-paper) 84%, transparent) !important;
}

/* The five icons were five different Bootstrap semantics — warning, success,
   info, primary, danger — in a row whose whole job is to look like a set. */
html body .badge-card .badge-card-icon,
html body.active-dark-mode .badge-card .badge-card-icon {
    color: var(--sc-accent-deep) !important;
}

/* Whose accreditation this is. Set apart by a rule rather than a colour, so it
   reads as attribution rather than as another label. */
html body .badge-card .badge-card-holder,
html body.active-dark-mode .badge-card .badge-card-holder {
    display: block;
    inline-size: 100%;
    margin-block-start: 8px;
    padding-block-start: 8px;
    border-block-start: 1px solid var(--sc-line);
    color: var(--sc-ink) !important;
    font-weight: 700;
    line-height: 1.4;
}

/* ------------------------------------------ accreditation page surfaces --- */

/* Found only after the contrast probe was taught to force the reveal state.
   These cards carry data-sal, so they start at opacity 0; a probe that skips
   invisible elements — as it must — had been reporting the page as clean while
   34 elements failed. The faults are not new, they were merely never visible
   to the measurement.
 *
 * Both card families are white plates, so their headings and monograms need
 * ink, and the Bootstrap semantic badge tints (warning / info / success /
 * primary -opacity) resolve to navy here, putting navy text on navy. The whole
 * family moves onto one cream chip with ink text. */

html body .accreditation-pillar-card h4,
html body .partner-accreditation-card h4,
html body.active-dark-mode .accreditation-pillar-card h4,
html body.active-dark-mode .partner-accreditation-card h4 {
    color: var(--sc-ink) !important;
}

html body .accreditation-pillar-card p,
html body .partner-accreditation-card p,
html body.active-dark-mode .accreditation-pillar-card p,
html body.active-dark-mode .partner-accreditation-card p {
    color: var(--sc-muted) !important;
}

/* The monogram square that stands in for a logo. */
html body .partner-accreditation-card .object-fit-cover,
html body.active-dark-mode .partner-accreditation-card .object-fit-cover {
    background: var(--sc-ink) !important;
}
html body .partner-accreditation-card .object-fit-cover span,
html body.active-dark-mode .partner-accreditation-card .object-fit-cover span {
    color: var(--sc-paper) !important;
}

/* One chip, on the palette, in place of four Bootstrap semantics. */
html body .accreditation-pillar-card .badge,
html body .partner-accreditation-card .badge,
html body.active-dark-mode .accreditation-pillar-card .badge,
html body.active-dark-mode .partner-accreditation-card .badge {
    background: var(--sc-paper-deep) !important;
    border: 1px solid var(--sc-line) !important;
    color: var(--sc-ink) !important;
}

html body .accreditation-pillar-card .badge a,
html body .partner-accreditation-card .badge a,
html body.active-dark-mode .accreditation-pillar-card .badge a,
html body.active-dark-mode .partner-accreditation-card .badge a {
    color: var(--sc-ink) !important;
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* The hero's licence chip sits on the navy band, so it inverts: a cream rule
   around cream text rather than a filled chip. */
html body .rbt-breadcrumb-default .badge.radius-round,
html body section .container.py-5 > .row > div > .badge.radius-round,
html body.active-dark-mode section .container.py-5 > .row > div > .badge.radius-round {
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--sc-paper) 42%, transparent) !important;
    color: var(--sc-paper) !important;
}

/* ------------------------------------------------------- data tables --- */

/* The comparison table had no ground of its own, so it inherited the navy
   page while its cells kept the browser's default black — 1.26:1. A table is
   a reading surface and needs to be one: white ground, ink text, a cream
   header row, and links in the deep gold that reads on light. */
html body .table-responsive,
html body.active-dark-mode .table-responsive {
    background: #fff !important;
    border-radius: 10px;
    overflow: hidden;
}

html body .table-responsive table,
html body.active-dark-mode .table-responsive table { background: transparent !important; }

html body .table-responsive th,
html body.active-dark-mode .table-responsive th {
    background: var(--sc-paper-deep) !important;
    color: var(--sc-ink) !important;
}

html body .table-responsive td,
html body.active-dark-mode .table-responsive td { color: var(--sc-ink) !important; }

html body .table-responsive a,
html body.active-dark-mode .table-responsive a { color: var(--sc-accent-deep) !important; }

/* Accordion panels are white; their body text was inheriting cream. */
html body .accordion-body,
html body .accordion-body p,
html body.active-dark-mode .accordion-body,
html body.active-dark-mode .accordion-body p { color: var(--sc-ink) !important; }