/*
  Shared by every page of engagementrate.app: colour tokens for both themes, the header with the
  theme switch, the footer. The theme follows the system unless the visitor picked one: theme.js
  puts it on <html data-theme>. The dark tokens are written twice, for each of the two ways to get
  there. The gradient is the extension's own, from its icon, badge and panel.
*/
:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --grad: linear-gradient(45deg, #F9A13B 0%, #F2546B 40%, #D6307F 65%, #8A3AB9 100%);
  --bg: #F6F5F8;
  --card: #FFFFFF;
  --line: #E7E5EC;
  --text: #131318;
  --muted: #5E6170;
  --accent: #D6307F;
  --accent-soft: #FCEBF3;
  --accent-text: #B4206A;
  --page: #FFFFFF;
  --tile: #ECEAF0;
  --omnibox: #EFEDF2;
  --shadow: 0 1px 2px rgb(20 16 40 / 0.06), 0 10px 28px rgb(20 16 40 / 0.09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F1013;
    --card: #17181D;
    --line: #2A2B32;
    --text: #F3F3F5;
    --muted: #A3A5AE;
    --accent: #EC4C93;
    --accent-soft: #34172A;
    --accent-text: #FF8EC0;
    --page: #0B0B0D;
    --tile: #23242A;
    --omnibox: #23242A;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px rgb(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1013;
  --card: #17181D;
  --line: #2A2B32;
  --text: #F3F3F5;
  --muted: #A3A5AE;
  --accent: #EC4C93;
  --accent-soft: #34172A;
  --accent-text: #FF8EC0;
  --page: #0B0B0D;
  --tile: #23242A;
  --omnibox: #23242A;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px rgb(0 0 0 / 0.4);
}

/* Pictures and icons drawn for one theme: .only-light and .only-dark. Only ever hidden, so each
   keeps its own display. */
:root[data-theme="light"] .only-dark,
:root[data-theme="dark"] .only-light { display: none !important; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .only-dark { display: none !important; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .only-light { display: none !important; } }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); }

.site-header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand {
  display: flex; align-items: center; gap: 12px; margin-right: auto;
  color: inherit; text-decoration: none; font-weight: 650; font-size: 17px; letter-spacing: -0.01em;
}
.brand img { width: 40px; height: 40px; }
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  cursor: pointer; padding: 0;
}
.theme-toggle:hover { color: var(--text); border-color: var(--muted); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }

/* The main button: the gradient, as on the extension's own buttons. */
.button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 12px;
  background: var(--grad); color: #fff; font-weight: 650; text-decoration: none;
  box-shadow: 0 6px 18px rgb(214 48 127 / 0.28);
}
.button:hover { filter: brightness(1.06); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.button svg { width: 20px; height: 20px; }

.site-footer { color: var(--muted); font-size: 14px; text-align: center; margin-top: 28px; }
.site-footer a { color: inherit; }