/* Sweep. Warm sand and brass: the flashlight, not the alarm. */

:root {
  --paper: #f2f0ea;
  --paper-2: #e9e6dc;
  --card: #faf9f4;
  --ink: #211f17;
  --ink-soft: #625d51;
  --accent: #7a5817;
  --accent-ink: #fdfaf2;
  --line: #d4d0c8;
  --warn: #a02c1f;
  --warn-bg: #f5ddd7;
  --ok: #24684a;
  --ok-bg: #d9eade;
  --shadow: 0 2px 14px rgba(23, 33, 31, 0.12);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141310;
    --paper-2: #201e18;
    --card: #23211a;
    --ink: #ebe8e2;
    --ink-soft: #b1ac9f;
    --accent: #c9a957;
    --accent-ink: #221e0a;
    --line: #38352b;
    --warn: #f08575;
    --warn-bg: #43231d;
    --ok: #7fc9a3;
    --ok-bg: #1d3a2c;
    --shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  /* 100% instead of a fixed px, so the browser's own text-size setting
     (and rem below) actually does something. */
  font-size: 100%;
  line-height: 1.55;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100%;
}

img { max-width: 100%; }
code { overflow-wrap: anywhere; font-size: 0.8125rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  z-index: 40;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
  padding: 12px 22px;
  font-weight: 650;
  min-height: 44px;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn-primary[disabled] { opacity: 0.5; cursor: default; }
.btn-ghost {
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
  min-height: 44px;
  font-weight: 600;
  background: transparent;
}
.btn-danger {
  background: var(--warn);
  color: var(--accent-ink);
  border-radius: var(--radius);
  padding: 12px 22px;
  min-height: 44px;
  font-weight: 650;
}
.btn-danger[disabled] { opacity: 0.4; cursor: default; }
.icon-btn { min-width: 44px; min-height: 44px; border-radius: 12px; font-size: 1.1875rem; color: var(--ink-soft); }
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }

.screen { max-width: 760px; margin: 0 auto; padding: 18px 18px 60px; }
.hero { text-align: center; padding-top: 22px; }
.hero .logo { display: block; margin: 0 auto 6px; }
.hero h1 { margin: 0; font-size: 2.5rem; }
.tagline { margin: 2px 0 14px; font-size: 1.1875rem; font-weight: 600; color: var(--accent); }
.pitch { max-width: 36em; margin: 0 auto 24px; color: var(--ink-soft); text-align: left; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 14px auto;
  max-width: 460px;
  text-align: left;
}
.card h2 { margin: 0 0 10px; font-size: 1.1875rem; }
.form label { display: block; font-weight: 600; margin: 12px 0 4px; }
.form input[type="password"], .form input[type="text"], .form textarea, .danger-body input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
}
.form textarea { resize: vertical; }
.form .btn-primary { margin-top: 16px; width: 100%; }
.warn-line { color: var(--warn); font-size: 0.875rem; }

.landing { margin-top: 52px; }
.lnd { margin-bottom: 40px; }
.lnd h2 { font-size: 1.5rem; }
.lnd p { color: var(--ink-soft); }
.lnd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.lnd-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.lnd-card h3 { margin: 0 0 6px; font-size: 1.03125rem; }
.lnd-card p { margin: 0; font-size: 0.90625rem; }
.honest-list { padding-left: 20px; color: var(--ink-soft); }
.honest-list li { margin-bottom: 10px; }
.apk-row { margin: 14px 0 4px; }
.land-footer { display: flex; gap: 18px; padding: 16px 0 4px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.875rem; }
.land-footer a { color: var(--accent); }
.about-line { text-align: center; margin-top: 30px; color: var(--ink-soft); font-size: 0.875rem; }
.about-line a { color: var(--accent); }
.locale-line { text-align: center; margin-top: 24px; }
.locale-line select {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  min-height: 44px;
}

