/* Blur Picture main page. Twin of the extension's editor (editor/editor.css): the same tokens, font,
   buttons and radius. No web fonts and no external files are loaded. The editor itself is the
   extension's editor tab, shown in the iframe without any frame of its own. */
:root {
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #e8efff;
  --ink: #1f2937;
  --ink-soft: #374151;
  --muted: #6b7280;
  --line: #e5e7eb;
  --surface: #ffffff;
  --stage: #eef0f3;
  --slider: #0d9488;             /* Strength / Softness sliders */
  --radius: 8px;
  --focus: 0 0 0 3px rgba(37, 99, 235, .35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.5;
}
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

/* Buttons: the editor's .btn, .btn.primary */
.btn {
  height: 36px;
  border-radius: var(--radius);
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: #f9fafb; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:focus-visible { box-shadow: var(--focus); border-radius: var(--radius); }
.btn.quiet { height: 32px; padding: 0 12px; font-size: 13px; color: var(--ink-soft); }

/* First screen: one headline line, one hint line, then the editor down to the bottom of the window. */
.first { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 600px; }
.top {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
}
.top h1 { flex: 1 1 auto; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.top-nav { display: flex; align-items: center; gap: 18px; }
.top-nav > a:not(.btn) { font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 6px 0; }
.top-nav > a:not(.btn):hover { color: var(--accent); }

.tool { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; scroll-margin-top: 0; }
.tool .hint {
  flex: none;
  margin: 0;
  padding: 6px 24px;
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.tool iframe { flex: 1 1 auto; display: block; width: 100%; min-height: 0; border: 0; }

/* After the first Download only: a quiet note about the extension. */
.get-ext {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 20;
  max-width: 380px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.get-ext img { flex: none; display: block; }
.get-ext p { flex: 1 1 240px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.get-ext-actions { display: flex; gap: 8px; margin-left: 36px; }
.get-ext .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.get-ext .btn:first-child { color: var(--accent); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 48px 24px 0; }
h2 { margin: 0 0 14px; font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; line-height: 1.2; }
h3 { margin: 22px 0 6px; font-size: 16px; font-weight: 700; }
p, li { font-size: 16px; }
main section { margin: 0 0 48px; }
main section > p { margin: 0; color: var(--ink-soft); }

.uses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.uses li {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 600;
  color: var(--ink-soft);
}
.tips { margin: 0; padding-left: 22px; }
.tips li { margin: 0 0 8px; padding-left: 4px; }
.tips li::marker { color: var(--slider); font-weight: 700; }

.faq h3:first-child { margin-top: 0; }
.faq p { margin: 0; color: var(--ink-soft); }

.footer { border-top: 1px solid var(--line); padding: 18px 24px 28px; text-align: center; }
.footer nav { display: inline-flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.footer a { display: inline-block; padding: 8px 2px; font-size: 14px; font-weight: 600; }

@media (max-width: 720px) {
  .first { min-height: 560px; }
  .top { padding: 8px 16px; gap: 2px 14px; }
  .top h1 { flex-basis: 100%; font-size: 17px; }
  .top-nav { gap: 14px; }
  .top-nav > a:not(.btn) { font-size: 13px; }
  .btn.quiet { height: 28px; margin-left: auto; }
  .top-nav { flex: 1 1 auto; }
  .tool .hint { padding: 5px 16px; font-size: 13px; line-height: 1.4; }
  .wrap { padding: 36px 16px 0; }
  main section { margin-bottom: 36px; }
  .get-ext { left: 8px; right: 8px; top: 8px; bottom: auto; max-width: none; }
  .get-ext-actions { margin-left: 0; }
}

/* Chrome extensions do not install on phones and tablets: there, "Add to Chrome" and "Get the extension"
   give way to a plain note. Narrow window or no fine pointer; no user-agent sniffing. */
.mob-only { display: none; }
.desk-note { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px), not all and (pointer: fine) {
  .desk-only { display: none !important; }
  .mob-only { display: inline; }
  .top-nav { flex-wrap: wrap; row-gap: 2px; }
  .top-nav > a:not(.btn) { white-space: nowrap; }
  .top-nav .desk-note { margin-left: auto; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }