/*!
 * iSpyConnect site — palette overrides (Spectre default).
 * The site stacks darkly + the app's spectre dialog theme (_Layout.cshtml),
 * but its markup predates the app's dark-only redesign and uses Bootstrap's
 * light/dark utilities for panels, dropdowns and offcanvas menus. NOTE:
 * darkly is an INVERTED theme — its $dark compiles to a LIGHT grey and vice
 * versa — so the utilities cannot be fixed by remapping the shared
 * --bs-light/--bs-dark rgb vars (bg-* and text-* read the same vars; that
 * turned the bg-dark hero pale blue). Override each utility for what the
 * site MEANS by it: every panel is a raised Command card.
 * Loaded after the dialog theme css and mainsite4.css.
 *
 * THEMING: colors reference the dialog theme's --bs-* root vars (defined in
 * <palette>.overrides.css, mapped from themes.canvasThemes in the app's
 * themes.js) plus the --site-* tokens below, so the whole site follows the
 * palette stylesheet the head boot script in _Layout picks. Per-palette
 * --site-* values live in the [data-site-theme] blocks — keep them in sync
 * with themes.js when palettes change.
 */

/* VARIABLE-level remap: darkly's inverted --bs-light/--bs-dark/--bs-secondary
   values leak into var()-driven page css (buy.css uses var(--bs-light) for
   the page body, var(--bs-secondary) for muted text, etc.). Safe to remap
   here ONLY because the utility classes below are pinned with !important —
   without those pins this remap turns bg-dark panels pale (learned the hard
   way). light = raised surface, dark = text, secondary = secondary text. */
:root,
[data-bs-theme=dark] {
    /* Dark native UA chrome: scrollbars, form controls, popups. Without this
       the browser renders light scrollbars on the dark site. */
    color-scheme: dark;
    --bs-light: var(--bs-secondary-bg);
    --bs-light-rgb: var(--bs-secondary-bg-rgb);
    --bs-dark: var(--bs-body-color);
    --bs-dark-rgb: var(--bs-body-color-rgb);
    --bs-secondary: var(--bs-secondary-color);
    --bs-secondary-rgb: var(--bs-secondary-color-rgb);
    /* Semantic *-subtle vars: darkly compiles these as LIGHT pastel fills
       (light-theme leftovers — e.g. the buy page's annual-savings pill
       rendered as a mint slab). Re-pin to the site's semantic wash
       language; the text-emphasis inks match the .alert-* inks below.
       primary-subtle is left alone — the dialog themes pin it per palette. */
    --bs-success-bg-subtle: rgba(var(--bs-success-rgb), 0.12);
    --bs-success-border-subtle: rgba(var(--bs-success-rgb), 0.40);
    --bs-success-text-emphasis: #57C983;
    --bs-warning-bg-subtle: rgba(var(--bs-warning-rgb), 0.12);
    --bs-warning-border-subtle: rgba(var(--bs-warning-rgb), 0.40);
    --bs-warning-text-emphasis: #F5C168;
    --bs-danger-bg-subtle: rgba(var(--bs-danger-rgb), 0.12);
    --bs-danger-border-subtle: rgba(var(--bs-danger-rgb), 0.40);
    --bs-danger-text-emphasis: #F0868E;
    --bs-info-bg-subtle: rgba(var(--bs-info-rgb), 0.12);
    --bs-info-border-subtle: rgba(var(--bs-info-rgb), 0.40);
    --bs-info-text-emphasis: #7CC1EE;
}

/* Site tokens the dialog themes don't provide. Defaults are Spectre (the
   site default — matches the app's default and the static link/meta in
   _Layout); the [data-site-theme] blocks below re-pin them per palette
   (values from themes.canvasThemes: toolbar, grid, surface, borderStrong).
   on-accent is the ink on solid-accent fills — dark for the light accents
   (cyan, green, pink, gold, violet), white for Moonraker's mid blue.
   accent-2 is the partner hue in decorative gradients (home/features):
   Spectre keeps its designed cyan→blue sweep; the others fade
   accent→accent-text. */
