/* ════════════════════════════════════════════
   main.css
   YouTube Thumbnail Downloader — shared styles
   Single stylesheet for all pages (home, privacy,
   disclaimer, contact, 404, error).
════════════════════════════════════════════ */

* { box-sizing: border-box; }

:root {
  --content-width: 680px;
  --ink: #1a1a1a;
  --ink-soft: #333;
  --ink-muted: #555;
  --ink-faint: #888;
  --ink-quiet: #666;
  --border: #e0e0dc;
  --border-strong: #dcdcd6;
  --border-soft: #eeeee8;
  --underline: #aaa;
  --bg: #fafaf8;
  --surface: #fff;
  --pill-bg: #f0efe9;
  --img-bg: #eee;
  --on-ink: #fff;
  --ink-hover: #333;
  --icon-muted: #999;
  --placeholder: #757575;
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-pill: 0 4px 14px rgba(0,0,0,0.18);
  --shadow-dialog: 0 20px 60px rgba(0,0,0,0.25);
  color-scheme: light;
}

/* ── Dark theme ──────────────────────────────────────────────
   1) :root[data-theme="dark"] is set by the inline script in head.ejs
      (saved choice, else the system setting) before first paint, so
      there is no flash of the wrong theme.
   2) The media-query block is only a fallback for visitors with
      JavaScript disabled, where data-theme is never set.
   Keep both token lists identical. */
:root[data-theme="dark"] {
  --ink: #ededea;
  --ink-soft: #d2d2ce;
  --ink-muted: #a8a8a2;
  --ink-faint: #8a8a84;
  --ink-quiet: #9a9a94;
  --border: #34342f;
  --border-strong: #44443e;
  --border-soft: #2a2a27;
  --underline: #6e6e68;
  --bg: #121211;
  --surface: #1c1c1a;
  --pill-bg: #262624;
  --img-bg: #262624;
  --on-ink: #121211;
  --ink-hover: #d0d0cc;
  --icon-muted: #77776f;
  --placeholder: #8a8a84;
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.5);
  --shadow-pill: 0 4px 14px rgba(0,0,0,0.5);
  --shadow-dialog: 0 20px 60px rgba(0,0,0,0.6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ink: #ededea;
    --ink-soft: #d2d2ce;
    --ink-muted: #a8a8a2;
    --ink-faint: #8a8a84;
    --ink-quiet: #9a9a94;
    --border: #34342f;
    --border-strong: #44443e;
    --border-soft: #2a2a27;
    --underline: #6e6e68;
    --bg: #121211;
    --surface: #1c1c1a;
    --pill-bg: #262624;
    --img-bg: #262624;
    --on-ink: #121211;
    --ink-hover: #d0d0cc;
    --icon-muted: #77776f;
    --placeholder: #8a8a84;
    --shadow-sm: 0 1px 6px rgba(0,0,0,0.4);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.5);
    --shadow-pill: 0 4px 14px rgba(0,0,0,0.5);
    --shadow-dialog: 0 20px 60px rgba(0,0,0,0.6);
    color-scheme: dark;
  }
}

@media (min-width: 1024px) {
  :root {
    --content-width: 820px;
  }
}

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  padding: 40px 20px;
  line-height: 1.7;
  font-size: clamp(15px, 0.9vw + 12px, 18px);
}

.page {
  max-width: var(--content-width);
  margin: 0 auto;
}

h1 {
  font-size: clamp(28px, 2vw + 20px, 36px);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 10px;
}

.intro {
  font-size: clamp(15px, 0.4vw + 13px, 17px);
  color: var(--ink-muted);
  margin: 0 0 28px;
}

.updated {
  font-size: 13px;
  color: var(--ink-faint);
  font-family: -apple-system, sans-serif;
  margin: 0 0 32px;
}

h3 {
  font-size: clamp(16px, 0.6vw + 14px, 20px);
  font-weight: 500;
  margin: 32px 0 10px;
}

/* homepage h3s sit closer to their intro paragraph than legal-page h3s */
.page > h3:first-of-type,
.hero-tool + h3 {
  margin-top: 0;
}

p, li {
  font-size: clamp(15px, 0.4vw + 13px, 17px);
  color: var(--ink-soft);
  margin: 0 0 14px;
}

