/* Dark theme — the components a token flip cannot reach (issue #111).
   ═══════════════════════════════════════════════════════════════════
   Read theme-surfaces.css first. Its [data-bs-theme="dark"] block re-points five raw palette
   tokens that are each used in exactly one role — --ink, --muted, --rule, --offwhite, --mid —
   and that carries about 160 rules written long before --surface-* existed.

   What is left here is the residue that cannot follow a token:

     * fills pinned to a LITERAL (#fff, #f0f2f5, #eff0f1) — no token to re-point;
     * fills pinned to var(--white), which must stay white because 18 other rules use it as
       text on navy chrome. Re-pointing it would fix these dozen and break those eighteen;
     * INK pinned to var(--navy) or var(--navy2) on an element that declares no fill of its
       own. --navy is used as ink 45 times and as a fill 11 times, so it is in the same
       untouchable position as --white. Where the ink sits on an accent chip it is correct in
       both themes and left alone; where it sits on a surface the element inherits, that
       surface is now navy and the text disappears. 53 rules are in that second group and
       every one of them is a heading, a card title or a hover state, so they take one
       declaration between them.

   Fill and ink for a component belong in the same commit. Fixing .cp-tile's background
   without .cp-tile-title's colour gives a correctly dark card with invisible text, which is
   not a reviewable intermediate state — so this file is organised by area, not by property.

   So this file is a list of surfaces, not a second theme. If a rule here is doing anything
   other than naming a fill, a border or the ink that goes with one, it probably belongs in
   theme-surfaces.css as a token instead.

   PLAIN CSS, NEVER SCSS. Styles/**.scss compiles into customerportal.min.css via `npx sass`,
   which does not run without Node: the build reports success and the committed bundle is not
   regenerated, so a rule added there may never reach a browser. See Styles/README.md section 3.
   A test fails if `data-bs-theme` appears anywhere under Styles/.

   Loaded last in both layouts, so it beats the bundle on equal specificity. Every selector is
   prefixed [data-bs-theme="dark"], which also raises specificity by one attribute — enough to
   win against a bare class in the bundle without !important. */


/* ── Bootstrap surfaces the CDN build does not know about ──────────────────────────────── */

/* .card is _industrial.scss's own, not Bootstrap's: `background: var(--white)` with a --navy2
   header. Three admin views use it instead of .admin-panel, and it is the same surface, so it
   gets the same fill as one. */
[data-bs-theme="dark"] .card {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

/* The header is --navy2 in the bundle, which is exactly what --surface-1 becomes — so without
   this the strip and the card body are the same colour and the header stops being a header.
   Same reason --chrome-fill moves to --blue in theme-surfaces.css. */
[data-bs-theme="dark"] .card-header {
    background: var(--chrome-fill);
    border-bottom-color: var(--chrome-rule);
}

/* The bundle re-declares these with a white fill and --ink text, which overrides Bootstrap's
   own dark-theme form control. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: var(--surface-2);
    border-color: var(--surface-rule);
    color: var(--surface-ink);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--surface-muted);
    opacity: .75;
}

/* Focus keeps the accent ring it has in light mode; only the fill needs saying. */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: var(--surface-2);
    color: var(--surface-ink);
}


/* ── Code ─────────────────────────────────────────────────────────────────────────────────
   `code` and `pre` are #eff0f1 literals in the bundle. --code-ink already follows the token
   flip to accent; the chip behind it does not. Recessed rather than raised: a code sample
   reads as inset on both surfaces. */
[data-bs-theme="dark"] code,
[data-bs-theme="dark"] pre {
    background: var(--surface-2);
}

[data-bs-theme="dark"] pre {
    border: 1px solid var(--surface-rule);
}


/* ── Page chrome ──────────────────────────────────────────────────────────────────────── */

/* The article-page sidebar. #fff !important in the bundle, so this needs it back — the only
   !important in this file, and only because the rule it answers has one. */
[data-bs-theme="dark"] #menu-container {
    background: var(--surface-2) !important;
    border-right-color: var(--surface-rule) !important;
}