:root {
    --site-border-rgb: 120, 220, 255;
    --site-on-accent: #041018;
    --site-toolbar: #0D141D;
    --site-steel-hover: #1D3348;
    --site-steel-hover-border: #2C4560;
    --site-accent-2: #5B8DEF;
}

:root[data-site-theme=moonraker] {
    --site-border-rgb: 255, 255, 255;
    --site-on-accent: #FFFFFF;
    --site-toolbar: #171C27;
    --site-steel-hover: #2C3444;
    --site-steel-hover-border: rgba(255, 255, 255, 0.25);
    --site-accent-2: #7AA8F5;
}

:root[data-site-theme=skyfall] {
    --site-border-rgb: 255, 255, 255;
    --site-on-accent: #121C15;
    --site-toolbar: #17271D;
    --site-steel-hover: #2C4435;
    --site-steel-hover-border: rgba(255, 255, 255, 0.25);
    --site-accent-2: #6FDB95;
}

:root[data-site-theme=moneypenny] {
    --site-border-rgb: 255, 255, 255;
    --site-on-accent: #1C1218;
    --site-toolbar: #271721;
    --site-steel-hover: #442C3B;
    --site-steel-hover-border: rgba(255, 255, 255, 0.25);
    --site-accent-2: #FF9DCE;
}

:root[data-site-theme=goldeneye] {
    --site-border-rgb: 255, 255, 255;
    --site-on-accent: #1C1810;
    --site-toolbar: #272013;
    --site-steel-hover: #443822;
    --site-steel-hover-border: rgba(255, 255, 255, 0.25);
    --site-accent-2: #F5CE6E;
}

:root[data-site-theme=vesper] {
    --site-border-rgb: 255, 255, 255;
    --site-on-accent: #16121C;
    --site-toolbar: #1E1727;
    --site-steel-hover: #382C44;
    --site-steel-hover-border: rgba(255, 255, 255, 0.25);
    --site-accent-2: #BB9DFF;
}

/* Language-suggestion banner (mainsite3.js matchLanguageAndProvideLink):
   accent wash + highlight link, replacing the old solid bg-info bar that
   ignored the palette. The close button inherits body ink. */
#languageOption.language-banner {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.35);
}

#languageOption.language-banner .alert-link {
    color: var(--bs-primary-text-emphasis);
}

#languageOption.language-banner .btn {
    color: var(--bs-body-color);
}

/* Site-wide scrollbars follow the palette — scrollbar-color inherits from
   :root, so this covers the viewport scrollbar and every overflow pane.
   Values are the app's per-palette scrollbar tokens (themes.js); the docs
   sidebar (ug2.css) restates the same values with a thin width. */
:root {
    scrollbar-color: rgba(30, 60, 80, 0.85) transparent;
}

:root[data-site-theme=moonraker] {
    scrollbar-color: rgba(48, 58, 78, 0.85) transparent;
}

:root[data-site-theme=skyfall] {
    scrollbar-color: rgba(48, 78, 58, 0.85) transparent;
}

:root[data-site-theme=moneypenny] {
    scrollbar-color: rgba(78, 48, 66, 0.85) transparent;
}

:root[data-site-theme=goldeneye] {
    scrollbar-color: rgba(78, 68, 46, 0.85) transparent;
}

:root[data-site-theme=vesper] {
    scrollbar-color: rgba(63, 48, 78, 0.85) transparent;
}

/* Footer: themed band — raised surface fading to the page surface, with
   the standard card edge on top. (Was Bootstrap's generic .bg-gradient, a
   translucent WHITE wash over the body color that read as off-palette
   grey on every theme.) */
footer {
    background: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg));
    border-top: 1px solid rgba(var(--site-border-rgb), 0.14);
}