ul { margin: 0 0 16px; padding-left: 22px; }

code {
  background: var(--pill-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.9em;
  overflow-wrap: anywhere;   /* long link examples wrap instead of overflowing on phones */
}

/* ── Nav / footer link styles (shared across every page) ── */

.nav-link {
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 14px;
  font-family: -apple-system, sans-serif;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.footer-link {
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 13px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* links inside paragraphs/FAQ text need to be visibly different from
   surrounding body copy at rest, not just on hover */
.inline-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}

.inline-link:hover {
  text-decoration-color: var(--ink);
}

/* ════════════════════════════════════════════
   HOMEPAGE — hero tool
════════════════════════════════════════════ */

.hero-heading {
  font-size: clamp(32px, 2.5vw + 22px, 44px);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  margin: 20px 0 10px;
}

.hero-sub {
  font-size: clamp(16px, 0.6vw + 14px, 19px);
  color: var(--ink-quiet);
  text-align: center;
  margin: 0 0 28px;
}

.hero-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
}

.hero-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: min(560px, 90%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 14px 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.hero-input-row:focus-within {
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}

.hero-icon { color: var(--icon-muted); flex-shrink: 0; }

.hero-input-row input {
  flex: 1;
  border: none;
  outline: none;
  font-size: clamp(16px, 0.3vw + 15px, 18px);
  font-family: inherit;
  background: transparent;
  color: var(--ink);
}

.hero-input-row input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.hero-button {
  padding: 12px 32px;
  font-size: clamp(15px, 0.3vw + 14px, 17px);
  font-weight: 500;
  background: var(--ink);
  color: var(--on-ink);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, transform 0.1s ease;
}

.hero-button:hover { background: var(--ink-hover); }
.hero-button:active { transform: scale(0.98); }

.explainer {
  font-size: clamp(15px, 0.4vw + 13px, 17px);
  color: var(--ink-muted);
  margin: 0 0 32px;
}

.faq-item {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-bottom: 14px;
}

.faq-item p.q {
  font-size: clamp(14px, 0.3vw + 13px, 16px);
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--ink);
}

.faq-item p.a {
  font-size: clamp(14px, 0.3vw + 13px, 16px);
  color: var(--ink-muted);
  margin: 0;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0 0 28px;
}

.spec-table th {
  border-bottom: 1px solid var(--border);
  text-align: left;
  padding: 8px 0;
}

.spec-table td {
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 0;
}

.help-list {
  font-size: clamp(15px, 0.4vw + 13px, 17px);
  color: var(--ink-muted);
  line-height: 1.8;
  margin: 0 0 28px;
  padding-left: 20px;
}

.checking-msg {
  font-size: 14px;
  color: var(--ink-faint);
  text-align: center;
}

/* ── Results / preview area ── */

.results { display: none; margin: 24px 0 32px; }
.results.active { display: block; }

.preview-main {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 14px;
}

.preview-main img { width: 100%; display: block; background: var(--img-bg); }

.preview-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.preview-info .preview-meta {
  font-size: clamp(13px, 0.3vw + 12px, 15px);
  color: var(--ink-muted);
  font-family: -apple-system, sans-serif;
}

.preview-info .preview-meta strong { color: var(--ink); }

.preview-download {
  padding: 9px 20px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, sans-serif;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.preview-download:hover { background: var(--ink-hover); }
.preview-download[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.download-note {
  margin: -4px 0 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
  text-align: center;
}
.download-note[hidden] { display: none; }

.option-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-family: -apple-system, sans-serif;
}

.option-thumb {
  width: 84px;
  height: 63px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.option-btn:hover .option-thumb { opacity: 0.85; }
.option-btn.active .option-thumb { border-color: var(--ink); }
.option-btn span { font-size: 11px; color: var(--ink-quiet); }
.option-btn.active span { color: var(--ink); font-weight: 600; }

/* ── Share row ── */

.share-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: -12px 0 32px;
}

.share-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--ink-muted);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.share-row a:hover { transform: translateY(-2px); }

.share-x:hover { background: var(--ink); color: var(--on-ink); }
.share-whatsapp:hover { background: #25D366; color: #fff; }
.share-facebook:hover { background: #1877F2; color: #fff; }
.share-telegram:hover { background: #26A5E4; color: #fff; }

.share-native {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pill-bg);
  color: var(--ink-muted);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.share-native:hover {
  background: var(--ink);
  color: var(--on-ink);
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════
   CONTACT PAGE
════════════════════════════════════════════ */

.contact-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  margin: 24px 0 32px;
  background: var(--surface);
  text-align: center;
}

.contact-box .email-label {
  font-size: 13px;
  color: var(--ink-faint);
  font-family: -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-box .email-link {
  display: inline-block;
  margin-top: 8px;
  font-size: clamp(18px, 1vw + 15px, 22px);
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

.contact-box .email-link:hover { text-decoration-color: var(--ink); }

.contact-box .email-note {
  font-size: 13px;
  color: var(--ink-faint);
  font-family: -apple-system, sans-serif;
  margin-top: 10px;
}

/* ════════════════════════════════════════════
   404 / ERROR PAGES
════════════════════════════════════════════ */

.status-page {
  text-align: center;
  padding: 80px 0;
}

.status-code {
  font-family: -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}

.status-page h1 {
  text-align: center;
}

.status-page p {
  max-width: 480px;
  margin: 0 auto 28px;
  color: var(--ink-muted);
}

.status-page .path-chip {
  background: var(--pill-bg);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: -apple-system, sans-serif;
}

.status-home-btn {
  display: inline-block;
  padding: 10px 26px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  font-family: -apple-system, sans-serif;
  transition: background 0.15s ease;
}

.status-home-btn:hover { background: var(--ink-hover); }

.status-details {
  max-width: 640px;
  margin: 0 auto 24px;
  text-align: left;
  background: var(--pill-bg);
  border-radius: 10px;
  padding: 16px 20px;
  font-family: -apple-system, sans-serif;
}

.status-details summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.status-details pre {
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  color: var(--ink-muted);
  margin-top: 10px;
}

/* Keeps a little breathing room above results when scrolled into view */
.results { scroll-margin-top: 20px; }

/* ════════════════════════════════════════════
   Ad slots (Google AdSense) — see views/partials/ad.ejs
   - Home page only, max 2, placed between text sections.
   - Never adjacent to the input, download or share buttons.
   - Labelled "Advertisement" (required by AdSense); the label sits
     outside the ad, and the whole slot hides itself if Google
     returns no ad so an empty label is never left behind.
════════════════════════════════════════════ */
.ad-slot {
  clear: both;
  margin: 44px 0;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
}
.ad-label {
  display: block;
  margin: 0 0 10px;
  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ad-frame { width: 100%; min-height: 100px; }
.ad-frame ins.adsbygoogle { margin: 0 auto; max-width: 100%; }
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
@media (max-width: 600px) {
  .ad-slot { margin: 32px 0; padding: 16px 0; }
}
@media print { .ad-slot { display: none; } }

/* ════════════════════════════════════════════
   Footer (classes replace the old inline styles so the
   footer follows the light/dark theme)
════════════════════════════════════════════ */
.site-footer {
  max-width: var(--content-width);
  margin: 40px auto 0;
  /* the body adds another 40px below; together that is just enough to keep
     the fixed pills (about 60px tall) off the last line when scrolled to the end */
  padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.footer-copy { font-size: 13px; color: var(--ink-faint); }

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* "Install app" (browser) / "You're using the app" (installed) */
.footer-app-cta,
.footer-in-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
}

.footer-app-cta {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 2px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-app-cta:hover { color: var(--ink); border-bottom-color: var(--ink); }

.footer-in-app { color: var(--ink-muted); }

.footer-app-cta[hidden],
.footer-in-app[hidden] { display: none; }

/* ════════════════════════════════════════════
   Floating pills — install app (left) + light/dark (right)
   The install pill exists on the home page only, and only appears after
   the visitor's first successful thumbnail (or on a repeat visit).
════════════════════════════════════════════ */
.pwa-pill {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-pill);
}

.pwa-pill[hidden] { display: none; }

/* Right: theme toggle (a single button) */
button.pwa-pill {
  right: max(16px, env(safe-area-inset-right, 0px));
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
button.pwa-pill:hover { border-color: var(--ink-faint); }
button.pwa-pill:active { transform: scale(0.97); }

.pwa-pill svg { flex-shrink: 0; }

/* light theme shows the moon ("switch to Dark"), dark theme shows the sun */
.pwa-pill-theme .ic-sun,
.pwa-pill-theme .lbl-light { display: none; }
:root[data-theme="dark"] .pwa-pill-theme .ic-moon,
:root[data-theme="dark"] .pwa-pill-theme .lbl-dark { display: none; }
:root[data-theme="dark"] .pwa-pill-theme .ic-sun { display: inline-block; }
:root[data-theme="dark"] .pwa-pill-theme .lbl-light { display: inline; }

/* Left: install pill (main button + dismiss) */
.pwa-pill-install {
  left: max(16px, env(safe-area-inset-left, 0px));
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pwa-pill-install.is-in { opacity: 1; transform: none; }

.pwa-pill-main,
.pwa-pill-x {
  display: flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pwa-pill-main { gap: 8px; padding: 0 6px 0 16px; }
.pwa-pill-x { padding: 0 14px 0 8px; opacity: 0.75; }
.pwa-pill-x:hover { opacity: 1; }

/* keyboard focus rings (the install pill's own background is --ink, so its
   inner buttons use --on-ink inside the pill instead of outside it) */
button.pwa-pill:focus-visible,
.footer-app-cta:focus-visible,
.pwa-dialog button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.pwa-pill-install button:focus-visible {
  outline: 2px solid var(--on-ink);
  outline-offset: -4px;
  border-radius: 999px;
}

@media (max-width: 380px) {
  .pwa-pill { font-size: 13px; }
  button.pwa-pill { padding: 0 12px; }
  .pwa-pill-main { padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-pill-install { transition: none; transform: none; }
  button.pwa-pill { transition: none; }
}

/* ════════════════════════════════════════════
   Install dialog (native <dialog>)
════════════════════════════════════════════ */
.pwa-dialog {
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: var(--shadow-dialog);
}

.pwa-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }

html.pwa-dialog-open { overflow: hidden; }

.pwa-dialog-inner {
  position: relative;
  padding: 26px 24px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.pwa-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ink-muted);
  cursor: pointer;
}
.pwa-dialog-close:hover { background: var(--pill-bg); color: var(--ink); }

.pwa-dialog h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 40px 6px 0;
}

.pwa-dialog-lead {
  font-size: 15px;
  color: var(--ink-muted);
  margin: 0 0 16px;
}

.pwa-install-now {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pwa-install-now:hover { background: var(--ink-hover); }
.pwa-install-now[hidden] { display: none; }

.pwa-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  background: var(--pill-bg);
  border-radius: 999px;
}

.pwa-tab {
  flex: 1;
  padding: 8px 6px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--ink-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.pwa-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.pwa-panel[hidden] { display: none; }
.pwa-panel ol { margin: 0; padding-left: 20px; }
.pwa-panel li {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.pwa-panel p.pwa-tip {
  font-size: 13px;
  color: var(--ink-muted);
  background: var(--pill-bg);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0 0;
}
.pwa-inline-ic { display: inline-block; vertical-align: -3px; }

@media print {
  .pwa-pill,
  .footer-app-cta,
  .footer-in-app,
  .pwa-dialog { display: none !important; }
}

/* "Show install steps" button inside the app section (revealed by pwa.js) */
.app-cta-row { margin: 0 0 20px; }
.app-cta-row[hidden] { display: none; }

.app-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.app-cta-btn:hover { border-color: var(--ink); }
.app-cta-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ════════════════════════════════════════════
   Lookup error panel (replaces alert pop-ups) — see showLookupError() in main.js
════════════════════════════════════════════ */
.lookup-error {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--ink);
  border-radius: 10px;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.lookup-error-icon { flex-shrink: 0; margin-top: 2px; color: var(--ink); }
.lookup-error p { margin: 0; }
.lookup-error .lookup-error-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.lookup-error .lookup-error-fix { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.lookup-error .lookup-error-more { margin-top: 8px; font-size: 13px; }

/* the pill-shaped input outlines itself while its link is flagged */
.hero-input-row:has(input[aria-invalid="true"]) { border-color: var(--ink); }