/* The site's copy of the extension's look: same Inter, same tokens, same dark mode.
   Bundled in docs/fonts so the pages make no request outside this folder. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Light tokens. Dark ones follow, for System (no data-theme) and for a forced Dark. */
:root {
  --paper: #F7F8FA;
  --surface: #FFFFFF;
  --ink: #141A24;
  --ink-2: #3E4757;
  --slate: #5E6878;
  --line: #E6E9EF;
  --line-soft: #EFF1F5;
  --hover: #F1F3F6;
  --teal: #0E7C6B;
  --teal-ink: #FFFFFF;
  --teal-text: #0B6B5C;
  --teal-wash: #E6F3F0;
  --teal-line: #BFE0D8;
  --amber: #D98C0B;
  --amber-ink: #8F5600;
  --amber-wash: #FBF1DD;
  --danger: #C2362B;
  --focus: #0E7C6B;
  --tile-light: #FFFFFF;
  --shadow-tile: inset 0 0 0 1px rgb(20 26 36 / .08);
  --shadow-pop: 0 24px 64px -12px rgb(10 14 20 / .28), 0 2px 6px rgb(10 14 20 / .06);
  --shadow-card: 0 1px 2px rgb(10 14 20 / .04), 0 12px 32px -16px rgb(10 14 20 / .16);
  --radius: 8px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font);
  --fast: 160ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --paper: #12161D;
    --surface: #181D26;
    --ink: #E9EDF3;
    --ink-2: #C4CBD6;
    --slate: #8E98A8;
    --line: #262D3A;
    --line-soft: #1F2631;
    --hover: #1D232D;
    --teal: #3FC1A8;
    --teal-ink: #0B1A17;
    --teal-text: #3FC1A8;
    --teal-wash: #16302C;
    --teal-line: #234B44;
    --amber: #F2B441;
    --amber-ink: #F2B441;
    --amber-wash: #30271A;
    --danger: #F07167;
    --focus: #3FC1A8;
    --tile-light: #F1F3F6;
    --shadow-tile: inset 0 0 0 1px rgb(255 255 255 / .1);
    --shadow-pop: 0 24px 64px -12px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .04);
    --shadow-card: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -20px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}

:root[data-theme=dark] {
  --paper: #12161D;
  --surface: #181D26;
  --ink: #E9EDF3;
  --ink-2: #C4CBD6;
  --slate: #8E98A8;
  --line: #262D3A;
  --line-soft: #1F2631;
  --hover: #1D232D;
  --teal: #3FC1A8;
  --teal-ink: #0B1A17;
  --teal-text: #3FC1A8;
  --teal-wash: #16302C;
  --teal-line: #234B44;
  --amber: #F2B441;
  --amber-ink: #F2B441;
  --amber-wash: #30271A;
  --danger: #F07167;
  --focus: #3FC1A8;
  --tile-light: #F1F3F6;
  --shadow-tile: inset 0 0 0 1px rgb(255 255 255 / .1);
  --shadow-pop: 0 24px 64px -12px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .04);
  --shadow-card: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -20px rgb(0 0 0 / .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Painted on html too, so an overscroll or a tall screenshot never shows a white edge in dark mode. */
html { background: var(--paper); }

/* The extension's 13 px is for a 360 px popup; pages people read get 15 px on the same scale. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--font);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); }
p { margin: 0; }
b, strong { font-weight: 600; }
a { color: var(--teal-text); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
code {
  font: 500 .88em/1 ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
  padding: 2px 6px; border-radius: 5px;
  background: var(--line-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  overflow-wrap: anywhere;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 12.5px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--fast), background var(--fast), filter var(--fast), transform var(--fast);
}
.btn:hover { box-shadow: inset 0 0 0 1px var(--slate); }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn.primary {
  background: var(--teal); color: var(--teal-ink);
  box-shadow: 0 1px 1px rgb(0 0 0 / .08), inset 0 1px 0 rgb(255 255 255 / .12);
}
.btn.primary:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .55; cursor: default; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}