/* Footer theme picker: accent swatch dot buttons (markup in _Layout's
   footer, wired by initThemeMenu in mainsite3.js). */
#themeMenu .theme-dot {
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    flex: none;
}

#themeMenu .theme-dot:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

#themeMenu .theme-dot.active {
    box-shadow: 0 0 0 2px #FFFFFF;
}

/* Panels: hero (bg-dark) and feature/dropdown/offcanvas surfaces (bg-light)
   both become the raised Command surface with the standard card edge.
   These !important pins are what make the variable remap above safe. */
.bg-light,
.bg-dark {
    background-color: var(--bs-secondary-bg) !important;
    border: 1px solid rgba(var(--site-border-rgb), 0.14);
}

.text-dark {
    color: var(--bs-body-color) !important;
}

/* Exception to the remap above: on semantic LIGHT fills (the buy page's
   amber "Annual Only" pill), text-dark means what it says — real dark ink.
   Higher specificity + later position beat the light remap. */
.bg-warning.text-dark {
    color: #201A05 !important;
}

/* darkly's text-light is a mid grey — fine on the dark surfaces, but lift
   it slightly for readability on the raised cards. */
.text-light {
    color: var(--bs-body-color) !important;
}

/* Dropdown/offcanvas menus that carried bg-light: item colors + Command
   hover states (their darkly hover styling assumed a light surface). */
.dropdown-menu.bg-light .dropdown-item,
.offcanvas.bg-light {
    color: var(--bs-body-color);
}

.dropdown-menu.bg-light .dropdown-item:hover,
.dropdown-menu.bg-light .dropdown-item:focus {
    color: #FFFFFF;
    background-color: var(--bs-tertiary-bg);
}

/* Dividers in those menus: the standard subtle card-edge border. (Never
   border-dark here — the inverted darkly remap makes --bs-dark light ink,
   which renders as a harsh white rule.) */
.dropdown-menu.bg-light .dropdown-divider {
    border-color: rgba(var(--site-border-rgb), 0.14);
    opacity: 1;
}

/* Page-title bands (section#header-btm.bg-primary on most pages): under
   darkly these were steel blue; Command's primary is a LIGHT cyan, so the
   solid band with white text was blinding and unreadable. Use the app's
   accent-wash banner language instead — links inside pick up Command's
   cyan link color, which reads fine on the wash. */
section.bg-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.10) !important;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.35);
}

/* Download tile (#linkMain, platform-colored): a solid accent tile is fine
   as the highlight, but cyan takes dark ink — white-on-cyan fails contrast
   (same rule as the app's btn-primary). Other platform tiles (bg-success /
   bg-dark / bg-info) keep their own readable pairings. */
#linkMain.bg-primary,
#linkMain.bg-primary .text-light {
    color: var(--site-on-accent) !important;
}

/* Buy page plan header (buy.css: full-width solid var(--bs-primary) cap
   with a white h2 — unreadable on cyan, and it competes with the price for
   attention). Restyle in the app's card-cap language: dark cap, accent
   title, accent rule — the cyan price below stays the focal point.
   !important because buy.css loads AFTER this sheet (page HeadScript);
   the h2 needs direct color (headings take --bs-heading-color, they don't
   inherit — which is why an inherited ink fix didn't take). */
.pricing-card .card-header {
    background: var(--site-toolbar) !important;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.35) !important;
}

.pricing-card .card-header h2 {
    color: var(--bs-primary-text-emphasis);
}

/* Advisor form card cap: same problem and same card-cap language as the
   pricing cards above (solid bg-primary with text-white — white on
   Command's light cyan is unreadable). The bg-primary/text-white utilities
   were dropped from the markup, so no !important fight here; the title
   takes direct color for the same heading-color reason as above. */
.card-header.card-cap {
    background: var(--site-toolbar);
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.35);
}

