/* ------------------------------------------------------------------ *
 * Google Maps Rank Scan: the form page, the results page and the
 * admin table. Leans on the tokens and the hero treatment in
 * atlas.css and page.css so the tool reads as part of the site.
 *
 * New surfaces here use neutral dark shadows for elevation only. The
 * coloured hero wash is inherited from the service pages on purpose,
 * so /scan does not look like a different site.
 * ------------------------------------------------------------------ */

:root{
  /* Rank bands. One scale, used by the pins, the legend and the table. */
  --rank-top: 49, 178, 125;      /* 1 to 3   */
  --rank-mid: 224, 167, 60;      /* 4 to 10  */
  --rank-low: 217, 84, 74;       /* 11 to 20 */
  --rank-none: 97, 112, 134;     /* not found */

  --panel-shadow:
    0 1px 0 rgba(var(--hi), .04) inset,
    0 10px 24px -14px rgba(0, 0, 0, .7),
    0 32px 60px -36px rgba(0, 0, 0, .8);
  --panel-shadow-lift:
    0 1px 0 rgba(var(--hi), .06) inset,
    0 16px 34px -16px rgba(0, 0, 0, .75),
    0 44px 80px -40px rgba(0, 0, 0, .85);
}
:root[data-theme="light"]{
  --rank-top: 22, 142, 95;
  --rank-mid: 176, 118, 15;
  --rank-low: 186, 54, 45;
  --rank-none: 123, 137, 158;

  --panel-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 8px 20px -14px rgba(13, 21, 36, .28),
    0 28px 52px -34px rgba(13, 21, 36, .3);
  --panel-shadow-lift:
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 14px 30px -16px rgba(13, 21, 36, .32),
    0 40px 70px -38px rgba(13, 21, 36, .34);
}

/* ------------------------------------------------------------------ */
/* Shared                                                              */
/* ------------------------------------------------------------------ */
.scan-wrap{ width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--s-6); }
.scan-narrow{ max-width: 58rem; }

.scan-panel{
  position: relative;
  border: 1px solid rgba(var(--primary), .2);
  border-radius: 20px;
  background-image: var(--card-grad);
  box-shadow: var(--panel-shadow);
}

.scan-h2{
  margin: 0;
  font-family: 'Unbounded', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: rgb(var(--ink));
  text-wrap: balance;
}
.scan-sub{
  margin: var(--s-3) 0 0;
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(var(--ink-soft), .7);
  text-wrap: pretty;
}
.scan-mono{
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Form page                                                           */
/* ------------------------------------------------------------------ */
.scan-hero{
  position: relative;
  overflow-x: clip;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
}
.scan-hero-inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 62rem){
  .scan-hero-inner{ grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(3rem, 5vw, 5rem); }
}

.scan-title{
  margin: 0;
  font-family: 'Unbounded', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: rgb(var(--ink));
  text-wrap: balance;
}
.scan-lede{
  margin: var(--s-6) 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.75;
  color: rgba(var(--ink-soft), .74);
  text-wrap: pretty;
}

.scan-points{ margin: var(--s-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-4); max-width: 32rem; }
.scan-points li{
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s-3);
  font-size: .9375rem;
  line-height: 1.65;
  color: rgba(var(--ink-soft), .76);
}
.scan-points .ic{ width: 1.125rem; height: 1.125rem; margin-top: .2rem; color: rgba(var(--primary), .95); }

