/* VioVerse Mockup — Zero flags screen + broad scan banner */

/* BROAD SCAN BANNER — ZA4.4/ZA4.21: container chrome stripped (no fill, no
   stroke, no radius, no padding). Plain text + lucide search SVG, navy
   text + stroke, Plus Jakarta Sans Light 300. 14pt-equivalent at 1440
   (19px), floors at 14px on narrow viewports. Icon sizes via em so it
   tracks text. ZA4.21: icon aligns to the top of the first text line
   (align-items: flex-start) so when the banner wraps to two lines on
   mobile the icon stays with the opening of the sentence instead of
   centering against the 2-line block. Small icon margin-top optically
   aligns it with the first character's cap height. */
.broad-scan-banner {
  display: none;
  background: none; border: none; border-radius: 0;
  padding: 0; margin-bottom: 16px;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: clamp(14px, 1.3vw, 19px); font-weight: 300; color: var(--text);
  align-items: flex-start; gap: 10px;
}
.broad-scan-banner.visible { display: flex; }
.broad-scan-icon { width: 1.2em; height: 1.2em; flex-shrink: 0; margin-top: 0.15em; }

/* ZERO FLAGS SCREEN */
.zero-flags {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: calc(100dvh - var(--shell-top-gap, 10px) - var(--shell-nav-h, 60px)); padding: 10vh 24px 40px; text-align: center; max-width: 520px; margin: 0 auto;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
}
#zf-qc-notes:empty { display: none; }
#zf-qc-notes { width: 100%; margin-bottom: 20px; text-align: left; }
.zf-icon { margin-bottom: 20px; width: 72px; height: 72px; background: none; border: none; color: var(--coral); display: flex; align-items: center; justify-content: center; }
.zf-check-svg { width: 48px; height: 48px; display: block; }
.zero-flags h2 { font-size: clamp(35px, 4.13vw, 56px); font-weight: 700; margin-bottom: 28px; font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; letter-spacing: -0.04em; line-height: 0.95; }
.zero-flags h2 span { color: var(--coral); }
.zero-flags > p { font-size: 16px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.6; }
.zf-sub { font-size: 14px !important; color: var(--text-secondary); }
.zf-actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.zf-btn-primary {
  padding: 12px 24px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; background: var(--ink-0); color: var(--bone-0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.zf-btn-secondary {
  padding: 12px 24px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--text);
}
.zf-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(31,24,19,0.08); }
.zf-footer p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }