/* Every modal, dialog and popover on the current palette (docs/STYLE-GUIDE.md): neutral near-black surfaces, gold as
   the only accent, no navy, purple or old orange-gold (Shaun, 2026-10-09: "makes sure no modals use the old color
   styling/ i think profile and hand history and maybe others still have old element colors"). Loads after every other
   sheet. The :root:not(#_) prefix lifts these over the old sheets' id selectors and !important rules. */

/* 1. The old palette variables (style.css :root) re-pointed at the tokens inside each modal, so every rule that reads
      --bg-card, --gold-light, --text-secondary... picks up the new colours. */
:root:not(#_) :is(#rcm-overlay, #profile-modal, #history-modal, #hhr-modal, #cz-stats-modal, #hud-popover, #notes-popover,
  #button-draw-overlay, #leaderboard-modal, #bvb-standings-modal, #bvb-config-modal, #community-modal, #daily-chest-modal,
  #first-run-overlay, .modal-overlay, #zero-chips-modal, #prop-intro-modal, .waiting-overlay) {
  --bg-dark: var(--muck-bg); --bg-card: var(--muck-surface-1); --bg-card2: var(--muck-surface-2);
  --bg-surface: var(--muck-surface-2); --bg-surface2: var(--muck-surface-3); --bg-input: var(--muck-surface-3);
  --gold: var(--muck-gold); --gold-light: var(--muck-gold); --gold-dim: var(--muck-gold-muted);
  --accent: var(--muck-gold); --accent-dim: var(--muck-gold-muted);
  --accent-bg: color-mix(in srgb, var(--muck-gold) 12%, transparent); --accent-border: var(--muck-line-strong);
  --text-primary: var(--muck-text); --text-secondary: var(--muck-text-2); --text-muted: var(--muck-text-3);
  --purple: var(--muck-gold); --purple-light: var(--muck-gold); --purple-deep: var(--muck-gold);
  --ui-surface: var(--muck-surface-1); --ui-card-bg: var(--muck-surface-1); --ui-line: var(--muck-line);
  --ui-line-strong: var(--muck-line-strong); --ui-hover-line: var(--muck-line-strong); --ui-hover-bg: var(--muck-surface-2);
  --ui-sel-bg: color-mix(in srgb, var(--muck-gold) 10%, transparent); --ui-sel: var(--muck-gold); --ui-text: var(--muck-text);
  --ui-muted: var(--muck-text-2); --ui-primary: var(--muck-gold); --px-purple: var(--muck-gold); --px-purple-hover: var(--muck-gold);
  --px-gold: var(--muck-gold);
}

/* 2. Shells: surface-1, a 1px line, a plain shadow. Not the profile when it's a page (#s2-panel, /profile): there the
   cards sit straight on the page, no box behind them (Shaun, 2026-10-10: "kill that background box"). */