/* The little preview grid under the copy: a hint of the output. */
.scan-preview{ margin: clamp(2rem, 4vw, 3rem) 0 0; display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.scan-preview-grid{
  display: grid;
  gap: 6px;
  width: 11.5rem;
  padding: var(--s-3);
  border: 1px solid rgba(var(--primary), .18);
  border-radius: 14px;
  background: rgba(var(--surface), .5);
}
.scan-preview-dot{
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: .85;
  animation: scan-dot-in .5s var(--ease-spring) both;
}
@keyframes scan-dot-in{ from{ opacity: 0; transform: scale(.4); } to{ opacity: .85; transform: scale(1); } }
@media (prefers-reduced-motion: reduce){ .scan-preview-dot{ animation: none; } }
.scan-preview-note{ max-width: 15rem; margin: 0; font-size: .8125rem; line-height: 1.65; color: rgba(var(--ink-soft), .6); }

/* ---- the form card ---------------------------------------------- */
.scan-card{ padding: clamp(1.5rem, 3vw, 2.25rem); }
.scan-card-head{ margin: 0 0 var(--s-6); }
.scan-card-title{
  margin: 0;
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  color: rgb(var(--ink));
}
.scan-card-note{ margin: var(--s-2) 0 0; font-size: .8125rem; line-height: 1.6; color: rgba(var(--ink-soft), .62); }

.scan-fields{ display: grid; gap: var(--s-4); }
.scan-row{ display: grid; gap: var(--s-4); }
@media (min-width: 30rem){ .scan-row{ grid-template-columns: 1fr 1fr; } }

.scan-field{ display: grid; gap: .4375rem; position: relative; }
.scan-label{
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(var(--ink-soft), .82);
}
.scan-label .scan-opt{ color: rgba(var(--ink-soft), .45); font-weight: 400; }
.scan-hint{ font-size: .75rem; line-height: 1.55; color: rgba(var(--ink-soft), .52); }

.scan-input{
  width: 100%;
  padding: .75rem .875rem;
  font: inherit;
  font-size: .9375rem;
  color: rgb(var(--ink));
  background: rgba(var(--void), .55);
  border: 1px solid rgba(var(--primary), .26);
  border-radius: 11px;
  outline: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.scan-input::placeholder{ color: rgba(var(--ink-soft), .38); }
.scan-input:hover{ border-color: rgba(var(--primary), .4); }
.scan-input:focus-visible{
  border-color: rgba(var(--primary), .85);
  outline: 2px solid rgba(var(--primary), .85);
  outline-offset: 1px;
}
.scan-input[aria-invalid="true"]{ border-color: rgba(var(--rank-low), .8); }
:root[data-theme="light"] .scan-input{ background: rgba(255, 255, 255, .9); }

/* ---- business autocomplete -------------------------------------- */
.scan-combo{ position: relative; }
.scan-combo-status{
  position: absolute;
  top: 50%;
  right: .75rem;
  transform: translateY(-50%);
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(var(--primary), .3);
  border-top-color: rgba(var(--primary), .95);
  border-radius: 999px;
  animation: scan-spin .7s linear infinite;
}
.scan-combo[data-busy="true"] .scan-combo-status{ display: block; }
@keyframes scan-spin{ to{ transform: translateY(-50%) rotate(360deg); } }

.scan-suggestions{
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: .3125rem;
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  border: 1px solid rgba(var(--primary), .28);
  border-radius: 13px;
  background: rgb(var(--menu-card));
  box-shadow: var(--panel-shadow-lift);
}
.scan-suggestions[hidden]{ display: none; }
.scan-suggestion{
  display: grid;
  gap: 2px;
  padding: .5rem .625rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color .14s ease;
}
.scan-suggestion:hover,
.scan-suggestion[aria-selected="true"]{ background: rgba(var(--menu-primary), .16); }
.scan-suggestion-main{ font-size: .875rem; font-weight: 500; color: rgb(var(--menu-ink)); }
.scan-suggestion-sub{ font-size: .75rem; color: rgba(var(--menu-ink-soft), .6); }
.scan-suggestion-empty{ padding: .625rem; font-size: .8125rem; line-height: 1.55; color: rgba(var(--menu-ink-soft), .72); }

.scan-deep-row{ display: flex; gap: .375rem; align-items: baseline; flex-wrap: wrap; }
.scan-linkbtn{
  padding: 0;
  font: inherit;
  font-size: .75rem;
  color: rgba(var(--primary), 1);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(var(--primary), .45);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.scan-linkbtn:hover{ color: rgb(var(--ink)); border-color: rgba(var(--ink), .6); }
.scan-linkbtn:focus-visible{ outline: 2px solid rgba(var(--primary), .85); outline-offset: 2px; }
.scan-linkbtn[disabled]{ opacity: .55; cursor: wait; }

.scan-suggestion-note{
  padding: .375rem .625rem .5rem;
  font-size: .6875rem;
  color: rgba(var(--menu-ink-soft), .55);
  border-bottom: 1px solid rgba(var(--menu-primary), .18);
  margin-bottom: .25rem;
}

.scan-suggestion-deep{
  display: flex;
  gap: .3125rem;
  flex-wrap: wrap;
  padding: .5rem .625rem;
  margin-top: .25rem;
  border-top: 1px solid rgba(var(--menu-primary), .18);
  font-size: .75rem;
  color: rgba(var(--menu-ink-soft), .6);
  cursor: pointer;
  border-radius: 0 0 9px 9px;
  transition: background-color .14s ease;
}
.scan-suggestion-deep:hover{ background: rgba(var(--menu-primary), .14); }

/* When autocomplete found nothing this is the only way forward, so it
   stops being a footnote and becomes the thing to press. */
.scan-suggestion-deep-primary{
  justify-content: center;
  margin: .375rem .25rem .25rem;
  padding: .625rem;
  border: 1px solid rgba(var(--menu-primary), .55);
  border-radius: 9px;
  background: rgba(var(--menu-primary), .16);
}
.scan-suggestion-deep-primary:hover{ background: rgba(var(--menu-primary), .28); }
.scan-suggestion-deepcta{
  font-size: .875rem;
  font-weight: 600;
  color: rgb(var(--menu-ink));
}
.scan-suggestion-deeplink{ color: rgb(var(--menu-primary)); border-bottom: 1px solid rgba(var(--menu-primary), .5); }

.scan-chosen{
  display: none;
  align-items: flex-start;
  gap: var(--s-3);
  padding: .6875rem .75rem;
  border: 1px solid rgba(var(--rank-top), .35);
  border-radius: 11px;
  background: rgba(var(--rank-top), .08);
}
.scan-chosen[data-on="true"]{ display: flex; }
.scan-chosen .ic{ flex: none; width: 1rem; height: 1rem; margin-top: .15rem; color: rgb(var(--rank-top)); }
.scan-chosen-body{ flex: 1; min-width: 0; }
.scan-chosen-name{ font-size: .875rem; font-weight: 500; color: rgb(var(--ink)); }
.scan-chosen-addr{ font-size: .75rem; line-height: 1.5; color: rgba(var(--ink-soft), .62); }
.scan-chosen-clear{
  flex: none;
  padding: .125rem .375rem;
  font: inherit;
  font-size: .75rem;
  color: rgba(var(--ink-soft), .7);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.scan-chosen-clear:hover{ color: rgb(var(--ink)); background: rgba(var(--primary), .14); }
.scan-chosen-clear:focus-visible{ outline: 2px solid rgba(var(--primary), .85); outline-offset: 1px; }

/* ---- turnstile, errors, submit ----------------------------------- */
.scan-turnstile{ min-height: 0; }
.scan-turnstile:not(:empty){ margin-top: var(--s-2); }

.scan-alert{
  display: none;
  gap: var(--s-3);
  padding: .75rem .875rem;
  font-size: .875rem;
  line-height: 1.6;
  border-radius: 11px;
  border: 1px solid rgba(var(--rank-low), .4);
  background: rgba(var(--rank-low), .1);
  color: rgb(var(--ink));
}
.scan-alert[data-on="true"]{ display: flex; }
.scan-alert a{ color: rgb(var(--ink)); text-underline-offset: 3px; }

.scan-submit{ width: 100%; justify-content: center; margin-top: var(--s-2); }
.scan-submit[disabled]{ opacity: .55; cursor: not-allowed; transform: none; }
.scan-legal{ margin: var(--s-4) 0 0; font-size: .75rem; line-height: 1.6; color: rgba(var(--ink-soft), .5); }
.scan-legal a{ color: rgba(var(--ink-soft), .72); }

/* ------------------------------------------------------------------ */
/* Results page                                                        */
/* ------------------------------------------------------------------ */
.scan-result{ padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); position: relative; }

.scan-result-head{ display: grid; gap: var(--s-4); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.scan-result-title{
  margin: 0;
  font-family: 'Unbounded', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: rgb(var(--ink));
  text-wrap: balance;
}
.scan-result-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  font-size: .875rem;
  color: rgba(var(--ink-soft), .66);
}
.scan-chip{
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .625rem;
  font-size: .75rem;
  border: 1px solid rgba(var(--primary), .3);
  border-radius: 999px;
  background: rgba(var(--primary), .09);
  color: rgba(var(--ink-soft), .9);
}

/* ---- progress ---------------------------------------------------- */
.scan-progress{ display: grid; gap: var(--s-4); padding: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--s-8); }
.scan-progress[hidden]{ display: none; }
.scan-progress-row{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.scan-progress-label{ font-size: .9375rem; color: rgba(var(--ink-soft), .8); }
.scan-progress-count{ font-size: .875rem; color: rgba(var(--ink-soft), .6); }
.scan-bar{ height: 6px; border-radius: 999px; background: rgba(var(--primary), .16); overflow: hidden; }
.scan-bar-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgb(var(--primary));
  transform-origin: left;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* ---- headline stats ---------------------------------------------- */
.scan-stats{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-8); }
@media (min-width: 52rem){ .scan-stats{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.scan-stat{ padding: clamp(1rem, 2vw, 1.375rem); }
.scan-stat-value{
  font-family: 'Unbounded', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgb(var(--ink));
  font-variant-numeric: tabular-nums;
}
.scan-stat-label{ margin-top: .5rem; font-size: .8125rem; line-height: 1.5; color: rgba(var(--ink-soft), .62); }
.scan-stat-delta{ margin-top: .375rem; font-size: .75rem; font-weight: 500; }
.scan-up{ color: rgb(var(--rank-top)); }
.scan-down{ color: rgb(var(--rank-low)); }
.scan-flat{ color: rgba(var(--ink-soft), .5); }

/* ---- map --------------------------------------------------------- */
.scan-map-panel{ overflow: hidden; margin-bottom: var(--s-8); }
.scan-map-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) clamp(1rem, 2vw, 1.375rem);
  border-bottom: 1px solid rgba(var(--primary), .16);
}
.scan-map{ height: clamp(22rem, 62vh, 36rem); width: 100%; background: rgba(var(--void), .6); }
.scan-map-fallback{
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--s-8);
  text-align: center;
  font-size: .875rem;
  color: rgba(var(--ink-soft), .55);
}

.scan-legend{ display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.scan-legend-item{ display: inline-flex; align-items: center; gap: .4375rem; font-size: .75rem; color: rgba(var(--ink-soft), .7); }
.scan-legend-swatch{ width: .75rem; height: .75rem; border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35) inset; }

/* The pin itself, drawn as an HTML overlay on the map. */
.scan-pin{
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .9);
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45), 0 6px 14px -6px rgba(0, 0, 0, .6);
  cursor: default;
  transition: transform .18s var(--ease-spring);
  will-change: transform;
}
.scan-pin:hover{ transform: translate(-50%, -50%) scale(1.14); z-index: 5; }
.scan-pin[data-band="top"]{ background: rgb(var(--rank-top)); }
.scan-pin[data-band="mid"]{ background: rgb(var(--rank-mid)); color: #1b1304; }
.scan-pin[data-band="low"]{ background: rgb(var(--rank-low)); }
.scan-pin[data-band="none"]{ background: rgb(var(--rank-none)); font-size: .9375rem; }
.scan-pin[data-band="pending"]{
  background: rgba(var(--rank-none), .35);
  border-color: rgba(255, 255, 255, .45);
  color: transparent;
}
.scan-pin[data-band="error"]{ background: rgba(var(--rank-none), .6); font-size: .75rem; }

/* ---- grid fallback / table --------------------------------------- */
.scan-gridview{ display: grid; gap: 4px; padding: clamp(1rem, 2vw, 1.5rem); justify-content: center; }
.scan-gridview-cell{
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* ---- competitors -------------------------------------------------- */
.scan-two{ display: grid; gap: var(--s-6); margin-bottom: var(--s-8); }
@media (min-width: 56rem){ .scan-two{ grid-template-columns: 1fr 1fr; } }
.scan-list{ margin: var(--s-4) 0 0; padding: 0; list-style: none; display: grid; gap: .125rem; }
/* Narrow first: on a phone the rating and coverage go under the name
   rather than stealing half the width and wrapping every listing into
   three lines. */
.scan-list li{
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: .1875rem var(--s-3);
  align-items: baseline;
  padding: .625rem .25rem;
  border-bottom: 1px solid rgba(var(--primary), .1);
  font-size: .875rem;
  color: rgba(var(--ink-soft), .82);
}
.scan-list li > .scan-list-meta{ grid-column: 2; white-space: normal; }
@media (min-width: 36rem){
  .scan-list li{ grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: var(--s-3); padding: .5rem .25rem; }
  .scan-list li > .scan-list-meta{ grid-column: auto; white-space: nowrap; }
}
.scan-list li:last-child{ border-bottom: 0; }
.scan-list-rank{ font-family: 'Space Grotesk', ui-sans-serif, sans-serif; font-weight: 600; color: rgba(var(--ink-soft), .5); font-variant-numeric: tabular-nums; }
.scan-list-meta{ font-size: .75rem; color: rgba(var(--ink-soft), .5); white-space: nowrap; }
.scan-list-name{ display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; min-width: 0; }
/* The site strips underlines from links everywhere else, which left
   these looking like plain text. On a phone there is no hover to hint
   otherwise, so nothing said they could be tapped at all. */
.scan-list-name > a:first-child{
  color: rgb(var(--ink));
  text-decoration: underline;
  text-decoration-color: rgba(var(--primary), .6);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: .1875rem 0;
}
.scan-list-name > a:first-child:hover,
.scan-list-name > a:first-child:focus-visible{
  color: rgb(var(--primary));
  text-decoration-color: rgb(var(--primary));
}
.scan-list-name > a:first-child:focus-visible{ outline: 2px solid rgba(var(--primary), .85); outline-offset: 2px; }
.scan-list-site{
  display: inline-block;
  padding: .1875rem 0;
  font-size: .75rem;
  color: rgba(var(--ink-soft), .7);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--ink-soft), .35);
}
.scan-list-site:hover,
.scan-list-site:focus-visible{ color: rgb(var(--ink)); border-color: rgba(var(--ink), .6); }
.scan-list-site:focus-visible{ outline: 2px solid rgba(var(--primary), .85); outline-offset: 2px; }
.scan-rival{ padding: .1875rem .4375rem; font-size: .6875rem; }

