/*
 * Plain CSS on purpose. This page is served from the web, not from the extension
 * bundle, so it is outside the Vite build and has no Tailwind available — and one
 * static page is not worth a build step to give it one.
 *
 * The palette is the extension's own: Tailwind slate for text, --color-brand from
 * src/sidepanel/index.css for the accent. Keep them in step if either changes.
 */

:root {
  --bg: #ffffff;
  --text: #0f172a; /* slate-900 */
  --muted: #334155; /* slate-700 */
  --brand: #e85d14;
  --shadow:
    0 8px 24px rgba(2, 6, 23, 0.08),
    0 2px 8px rgba(2, 6, 23, 0.06);
  /* Narrower than the 860px the reference page uses, which sets the screenshot
     width and so their height. At 860 the second step sits ~80px below the fold on
     a laptop, and a reader with no evidence that a step 2 exists does not scroll. */
  --max: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a; /* slate-900 */
    --text: #f1f5f9; /* slate-100 */
    --muted: #cbd5e1; /* slate-300 */
    /* Lifted from the extension's #e85d14, which only reaches about 4.3:1 against
       this background. On a button the brand orange carries white text; here it is
       the text, so it has to be legible on its own. */
    --brand: #ff7a3d;
    --shadow:
      0 8px 24px rgba(0, 0, 0, 0.5),
      0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  /* The same stack as the side panel (src/sidepanel/index.css). Deliberately not a
     webfont: this page's whole job is to be read once, immediately, and a font
     request would block that on a third party. */
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  line-height: 1.6;
  /* Tell the browser both palettes exist, so form controls and scrollbars match. */
  color-scheme: light dark;
}

.wrap {
  max-width: var(--max);
  margin: 32px auto 72px;
  padding: 0 20px;
}

/* Icon beside the title rather than above it: the fold is the scarce resource
   here. Every row above the first screenshot pushes the second one further out of
   sight, and a reader who cannot see that a second step exists will not scroll. */
.head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.mark {
  display: block;
  flex: none;
  border-radius: 10px;
}

.title {
  margin: 0;
  /* Capped at 30px so the whole line fits beside the icon in the 720px column.
     At 40px it wrapped and left "installed" alone on a second line. */
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}

.brand {
  color: var(--brand);
}

.step {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 20px);
}

.step strong {
  color: var(--text);
  font-weight: 700;
}

.figure {
  margin: 18px 0 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Prose pages (privacy policy) share the shell above but need running text styles. */
.prose {
  color: var(--muted);
  font-size: 16px;
}

.prose h2 {
  margin: 32px 0 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.3;
}

.prose p,
.prose li {
  margin: 12px 0;
}

.prose ul {
  padding-left: 22px;
}

.prose strong {
  color: var(--text);
}

.prose code {
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  font-size: 0.9em;
}

.prose a {
  color: var(--brand);
}

.meta {
  margin: 8px 0 24px;
  font-size: 14px;
  opacity: 0.75;
}

.back {
  margin-top: 40px;
}