/* ---------------------------------------------------------------------------
   Scanner: a 7 x 7 illustration of a geo-grid scan you can poke at.
   Loaded only by pages that use it (meta.json "css"). Pairs with
   /assets/js/sauce-scanner.js. Uses the heat-grid data ramp from site.css
   (--rank-1 top three, --rank-4 positions 4-10, --rank-5 not in the pack).

   Motion: transform/opacity/background only, 160ms ease-out, a short stagger
   from the centre outward. Hover is gated to fine pointers. Reduced motion
   drops the stagger and the transform.
   --------------------------------------------------------------------------- */

.scanner {
  --sc-ease: cubic-bezier(0.23, 1, 0.32, 1);
  margin: 40px 0;
  padding: 24px;
  border: 1.5px solid var(--rule-hard);
  background: var(--basemap);
  color: var(--ink-invert);
}

.scanner .sui__kicker { color: var(--ink-invert-soft); margin: 0 0 14px; }

.scanner__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}

.scanner__mode {
  appearance: none;
  font: 600 var(--step--1)/1 var(--ui);
  letter-spacing: 0.02em;
  padding: 11px 16px;
  min-height: 44px;
  color: var(--ink-invert);
  background: transparent;
  border: 1.5px solid var(--rule-invert);
  cursor: pointer;
  transition: transform 160ms var(--sc-ease), background-color 160ms var(--sc-ease),
    border-color 160ms var(--sc-ease);
}

.scanner__mode[aria-pressed="true"] {
  background: var(--beacon-hi);
  border-color: var(--beacon-hi);
  color: #06100f;
}

.scanner__mode:active { transform: scale(0.97); }

.scanner__body {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.scanner__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 14px;
  background: var(--basemap-2);
  border: 1px solid var(--rule-invert);
}

.scanner__pt {
  --d: 0;
  appearance: none;
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--rank-5);
  transition: transform 160ms var(--sc-ease), background-color 220ms var(--sc-ease),
    border-color 220ms var(--sc-ease), opacity 220ms var(--sc-ease);
  transition-delay: calc(var(--d) * 18ms);
}

/* Shape carries the meaning as well as colour: solid, ringed, hollow. */
.scanner__pt.is-top { background: var(--rank-1); border-color: #55c7c2; }
.scanner__pt.is-mid { background: transparent; border-color: var(--rank-4); box-shadow: inset 0 0 0 4px var(--rank-4); }
.scanner__pt.is-none { background: transparent; border-color: var(--rank-5); opacity: 0.85; }
.scanner__pt.is-off { background: transparent; border-color: var(--rule-invert); border-style: dashed; opacity: 0.7; }

.scanner__pt.is-office::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--ink-invert);
  opacity: 0.9;
  pointer-events: none;
}

.scanner__pt[aria-current="true"] { transform: scale(1.18); }
.scanner__pt:active { transform: scale(0.94); }
.scanner__pt:focus-visible,
.scanner__mode:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .scanner__pt:hover { transform: scale(1.12); }
  .scanner__mode:hover { border-color: var(--beacon-hi); }
}

.scanner__read { min-width: 0; }

.scanner__where {
  margin: 0 0 6px;
  font: 600 var(--step--1)/1.3 var(--ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-invert-soft);
}

.scanner__result {
  margin: 0 0 10px;
  font: 700 var(--step-3)/1.1 var(--display);
  color: var(--ink-invert);
}

.scanner__result[data-state="top"] { color: #55c7c2; }
.scanner__result[data-state="mid"] { color: var(--rank-4); }
.scanner__result[data-state="none"],
.scanner__result[data-state="off"] { color: #e88a76; }

.scanner__note { margin: 0 0 18px; color: var(--ink-invert-soft); }

.scanner__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.scanner__chip {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule-invert);
  background: var(--basemap-2);
  font: 500 var(--step--1)/1.35 var(--ui);
  color: var(--ink-invert-soft);
}

.scanner__chip b {
  display: block;
  margin-top: 2px;
  font: 700 var(--step-0)/1.2 var(--ui);
  color: var(--ink-invert);
}

.scanner__scene { margin: 0; color: var(--ink-invert-soft); font-size: var(--step--1); }

.scanner__key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font: 500 var(--step--1)/1.3 var(--ui);
  color: var(--ink-invert-soft);
}

.scanner__key li { display: inline-flex; align-items: center; gap: 8px; }

.scanner__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
}

.scanner__swatch.is-top { background: var(--rank-1); border-color: #55c7c2; }
.scanner__swatch.is-mid { border-color: var(--rank-4); box-shadow: inset 0 0 0 3px var(--rank-4); }
.scanner__swatch.is-none { border-color: var(--rank-5); }

.scanner__cap {
  margin: 14px 0 0;
  font: 500 var(--step--1)/1.4 var(--ui);
  color: var(--ink-invert-soft);
}

@media (max-width: 760px) {
  .scanner { padding: 16px; }
  .scanner__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .scanner__grid { gap: 5px; padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .scanner__pt { transition-delay: 0ms; transition-property: background-color, border-color, opacity; }
  .scanner__pt[aria-current="true"],
  .scanner__pt:hover,
  .scanner__pt:active,
  .scanner__mode:active { transform: none; }
}

/* The article's own paragraph colour is more specific than a bare class, so
   re-assert the light-on-dark text colours inside the panel. */
.sauce-article .scanner .scanner__where,
.sauce-article .scanner .scanner__note,
.sauce-article .scanner .scanner__scene,
.sauce-article .scanner .scanner__cap,
.sauce-article .scanner .scanner__key,
.sauce-article .scanner .scanner__chip { color: var(--ink-invert-soft); }
.sauce-article .scanner .scanner__chip b,
.sauce-article .scanner .scanner__result { color: var(--ink-invert); }
.sauce-article .scanner .scanner__result[data-state="top"] { color: #55c7c2; }
.sauce-article .scanner .scanner__result[data-state="mid"] { color: var(--rank-4); }
.sauce-article .scanner .scanner__result[data-state="none"],
.sauce-article .scanner .scanner__result[data-state="off"] { color: #e88a76; }
.sauce-article .scanner .sui__kicker { color: var(--ink-invert-soft); }