/* Gurugram Police awareness poster and image-search experience */
:root {
  --police-navy: #082b61;
  --police-blue: #0d3e7b;
  --police-red: #a90e18;
  --police-red-bright: #c41420;
  --poster-blue: #e4f1fa;
  --poster-white: #fbfdff;
  --ink: #132d4f;
  --muted: #66788e;
  --line: #c9d6e3;
  --shadow: 0 18px 60px rgba(8, 43, 97, 0.18);
  --ff-heading: "Oswald", "Roboto Condensed", Impact, sans-serif;
  --ff-condensed: "Roboto Condensed", "Roboto", sans-serif;
  --ff-body: "Roboto", Arial, sans-serif;
  --ff-devanagari: "Noto Sans Devanagari", "Mangal", sans-serif;
}

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

body {
  min-width: 320px;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #dce7f0;
  font-family: var(--ff-body);
}

[hidden] {
  display: none !important;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #f4b429;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 10px 16px;
  color: #fff;
  background: var(--police-navy);
  border-radius: 6px;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Site nav ────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  z-index: 100;
  top: 8px;
  right: 20px;
}

.site-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-nav-list li {
  flex: 0 0 auto;
}

.nav-link {
  display: block;
  padding: 7px 13px;
  color: var(--police-navy);
  font-family: var(--ff-condensed);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  transition: color 180ms ease, background 180ms ease;
}

.nav-link:hover {
  color: #fff;
  background: var(--police-navy);
}

.nav-link.active {
  color: #fff;
  background: var(--police-red);
}

/* ── Viewport-fit shell ─────────────────────────────────────────── */
.awareness-page {
  position: relative;
  display: flex;
  width: 100%;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
}

/* ── Poster canvas ──────────────────────────────────────────────── */
.police-poster {
  isolation: isolate;
  position: relative;
  display: flex;
  flex: 1 0 auto;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 21%, rgba(255, 255, 255, 0.98) 0 17%, rgba(244, 250, 255, 0.86) 36%, transparent 58%),
    linear-gradient(180deg, #dceefa 0%, #f8fbfe 47%, #eef6fb 72%, #dce8f0 100%);
  box-shadow: inset 0 -10px 38px rgba(8, 43, 97, 0.12);
  animation: poster-in 700ms ease-out both;
}

/* ── Watermark ──────────────────────────────────────────────────── */
.watermark-pattern {
  position: absolute;
  z-index: -3;
  inset: 0;
  background: url("/images/haryana_police.png") 55px 18px / clamp(96px, 13vw, 185px) repeat;
  filter: grayscale(1) sepia(0.18) hue-rotate(168deg) saturate(1.8);
  opacity: 0.045;
  pointer-events: none;
}

/* ── City art ───────────────────────────────────────────────────── */
.city-art {
  position: absolute;
  z-index: -2;
  top: 0;
  width: clamp(280px, 31vw, 440px);
  height: clamp(190px, 19.5vw, 275px);
  object-fit: cover;
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
}

.city-art-left {
  left: 0;
  object-position: left top;
  -webkit-mask-image: linear-gradient(90deg, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 78%, transparent 100%);
}

.city-art-right {
  right: 0;
  object-position: right top;
  -webkit-mask-image: linear-gradient(270deg, #000 0 78%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0 78%, transparent 100%);
}

/* ── Header ─────────────────────────────────────────────────────── */
.poster-header {
  position: relative;
  z-index: 4;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(14px, 1.8vw, 26px);
  text-align: center;
}

.police-crest {
  display: block;
  width: clamp(180px, 19vw, 268px);
  height: auto;
  border-radius: 49%;
  mix-blend-mode: multiply;
  object-fit: contain;
}

.poster-header h1 {
  margin: clamp(-3px, -0.2vw, 0px) 0 0;
  color: var(--police-navy);
  font-family: var(--ff-heading);
  font-size: clamp(40px, 4.4vw, 62px);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 0.98;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.95);
}

.title-divider {
  display: grid;
  width: min(71.5vw, 1000px);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1vw, 15px);
  margin-top: clamp(5px, 0.55vw, 9px);
}

.title-divider span {
  height: 2px;
  background: var(--police-red);
}

.title-divider b {
  color: var(--police-blue);
  font-size: clamp(18px, 1.75vw, 25px);
  line-height: 1;
}

/* ── Search categories ──────────────────────────────────────────── */
.identification-options {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(90vw, 1280px);
  grid-template-columns:
    minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr) 1px
    minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(5px, 0.65vw, 10px);
}

.internal-access-error {
  position: relative;
  z-index: 4;
  width: min(90vw, 900px);
  margin: 12px auto 0;
  justify-content: center;
  color: #9e111b;
  border-color: #f2c0c4;
}

