/* Hand-made dark-theme fixes, loaded last on every page (Erik, 7 Nov 2026: dark by default on the whole
   site and the app). theme.js sets <html data-theme>; the bulk of the dark palette is generated into the
   *.dark.css twins by tools/dark-theme/build.py. Fixes here are for what a colour swap can't judge:
   things meant to stay dark, brand blue on a dark canvas, and colours set from JavaScript. */
[data-theme="dark"] { color-scheme: dark; }

/* Marketplace family (marketplace, console, start, account, requests, agents): blue text and links are a
   step lighter so they read on near-black (5.2:1); blue buttons keep the deeper blue so their white
   label stays at 5.2:1. */
[data-theme="dark"] { --rose: #3b82f6; --rose-grad: #2563eb; }
[data-theme="dark"] .btn-rose:hover { background: #1d4ed8; }
[data-theme="dark"] .mk-code { background: #161618; color: #e8eaf0; border: 1px solid #2a2a2e; }
[data-theme="dark"] .cx-body .ws-compose.is-offer .ws-send { color: #fff; }

/* Console opening screen: the page under it is dark, so it fades from dark, not white. The 3D mark is
   shaded light with a dark void in console.js. */
@keyframes cx-boot-out-dark { 0%, 45% { background: #0f0f0f; } 100% { background: rgba(15, 15, 15, 0); } }
[data-theme="dark"] .cx-boot.is-opening { animation-name: cx-boot-out-dark; }

/* Wordmarks drawn as dark images */
[data-theme="dark"] .sw-logo img, [data-theme="dark"] .mm-logo img { filter: invert(1); }

/* Brand logos are drawn for a light ground, so their chips stay white. */
[data-theme="dark"] .cx-agents span { background: none; border: 0; box-shadow: none; color: #ececec; }
[data-theme="dark"] .mk-tool.is-brand { background: #fff; }

/* The preview's banner, menu and feedback box (styles set by preview.js) */
[data-theme="dark"] .gxp-bar, [data-theme="dark"] .gxp-intro { background: #1c1b21; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 40px rgba(0, 0, 0, .5); }
[data-theme="dark"] .gxp-menu, [data-theme="dark"] .gxp-box { background: #1c1b21; color: #f4f3f6; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 60px rgba(0, 0, 0, .55); }
[data-theme="dark"] .gxp-menu button:hover { background: #2a2930; }
[data-theme="dark"] .gxp-menu small, [data-theme="dark"] .gxp-box p { color: #a9a6b0; }
[data-theme="dark"] .gxp-box textarea, [data-theme="dark"] .gxp-box input { background: #121116; border-color: #36343c; }
[data-theme="dark"] .gxp-send { background: #f4f3f6; color: #16151a; }
[data-theme="dark"] .gxp-x { background: #2a2930; color: #f4f3f6; }
[data-theme="dark"] .gxp-err { color: #ff8a80; }

/* The marketplace inside the console, on a narrow frame (styles set by marketplace/embed.js) */
[data-theme="dark"].mk-embed .nav-top .mk-mini, [data-theme="dark"] .mk-embed .nav-top .mk-mini { background: var(--paper) !important; box-shadow: none !important; }

/* Cookie pill (inline styles from consent.js): lift it off the dark page with a hairline. */
[data-theme="dark"] #gxConsent { background: #1d1d20 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 4px 16px rgba(0, 0, 0, .5) !important; }

/* The light/dark switch in the footers and the console sidebar (theme.js wires every [data-gx-theme]). */
.gx-theme-btn { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cx-foot .gx-theme-btn { justify-self: start; color: var(--ink-2); text-decoration: none; }
.cx-foot .gx-theme-btn:hover { color: var(--ink); }

/* Homepage footer: it was the one dark band on a light page; on a dark page a hairline marks where it starts. */
[data-theme="dark"] .ff { border-top: 1px solid #262423; }
[data-theme="dark"] .dl-dot { color: #fff; }

/* "Browse by sector" tiles in dark mode (Erik, 8 Nov: "that doesn't look right"). The light-mode
   pastels sat on the dark page with a light icon on top, so the icons all but vanished. In dark each
   tile takes the same hue, deep and muted, with the icon in a light tint of it. */
[data-theme="dark"] .mk-srow .ic { background: #232326; color: #d6d6da; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
@supports (color: oklch(from red l c h)) {
  [data-theme="dark"] .mk-srow .ic { background: oklch(from var(--tile, #eef0f4) .3 calc(c * 2.6) h); color: oklch(from var(--tile, #eef0f4) .88 calc(c * 3.2) h); }
}

/* Pipeline widget on home, dark: the stage ramp runs from deep to bright blue, then green for delivered. */
[data-theme="dark"] .cx-pmini [data-i="0"] { background: #2a3a5c; } [data-theme="dark"] .cx-pmini [data-i="1"] { background: #34508a; }
[data-theme="dark"] .cx-pmini [data-i="2"] { background: #3f63b0; } [data-theme="dark"] .cx-pmini [data-i="3"] { background: #4a7bdc; }
[data-theme="dark"] .cx-pmini [data-i="4"] { background: #6b93e6; } [data-theme="dark"] .cx-pmini [data-i="5"] { background: #8eaeee; }
[data-theme="dark"] .cx-pmini [data-i="6"] { background: #b3c9f5; } [data-theme="dark"] .cx-pmini [data-i="7"] { background: #3fbf7f; }

/* Partner portal pipeline (9 Nov): the buyer console's dark board colours (console.dark.css .pb-*). */
[data-theme="dark"] .gb-main .cx-kick { color: #909095; }
[data-theme="dark"] .pb-lane { border-color: #232326; background: linear-gradient(180deg, rgba(80, 120, 255, .09), rgba(80, 120, 255, .02) 70%, transparent); }
[data-theme="dark"] .pb-card { border-color: #2a2a2e; background: #141416; }
[data-theme="dark"] .pb-card:hover { border-color: #45454b; }
[data-theme="dark"] .pb-btn { border-color: #313135; color: #e0e0e0; }
[data-theme="dark"] .pb-btn.is-pri { border-color: #2563eb; background: #2563eb; color: #fff; }
[data-theme="dark"] .pb-t { color: #f2f2f4; }
[data-theme="dark"] .pb-sent { color: #91f0b2; }
[data-theme="dark"] .pb-you { color: #6ea2ff; }
[data-theme="dark"] .pb-mix.is-empty i { background: #2a2a2e; }
[data-theme="dark"] .seg { background: #1a1a1c; }
[data-theme="dark"] .seg button[aria-pressed="true"] { background: #2a2a2e; color: #f2f2f4; }
[data-theme="dark"] .cal { border-color: #2a2a2e; background: #141416; }
[data-theme="dark"] .cal-mh button, [data-theme="dark"] .cal-d.is-open { background: #17233d; color: #6ea2ff; }
[data-theme="dark"] .cal-d.is-open:hover { background: #1e2e52; }
[data-theme="dark"] .cal-d.is-sel, [data-theme="dark"] .cal-d.is-sel:hover { background: #2563eb; color: #fff; }
[data-theme="dark"] .cal-mh button:disabled { background: none; color: #555; }
[data-theme="dark"] .cal-t { background: #141416; border-color: #2f4f99; color: #6ea2ff; }
[data-theme="dark"] .cal-t:hover { border-color: #3b82f6; }
[data-theme="dark"] .cal-pick span { background: #3a3a40; }
[data-theme="dark"] .cal-pick button { background: #2563eb; color: #fff; }