:root:not(#_) :is(.rcm-dialog, .profile-dialog:not(#s2-panel *), .history-dialog, .hhr-dialog, .czs-dialog, .hud-popover, .notes-popover,
  .button-draw-card, .lb-dialog, .fro-card, .zc-card, .modal-overlay:not(#s2-panel *) > .modal-dialog, #prop-intro-modal .gom-card) {
  background: var(--muck-surface-1) !important;
  border: 1px solid var(--muck-line) !important;
  box-shadow: 0 24px 64px rgb(0 0 0 / 75%) !important;
  color: var(--muck-text);
}
:root:not(#_) :is(.rcm-overlay, .modal-overlay, #history-modal, #profile-modal, #hhr-modal, #cz-stats-modal, #zero-chips-modal) { background-color: rgb(0 0 0 / 72%); }
:root:not(#_) :is(.profile-header, .history-header, .history-sidebar, .history-street-tabs, .lb-tabs) { border-color: var(--muck-line) !important; }
:root:not(#_) :is(.profile-section-label, .history-sidebar-label, .history-log-label, .htp-section h3) .material-symbols-rounded { color: var(--muck-gold) !important; }

/* 3. Buttons: one gold primary; everything else the dark secondary. */
:root:not(#_) :is(.rcm-btn--confirm, .notes-popover-save, .fro-create-btn, .btn-hhr-open, #rcm-twitter-submit-btn) {
  background: var(--muck-gold-cta) !important; border: 0 !important; color: var(--muck-gold-ink) !important; font-weight: 800; filter: none !important;
}
:root:not(#_) :is(.rcm-btn--confirm, .notes-popover-save, .fro-create-btn, .btn-hhr-open, #rcm-twitter-submit-btn):hover { background: var(--muck-gold-cta-hover) !important; color: var(--muck-gold-ink); }
/* "Nice!" on the success state is a dismiss, and the X handle's "Use this" is the action there. */
:root:not(#_) :is(#rcm-done-btn, .rcm-btn--cancel, .czs-load-more-btn, .hhr-upload-label, .hhr-play-btn) {
  background: var(--muck-surface-3) !important; border: 1px solid var(--muck-line-strong) !important; color: var(--muck-text) !important;
}
:root:not(#_) :is(#rcm-done-btn, .rcm-btn--cancel, .czs-load-more-btn, .hhr-upload-label, .hhr-play-btn):hover:not(:disabled) { border-color: var(--muck-gold-muted) !important; filter: none !important; }
:root:not(#_) .hhr-play-active { background: color-mix(in srgb, var(--muck-gold) 10%, transparent) !important; border-color: var(--muck-gold-muted) !important; color: var(--muck-gold) !important; }

/* 4. Inputs: surface-3, a line, a gold-muted focus. */
:root:not(#_) :is(#rcm-overlay, #profile-modal, .modal-overlay, #zero-chips-modal, #notes-popover, #first-run-overlay) :is(input[type=text], input[type=email], input[type=number], input:not([type]), textarea, select):not(.settings-input) {
  background: var(--muck-surface-3) !important; border: 1px solid var(--muck-line-strong) !important; color: var(--muck-text) !important;
}
:root:not(#_) :is(#rcm-overlay, #profile-modal, .modal-overlay, #zero-chips-modal, #notes-popover, #first-run-overlay) :is(input, textarea, select):not(.settings-input):focus {
  border-color: var(--muck-gold-muted) !important; outline: none; box-shadow: none !important;
}
:root:not(#_) .fro-terms-check { accent-color: var(--muck-gold); }

/* 5. Gold details that were the old orange-gold or purple. */
:root:not(#_) .rcm-price { color: var(--muck-gold) !important; }
:root:not(#_) .rcm-spinner { border-color: var(--muck-line-strong) !important; border-top-color: var(--muck-gold) !important; }
:root:not(#_) :is(.rcm-item-name, .rcm-success-title) { color: var(--muck-text) !important; }
:root:not(#_) :is(.rcm-item-tagline, .rcm-balance-after, .rcm-success-desc, .rcm-processing-text) { color: var(--muck-text-2) !important; }
:root:not(#_) .profile-avatar { background-color: var(--muck-bg) !important; border-color: var(--muck-line-strong) !important; }
/* .profile-coach outside the main pages only: Rewards, Missions and the rest sit on the page with no box (Shaun,
   2026-10-10: their content ran into the box's edge, "these sections need padding"). */
:root:not(#_) :is(.profile-team--hero, .profile-coach:not(.s2-panel-body *), .history-result.split, .button-draw-result, .czs-cap-msg, .hhr-hand-badge) {
  background: var(--muck-surface-2) !important; border-color: var(--muck-line-strong) !important;
}
:root:not(#_) :is(.profile-team--hero, .czs-cap-msg strong) { color: var(--muck-gold) !important; }
:root:not(#_) .history-hand-item { border-color: var(--muck-line) !important; }
:root:not(#_) :is(.history-hand-list, .hhr-dialog *) { scrollbar-color: var(--muck-line-strong) transparent; }
:root:not(#_) .history-hand-list::-webkit-scrollbar-thumb { background: var(--muck-line-strong); }
:root:not(#_) :is(.hhr-log-item--current, .hhr-hand-list-item.hhr-hli--active) { background: color-mix(in srgb, var(--muck-gold) 8%, transparent) !important; border-left-color: var(--muck-gold-muted) !important; }
:root:not(#_) .hhr-log-item--street { color: var(--muck-gold-muted) !important; }
:root:not(#_) .hhr-seat-info { background: var(--muck-surface-2) !important; }
:root:not(#_) .hhr-seat-info--active { border-color: var(--muck-gold-muted) !important; }
:root:not(#_) .hhr-street-btn.active { background: color-mix(in srgb, var(--muck-gold) 10%, transparent) !important; border-color: var(--muck-gold-muted) !important; color: var(--muck-gold) !important; }
:root:not(#_) .lb-table tbody tr.lb-row--me { background: color-mix(in srgb, var(--muck-gold) 8%, transparent) !important; border-color: var(--muck-line-strong) !important; }
:root:not(#_) .lb-table tbody tr.lb-row--clickable:active { background: var(--muck-surface-2) !important; }
:root:not(#_) .fro-avatar-btn--sel { border-color: var(--muck-gold) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--muck-gold) 30%, transparent) !important; }
:root:not(#_) .zc-hint a { color: var(--muck-gold) !important; }
:root:not(#_) .zc-pack-btn:hover { border-color: var(--muck-gold-muted) !important; }
:root:not(#_) .htp-tagline { background: var(--muck-surface-2) !important; border-color: var(--muck-line) !important; }
:root:not(#_) .hud-popover, :root:not(#_) .notes-popover { color: var(--muck-text); }
:root:not(#_) .waiting-overlay { background: rgb(0 0 0 / 88%) !important; }

/* 6. Found by a computed-colour audit of each open modal (purple / navy / old gold). The card-back, felt and suit
      swatches in Settings are choices, not chrome, and keep their colours. */
:root:not(#_) :is(#rcm-overlay, #profile-modal, #history-modal, #zero-chips-modal, .modal-overlay, #first-run-overlay, #prop-intro-modal, #notes-popover, #hud-popover) .btn-primary,
:root:not(#_) #btn-hh-download {
  background: var(--muck-gold-cta) !important; border: 0 !important; color: var(--muck-gold-ink) !important; box-shadow: none !important; filter: none !important;
}
:root:not(#_) #btn-hh-report { background: var(--muck-surface-3) !important; border: 1px solid var(--muck-line-strong) !important; color: var(--muck-text-2) !important; }
:root:not(#_) #btn-hh-report:hover { border-color: var(--muck-gold-muted) !important; color: var(--muck-text) !important; }
:root:not(#_) #btn-hh-report .material-symbols-rounded { color: inherit !important; }
:root:not(#_) .modal-overlay .toggle-thumb { background-color: var(--muck-text-2) !important; }
:root:not(#_) .notes-popover-name { color: var(--muck-text) !important; }   /* the note colour swatches are choices and keep theirs */
:root:not(#_) #prop-intro-modal .gom-trophy-spotlight { background: radial-gradient(color-mix(in srgb, var(--muck-gold) 22%, transparent), transparent 70%) !important; }