.topbar { display: flex; align-items: center; gap: 8px; padding: 4px 0 12px; }
.topbar strong { font-size: 1.125rem; }
.top-space { flex: 1; }
.chain-badge { font-size: 0.8125rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.chain-badge.ok { background: var(--ok-bg); color: var(--ok); }
.chain-badge.bad { background: var(--warn-bg); color: var(--warn); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { margin-bottom: 10px; }
.timeline button {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.timeline button:hover { border-color: var(--accent); }
.tl-title { font-weight: 650; }
.tl-meta { color: var(--ink-soft); font-size: 0.84375rem; display: flex; gap: 10px; flex-wrap: wrap; }
.empty { color: var(--ink-soft); text-align: center; padding: 30px 0; }
.addbar { position: sticky; bottom: 14px; text-align: center; margin-top: 18px; }
.addbar .btn-primary { box-shadow: var(--shadow); min-width: 200px; }

.danger { margin-top: 34px; color: var(--ink-soft); }
.danger summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.danger-body { padding: 10px 0; display: grid; gap: 10px; max-width: 420px; }
.danger-body select { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 44px; }

.add-form { max-width: 560px; margin: 0 auto; }
.attach-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.attach-name { color: var(--ink-soft); font-size: 0.875rem; }

.entry-body { max-width: 620px; margin: 0 auto; }
.entry-meta { color: var(--ink-soft); font-size: 0.875rem; }
.entry-note { white-space: pre-wrap; }
.entry-img { border-radius: var(--radius); border: 1px solid var(--line); }
.hash-line { color: var(--ink-soft); font-size: 0.84375rem; }

.done-actions { display: flex; gap: 12px; margin: 16px 0; }
.done-actions .btn-primary { min-width: 130px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 0.90625rem;
  box-shadow: var(--shadow);
  z-index: 50;
  max-width: min(92vw, 480px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
}
.toast.show { opacity: 1; visibility: visible; }

.doc-page main { max-width: 680px; margin: 0 auto; padding: 32px 20px; }


/* -------------------------------------------------------------- sweep */

.leave-blackout {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 70;
}
.quick-exit {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 60;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 44px;
  font-weight: 650;
  box-shadow: var(--shadow);
}
.beta-line {
  display: inline-block;
  background: var(--warn-bg);
  color: var(--ink);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.84375rem;
  max-width: 40em;
}
.big { font-size: 1.125rem; padding: 14px 30px; }
.web-note { color: var(--ink-soft); max-width: 34em; margin: 12px auto; }

.verdict-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  margin: 8px 0 16px;
}
.verdict-banner.banner-ok { background: var(--ok-bg); border-color: var(--ok); }
.verdict-banner.banner-review { background: var(--warn-bg); border-color: var(--line); }
.verdict-banner.banner-alarm { background: var(--warn-bg); border-color: var(--warn); }
.verdict-mark { width: 30px; height: 30px; flex: none; display: none; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; }
.verdict-banner.banner-ok .verdict-mark { display: block; }
.results-summary { flex: 1 1 0; font-weight: 650; font-size: 1.0625rem; margin: 0; }
.verdict-counts { flex-basis: 100%; margin: 4px 0 0; color: var(--ink-soft); font-size: 0.84375rem; }
.verdict-banner.banner-ok .verdict-counts { padding-left: 44px; }
.check-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 12px;
}
.check-card.alarm { border-color: var(--warn); border-width: 2px; }
/* Recede by dropping the card's own chrome, not by dimming the text: an
   opacity-based dim measured out at ~3.1:1 contrast in light mode and
   ~4.0:1 in dark, both under the WCAG AA floor for body text. Removing
   the border and background instead lets the text sit straight on the
   page background, which measures well above AA in both themes and still
   reads as quieter next to a bordered, filled card with a finding in it. */
.check-card.quiet { background: transparent; border-color: transparent; box-shadow: none; }
.check-card h2 { margin: 0 0 6px; font-size: 1.0625rem; display: flex; gap: 10px; align-items: center; }
.check-chip { flex: none; white-space: nowrap; font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.chip-none { background: var(--ok-bg); color: var(--ok); }
.chip-review { background: var(--warn-bg); color: var(--ink); }
.chip-alarm { background: var(--warn); color: var(--accent-ink); }
.check-card p { margin: 4px 0; color: var(--ink-soft); font-size: 0.90625rem; }
.check-note { font-size: 0.8125rem; }
.check-card details { margin-top: 8px; }
.check-card summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--accent); }
.check-card li { font-size: 0.875rem; overflow-wrap: anywhere; margin-bottom: 6px; }
.guidance { max-width: none; }
.ephemeral-note { color: var(--ink-soft); font-size: 0.84375rem; }
.chip-info { background: var(--paper-2); color: var(--ink-soft); }
.finding {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
  background: var(--paper);
}
.finding-alarm { border-color: var(--warn); }
.finding-dual { border-left: 4px solid var(--accent); }
.finding h3 { margin: 0 0 6px; font-size: 0.96875rem; overflow-wrap: anywhere; }
.check-card .finding-headline { color: var(--ink); font-weight: 600; }
.finding p { margin: 4px 0; font-size: 0.875rem; }
.finding-prov { color: var(--ink-soft); }
.finding-safety { color: var(--warn); }
.evidence {
  background: var(--paper-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 6px 0 0;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.doc-page main { max-width: 680px; margin: 0 auto; padding: 32px 20px; }

/* The results screen settling into place: the sweep finding what it finds,
   one thing at a time. Content is complete in the DOM the moment this class
   is added, so this is decoration only, never a gate on when text exists. */
@media (prefers-reduced-motion: no-preference) {
  .sweep-reveal .verdict-banner,
  .sweep-reveal .check-card,
  .sweep-reveal .guidance {
    opacity: 0;
    animation: sweep-in 0.35s ease forwards;
  }
  .sweep-reveal .verdict-banner { animation-delay: 0s; }
  .sweep-reveal #results-cards > .check-card:nth-child(1) { animation-delay: 0.06s; }
  .sweep-reveal #results-cards > .check-card:nth-child(2) { animation-delay: 0.11s; }
  .sweep-reveal #results-cards > .check-card:nth-child(3) { animation-delay: 0.16s; }
  .sweep-reveal #results-cards > .check-card:nth-child(4) { animation-delay: 0.21s; }
  .sweep-reveal #results-cards > .check-card:nth-child(5) { animation-delay: 0.26s; }
  .sweep-reveal #results-cards > .check-card:nth-child(6) { animation-delay: 0.31s; }
  .sweep-reveal #results-cards > .check-card:nth-child(n + 7) { animation-delay: 0.36s; }
  .sweep-reveal .guidance { animation-delay: 0.4s; }

  /* The magnifier line-draws in only for the found-nothing moment, after
     the banner itself has settled: the quiet reward, not a verdict icon. */
  .verdict-banner.banner-ok .verdict-mark circle {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: sweep-draw 0.5s ease forwards;
    animation-delay: 0.15s;
  }
  .verdict-banner.banner-ok .verdict-mark line {
    stroke-dasharray: 13;
    stroke-dashoffset: 13;
    animation: sweep-draw 0.2s ease forwards;
    animation-delay: 0.6s;
  }
}
@keyframes sweep-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes sweep-draw {
  to { stroke-dashoffset: 0; }
}