/* ============================================================
   Margo Pulse — demanded UI overrides (load AFTER styles+buttons)
   1) Menu column + top banners: margo leaf @ 20% opacity
   2) Announcement banner: People-tile border color + role ink
   3) Chrome circle symbols: bold white on leaf (readable)
   ============================================================ */

:root {
  --margo-leaf: #df765a;
  --margo-leaf-20: rgba(223, 118, 90, 0.20);
  --people-border: #942a24; /* matches .dir-card People tile border */
  --announce-bg: var(--people-border);
  --announce-ink: #000000;
}

/* ---- Menu column + top banners: leaf @ 20% transparency ---- */
html.skin-pro #app .app-head,
html.skin-pro #app .topbar,
html.skin-pro .app-head,
html.skin-pro .topbar {
  background: var(--margo-leaf-20) !important;
  background-image: none !important;
}

html.skin-pro #app .nav,
html.skin-pro #app .nav-rail,
html.skin-pro #app .side-nav,
html.skin-pro #app aside.nav,
html.skin-pro #app .chrome-stack,
html.skin-pro #app .ask-row,
html.skin-pro .nav,
html.skin-pro .chrome-stack {
  background: var(--margo-leaf-20) !important;
  background-image: none !important;
}

/* Keep active nav pill solid leaf so it still reads */
html.skin-pro #app .nav button.active,
html.skin-pro #app .nav .active,
html.skin-pro .nav button.active {
  background: var(--margo-leaf) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ---- Announcement banner: People border color + role font ---- */
html.skin-pro #app .pulse-announce,
html.skin-pro #app .announce-ticker-bar,
html.skin-pro #app .announce-ticker,
html.skin-pro #app .announce-ticker.pro-tick,
html.skin-pro #app button.announce-ticker,
html.skin-pro #app .announce-ticker-post,
html.skin-pro .pulse-announce,
html.skin-pro .announce-ticker-bar,
html.skin-pro .announce-ticker {
  background: var(--announce-bg) !important;
  background-image: none !important;
  color: var(--announce-ink) !important;
  -webkit-text-fill-color: var(--announce-ink) !important;
}

html.skin-pro #app .announce-ticker-run,
html.skin-pro #app .announce-ticker-run.pro-tick,
html.skin-pro #app .announce-ticker-track,
html.skin-pro .announce-ticker-run {
  color: var(--announce-ink) !important;
  -webkit-text-fill-color: var(--announce-ink) !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 700 !important;
}

/* Explicit role ink (set by role-chrome.js on <html>) */
html[data-announce-ink="black"] {
  --announce-ink: #000000;
}
html[data-announce-ink="white"] {
  --announce-ink: #ffffff;
}
html[data-announce-bg] {
  --announce-bg: attr(data-announce-bg); /* fallback below */
}

/* ---- Chrome circle buttons: bold white symbols on leaf ---- */
html.skin-pro #app .mp-circle,
html.skin-pro #app .win-btn,
html.skin-pro #app .skin-orb,
html.skin-pro #app .work-btn,
html.skin-pro #app .talk-orb,
html.skin-pro .mp-circle,
html.skin-pro .win-btn,
html.skin-pro .skin-orb {
  background: var(--margo-leaf) !important;
  background-image: none !important;
  border: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 800 !important;
}

html.skin-pro #app .mp-circle svg,
html.skin-pro #app .mp-circle *,
html.skin-pro #app .win-btn svg,
html.skin-pro #app .win-btn *,
html.skin-pro #app .skin-orb svg,
html.skin-pro #app .skin-orb img,
html.skin-pro #app .work-ico svg,
html.skin-pro #app .talk-orb svg,
html.skin-pro #app button.mp-circle svg,
html.skin-pro .mp-circle svg,
html.skin-pro .win-btn svg,
html.skin-pro .skin-orb svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2.25 !important;
  opacity: 1 !important;
}

/* Pause / moon / music / leaf topbar icons — force white + bold stroke */
html.skin-pro #app .topbar button svg,
html.skin-pro #app .topbar-right button svg,
html.skin-pro #app .topbar .mp-circle svg,
html.skin-pro #app .topbar .win-btn svg,
html.skin-pro #app .app-head button svg,
html.skin-pro .topbar button svg,
html.skin-pro .app-head button svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  stroke-width: 2.25 !important;
}

/* Motion / theme toggle icons in header */
html.skin-pro #app .topbar-right svg,
html.skin-pro #app .topbar-right path,
html.skin-pro #app .topbar-right line,
html.skin-pro #app .topbar-right circle,
html.skin-pro #app .topbar-right polyline {
  stroke: #ffffff !important;
  fill: #ffffff !important;
  color: #ffffff !important;
}