/* policescannerpro.com - ASCII only, no external fonts or dependencies. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #14181f;
  --muted: #5c6675;
  --accent: #3d6fd6; /* cornflower, deepened for AA contrast on white */
  --border: #e3e7ec;
  --card: #f7f9fb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1319;
    --fg: #e8ecf1;
    --muted: #98a3b3;
    --accent: #6495ED; /* cornflower */
    --border: #232a35;
    --card: #161c25;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }

header.site { border-bottom: 1px solid var(--border); padding: .85rem 0; }
header.site .wrap { display: flex; align-items: center; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: inherit;
         text-decoration: none; font-weight: 650; }
.brand img { border-radius: 7px; display: block; }
nav.top { margin-left: auto; display: flex; gap: 1.1rem; }
nav.top a { color: var(--muted); text-decoration: none; font-size: .95rem; }
nav.top a:hover { color: var(--accent); }

h1 { font-size: 2.1rem; line-height: 1.15; margin: 2rem 0 .5rem; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; margin: 1.4rem 0 .35rem; }
p, li { color: var(--fg); }
a { color: var(--accent); }
.lede { font-size: 1.12rem; color: var(--muted); margin-top: 0; }
.meta { color: var(--muted); font-size: .875rem; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.15rem; margin: 1.1rem 0;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid .card { margin: 0; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem;
        display: block; overflow-x: auto; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border);
         vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

.badges { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0; }
.badge { border: 1px solid var(--border); border-radius: 10px;
         padding: .6rem 1rem; color: var(--muted); font-size: .9rem; }

footer.site {
  border-top: 1px solid var(--border);
  margin-top: 3.5rem; padding: 1.5rem 0 3rem;
  color: var(--muted); font-size: .9rem;
}
footer.site a { color: var(--muted); }
footer.site nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }

/* Consent banner. Fixed to the bottom so it never covers the first heading. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--card); border-top: 1px solid var(--border);
  padding: .9rem 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: center; font-size: .9rem;
}
/* The rule above sets display:flex, which beats the browser's built-in
   [hidden] { display: none } - so the banner ignored the hidden attribute
   entirely: it showed on every page load even for visitors who had already
   chosen, and Accept/Decline stored the choice but never dismissed it.
   Specificity (0,2,0) here wins over .consent (0,1,0) regardless of order. */
.consent[hidden] { display: none; }
.consent p { margin: 0; max-width: 42rem; color: var(--muted); }
.consent-actions { display: flex; gap: .5rem; }
.btn, .btn-quiet {
  font: inherit; padding: .45rem 1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border);
}
.btn { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
.btn-quiet { background: transparent; color: var(--muted); }

@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  .consent { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: flex-end; }
}

/* Store badges. Apple's SVG is tight to the button; Google's PNG ships with
   its own transparent clear-space built in, so matching the declared heights
   would leave Google's visibly smaller. 40px against 60px makes the two
   visible buttons the same size, which is why the numbers look uneven. */
.storebadges { display: flex; align-items: center; gap: .5rem;
               flex-wrap: wrap; margin: 1.5rem 0; }
.storebadges a { display: inline-flex; line-height: 0; }
.storebadges img { display: block; width: auto; }
.storebadges .badge-apple  { height: 40px; }
.storebadges .badge-google { height: 60px; }
.storebadges.small .badge-apple  { height: 32px; }
.storebadges.small .badge-google { height: 48px; }
.storebadges.small { margin: 0 0 1rem; }

.guide-cta { border-top: 1px solid var(--border); margin-top: 2.5rem;
             padding-top: 1.5rem; }
.guide-cta h2 { margin-top: 0; }