/* Design brief: older adults, one job per screen, readable in bright light.
   Typeface: Atkinson Hyperlegible (Braille Institute) built for low-vision legibility.
   Palette: ink navy, cool paper, one action blue. Verdict colours always pair with an icon and words. */
:root {
  --ink: #14233b;
  --paper: #f3f6f9;
  --panel: #ffffff;
  --line: #c7d2de;
  --action: #0b5c9e;        /* 7.1:1 on white */
  --action-ink: #ffffff;
  --scam: #a61e1e;          /* 7.4:1 with white text */
  --legit: #1d6b3d;         /* 6.4:1 with white text */
  --unsure-bg: #fff0c7;
  --unsure-ink: #4d3000;    /* 11:1 on the amber */
  --radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }   /* 18px root; body copy is 1.2rem = 21.6px */
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.2rem; line-height: 1.55;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.top { display: flex; align-items: center; gap: .6rem; background: var(--ink); color: #fff; padding: .9rem 1.1rem; }
.mark { width: 1.9rem; height: 1.9rem; flex: none; color: #dbe7f5; }
.brand { font-weight: 700; font-size: 1.1rem; }
main { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1.1rem 1rem; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .7rem; }
h2 { font-size: 1.3rem; margin: 1.6rem 0 .5rem; }
p { margin: 0 0 1rem; max-width: 36rem; }
.rule { background: var(--panel); border-left: 6px solid var(--action); padding: .8rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 4.2rem; margin: 0 0 .9rem; padding: .8rem 1rem;
  border-radius: var(--radius); border: 3px solid var(--action);
  font: inherit; font-weight: 700; font-size: 1.3rem; text-decoration: none; cursor: pointer;
}
.btn.primary { background: var(--action); color: var(--action-ink); }
.btn.secondary { background: var(--panel); color: var(--action); }
.btn.call { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn:focus-visible, input:focus-visible + .btn, input:focus-visible ~ .btn { outline: 4px solid #ffbf47; outline-offset: 3px; }
.btn:active { transform: translateY(1px); }
.visually-hidden:focus-visible + .btn { outline: 4px solid #ffbf47; outline-offset: 3px; }

.preview { display: block; width: 100%; max-height: 55vh; object-fit: contain; background: #fff; border: 3px solid var(--line); border-radius: var(--radius); margin: 0 0 1rem; }

.banner { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem; border-radius: var(--radius); margin-bottom: .6rem; }
.banner h1 { margin-bottom: .3rem; }
.banner p { margin: 0; }
.icon { width: 3.4rem; height: 3.4rem; flex: none; }
.banner.scam_likely { background: var(--scam); color: #fff; }
.banner.looks_legitimate { background: var(--legit); color: #fff; }
.banner.not_sure, .banner.quota { background: var(--unsure-bg); color: var(--unsure-ink); border: 3px solid #d9a21b; }
.banner.retake { background: var(--panel); border: 3px solid var(--line); }
.icon path, .icon circle { fill: currentColor; }

ul, ol { padding-left: 1.4rem; margin: 0 0 1rem; }
li { margin-bottom: .6rem; }

.working { display: flex; align-items: center; gap: .8rem; }
.dots { width: 1.4rem; height: 1.4rem; border: 4px solid var(--line); border-top-color: var(--action); border-radius: 50%; animation: spin 1s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dots { animation: none; border-top-color: var(--action); } }

footer { max-width: 34rem; margin: 0 auto; padding: 0 1.1rem 2rem; font-size: 1rem; color: #3d4f66; }

details.help { background: var(--panel); border: 3px solid var(--line); border-radius: var(--radius); padding: .2rem 1rem; margin: 0 0 1rem; }
details.help summary { min-height: 3.4rem; display: flex; align-items: center; font-weight: 700; cursor: pointer; color: var(--action); }
details.help summary:focus-visible { outline: 4px solid #ffbf47; outline-offset: 3px; }
details.help p { margin: 0 0 .8rem; }