.card-header.card-cap .card-title {
    color: var(--bs-primary-text-emphasis);
}

/* Neutral notice panels (translation tokens use .alert-light, e.g. the
   contact page's "check the latest version" note): darkly compiles this as
   a light-grey slab, which the site's light text can't sit on. What the
   site MEANS is a quiet raised note — style it as a standard raised card
   with accent links. Direct props, not just the --bs-alert-* vars: darkly
   stomps alert fills with literal background-colors. */
.alert-light {
    --bs-alert-color: var(--bs-body-color);
    --bs-alert-bg: var(--bs-secondary-bg);
    --bs-alert-border-color: rgba(var(--site-border-rgb), 0.14);
    --bs-alert-link-color: var(--bs-primary-text-emphasis);
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    border-color: rgba(var(--site-border-rgb), 0.14);
}

.alert-light a {
    color: var(--bs-primary-text-emphasis);
}

/* Accent callouts (alert-primary: the business page's "prove it" panel,
   the comparison pages' verdict notes, cameras-page intro, userguide
   sidebar headers — and alert-info: the userguide's note boxes, manage's
   payment notice): darkly compiles these as literal slabs that ignore
   the palette. On this site "info" is just "callout", not a semantic
   blue, so both variants get the standard accent wash — same language as
   section.bg-primary. Semantic hues (success/warning/danger below) stay
   fixed. Direct props for the same reason as .alert-light above: darkly
   stomps alert fills with literal colors. */
.alert-info,
.alert-primary {
    --bs-alert-color: var(--bs-body-color);
    --bs-alert-bg: rgba(var(--bs-primary-rgb), 0.10);
    --bs-alert-border-color: rgba(var(--bs-primary-rgb), 0.35);
    --bs-alert-link-color: var(--bs-primary-text-emphasis);
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-primary-rgb), 0.10);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
}

.alert-info a,
.alert-primary a {
    color: var(--bs-primary-text-emphasis);
}

/* Semantic alerts (status page's "All systems OK" / outage banner, the
   manage page's error notices): the hue stays semantic on
   every palette — green means OK whether the theme is cyan or pink — but
   darkly's muddy solid slabs become the same wash language as the rest
   of the site, with a bright semantic ink so the state reads at a glance.
   The *-rgb vars come from darkly's root (success/danger re-pinned per
   dialog theme); direct props for the same darkly-stomping reason as
   .alert-light. */
.alert-success {
    --bs-alert-color: #57C983;
    --bs-alert-bg: rgba(var(--bs-success-rgb), 0.12);
    --bs-alert-border-color: rgba(var(--bs-success-rgb), 0.40);
    --bs-alert-link-color: #57C983;
    color: #57C983;
    background-color: rgba(var(--bs-success-rgb), 0.12);
    border-color: rgba(var(--bs-success-rgb), 0.40);
}

.alert-warning {
    --bs-alert-color: #F5C168;
    --bs-alert-bg: rgba(var(--bs-warning-rgb), 0.12);
    --bs-alert-border-color: rgba(var(--bs-warning-rgb), 0.40);
    --bs-alert-link-color: #F5C168;
    color: #F5C168;
    background-color: rgba(var(--bs-warning-rgb), 0.12);
    border-color: rgba(var(--bs-warning-rgb), 0.40);
}

.alert-danger {
    --bs-alert-color: #F0868E;
    --bs-alert-bg: rgba(var(--bs-danger-rgb), 0.12);
    --bs-alert-border-color: rgba(var(--bs-danger-rgb), 0.40);
    --bs-alert-link-color: #F0868E;
    color: #F0868E;
    background-color: rgba(var(--bs-danger-rgb), 0.12);
    border-color: rgba(var(--bs-danger-rgb), 0.40);
}

/* Links on colored bands (translation tokens use .link-light, e.g. the
   download page's "pricing" link): with --bs-light remapped to the dark
   surface above, Bootstrap's .link-light utility resolves dark-on-dark and
   the link disappears. Pin it to actual light ink; !important matches the
   utility's own. */