.internal-access-error a.internal-access-login {
  color: #0d3e7b;
  font-weight: 700;
  text-decoration: underline;
}

.internal-access-error a.internal-access-login:hover {
  color: #a90e18;
}

.identity-option {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1.1vw, 15px);
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  text-align: left;
  transition: filter 220ms ease, transform 220ms ease;
}

.identity-option:hover {
  filter: drop-shadow(0 7px 8px rgba(8, 43, 97, 0.13));
  transform: translateY(-3px);
}

.option-icon {
  display: grid;
  width: clamp(74px, 7vw, 108px);
  height: clamp(74px, 7vw, 108px);
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  background: rgba(249, 252, 255, 0.76);
  border: clamp(2px, 0.2vw, 3px) solid var(--police-red);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.48);
  align-self: flex-start;
}

.option-icon img {
  display: block;
  width: 91%;
  height: 91%;
  object-fit: contain;
}

.identity-option-deadbody .option-icon img {
  width: 96%;
  height: 96%;
}

.identity-option-internal .option-icon svg {
  width: 82%;
  height: 82%;
}

.identity-option-accused .option-icon svg,
.identity-option-vehicle .option-icon svg {
  width: 82%;
  height: 82%;
}

.option-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.option-title {
  color: var(--police-red);
  font-family: var(--ff-heading);
  font-size: clamp(17px, 1.85vw, 28px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 0.94;
  text-transform: uppercase;
}

.option-description {
  margin-top: clamp(4px, 0.5vw, 6px);
  color: var(--police-navy);
  font-family: var(--ff-devanagari);
  font-size: clamp(12px, 1.1vw, 15.5px);
  font-weight: 600;
  line-height: 1.3;
}

.options-divider {
  width: 1px;
  min-height: clamp(110px, 12vw, 168px);
  background: linear-gradient(180deg, transparent, var(--police-blue) 12% 88%, transparent);
}

/* ── Contact block ──────────────────────────────────────────────── */
.contact-card {
  position: relative;
  z-index: 6;
  display: flex;
  /* Shrink-wraps the icon + copy instead of a fixed width, so no dead space is
     left inside the border on either side of the text. max-width still caps the
     card at the widest viewport-safe size, and fit-content lets the nowrap name
     push it out to exactly the width it needs. Was a fixed 664px, which is what
     produced the empty gap before the phone icon and after "IT Cell". */
  width: fit-content;
  max-width: min(664px, 92vw);
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.3vw, 19px);
  margin-top: clamp(5px, 0.55vw, 8px);
  padding: clamp(7px, 0.75vw, 11px) clamp(12px, 1.4vw, 20px);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--police-red);
  border-radius: clamp(9px, 1vw, 14px);
  box-shadow: 0 9px 22px rgba(8, 43, 97, 0.11);
  transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.contact-card:hover {
  background: #fff;
  box-shadow: 0 14px 30px rgba(8, 43, 97, 0.18);
  transform: translateY(-2px);
}

.contact-phone {
  width: clamp(52px, 5vw, 70px);
  height: auto;
  flex: 0 0 auto;
}

.contact-copy {
  text-align: center;
  text-transform: uppercase;
}

.contact-copy p {
  margin: 0;
}

.contact-label {
  color: var(--police-blue);
  font-family: var(--ff-heading);
  font-size: clamp(19px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 0.9;
}

.contact-name {
  color: var(--police-red-bright);
  font-family: var(--ff-heading);
  /* Trimmed from clamp(30px, 3vw, 42px) so the longer "IT Cell" line fits the
     card on one line - at 42px the text measured ~547px, more than the card's
     ~470px of text room. */
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.06;
  white-space: nowrap;
}

.contact-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2px clamp(9px, 1vw, 14px) 3px;
  color: #fff;
  background: var(--police-navy);
  border-radius: 4px;
  font-family: var(--ff-condensed);
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.15;
}

.contact-numbers a {
  color: inherit;
  text-decoration: none;
}

.service-slogan {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 1vw, 14px);
  margin: clamp(3px, 0.45vw, 7px) 0 0;
  color: var(--police-navy);
  font-family: var(--ff-devanagari);
  font-size: clamp(20px, 2.15vw, 30px);
  font-weight: 600;
  line-height: 1.2;
}

.service-slogan span[aria-hidden] {
  color: var(--police-red);
  font-size: 0.7em;
}

/* ── Bottom scene ───────────────────────────────────────────────── */
.ground-scene {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(176px, 18.2vw, 255px);
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0 33%, rgba(207, 223, 234, 0.46) 50%, rgba(161, 181, 198, 0.3) 51%, rgba(209, 220, 228, 0.8) 100%);
  pointer-events: none;
}

