/**
 * EKM accessibility force — component-level WCAG AA overrides (.1459)
 * Uses theme-engine surface-pair tokens; no per-theme hex patches.
 * Surgical: color (+ minimal bg only where scan requires); preserves design-language shape/accent.
 * Pair with: node scripts/verify-portal-accessibility.mjs
 */

/* ── Scan fixture layout (safe in production) ── */
.ekm-a11y-page {
  padding: 16px;
}
html[data-dark] .ekm-a11y-page {
  background: var(--surface-app, #0b0c0f) !important;
}
html:not([data-dark]) .ekm-a11y-page {
  background: var(--surface-app, #e6e5e1) !important;
}
html[data-dark] .ekm-a11y-hero-panel {
  background: var(--surface-panel, #111318) !important;
  padding: 12px;
  border-radius: 12px;
}
html:not([data-dark]) .ekm-a11y-hero-panel {
  background: var(--surface-card, #f2f0eb) !important;
  padding: 12px;
  border-radius: 12px;
}
.ekm-a11y-surface-panel {
  background: transparent !important;
  padding: 16px;
  margin-top: 16px;
}

/* ── 1. Hero strip — surface-panel pair on scan fixture + banner tokens ── */
.hp-awareness-row .hp-hero-greeting {
  color: var(--c-banner-muted, var(--c-hero-accent, var(--text-secondary-on-surface-panel, var(--text-secondary)))) !important;
}
.hp-awareness-row .hp-hero-name {
  color: var(--c-hero-name, var(--c-banner-ink, var(--text-on-surface-panel, var(--text-primary, var(--c-ink, var(--ekm-fg-primary-fallback)))))) !important;
}
.hp-awareness-row .hp-hero-date {
  color: var(--c-hero-date-fg, var(--c-banner-muted2, var(--text-secondary-on-surface-panel, var(--text-secondary)))) !important;
}
.hp-awareness-row .hp-inbox-summary .hp-flank-title,
.hp-awareness-row .hp-updates-summary .hp-flank-title,
.hp-awareness-row .hp-inbox-summary .hp-flank-head,
.hp-awareness-row .hp-updates-summary .hp-flank-head,
.hp-awareness-row #home-updates-list .hp-flank-title {
  color: var(--c-banner-ink, var(--text-on-surface-panel, var(--text-primary, var(--c-ink, var(--ekm-fg-primary-fallback))))) !important;
}
.hp-awareness-row .hp-inbox-summary .hp-flank-meta,
.hp-awareness-row .hp-updates-summary .hp-flank-meta,
.hp-awareness-row #home-updates-list .hp-flank-meta {
  color: var(--c-banner-muted2, var(--text-secondary-on-surface-panel, var(--text-secondary, var(--c-label)))) !important;
}

/* ── 2. KPI cards — surface-panel pair tokens ── */
.ma-kpi {
  background: var(--surface-panel, var(--pq-surface, var(--c-bg))) !important;
}
.ma-kpi .ma-kpi-label {
  color: var(--text-secondary-on-surface-panel, var(--text-secondary, var(--c-label))) !important;
}
.ma-kpi .ma-kpi-val {
  color: var(--text-on-surface-panel, var(--text-primary, var(--c-ink, var(--ekm-fg-primary-fallback)))) !important;
}
.ma-kpi .ma-kpi-trend {
  color: var(--text-muted-on-surface-panel, var(--text-muted, var(--c-muted2))) !important;
}
.ma-kpi .ma-kpi-trend--up {
  color: var(--ma-kpi-trend-up-fg, var(--state-success, #15803d)) !important;
}
.ma-kpi .ma-kpi-trend--down {
  color: var(--ma-kpi-trend-down-fg, var(--state-danger, #b91c1c)) !important;
}

/* ── 3. Card text — surface-card pair tokens ── */
.ekm-card,
.pds-card,
.pds-page .card,
.pq-card,
.wf-reimage-stat-card,
.wf-reimage-widget {
  background: var(--surface-card, var(--c-box)) !important;
}
.ekm-card .ma-card-title,
.pds-card .ma-card-title,
.pq-card .pq-card-name,
.pq-phase-name {
  color: var(--text-on-surface-card, var(--text-primary, var(--c-ink, var(--ekm-fg-primary-fallback)))) !important;
}
.ekm-card .ma-card-status,
.pds-card .ma-card-status,
.pq-card .pq-card-desc,
.pq-card .pq-card-meta,
.pq-phase-sub,
.pq-empty,
.wf-reimage-empty {
  color: var(--text-secondary-on-surface-card, var(--text-secondary, var(--c-label))) !important;
}

/* ── 4. Attention badges — opaque pill (scan reads badge bg, not gradient) ── */
.ma-att-card .ma-card-badge {
  background: var(--ma-att-badge-bg, #fde68a) !important;
  color: var(--ma-att-badge-fg, #3a3008) !important;
  border-color: var(--ma-att-badge-border, rgba(0, 0, 0, 0.12)) !important;
}
.ma-att-card .ma-card-title {
  color: var(--text-on-surface-card, var(--text-primary, var(--c-ink, var(--ekm-fg-primary-fallback)))) !important;
}
.ma-att-card .ma-card-status {
  color: var(--text-secondary-on-surface-card, var(--text-secondary, var(--c-label))) !important;
}

/* ── 5. Buttons — color only; preserve gradients, borders, radius, shadow ── */
button.btn-primary,
.btn-primary,
button.gold-btn,
.gold-btn,
button.pq-newbtn,
.pq-newbtn,
button.potd-action-btn--primary,
.potd-action-btn--primary {
  color: var(--btn-primary-fg, var(--c-accent-ink, var(--c-accent-text, #fff))) !important;
}
button.btn-secondary,
.btn-secondary,
button.wf-reimage-validate-btn,
.wf-reimage-validate-btn,
button.potd-action-btn:not(.potd-action-btn--primary),
.potd-action-btn:not(.potd-action-btn--primary) {
  color: var(--btn-secondary-fg, var(--c-ink)) !important;
}

/* Disabled — beats html[data-dark] [disabled]:not(...) (0,3,1) via class on element */
html button.btn-primary:disabled,
html button.btn-primary[disabled],
html button.btn-secondary:disabled,
html button.btn-secondary[disabled],
html .btn-primary:disabled,
html .btn-primary[disabled],
html .btn-secondary:disabled,
html .btn-secondary[disabled],
html[data-dark] button.btn-primary:disabled,
html[data-dark] button.btn-primary[disabled],
html[data-dark] button.btn-secondary:disabled,
html[data-dark] button.btn-secondary[disabled],
html[data-dark] [disabled].btn-primary:not(input):not(select):not(textarea),
html[data-dark] [disabled].btn-secondary:not(input):not(select):not(textarea),
html:not([data-dark]) button.btn-primary:disabled,
html:not([data-dark]) button.btn-primary[disabled],
html:not([data-dark]) button.btn-secondary:disabled,
html:not([data-dark]) button.btn-secondary[disabled] {
  opacity: 1 !important;
  color: var(--btn-disabled-fg, #ffffff) !important;
  background: var(--btn-disabled-bg, #6b6560) !important;
  border-color: var(--btn-disabled-bg, #6b6560) !important;
}

/* WF Today gold new-btn — solid base for contrast scan. Text color uses --c-accent-text
   (theme-engine's own contrast-validated pair for --wf-gold-dark/--accent-gold), not a
   hardcoded white — that broke badly on cool/light-accent themes like midnight_navy, where
   --wf-gold-dark resolves to a pale blue-gray and white-on-white was unreadable. */
button.wf-reimage-new-btn,
.wf-reimage-new-btn {
  background-color: var(--wf-gold-dark, #8b7355) !important;
  color: var(--c-accent-text, #faf8f4) !important;
}

/* ── WF Today tabs — color only; preserve gold gradient, terra, borders, shadow ── */
.wf-reimage-tabs .pq-tab:not(.active):not(.pending-active),
.wf-reimage-tabs button.pq-tab:not(.active):not(.pending-active) {
  color: var(--wf-reimage-tab-fg, var(--text-on-surface-card, var(--c-ink2))) !important;
}
.wf-reimage-tabs .pq-tab.active,
.wf-reimage-tabs .pq-tab.is-active,
.wf-reimage-tabs button.pq-tab.active,
.wf-reimage-tabs button.pq-tab.is-active {
  color: #1a1816 !important;
}
.wf-reimage-tabs .pq-tab.active .wf-reimage-tab-badge,
.wf-reimage-tabs .pq-tab.is-active .wf-reimage-tab-badge {
  color: #1a1816 !important;
  background-color: #c9b080 !important;
}
.wf-reimage-tabs .pq-tab.pending-active,
.wf-reimage-tabs button.pq-tab.pending-active {
  color: var(--wf-terra, #c49a82) !important;
}
.wf-reimage-tabs .pq-tab.pending-active .wf-reimage-tab-badge {
  color: var(--wf-terra-deep, #a67b62) !important;
}
.wf-reimage-tabs .pq-tab:not(.active):not(.pending-active) .wf-reimage-tab-badge {
  color: var(--wf-reimage-tab-fg, var(--text-on-surface-card, var(--c-ink2))) !important;
}

/* ── Nav rail — strip native button face so scan reads page/panel bg ── */
.hp-nav-rail-item,
button.hp-nav-rail-item,
.hp-nav-rail-child,
button.hp-nav-rail-child {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.hp-nav-rail-item,
button.hp-nav-rail-item {
  color: var(--hp-nav-rail-fg, var(--text-secondary-on-surface-panel, var(--text-secondary, var(--c-muted2)))) !important;
}
.hp-nav-rail-item.is-active,
button.hp-nav-rail-item.is-active {
  color: var(--hp-nav-rail-active-fg, var(--text-on-surface-panel, var(--text-primary, var(--c-ink, var(--ekm-fg-primary-fallback))))) !important;
}
.hp-nav-rail-child,
button.hp-nav-rail-child {
  color: var(--hp-nav-rail-child-fg, var(--text-secondary-on-surface-panel, var(--hp-nav-rail-fg, var(--text-secondary, var(--c-muted2))))) !important;
}

/* ── WF Today stat copy ── */
.wf-reimage-stat-lbl,
.wf-reimage-stat-sub,
.wf-reimage-subtitle {
  color: var(--text-secondary-on-surface-card, var(--text-secondary, var(--c-label))) !important;
}
.wf-reimage-stat-val,
.wf-reimage-header h2 {
  color: var(--text-on-surface-card, var(--text-primary, var(--c-ink, var(--ekm-fg-primary-fallback)))) !important;
}

/* ── What's New banner ── */
.whats-new-banner-badge.os-badge--warn {
  background: var(--whats-new-badge-bg, #fff8e1) !important;
  color: var(--whats-new-badge-fg, #7a5400) !important;
  border: 0.5px solid var(--whats-new-badge-border, rgba(122, 84, 0, 0.22)) !important;
}
html[data-dark] .whats-new-banner-badge.os-badge--warn {
  background: var(--whats-new-badge-bg, rgba(224, 160, 106, 0.28)) !important;
  color: var(--whats-new-badge-fg, #f5d87a) !important;
  border-color: var(--whats-new-badge-border, rgba(245, 216, 122, 0.35)) !important;
}
.whats-new-banner-open {
  color: var(--whats-new-open-fg, #ffffff) !important;
  background-color: var(--whats-new-open-bg, #454545) !important;
  border-color: var(--whats-new-open-border, #454545) !important;
}

.pds-page .ma-card-badge,
.pds-page span.ma-card-badge {
  background: var(--ma-att-badge-bg, #fde68a) !important;
  color: var(--ma-att-badge-fg, #3a3008) !important;
  border: 0.5px solid var(--ma-att-badge-border, rgba(0, 0, 0, 0.12)) !important;
}

/* Accent links — AA normal text (4.5:1) on app surface */
section[data-a11y-page="buttons"] a {
  color: var(--accent-on-surface-app, var(--c-accent)) !important;
}

/* ── Messages — standard outgoing bubbles ── */
/* Unmapped senders only — person-pc uses sender identity color (Erin teal, etc.) */
.msg-bubble.mine:not(.msg-person-pc) .msg-thread-prose,
.msg-bubble.mine:not(.msg-person-pc) .msg-bubble-sender,
.theme-preview-bubble.mine {
  color: var(--msg-bubble-mine-fg, var(--btn-primary-fg, #fff)) !important;
}
/* Reimage hub mine — gold only when no person color (a11y contrast for theme accent) */
html .msg-hub-reimage-layout .msg-bubble.mine:not(.msg-person-pc),
html[data-dark] .msg-hub-reimage-layout .msg-bubble.mine:not(.msg-person-pc),
html:not([data-dark]) .msg-hub-reimage-layout .msg-bubble.mine:not(.msg-person-pc) {
  background: linear-gradient(145deg, #dcc06a, #c9a227) !important;
  background-color: #c9a227 !important;
  border-color: color-mix(in srgb, var(--c-accent, #D6B06B) 45%, transparent) !important;
  color: #1a1814 !important;
}
html .msg-hub-reimage-layout .msg-bubble.mine:not(.msg-person-pc) .msg-thread-prose,
html .msg-hub-reimage-layout .msg-bubble.mine:not(.msg-person-pc) .msg-bubble-sender,
html[data-dark] .msg-hub-reimage-layout .msg-bubble.mine:not(.msg-person-pc) .msg-thread-prose,
html[data-dark] .msg-hub-reimage-layout .msg-bubble.mine:not(.msg-person-pc) .msg-bubble-sender {
  color: #1a1814 !important;
  -webkit-text-fill-color: #1a1814 !important;
  background: transparent !important;
}
/* Person-color mine (Erin #0ABAB5 etc.) — must beat prior !important gold force */
html .msg-hub-reimage-layout .msg-bubble.msg-person-pc.mine,
html[data-dark] .msg-hub-reimage-layout .msg-bubble.msg-person-pc.mine,
html:not([data-dark]) .msg-hub-reimage-layout .msg-bubble.msg-person-pc.mine,
html .msg-bubble.msg-person-pc.mine,
html[data-dark] .msg-bubble.msg-person-pc.mine {
  background: color-mix(in srgb, var(--msg-pc, #0ABAB5) 72%, #0a0a0c) !important;
  background-color: color-mix(in srgb, var(--msg-pc, #0ABAB5) 72%, #0a0a0c) !important;
  border-color: color-mix(in srgb, var(--msg-pc, #0ABAB5) 55%, transparent) !important;
  color: #f8f6f2 !important;
}
html .msg-hub-reimage-layout .msg-bubble.msg-person-pc.mine .msg-thread-prose,
html .msg-hub-reimage-layout .msg-bubble.msg-person-pc.mine .msg-bubble-sender,
html .msg-bubble.msg-person-pc.mine .msg-thread-prose,
html .msg-bubble.msg-person-pc.mine .msg-bubble-sender,
html[data-dark] .msg-hub-reimage-layout .msg-bubble.msg-person-pc.mine .msg-thread-prose,
html[data-dark] .msg-hub-reimage-layout .msg-bubble.msg-person-pc.mine .msg-bubble-sender,
html[data-dark] .msg-bubble.msg-person-pc.mine .msg-thread-prose,
html[data-dark] .msg-bubble.msg-person-pc.mine .msg-bubble-sender {
  color: #f8f6f2 !important;
  -webkit-text-fill-color: #f8f6f2 !important;
  background: transparent !important;
}

/* ── Modals, forms, settings ── */
.modal h3,
.modal p,
.pq-chat-head h3,
.pq-mi-item,
.whats-new-banner-line,
.form-label,
.ekm-table th {
  color: var(--text-secondary-on-surface-card, var(--text-secondary, var(--c-label))) !important;
}
.ekm-table td,
.theme-swatch > div:last-child {
  color: var(--text-on-surface-card, var(--text-primary, var(--c-ink, var(--ekm-fg-primary-fallback)))) !important;
}
.pq-pill {
  color: var(--text-on-surface-card, var(--text-primary, var(--c-ink, var(--ekm-fg-primary-fallback)))) !important;
}