.link-light {
    color: var(--bs-body-color) !important;
}

.link-light:hover,
.link-light:focus {
    color: #FFFFFF !important;
}

/* Badges (camera pages' protocol chips and anywhere else): cyan takes dark
   ink — white-on-cyan fails contrast (same rule as btn-primary). And with
   --bs-secondary remapped to a light blue-grey above, bg-secondary badges
   would render light-on-light; pin them as neutral console chips instead.
   !important needed to beat the bg-* utilities' own !important. */
.badge.bg-primary {
    color: var(--site-on-accent);
}

.badge.bg-secondary {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-secondary-color);
    border: 1px solid rgba(var(--site-border-rgb), 0.25);
}

/* Anchors styled as buttons inside alerts (e.g. the past-due payment
   warning's "Update Payment Method" link): darkly's bootswatch layer has
   `.alert a { color:#fff; text-decoration:underline }`, which outranks
   `.btn-*` (0,1,1 vs 0,1,0) — on the cyan fill that's unreadable white,
   underlined. <button>s are unaffected, which is why only alert links
   showed it. Restore each button's own ink from the theme's btn vars. */
.alert a.btn {
    color: var(--bs-btn-color);
    text-decoration: none;
}

.alert a.btn:hover {
    color: var(--bs-btn-hover-color);
}

.alert a.btn:active {
    color: var(--bs-btn-active-color);
}

/* btn-dark (download page's macOS button, navbar's disabled EN chip): darkly
   compiles this as warm charcoal #303030 — off-palette and near-invisible on
   the raised card. What the site MEANS is a quiet neutral console button;
   mirror the app's btn-secondary steel (hover lightens, dark-theme
   convention) so it stays subdued but visible. */
.btn-dark {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--site-steel-hover);
    --bs-btn-hover-border-color: var(--site-steel-hover-border);
    --bs-btn-focus-shadow-rgb: 36, 56, 78;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--bs-border-color);
    --bs-btn-active-border-color: var(--site-steel-hover-border);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: var(--bs-tertiary-bg);
    --bs-btn-disabled-border-color: var(--bs-border-color);
}

/* Current-page nav highlight (_Layout sets .active + aria-current server-side).
   Accent ink / accent wash, not Bootstrap's primary-fill treatment — white-on-
   cyan fails contrast (same rule as btn-primary). The offcanvas links are all
   link-primary cyan already, so the active one is marked with a wash chip
   rather than a color change. */
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--bs-primary-text-emphasis);
}

.dropdown-menu.bg-light .dropdown-item.active {
    color: var(--bs-primary-text-emphasis);
    background-color: rgba(var(--bs-primary-rgb), 0.10);
}

.offcanvas .nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), 0.10);
    border-radius: 0.25rem;
}

/* Compare-plans table header (thead.table-dark on Buy): darkly compiles
   table-dark as literal warm charcoal — off-palette grey on every theme
   (same compile-time literal problem as btn-dark). Style it in the
   card-cap language: toolbar surface, body ink, accent rule underneath —
   matching the pricing-card headers above it on the page. */
.table-dark {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--site-toolbar);
    --bs-table-border-color: rgba(var(--site-border-rgb), 0.14);
    --bs-table-hover-color: #FFFFFF;
    --bs-table-hover-bg: var(--site-toolbar);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

thead.table-dark {
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.35);
}

/* Compare-plans table (Buy): tier-group rows carry the table-light variant,
   which darkly renders as light-grey slabs with light text. Keep the
   grouping, restyle it as a subtle accent wash. */
.table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: rgba(var(--bs-primary-rgb), 0.06);
    --bs-table-border-color: rgba(var(--site-border-rgb), 0.14);
    --bs-table-hover-color: #FFFFFF;
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}