/* ---- call to action ----------------------------------------------- */
.scan-cta{ padding: clamp(1.75rem, 4vw, 3rem); text-align: center; }
.scan-cta .scan-h2{ max-width: 34rem; margin-inline: auto; }
.scan-cta .scan-sub{ max-width: 36rem; margin-inline: auto; }
.scan-cta-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); margin-top: var(--s-8); }

/* ---- states -------------------------------------------------------- */
.scan-state{ display: grid; gap: var(--s-4); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.scan-state .ic{ width: 1.75rem; height: 1.75rem; margin: 0 auto; color: rgba(var(--primary), .8); }

/* ------------------------------------------------------------------ */
/* Admin                                                               */
/* ------------------------------------------------------------------ */
.scan-admin{ padding: clamp(2.5rem, 5vw, 4rem) 0; }
.scan-login{ max-width: 24rem; margin: clamp(2rem, 8vw, 5rem) auto; padding: clamp(1.5rem, 3vw, 2rem); }

.scan-totals{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-8); }
@media (min-width: 48rem){ .scan-totals{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.scan-table-wrap{ overflow-x: auto; border-radius: 20px; }
.scan-table{ width: 100%; border-collapse: collapse; font-size: .8125rem; min-width: 60rem; }
.scan-table th{
  position: sticky;
  top: 0;
  padding: .75rem;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(var(--ink-soft), .6);
  background: rgb(var(--surface));
  border-bottom: 1px solid rgba(var(--primary), .2);
}
.scan-table td{
  padding: .75rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(var(--primary), .1);
  color: rgba(var(--ink-soft), .85);
}
.scan-table tr:hover td{ background: rgba(var(--primary), .05); }
.scan-table a{ color: rgb(var(--ink)); }
.scan-table-strong{ color: rgb(var(--ink)); font-weight: 500; }

.scan-badge{
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 500;
  white-space: nowrap;
}
.scan-badge[data-status="complete"]{ background: rgba(var(--rank-top), .16); color: rgb(var(--rank-top)); }
.scan-badge[data-status="running"],
.scan-badge[data-status="pending"]{ background: rgba(var(--rank-mid), .16); color: rgb(var(--rank-mid)); }
.scan-badge-test{ background: rgba(var(--ink-soft), .16); color: rgba(var(--ink-soft), .9); }
/* Started from a script rather than a browser, so: my testing, not a visitor. */
.scan-badge-script{ background: rgba(var(--secondary), .22); color: rgba(var(--ink), .9); }
.scan-toggle{
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .75rem;
  color: rgba(var(--ink-soft), .7);
  cursor: pointer;
}
.scan-toggle input{ accent-color: rgb(var(--primary)); cursor: pointer; }

.scan-badge[data-status="failed"]{ background: rgba(var(--rank-low), .16); color: rgb(var(--rank-low)); }

.scan-btn-row{ display: flex; gap: var(--s-2); flex-wrap: wrap; }
.scan-mini{
  padding: .3125rem .625rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  color: rgb(var(--ink));
  background: rgba(var(--primary), .12);
  border: 1px solid rgba(var(--primary), .3);
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s var(--ease-spring), background-color .15s ease, border-color .15s ease;
}
.scan-mini:hover{ transform: translateY(-1px); background: rgba(var(--primary), .2); border-color: rgba(var(--primary), .45); }
.scan-mini:active{ transform: translateY(0) scale(.97); }
.scan-mini:focus-visible{ outline: 2px solid rgba(var(--primary), .85); outline-offset: 2px; }
.scan-mini[disabled]{ opacity: .5; cursor: not-allowed; transform: none; }

.scan-empty{ padding: clamp(2rem, 5vw, 3rem); text-align: center; color: rgba(var(--ink-soft), .6); font-size: .9375rem; }

/* ------------------------------------------------------------------ */
/* Service area editor                                                 */
/* ------------------------------------------------------------------ */
.scan-area-layout{ display: grid; gap: var(--s-6); }
@media (min-width: 64rem){
  .scan-area-layout{ grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
}
.scan-area-layout .scan-map{ height: clamp(26rem, 60vh, 38rem); }