.ground-skyline {
  position: absolute;
  right: 0;
  bottom: 38%;
  left: 0;
  height: 43%;
  opacity: 0.25;
  background:
    linear-gradient(90deg,
      transparent 0 1%, #32688c 1% 2.1%, transparent 2.1% 3.2%, #32688c 3.2% 4.2%, transparent 4.2% 5.5%,
      #32688c 5.5% 7.5%, transparent 7.5% 9%, #32688c 9% 9.8%, transparent 9.8% 12%, #32688c 12% 14.8%,
      transparent 14.8% 17%, #32688c 17% 18.4%, transparent 18.4% 20%, #32688c 20% 22.7%, transparent 22.7% 76%,
      #32688c 76% 78.4%, transparent 78.4% 80%, #32688c 80% 81.2%, transparent 81.2% 84%, #32688c 84% 87%,
      transparent 87% 89%, #32688c 89% 90.4%, transparent 90.4% 92%, #32688c 92% 94%, transparent 94% 96%,
      #32688c 96% 98%, transparent 98%);
  filter: blur(0.2px);
}

/* Band artwork. Sized by HEIGHT (not width) because the two new sources have
   very different aspect ratios - officers 448x316 is 1.42:1, vehicles 576x316
   is 1.82:1 - and the band is far wider than it is tall. Keying off height keeps
   both at the same visual scale and guarantees they fit the band's depth; keying
   off width (as the old SUV rules did) would let the taller officers image
   overflow the band and get clipped by its overflow: hidden.

   The 14vw term tracks the band's own 18.2vw depth so the art scales with the
   page, capped at 200px to preserve headroom under the contact card. */
.police-scene-art {
  position: absolute;
  bottom: 0;
  display: block;
  height: auto;
  user-select: none;
}

/* Per-side widths are derived from the height rather than hand-written, so the
   horizontal scale stays consistent at every viewport instead of drifting as the
   height's vw term and a separate width vw term diverge.

     width = height x native aspect x stretch   (capped, see per-side rules)

   --art-h holds the band art height so both sides track one source of truth.
   Stretch factors are deliberate: officers is widened furthest (1.75) because a
   tall 1.418:1 group left the band looking empty, vehicles a little less (1.22)
   since 1.823:1 is already close to the band's shape. Both images are therefore
   horizontally stretched - 75% on officers, 22% on vehicles. Lower these toward
   1 to remove the distortion. Breakpoints only override --art-h. */
.police-scene-art {
  --art-h: clamp(110px, 17vw, 244px);
  z-index: 2;
  height: var(--art-h);
  filter: drop-shadow(0 8px 5px rgba(19, 42, 65, 0.2));
}

/* Each side takes 40vw - 80% of its half of the page - so the pair spans 80% of
   the width with a 10vw gap either side of the centre line. The gap is where the
   removed centred officer sprite used to sit.

   Width is set by the layout rather than derived from height, so both images are
   scaled to fit their 40vw column; --art-h above is what controls how much of the
   band's depth they occupy. Keep --art-h's cap at or below ~244px: the band is
   clamp(176px, 18.2vw, 255px), and past that the top of the images is clipped by
   the band's overflow: hidden. */
.police-scene-art-left {
  left: 0;
  width: 40vw;
}

.police-scene-art-right {
  right: 0;
  width: 40vw;
}

/* ── Social strip ───────────────────────────────────────────────── */
.social-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  min-height: 31px;
  color: #fff;
  background: var(--police-navy);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.social-footer-inner {
  display: flex;
  width: min(100% - 32px, 920px);
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 24px);
  margin: 0 auto;
}

.social-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: clamp(12px, 1.15vw, 16px);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, transform 180ms ease;
}

.social-footer a:hover {
  color: #f6ca56;
  transform: translateY(-1px);
}

.social-footer img {
  width: clamp(18px, 1.8vw, 25px);
  height: clamp(18px, 1.8vw, 25px);
  transition: opacity 180ms ease;
}

.social-footer i {
  width: 1px;
  height: 23px;
  background: rgba(255, 255, 255, 0.55);
}

