/* minispeedcam.com landing page.
   Rebuilt from docs/landing-reference/LANDING_SPEC.md + the screenshots beside
   it. Palette and section widths are taken from the reference; the layout is a
   narrow centred column, as the original is. */

:root {
  --orange: #f0891a;
  --orange-dark: #d97706;
  --navy: #1f2a5a;
  --ink: #111827;
  --muted: #4b5563;
  --hero-band: #ffe0b2;
  --blob: #fac896;
  --band: #f3f4f6;
  --signup-band: #eaeaea;
  --oss-box: #dcdcdc;
  --red: #ff0000;
  --brown: #9a4a0b;

  /* Section widths, measured off the reference screenshots. */
  --w-wide: 1100px;   /* photos */
  --w-col: 1100px;    /* hero and the benefit/feature rows */
  --w-narrow: 865px;  /* pricing copy, contact band */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

/* The sprite holds <symbol> definitions only. */
.sprite { display: none; }

/* --- 0. Nav --------------------------------------------------------------- */

.nav {
  background: #fff;
  border-bottom: 1px solid #eceef1;
}
.nav-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-logo { display: flex; flex: 0 0 auto; }
.nav-logo img { width: 176px; height: 41px; }
.nav-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 40px;
}
.nav-links a,
.nav-login {
  font-size: 15px;
  text-decoration: none;
}
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--ink); }
.nav-login { color: var(--orange); font-weight: 600; flex: 0 0 auto; }
.nav-login:hover { color: var(--orange-dark); }

/* --- 1. Hero -------------------------------------------------------------- */

.hero { background: var(--hero-band); }
.hero-inner {
  max-width: var(--w-col);
  margin: 0 auto;
  padding: 60px 24px 70px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.hero-copy { flex: 1 1 320px; }
.hero-copy h1 {
  font-size: 44px;
  line-height: 1.14;
  max-width: 380px;
}
.hero-copy p {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--muted);
  max-width: 330px;
}

/* The product image sits over a rotated pale-orange rectangle. */
.hero-art, .row-art {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blob {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--blob);
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 0;
}
.hero-art .blob { width: 330px; height: 125px; }
.row-art .blob { width: 205px; height: 115px; }
.hero-art img { position: relative; z-index: 1; width: 312px; height: auto; }
.row-art img { position: relative; z-index: 1; width: 280px; height: auto; }

/* --- 1b. Signup ----------------------------------------------------------- */