/* The header search field: a white pill on the navy bar in light mode, which already reads as
   chrome. On a dark page it wants the chrome treatment rather than a white slab. */
[data-bs-theme="dark"] .Search-Bar {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--chrome-control-border);
    color: var(--chrome-ink);
}

[data-bs-theme="dark"] .Search-Bar::placeholder {
    color: var(--chrome-control-ink);
}

/* site.css's generic button. Its fill is #ffffff with --navy text, which inverts to unreadable. */
[data-bs-theme="dark"] .buttonStyling {
    background: var(--surface-1);
    border-color: var(--surface-rule);
    color: var(--surface-ink);
}


/* ── Home: tiles, updates, news, blog ─────────────────────────────────────────────────── */

[data-bs-theme="dark"] .cp-tile {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

/* The tile lifts toward the light on hover, rather than deepening its shadow. */
[data-bs-theme="dark"] .cp-tile:hover {
    background: var(--chrome-fill);
    border-color: var(--chrome-rule);
}

[data-bs-theme="dark"] .cp-updates-section > ul,
[data-bs-theme="dark"] .cp-updates-section > ol {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

[data-bs-theme="dark"] .cp-blog-card {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}


/* ── Docs and Vis-University hubs ─────────────────────────────────────────────────────────
   #f0f2f5 is these hubs' own canvas tone, a shade off --offwhite; it becomes the page canvas
   rather than the card, because that is the role it played. */
[data-bs-theme="dark"] .visu-hub-body,
[data-bs-theme="dark"] .visu-two-col,
[data-bs-theme="dark"] .visu-search-body,
[data-bs-theme="dark"] .visu-crumb {
    background: var(--surface-2);
}

[data-bs-theme="dark"] .visu-module-card,
[data-bs-theme="dark"] .visu-feature-card,
[data-bs-theme="dark"] .visu-sidebar,
[data-bs-theme="dark"] .visu-search-wrap,
[data-bs-theme="dark"] .visu-search-result,
[data-bs-theme="dark"] .docs-search-result {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}


/* ── Chat ─────────────────────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .chat-panel,
[data-bs-theme="dark"] .chat-post,
[data-bs-theme="dark"] .chat-empty,
[data-bs-theme="dark"] .chat-thread-row,
[data-bs-theme="dark"] .chat-mine-row,
[data-bs-theme="dark"] .chat-result {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

[data-bs-theme="dark"] .chat-thread-row:hover,
[data-bs-theme="dark"] .chat-result:hover {
    background: var(--chrome-fill);
}


/* ── Capabilities ─────────────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .cap-card {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}


/* ── Conferences, partners, releases, downloads, general info, compliance ─────────────── */

[data-bs-theme="dark"] .conf-card,
[data-bs-theme="dark"] .vcc-resource-card,
[data-bs-theme="dark"] .vcc-pres-card,
[data-bs-theme="dark"] .rel-card,
[data-bs-theme="dark"] .dl-accordion,
[data-bs-theme="dark"] .gi-card,
[data-bs-theme="dark"] .gi-service-card,
[data-bs-theme="dark"] .gi-datasheet,
[data-bs-theme="dark"] .compliance-report-card,
[data-bs-theme="dark"] .compliance-report-card--featured {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

[data-bs-theme="dark"] .vcc-resource-card:hover,
[data-bs-theme="dark"] .vcc-pres-card:hover {
    background: var(--chrome-fill);
}

/* The lead card, after the .gi-card list above and at the same specificity so it wins on order
   (issue #145).

   This is why the two cards were indistinguishable in dark mode. `.gi-card-welcome` in the
   compiled bundle is `background: var(--navy)` at specificity (0,1,0); the rule above is
   `[data-bs-theme="dark"] .gi-card` at (0,2,0) and beats it — so in dark mode the lead card was
   NOT keeping its navy, it was being repainted --surface-1 (--navy2) exactly like every ordinary
   card. Nothing else separated them either, since both take light text here.

   Fixed with a token rather than a colour, and by lifting rather than darkening: there is nowhere
   darker to go on a navy canvas, so prominence has to come from the other direction. See the
   --surface-lead note in theme-surfaces.css. */
[data-bs-theme="dark"] .gi-card-welcome {
    background: var(--surface-lead);
    border-color: var(--surface-lead-rule);
}

/* Three surfaces keep a light fill DELIBERATELY, so a future survey does not read them as gaps:

   .partner-logo and .chat-attach-thumb are mats behind customer-supplied artwork — partner
   logos and pasted screenshots are drawn for white paper, and a transparent PNG on navy loses
   its dark strokes entirely. A white mat in a dark UI is a choice here, not an oversight.

   .site-login is the login card, and the login screen is the one place in the app that is
   full-page dark in BOTH themes (see Styles/README.md section 1). A white card on a dark page
   is already its light-mode design; dark mode changes nothing there. */



/* ── Collective Development Program ───────────────────────────────────────────────────────
   The area had no rules in this file at all, which is why its cards stayed white while the
   text written on them followed the theme: --surface-ink (#f2f5f9) on #fff. That is the same
   failure shape as reaching for --status-danger-ink to colour an error message (issue #221) --
   a value that is right in the abstract, painted onto a surface that is not the one it assumes.

   cdp-roadmap.css used to carry a narrow version of the first rule below, scoped to
   .cdp-board-card and .cdp-board-panel so it could not disturb the funded tracks. That was a
   workaround for this section being missing, and it is deleted there now: two owners for one
   concern is what rule 1 exists to prevent. Every CDP surface carries the base class, so
   darkening the base covers the Roadmap Vote board, the Collective Build listing, the
   commitment panel and both detail pages together -- which is the point.

   Panel and card TITLES need nothing here: they are h2 and h3, so the shared heading rule
   below already outranks their var(--navy2) at (0,1,1) against (0,1,0). Card title LINKS do
   need saying, and are in that rule: an anchor takes its colour from its own rule and inherits
   nothing from the heading, so `.cdp-card-title a { color: var(--navy2) }` kept winning -- and
   --navy2 is exactly what --surface-1 becomes in dark, so every card title was navy on navy.

   .cdp-chip, .cdp-progress-track, .cdp-notice, .cdp-filters and .cdp-panel--mine are all
   correct already and are listed here so a later survey does not read them as gaps: each is
   either var(--offwhite), which theme-surfaces.css re-points to the navy canvas, or an alpha
   of --accent, which composites over whatever is behind it. */

[data-bs-theme="dark"] .cdp-card,
[data-bs-theme="dark"] .cdp-panel {
    background: var(--surface-1);
    border-color: var(--surface-rule);
}

[data-bs-theme="dark"] .cdp-card-title a:hover,
[data-bs-theme="dark"] .cdp-card-title a:focus {
    color: var(--surface-link);
}

/* The two status inks. These are the only literal colours in the CDP module and both were
   chosen for a white card: #1c6b45 is 2.6:1 on --navy2 and #b4531f is 3.3:1, so both fail AA
   on the surface they now sit on. --surface-success and --surface-warning are new in
   theme-surfaces.css, completing a set that had only ever been built for danger.

   chat.css writes the same green on .chat-badge-approved and is plain CSS that ships, so it
   points at the token directly and needs no rule here. The CDP module cannot: it is SCSS, and
   a rule added there may never reach a browser (Styles/README.md section 3), so the light
   value stays a literal in _cdp.scss and only the dark half is stated here. */
[data-bs-theme="dark"] .cdp-status-delivered,
[data-bs-theme="dark"] .cdp-progress-met {
    color: var(--surface-success);
}

[data-bs-theme="dark"] .cdp-card-window--soon,
[data-bs-theme="dark"] .cdp-progress-note--hold {
    color: var(--surface-warning);
}

/* ── Ink that would otherwise be navy on navy ─────────────────────────────────────────────
   All 53 of them, in one declaration. Each is a heading, a card title, a section label or a
   hover state that sets `color: var(--navy)` and no fill: correct on the white card it was
   written for, invisible on the navy one it now sits on.

   Grouped by area only for reading. Adding a component means adding its title here as well as
   its fill above — that is the pairing this file exists to keep. */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .article-body h1,
[data-bs-theme="dark"] .article-body h2,
[data-bs-theme="dark"] .article-body h3,
[data-bs-theme="dark"] .article-body h4,
[data-bs-theme="dark"] .article-body h5,
[data-bs-theme="dark"] .article-body h6,
[data-bs-theme="dark"] .toc-group-header,
[data-bs-theme="dark"] .cp-toc li.selected,
/* home and shared */
[data-bs-theme="dark"] .cp-tile-title,
[data-bs-theme="dark"] .cp-updates-section > h2,
[data-bs-theme="dark"] .cp-page-title,
[data-bs-theme="dark"] .cp-page-content h1,
[data-bs-theme="dark"] .cp-page-content h2,
[data-bs-theme="dark"] .cp-page-content h3,
[data-bs-theme="dark"] .cp-submit-success-title,
[data-bs-theme="dark"] .cp-news-label,
[data-bs-theme="dark"] .cp-news-all:hover,
[data-bs-theme="dark"] .cp-blog-title,
/* hubs */
[data-bs-theme="dark"] .visu-module-name,
[data-bs-theme="dark"] .visu-module-title,
[data-bs-theme="dark"] .visu-section-title,
[data-bs-theme="dark"] .visu-article-title,
[data-bs-theme="dark"] .visu-article-body h2,
[data-bs-theme="dark"] .visu-article-body h3,
[data-bs-theme="dark"] .visu-gate-title,
[data-bs-theme="dark"] .visu-feature-title,
[data-bs-theme="dark"] .docs-search-result-title,
/* chat and capabilities */
[data-bs-theme="dark"] .chat-thread-title,
[data-bs-theme="dark"] .chat-result-title,
[data-bs-theme="dark"] .chat-panel-title,
[data-bs-theme="dark"] .chat-author,
[data-bs-theme="dark"] .cap-section-h2,
[data-bs-theme="dark"] .cap-card-name,
/* conferences, partners */
[data-bs-theme="dark"] .conf-title,
[data-bs-theme="dark"] .conf-theme,
[data-bs-theme="dark"] .conf-link:hover,
[data-bs-theme="dark"] .vcc-resource-title,
[data-bs-theme="dark"] .vcc-pres-title,
[data-bs-theme="dark"] .partner-name a,
[data-bs-theme="dark"] .partner-tagline,
/* releases and downloads */
[data-bs-theme="dark"] .rel-year-header h2,
[data-bs-theme="dark"] .rel-version,
[data-bs-theme="dark"] .rel-milestone-label,
[data-bs-theme="dark"] .rel-notes-link:hover,
[data-bs-theme="dark"] .dl-section-title,
[data-bs-theme="dark"] .dl-accordion-label,
[data-bs-theme="dark"] .dl-link:hover,
[data-bs-theme="dark"] .dl-table-wrap table a:hover,
/* general info and compliance */
[data-bs-theme="dark"] .gi-card-title,
[data-bs-theme="dark"] .gi-service-title,
[data-bs-theme="dark"] .gi-section-label h2,
[data-bs-theme="dark"] .gi-link:hover,
[data-bs-theme="dark"] .gi-contact-link:hover,
[data-bs-theme="dark"] .gi-contact-link strong,
[data-bs-theme="dark"] .compliance-section-title,
[data-bs-theme="dark"] .compliance-notice-title,
[data-bs-theme="dark"] .compliance-report-card-title,
[data-bs-theme="dark"] .compliance-prose p strong,
[data-bs-theme="dark"] .compliance-notice-body p strong,
[data-bs-theme="dark"] .compliance-notice-body ul li strong,
/* collective development program */
[data-bs-theme="dark"] .cdp-track-count,
[data-bs-theme="dark"] .cdp-card-title a,
[data-bs-theme="dark"] .cdp-band-table th {
    color: var(--surface-ink);
}