/* ── Image search dialog ────────────────────────────────────────── */
.search-dialog {
  width: min(1040px, calc(100% - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.search-dialog::backdrop {
  background: rgba(3, 26, 58, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.search-dialog[open] {
  animation: dialog-in 260ms ease-out both;
}

.dialog-shell {
  position: relative;
  display: flex;
  height: min(820px, calc(100dvh - 32px));
  flex-direction: column;
  padding: clamp(20px, 3vw, 34px);
  background:
    radial-gradient(circle at 100% 0, rgba(13, 62, 123, 0.1), transparent 33%),
    #f6f9fc;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: inherit;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-shrink: 0;
}

.dialog-eyebrow {
  margin: 0 0 3px;
  color: var(--police-red);
  font-family: var(--ff-condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dialog-header h2 {
  margin: 0;
  color: var(--police-navy);
  font-family: var(--ff-heading);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  text-transform: uppercase;
}

.dialog-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--police-navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.dialog-close:hover {
  color: var(--police-red);
  border-color: var(--police-red);
  transform: rotate(4deg);
}

.search-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.search-card {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: clamp(16px, 2.3vw, 24px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 43, 97, 0.07);
  overflow: hidden;
}

.search-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 15px;
  color: var(--police-navy);
  font-family: var(--ff-condensed);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.search-card h3 i {
  color: var(--police-red);
}

.search-mode-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding: 4px;
  background: #eef3f8;
  border-radius: 10px;
}

.search-mode-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #41597a;
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.search-mode-tab:hover {
  color: var(--police-navy);
}

.search-mode-tab.is-active {
  background: #fff;
  color: var(--police-navy);
  box-shadow: 0 2px 8px rgba(8, 43, 97, 0.14);
}

.text-search-pane {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.text-search-pane label {
  color: var(--police-navy);
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.text-search-pane textarea {
  width: 100%;
  min-height: 0;
  flex: 1;
  resize: none;
  padding: 12px 13px;
  border: 2px solid #a7b8c9;
  border-radius: 12px;
  background: #f0f5f9;
  color: #16283f;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.text-search-pane textarea:focus {
  outline: none;
  border-color: var(--police-blue);
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(13, 62, 123, 0.08);
}

.text-search-hint {
  color: #66788f;
  font-size: 12px;
  line-height: 1.45;
}

.vehicle-search-pane {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

.vehicle-search-pane label {
  color: var(--police-navy);
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vehicle-search-pane input {
  width: 100%;
  flex: 0 0 auto;
  padding: 15px 14px;
  border: 2px solid #a7b8c9;
  border-radius: 12px;
  background: #f0f5f9;
  color: #16283f;
  font-family: var(--ff-condensed);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.vehicle-search-pane input:focus {
  outline: none;
  border-color: var(--police-blue);
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(13, 62, 123, 0.08);
}

.vehicle-search-pane input::placeholder {
  color: #8497ab;
  letter-spacing: 0.08em;
}

.suggestions-panel {
  flex: 0 0 auto;
  max-height: 42%;
  overflow-y: auto;
  margin-top: 14px;
  padding: 13px 14px;
  background: #fdf3ec;
  border: 1px solid #f0d5bd;
  border-radius: 12px;
}

.suggestions-panel h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  color: #94490f;
  font-family: var(--ff-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.suggestions-panel ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.suggestions-panel li {
  position: relative;
  padding-left: 16px;
  color: #5c3a1e;
  font-size: 13px;
  line-height: 1.5;
}

.suggestions-panel li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--police-red);
}

#searchForm,
#textSearchForm,
#vehicleSearchForm {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.drop-zone {
  position: relative;
  display: grid;
  min-height: 0;
  flex: 1;
  place-items: center;
  overflow: hidden;
  background: #f0f5f9;
  border: 2px dashed #a7b8c9;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.drop-zone:hover,
.drop-zone.drag-over {
  background: #eaf3fb;
  border-color: var(--police-blue);
  box-shadow: inset 0 0 0 3px rgba(13, 62, 123, 0.06);
}

.drop-zone.has-file {
  background: #12243c;
  border-style: solid;
  border-color: var(--police-blue);
  cursor: default;
}

.drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-zone-empty {
  padding: 25px;
  text-align: center;
}

.drop-zone-empty > i {
  display: block;
  margin-bottom: 9px;
  color: #7e95ac;
  font-size: 48px;
}

.drop-zone-empty p {
  margin: 0 0 10px;
  color: #455d76;
  font-size: 15px;
  font-weight: 500;
}

.drop-zone-empty small {
  display: block;
  margin-top: 11px;
  color: #7890a7;
  font-size: 12px;
}

.browse-button {
  padding: 8px 15px;
  color: #fff;
  background: var(--police-blue);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.preview-panel {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.drop-zone.has-file .drop-zone-empty {
  display: none;
}

.drop-zone.has-file .preview-panel {
  display: flex;
}

.preview-panel > img {
  width: 100%;
  min-height: 0;
  flex: 1;
  background: #12243c;
  object-fit: contain;
}

.preview-details {
  position: relative;
  display: flex;
  min-height: 54px;
  flex-direction: column;
  justify-content: center;
  padding: 8px 52px 8px 13px;
  background: #fff;
}

.preview-details > span {
  overflow: hidden;
  color: var(--police-navy);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-details small {
  color: var(--muted);
  font-size: 11px;
}

.preview-details button {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--police-red);
  background: #fdebed;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
}

.error-alert {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  color: #9e111b;
  background: #fff0f1;
  border: 1px solid #f2c0c4;
  border-radius: 8px;
  font-size: 13px;
}

.error-alert.active {
  display: flex;
}

/* Search-by-Image engine selection.
   Rendered only when both engines are enabled (chooser) or none are
   (alert), so it sits above the drop zone as a banner, not a form field. */
.engine-alert {
  display: none;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 13px;
  color: #9e111b;
  background: #fff0f1;
  border: 1px solid #f2c0c4;
  border-radius: 8px;
  font-size: 13px;
}

.engine-alert[hidden] {
  display: none;
}

.engine-alert:not([hidden]) {
  display: flex;
}

.engine-alert strong {
  display: block;
  margin-bottom: 2px;
}

.engine-alert span {
  color: #6b1a20;
}

.engine-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f7f8fa;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
}

.engine-picker[hidden] {
  display: none;
}

.engine-picker-label {
  font-size: 13px;
  font-weight: 600;
  color: #41465a;
}

.engine-options {
  display: flex;
  gap: 8px;
}

.engine-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: #41465a;
  background: #fff;
  border: 1px solid #cfd5e0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.engine-option:hover {
  border-color: #9aa4b8;
}

.engine-option[aria-checked="true"] {
  color: #fff;
  background: var(--police-red);
  border-color: var(--police-red);
}

.engine-option:focus-visible {
  outline: 2px solid #1b6ac9;
  outline-offset: 2px;
}

.identify-button,
.reset-button {
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  color: #fff;
  background: var(--police-red);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 700;
  flex-shrink: 0;
  transition: box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.identify-button:hover:not(:disabled),
.reset-button:hover {
  box-shadow: 0 8px 20px rgba(169, 14, 24, 0.24);
  transform: translateY(-1px);
}

.identify-button:disabled {
  cursor: not-allowed;
  opacity: 0.43;
}

.button-spinner {
  display: none;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.identify-button.loading .button-spinner {
  display: inline-block;
}

.results-card {
  overflow: hidden;
}

.results-empty,
.no-results {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #7e95ac;
  text-align: center;
}

.results-empty > i,
.no-results > i {
  margin-bottom: 12px;
  color: #a9bac9;
  font-size: 42px;
}

.results-empty p,
.no-results p {
  max-width: 260px;
  margin: 0;
  line-height: 1.55;
}

.no-results,
.results-area,
.reset-button {
  display: none;
}

.no-results.active {
  display: flex;
}

.results-area.active {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.reset-button.active {
  display: block;
  background: var(--police-blue);
}

.results-scroll {
  min-height: 0;
  overflow-y: auto;
  padding-right: 5px;
}

.result-card {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  padding: 13px 14px;
  background: #f8fbfd;
  border: 1px solid #d7e1e9;
  border-left: 4px solid var(--police-blue);
  border-radius: 9px;
  animation: result-in 300ms ease both;
}

.result-photo {
  display: grid;
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  color: #8aa3b8;
  background: #e4edf4;
  border-radius: 8px;
}

.result-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-photo i {
  font-size: 26px;
}

.result-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.result-delay-1 { animation-delay: 50ms; }
.result-delay-2 { animation-delay: 100ms; }
.result-delay-3 { animation-delay: 150ms; }
.result-delay-4 { animation-delay: 200ms; }
.result-delay-5 { animation-delay: 250ms; }

.result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.result-rank {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--police-navy);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}

.result-name {
  margin: 0;
  color: var(--police-navy);
  font-size: 15px;
}

.result-detail {
  margin-top: 2px;
  color: #526a81;
  font-size: 12px;
  line-height: 1.4;
}

.result-score {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}

.score-high { color: #087345; background: #e6f7ef; }
.score-medium { color: #0d5492; background: #e8f3fc; }
.score-low { color: #a5111c; background: #fdecee; }

/* ── Loading overlay ────────────────────────────────────────────── */
.loading-overlay {
  position: fixed;
  z-index: 1500;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #fff;
  background: rgba(3, 26, 58, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.loading-overlay.active {
  display: flex;
}

.loading-content {
  text-align: center;
}

.loading-content h2 {
  margin: 18px 0 5px;
  font-family: var(--ff-heading);
  font-size: 28px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.loading-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.scan-mark {
  position: relative;
  display: grid;
  width: 94px;
  height: 94px;
  place-items: center;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
}

.scan-mark::before {
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-bottom-color: #fff;
  border-radius: 50%;
  content: "";
  animation: spin 1.7s linear infinite reverse;
}

.scan-mark i {
  font-size: 29px;
  animation: counter-spin 1.1s linear infinite;
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes poster-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(15px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-in {
  from { opacity: 0; transform: translateX(-7px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes counter-spin {
  to { transform: rotate(-360deg); }
}

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .city-art {
    width: 36%;
    height: 200px;
  }

  .police-crest {
    width: 178px;
  }

  .poster-header h1 {
    font-size: 50px;
  }

  .identification-options {
    width: min(92%, 760px);
    gap: 20px;
  }

  .option-icon {
    width: 100px;
    height: 100px;
  }

  .option-title {
    font-size: 27px;
  }

  .option-description {
    font-size: 14px;
  }

  .contact-card {
    /* Keep shrinking to content below 900px - a fixed width here would
       reintroduce the internal dead space. */
    width: fit-content;
    max-width: min(470px, 92vw);
  }

  .service-slogan {
    font-size: 20px;
  }

  .ground-scene {
    height: 180px;
  }

  .police-scene-art {
    --art-h: clamp(100px, 15.5vw, 168px);
  }

  .social-footer-inner {
    gap: 15px;
  }

  .social-footer a {
    font-size: 12px;
  }
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .police-poster {
    padding-bottom: 0;
    background:
      radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.98), transparent 34%),
      linear-gradient(180deg, #e0eff9 0%, #fbfdff 53%, #e1ecf3 100%);
  }

  .watermark-pattern {
    background-position: 15px 10px;
    background-size: 108px;
  }

  .city-art {
    width: 48%;
    height: 155px;
    opacity: 0.62;
  }

  .poster-header {
    padding-top: 14px;
  }

  .police-crest {
    width: 140px;
  }

  .poster-header h1 {
    margin-top: 2px;
    font-size: clamp(38px, 10.5vw, 48px);
    letter-spacing: 0.015em;
  }

  .title-divider {
    width: min(88%, 520px);
  }

  .identification-options {
    width: min(92%, 540px);
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .identity-option {
    min-height: 154px;
    gap: 20px;
    justify-content: center;
    padding: 8px 10px;
  }

  .option-icon {
    width: 114px;
    height: 114px;
    align-self: center;
  }

  .option-title {
    font-size: 30px;
  }

  .option-description {
    font-size: 14px;
  }

  .options-divider {
    width: 78%;
    min-height: 1px;
    height: 1px;
    justify-self: center;
    background: linear-gradient(90deg, transparent, var(--police-blue) 15% 85%, transparent);
  }

  .contact-card {
    /* Cap only - the card shrink-wraps, so no dead space at any width. The cap is
       the nowrap name's own text width plus the icon, gap and padding. */
    width: fit-content;
    max-width: calc(100% - 32px);
    margin-top: 14px;
  }

  .contact-label {
    font-size: 18px;
  }

  .contact-name {
    /* Was clamp(27px, 8vw, 34px), which held a flat 34px down to 431px and
       overflowed the card once the name got longer. Scales down instead so the
       single line fits the full 431-700px range (worst-case slack 19px). */
    font-size: clamp(22px, 5.2vw, 32px);
  }

  .contact-numbers {
    gap: 6px;
    font-size: clamp(13px, 3.8vw, 16px);
  }

  .contact-phone {
    width: 47px;
  }

  .service-slogan {
    gap: 7px;
    margin-top: 10px;
    font-size: clamp(17px, 5vw, 21px);
  }

  .service-slogan span {
    width: 25px;
  }

  .ground-scene {
    height: 180px;
  }

  .police-scene-art {
    --art-h: clamp(96px, 16.5vw, 160px);
  }

  .police-scene-art-left {
    left: 0;
  }

  .police-scene-art-right {
    right: 0;
  }

  .social-footer {
    padding: 12px 0;
  }

  .social-footer-inner {
    display: grid;
    width: min(100% - 28px, 500px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
  }

  .social-footer a {
    justify-content: flex-start;
    font-size: 11px;
    white-space: normal;
  }

  .social-footer i {
    display: none;
  }

  .search-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Small mobile ───────────────────────────────────────────────── */
@media (max-width: 430px) {
  .city-art {
    width: 52%;
    height: 140px;
    opacity: 0.48;
  }

  .identity-option {
    flex-direction: column;
    gap: 7px;
    padding: 12px 8px;
    text-align: center;
  }

  .option-icon {
    width: 105px;
    height: 105px;
  }

  .option-title {
    font-size: 27px;
  }

  .option-description {
    font-size: 13.5px;
  }

  .contact-card {
    gap: 7px;
    padding-inline: 8px;
  }

  .contact-phone {
    width: 39px;
  }

  .contact-label {
    font-size: 15px;
  }

  .contact-name {
    /* Was a flat 27px, which overflowed below ~390px once the name grew. Scales
       with the viewport so the line holds from 320px up (worst slack 18px). */
    font-size: clamp(16px, 4.8vw, 26px);
  }

  .contact-numbers {
    font-size: 12px;
  }

  .service-slogan span[aria-hidden] {
    display: none;
  }

  .ground-scene {
    height: 160px;
  }

  /* On phones the two groups would collide with each other and with the
     centred officer at full scale, so both are scaled down hard and pushed
     further off-canvas to read as scenery running past the edges. */
  .police-scene-art {
    --art-h: clamp(88px, 33vw, 145px);
  }

  /* With no centred sprite to clear, both halves stay flush to their edge on
     phones too - no off-canvas offsets. */
  .police-scene-art-left {
    left: 0;
  }

  .police-scene-art-right {
    right: 0;
  }

  .social-footer-inner {
    grid-template-columns: 1fr;
  }

  .social-footer a {
    justify-content: center;
  }

  .search-dialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 15px;
  }

  .dialog-shell {
    padding: 16px;
    height: calc(100dvh - 16px);
  }

  .dialog-header {
    margin-bottom: 16px;
  }

  .search-card {
    padding: 14px;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ── Cross-database match dialog ────────────────────────────────── */
.cross-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

#crossMatchForm {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.cross-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cross-row label {
  color: var(--police-navy);
  font-family: var(--ff-condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cross-row label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.cross-row select,
.cross-row input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  color: var(--ink);
  background: #f4f8fb;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.cross-divider {
  align-self: center;
  color: var(--police-red);
  font-family: var(--ff-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.cross-hint {
  margin: 10px 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.cross-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: #f0f5f9;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.cross-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--police-navy);
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 700;
}

.cross-progress-track {
  height: 10px;
  overflow: hidden;
  background: #dbe5ee;
  border-radius: 999px;
}

.cross-progress-fill {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--police-blue), var(--police-red-bright));
  border-radius: inherit;
  transition: width 260ms ease;
}

.cross-progress-counts {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.cross-progress-counts strong {
  color: var(--police-navy);
}

.cross-results {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.cross-results-block {
  display: flex;
  min-height: 0;
  flex: 1 1 50%;
  flex-direction: column;
  overflow: hidden;
}

.cross-results-block h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--police-navy);
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cross-link-card {
  padding: 10px 11px;
  background: #f7fafc;
  border: 1px solid #d8e1ea;
  border-radius: 10px;
}

.cross-score {
  display: block;
  margin-bottom: 8px;
  color: var(--police-red-bright);
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.cross-link-sides {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.cross-link-arrow {
  display: grid;
  align-self: center;
  flex: 0 0 auto;
  place-items: center;
  color: var(--police-blue);
}

.cross-person {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 8px;
}

.cross-person-photo {
  display: grid;
  width: 56px;
  height: 72px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  color: #9fb2c4;
  background: #e8eef4;
  border: 1px solid #ccd8e3;
  border-radius: 8px;
}

.cross-person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cross-person-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.cross-person-text strong {
  color: var(--police-navy);
  font-size: 13px;
  line-height: 1.2;
  word-break: break-word;
}

.cross-detail {
  color: var(--muted);
  font-size: 11px;
  word-break: break-word;
}

.cross-detail strong {
  color: var(--police-blue);
}

.cross-notmatched-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cross-notmatched {
  padding: 8px;
  background: #f7fafc;
  border: 1px solid #e1e8ef;
  border-radius: 8px;
}

@media (max-width: 600px) {
.cross-notmatched-grid {
    grid-template-columns: 1fr;
  }
  .cross-link-sides {
    flex-direction: column;
  }
  .cross-link-arrow {
    transform: rotate(90deg);
  }
}

.cross-id-count {
  color: var(--muted);
  font-size: 12px;
}

.cross-no-match {
  padding: 18px 16px;
  background: #fff8e6;
  border: 1px solid #f0d79a;
  border-radius: 8px;
  text-align: center;
}

.cross-no-match strong {
  display: block;
  color: #8a6d1a;
  font-family: var(--ff-condensed);
  font-size: 15px;
  margin-bottom: 6px;
}

.cross-no-match p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
  max-width: 46ch;
  display: inline-block;
}

.cross-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 14px;
  color: #b02a37;
  background: #fff;
  border: 1px solid #e6b3b8;
  border-radius: 6px;
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.cross-cancel-btn:hover:not(:disabled) {
  background: #fdebec;
  border-color: #d88;
}

.cross-cancel-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.cross-cancel-btn .button-spinner {
  display: none;
  width: 12px;
  height: 12px;
  border: 2px solid #b02a37;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.cross-cancel-btn.loading .button-spinner {
  display: inline-block;
}

@media (max-width: 860px) {
  .cross-layout {
    grid-template-columns: 1fr;
  }
}

/* ── AI Search tab bar ─────────────────────────────────────────────────── */
.cross-tabs {
  display: flex;
  gap: 6px;
  margin: 14px 0 0;
}

.cross-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.cross-tab:hover {
  color: var(--police-navy);
}

.cross-tab.is-active {
  color: var(--police-navy);
  background: #f0f5f9;
  border-color: #cfe0ee;
  box-shadow: inset 0 2px 0 var(--police-blue);
}

.cross-tab-badge {
  margin-left: 2px;
  padding: 2px 7px;
  color: #fff;
  background: var(--police-red-bright);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cross-panel[hidden] {
  display: none;
}

/* ── AI Search progress / engagement ───────────────────────────────────── */
.ai-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 16px 14px;
  background: #f0f5f9;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.ai-radar {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 6px auto;
  overflow: hidden;
  background: radial-gradient(circle, rgba(26, 86, 141, 0.08) 0%, rgba(26, 86, 141, 0) 70%);
  border: 1px solid #cfe0ee;
  border-radius: 50%;
}

.ai-radar-sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, rgba(29, 148, 222, 0.5), rgba(29, 148, 222, 0) 70deg, transparent);
  border-radius: 50%;
  animation: radarSpin 2.4s linear infinite;
}

.ai-radar::before,
.ai-radar::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(29, 148, 222, 0.22);
  border-radius: 50%;
}

.ai-radar::before {
  inset: 22%;
}

.ai-radar::after {
  inset: 44%;
}

.ai-radar i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--police-blue);
  font-size: 20px;
}

@keyframes radarSpin {
  to {
    transform: rotate(360deg);
  }
}

.ai-progress.is-finished .ai-radar-sweep {
  animation: none;
  opacity: 0;
}

.ai-progress.is-finished .ai-radar {
  background: #edf7f0;
  border-color: #bfe3cf;
}

.ai-progress.is-finished .ai-radar::before,
.ai-progress.is-finished .ai-radar::after {
  border-color: #bfe3cf;
}

.ai-progress.is-finished .ai-radar i {
  color: #1a7f4d;
}

.ai-stage-track {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin-top: 8px;
}

.ai-stage {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #9fb2c4;
}

.ai-stage::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 0;
  width: 100%;
  height: 2px;
  background: #dbe5ee;
}

.ai-stage:last-child::after {
  display: none;
}

.ai-stage-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #9fb2c4;
  background: #fff;
  border: 2px solid #dbe5ee;
  border-radius: 50%;
  font-size: 11px;
  transition: all 0.25s;
}

.ai-stage-name {
  position: relative;
  z-index: 1;
  padding: 0 4px;
  background: #f0f5f9;
  font-family: var(--ff-condensed);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ai-stage-tick {
  display: none;
}

.ai-stage.is-active .ai-stage-icon {
  color: #fff;
  background: var(--police-blue);
  border-color: var(--police-blue);
  animation: stagePulse 1.3s ease-in-out infinite;
}

.ai-stage.is-done .ai-stage-icon {
  color: transparent;
  background: #1a7f4d;
  border-color: #1a7f4d;
}

.ai-stage.is-done .ai-stage-icon i {
  display: none;
}

.ai-stage.is-done .ai-stage-icon::after {
  content: "✓";
  color: #fff;
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 700;
}

.ai-stage.is-done::after {
  background: #bfe3cf;
}

@keyframes stagePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(29, 148, 222, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(29, 148, 222, 0);
  }
}

.ai-ticker {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--police-navy);
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.ai-progress-counts {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}

.ai-progress-counts strong {
  color: var(--police-navy);
}

.ai-llm-note {
  margin-top: 6px;
  padding: 8px 10px;
  color: #7a5a10;
  background: #fff7e0;
  border: 1px solid #f0d79a;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.ai-summary {
  margin-bottom: 12px;
  padding: 10px 12px;
  color: var(--police-navy);
  background: #eef5fb;
  border: 1px solid #cfe0ee;
  border-radius: 8px;
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* ── AI hit cards ──────────────────────────────────────────────────────── */
.ai-hit-card {
  margin-bottom: 10px;
  padding: 10px 11px;
  background: #f7fafc;
  border: 1px solid #d8e1ea;
  border-left: 4px solid #9fb2c4;
  border-radius: 10px;
}

.ai-hit-card.tier-high {
  border-left-color: #1a7f4d;
}

.ai-hit-card.tier-medium {
  border-left-color: #b5810a;
}

.ai-hit-card.tier-low {
  border-left-color: #9fb2c4;
}

.ai-hit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ai-tier-badge {
  display: inline-block;
  padding: 3px 10px;
  color: #fff;
  background: #9fb2c4;
  border-radius: 999px;
  font-family: var(--ff-condensed);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.tier-high .ai-tier-badge {
  background: #1a7f4d;
}

.tier-medium .ai-tier-badge {
  background: #b5810a;
}

.ai-conf {
  color: var(--police-red-bright);
  font-family: var(--ff-condensed);
  font-size: 13px;
  font-weight: 700;
}

.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  color: var(--police-blue);
  background: #eaf2fa;
  border: 1px solid #cfe0ee;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
}

.ai-reason {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.ai-reason i {
  color: var(--police-blue);
}