.signup {
  background: var(--signup-band);
  padding: 32px 24px 40px;
}
.signup-card {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 30px 35px 35px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.signup-card h2 { font-size: 36px; color: #1f2937; }
.signup-form {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 19px;
}
.signup-form input {
  flex: 0 1 350px;
  padding: 14px 16px;
  font: inherit;
  font-size: 20px;
  color: var(--ink);
  border: 1px solid #cfd4da;
  border-radius: 3px;
  background: #fff;
}
.signup-form input::placeholder { color: #9aa1a9; }
.signup-form input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.signup-form button {
  padding: 14px 30px;
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  background: var(--red);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.signup-form button:hover { background: #e60000; }
.signup-form button[disabled] { opacity: .6; cursor: default; }

.signup-status { margin-top: 19px; font-size: 20px; font-weight: 600; color: #15803d; }
.signup-status.is-error { color: #b91c1c; }
.signup-note { margin-top: 24px; font-size: 20px; font-weight: 700; color: #1f2937; }

.oss-box {
  width: 302px;
  margin: 30px auto 0;
  padding: 16px 19px 24px;
  background: var(--oss-box);
  text-align: center;
}
.oss-title { font-size: 19px; font-weight: 700; color: #1f2937; }
.oss-sub { margin-top: 5px; font-size: 19px; color: #374151; }
.btn-github {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 30px;
  font-size: 26px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  background: var(--orange);
  border-radius: 6px;
}
.btn-github:hover { background: var(--orange-dark); color: #fff; }
.btn-github .gh { width: 35px; height: 35px; }

/* --- 2/3/4. Benefit and feature rows -------------------------------------- */

.row-section { padding: 70px 24px; background: #fff; }
.row-section.band, .band { background: var(--band); }
.row {
  max-width: var(--w-col);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.row-art { margin-top: 12px; }
.row-copy { flex: 1 1 380px; min-width: 0; }

.eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--orange);
}
.row-copy h2 { margin-top: 8px; font-size: 33px; }
.lede { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--muted); }

.features { margin: 18px 0 0; padding: 0; list-style: none; }
.features li { display: flex; gap: 14px; padding: 8px 0; }
.features h3 { font-size: 17px; font-weight: 700; color: #1f2937; }
.features li p { margin-top: 5px; font-size: 15px; line-height: 1.45; color: var(--muted); }

.tile {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tile svg { width: 20px; height: 20px; }

/* --- 4b. Photos ----------------------------------------------------------- */

.photos { padding: 30px 24px 70px; text-align: center; }
.photos h2 { font-size: 40px; }
.photos-grid {
  max-width: 1320px;
  margin: 28px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}
.photos-grid img { width: 600px; max-width: 100%; height: auto; }

/* --- 5. Pricing ----------------------------------------------------------- */

.pricing { padding: 60px 24px 70px; text-align: center; }
.pricing h2 { font-size: 28px; }
.pricing-sub {
  max-width: var(--w-narrow);
  margin: 19px auto 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--muted);
}

.plan {
  position: relative;
  width: 270px;
  margin: 46px auto 0;
  background: #fff;
  border: 1px solid var(--orange);
  padding: 35px 19px 24px;
}
.plan-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--orange);
  border-radius: 999px;
  white-space: nowrap;
}
.plan-name { font-size: 23px; font-weight: 700; color: #1f2937; }
.plan-price { margin-top: 3px; font-size: 46px; font-weight: 800; color: var(--navy); }
.plan-price .cur { font-size: 27px; vertical-align: super; }
.plan-period { margin-top: 3px; font-size: 16px; font-style: italic; color: var(--muted); }

/* The reference right-aligns these three lines inside the card. */
.plan-features {
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #e5e7eb;
  list-style: none;
  text-align: right;
}
.plan-features li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 5px 0;
  font-size: 16px;
  color: var(--muted);
  white-space: nowrap;
}
.tick { width: 16px; height: 16px; flex: 0 0 auto; color: var(--orange); }

.btn-orange {
  margin-top: 24px;
  display: block;
  padding: 15px 22px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: var(--orange);
  border-radius: 3px;
}
.btn-orange:hover { background: var(--orange-dark); }

/* --- 6. Contact ----------------------------------------------------------- */

.contact-wrap { padding: 60px 24px; background: #fff; }
.contact {
  max-width: var(--w-narrow);
  margin: 0 auto;
  background: var(--brown);
  color: #fff;
  padding: 54px 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.contact p {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  max-width: 420px;
}
.btn-white {
  flex: 0 0 auto;
  padding: 16px 30px;
  font-size: 19px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  background: #fff;
  border-radius: 3px;
}
.btn-white:hover { color: var(--orange-dark); }

/* --- 7. Footer ------------------------------------------------------------ */

.footer { padding: 30px 24px 50px; text-align: center; }
.footer p { font-size: 13px; color: #9ca3af; }

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; gap: 12px; padding: 10px 18px; }
  .nav-logo img { width: 176px; height: 41px; }
  .nav-links { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 24px; }

  .hero-inner { flex-direction: column; text-align: center; padding: 44px 20px 52px; }
  .hero-copy h1, .hero-copy p { max-width: none; }
  .hero-copy h1 { font-size: 34px; }

  .row { flex-direction: column; align-items: center; }
  .row-art { margin-bottom: 8px; }
  .row-copy { flex-basis: auto; width: 100%; }

  .photos-grid { flex-direction: column; align-items: center; gap: 32px; }
  .contact { flex-direction: column; text-align: center; }
  .contact p { max-width: none; }
}

/* ===========================================================================
   Dashboard (Phase 3). Same stylesheet as the landing page, per §5's "one CSS
   file"; the .app class on <body> scopes everything below.
   =========================================================================== */

.app { background: #fafafa; }

.app-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 28px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.app-logo { display: flex; }
.app-links { flex: 1; display: flex; gap: 20px; }
.app-links a { font-size: 15px; color: var(--muted); text-decoration: none; }
.app-links a:hover { color: var(--ink); }
.app-user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.app-user button {
  font: inherit; font-size: 14px; color: var(--orange);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.app-user button:hover { color: var(--orange-dark); }

.app-main { max-width: 940px; margin: 0 auto; padding: 32px 24px 80px; }
.app-main h1 { font-size: 26px; }
.app-main h2 { margin-top: 34px; font-size: 18px; }
.crumb { margin-bottom: 10px; font-size: 14px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hint { margin-top: 8px; font-size: 13px; color: var(--muted); }
.empty { margin-top: 14px; font-size: 14px; color: var(--muted); }
.app code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

.card {
  margin-top: 22px;
  padding: 22px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.auth-card { max-width: 380px; margin: 60px auto 0; }
.add-card { max-width: 420px; }

.app form label { display: block; margin-top: 14px; font-size: 13px; font-weight: 600; color: #374151; }
.app form input, .app form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
}
.app form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.app form input:focus-visible, .app form textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.app form button[type="submit"] {
  margin-top: 18px;
  padding: 10px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--orange);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.app form button[type="submit"]:hover { background: var(--orange-dark); }
.app form button[disabled] { opacity: .6; cursor: default; }

/* Where the gate distance came from. The border colour is a second signal, not
   the only one — the sentence itself says whether it was measured. */
.prov {
  margin: 8px 0 4px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  font-size: 14px;
}
.prov-good { border-left-color: #16a34a; background: #f0fdf4; }
.prov-stale { border-left-color: #f59e0b; background: #fffbeb; }
.prov-weak { border-left-color: #9ca3af; background: #f9fafb; }

.cal-history { margin: 12px 0; }
.cal-history summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.cal-history .table { margin-top: 10px; font-size: 13px; }

/* A checkbox and its words on one line. The default label rule in this sheet
   stacks its control underneath, which is right for a text field and wrong for
   a tick box — the box belongs beside the sentence it governs. */
.app label.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
.app label.check input[type="checkbox"] {
  width: auto;
  margin: 2px 0 0;
  flex: 0 0 auto;
}

/* Per-direction tiles. Two groups side by side where there is room, stacked on a
   phone — the comparison between directions is the whole reason they exist, so
   they should be readable together whenever the screen allows it. */
.dir-groups {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
.dir-group h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.dir-group .tiles { margin-top: 0; }
@media (min-width: 780px) {
  .dir-groups { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

/* Hour-of-day chart: bars are counts, the line is the 85th percentile. */
.hourly {
  width: 100%;
  height: auto;
  max-width: 720px;
  display: block;
  margin-top: 8px;
}

/* Reporting status on the cameras list. Colour is not the only signal — the
   word is there too, so it reads the same to anyone who cannot tell the dots
   apart. */
.status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-online  { background: #dcfce7; color: #166534; }
.status-stale   { background: #fef3c7; color: #92400e; }
.status-offline { background: #fee2e2; color: #991b1b; }
.status-never   { background: #f3f4f6; color: #4b5563; }

/* A camera that re-enrolled. Advisory, not an error: nothing is broken and no
   data was lost, but it explains a gap the owner would otherwise puzzle over. */
.notice-reenrolled {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #fcd34d;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  background: #fffbeb;
  font-size: 13px;
  line-height: 1.5;
  color: #78350f;
}
.form-error { margin-top: 12px; font-size: 13px; color: #b91c1c; }
.form-ok { margin-top: 12px; font-size: 13px; color: #15803d; }
.auth-switch { margin-top: 16px; font-size: 13px; color: var(--muted); }
.linklike {
  font: inherit; font-size: 13px; color: var(--orange);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}

.btn-secondary {
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
}
.btn-secondary:hover { border-color: var(--orange); color: var(--orange); }

.range {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.range label { margin-top: 0; }
.range input { width: auto; }
.range button[type="submit"] { margin-top: 0; }

.tiles { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.tile-stat {
  flex: 1 1 150px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.tile-stat .k { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.tile-stat .v { font-size: 27px; font-weight: 800; color: var(--navy); }
.tile-stat .u { margin-left: 4px; font-size: 12px; color: var(--muted); }

/* Render at the natural size the bars were drawn for (34px wide) rather than
   stretching a five-bin chart across the whole column. */
.histogram { height: 190px; width: auto; max-width: 100%; margin-top: 14px; }

.table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #f0f1f3; }
.table th { font-size: 12px; font-weight: 700; color: var(--muted); background: #fafafa; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table a { color: var(--orange); text-decoration: none; font-weight: 600; }
.table a:hover { text-decoration: underline; }
.thumb img { display: block; width: 72px; height: 54px; object-fit: cover; border-radius: 3px; background: #f3f4f6; }
.nophoto { color: #d1d5db; }

@media (max-width: 700px) {
  .app-main { padding: 22px 16px 60px; }
  .table { display: block; overflow-x: auto; }
}

/* The logout control is a form now, so it must out-specify the generic
   .app form button[type="submit"] rule above and stay looking like a link. */
.app-user form { display: inline; margin: 0; }
.app .app-user button[type="submit"] {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--orange);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.app .app-user button[type="submit"]:hover { background: none; color: var(--orange-dark); }

/* The credential pages use separate <label for> + <input>, so the label has to
   carry its own spacing rather than wrapping the field. */
.app .auth-card label { margin-top: 16px; margin-bottom: 0; }
.app .auth-card input { margin-top: 6px; }
.app .auth-card .hint { margin-top: 6px; }
.auth-switch a { color: var(--orange); }

/* Removal keeps the events and photos, so this is a warning, not an alarm: outlined
   rather than a solid red block, which is the affordance for "this destroys data". */
.head-actions { display: flex; align-items: center; gap: 10px; }
.app .btn-danger {
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #b91c1c;
  background: #fff;
  border: 1px solid #e6c3c3;
  border-radius: 5px;
  cursor: pointer;
}
.app .btn-danger:hover { border-color: #b91c1c; background: #fef4f4; }
.app .btn-danger[disabled] { opacity: .6; cursor: default; }

/* A low-confidence reading is shown, not hidden — it just does not count. Muted rather
   than struck through: the row is real data, only excluded from the aggregates. */
.app .table tr.is-low td { color: #9ca3af; }
.tag-low {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- the page scrolls up and down, never sideways ------------------------
   A phone that pans left-right hides controls off the edge of the screen with
   nothing to say they are there: the Log out button was reachable only by
   discovering that the page moved. Wide content — tables, charts — scrolls
   inside its OWN box; the page itself does not move horizontally at all. */
html, body { max-width: 100%; overflow-x: hidden; }

/* The nav was a single non-wrapping flex row, and the account email is its
   widest token — one unbreakable string that flex cannot shrink, because a flex
   item defaults to min-width:auto and will not go below its content. That one
   string is what pushed Log out off the screen. */
.app-nav { flex-wrap: wrap; row-gap: 8px; }
.app-logo img { max-width: 100%; height: auto; }
.app-links,
.app-user { min-width: 0; }
.app-user span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Charts are drawn at a fixed internal coordinate system and scaled by the
   viewBox, so they need an explicit ceiling or they render at their authored
   width and push the page wide. */
.app-main svg { max-width: 100%; height: auto; }

@media (max-width: 700px) {
  .app-nav { gap: 14px; padding: 10px 16px; }
  .app-logo img { width: 132px; }
  .app-links { gap: 16px; }
  /* The email is identity, not navigation, and it is the widest thing in the
     bar. It has its own page under Account. Dropping it here is what keeps
     Log out on screen without the page having to move. */
  .app-user span { display: none; }
  /* A table wider than the phone scrolls within itself. The page stays put. */
  .table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- photo review: bulk classification ---------------------------------- */
.rv-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap;
  gap: .75rem 1.25rem; align-items: center; padding: .6rem .8rem; margin: 1rem 0;
  background: #fff; border: 1px solid #e4e6eb; border-radius: 8px; font-size: .9rem; }
.rv-bar #rv-frac { font-weight: 700; }
.rv-filter { display: flex; align-items: center; gap: .35rem; }
.rv-save { margin-left: auto; font-variant-numeric: tabular-nums; }
.rv-save.is-ok { color: #4a7; }
.rv-save.is-busy { color: #86909c; }
.rv-save.is-error { color: #c0392b; font-weight: 700; }

.rv-grid { display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rv-tile { margin: 0; border: 2px solid #e4e6eb; border-radius: 8px; overflow: hidden;
  background: #fff; outline: none; }
.rv-tile:focus { border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47,111,237,.25); }
.rv-tile img { display: block; width: 100%; height: auto; background: #f3f4f6; }
.rv-tile figcaption { padding: .5rem .6rem .6rem; font-size: .82rem; }
.rv-head { display: flex; justify-content: space-between; gap: .5rem; }
.rv-when { color: #86909c; font-variant-numeric: tabular-nums; }
.rv-mark { min-height: 1.2em; font-weight: 700; }
.rv-btns { display: flex; gap: .3rem; margin-top: .4rem; }
.rv-btns button { flex: 1; padding: .3rem .1rem; font-size: .78rem; cursor: pointer;
  border: 1px solid #d5d8de; border-radius: 5px; background: #fafbfc; }
.rv-btns button[aria-pressed="true"] { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.rv-nums { margin-top: .4rem; color: #86909c; }
.rv-nums summary { cursor: pointer; }

/* The label is legible from the border alone, so a grid can be skimmed for
   empties without reading any text. */
.rv-tile.is-vehicle { border-color: #4a7; }
.rv-tile.is-no_vehicle { border-color: #c0392b; }
.rv-tile.is-no_vehicle .rv-mark { color: #c0392b; }
.rv-tile.is-unclear { border-color: #d8a13a; }

@media (max-width: 480px) {
  .rv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* --- aiming mode: the primary state of the page, not a badge ------------- */
.aim-alert { margin: 0 0 1.25rem; padding: 1rem 1.1rem; border-radius: 10px;
  background: #fdecea; border: 2px solid #c0392b; color: #7a231a; }
.aim-head { margin: 0 0 .35rem; font-size: 1.05rem; }
.aim-head strong { color: #a5281b; }
.aim-detail { margin: 0 0 .4rem; }
.aim-scope { margin: 0; font-weight: 600; }

.aim-causes { margin: .3rem 0 .5rem 1.1rem; padding: 0; }
.aim-causes li { margin: .15rem 0; }
.count-caveat { margin-top: .5rem; font-weight: 600; }

/* a suppressed speed is shown as suppressed, never as absent traffic */
.nospeed { color: #86909c; font-style: italic; cursor: help; }

/* A PARTIAL FRAME LOOKS LIKE A DARK PHOTOGRAPH, NOT LIKE A FAULT.
   A truncated JPEG decodes to its top rows and greys the remainder, so without
   a marker a reader sees a plausible night shot and takes missing evidence for
   present evidence. The badge sits ON the thumbnail rather than in a legend,
   because the person scanning a table of crossings is looking at the image. */
.thumb a { position: relative; display: inline-block; }
.photo-partial img { opacity: 0.75; outline: 2px solid var(--warn, #f59e0b); outline-offset: -2px; }
.photo-badge {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(180, 83, 9, 0.92); color: #fff;
  font: 600 9px/1.4 inherit; text-align: center;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: 0 0 3px 3px;
}