/* FIG. 7 scan overlay (js/widgets/scan-overlay.js). Every selector is scoped to .w-scan-overlay
   and every colour is a css/site.css token, so the day and night sets need nothing here.
   The widget is its own size container: the phone drawing below 440px, the sheet drawing above. */

.w-scan-overlay { container: scan-overlay / inline-size; }

/* SCAN / PART / OVERLAY */
.w-scan-overlay .so-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.w-scan-overlay .so-btn {
  min-width: 44px; min-height: 44px; margin: 0; padding: 0 4px;
  border: 1.5px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; line-height: 1.2;
  text-indent: .1em; /* balances the trailing letter-spacing so labels sit centred */
  touch-action: manipulation;
  transition: background-color .16s ease, color .16s ease;
}
.w-scan-overlay .so-btn:hover { background: var(--hover); }
.w-scan-overlay .so-btn[aria-pressed="true"],
.w-scan-overlay .so-btn[aria-pressed="true"]:hover { background: var(--ink); color: var(--sheet); }
.w-scan-overlay .so-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* drawing */
.w-scan-overlay .so-stage { max-width: 560px; margin-top: 10px; } /* past this the line weights read too heavy */
.w-scan-overlay .so-svg { display: block; width: 100%; height: auto; overflow: visible; }
.w-scan-overlay .so-svg--wide { display: none; }

.w-scan-overlay .so-layer { transition: opacity .24s ease; }
.w-scan-overlay[data-view="part"] .so-scan,
.w-scan-overlay[data-view="scan"] .so-part { opacity: .08; }
.w-scan-overlay .so-fit { opacity: 0; }
.w-scan-overlay[data-view="overlay"] .so-fit { opacity: 1; }

.w-scan-overlay .so-dot { fill: var(--ink-2); }
.w-scan-overlay .so-scan-shape { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 3; }
.w-scan-overlay .so-station { fill: none; stroke: var(--ink-2); stroke-width: .6; }
.w-scan-overlay .so-part-body { fill: var(--sheet); stroke: var(--ink); stroke-width: 1; }
.w-scan-overlay .so-hex-cell { fill: none; stroke: var(--ink); }
.w-scan-overlay .so-part-hex { stroke: var(--ink); }
.w-scan-overlay .so-fit-band { fill: var(--accent); fill-opacity: .16; }
.w-scan-overlay .so-fit-edge { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }

/* key */
.w-scan-overlay .so-key {
  display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: .04em; color: var(--ink);
}
.w-scan-overlay .so-key-item { display: flex; align-items: flex-start; gap: 8px; min-width: 0; transition: color .24s ease; }
.w-scan-overlay .so-key-text { min-width: 0; overflow-wrap: anywhere; }
.w-scan-overlay .so-key-item.is-off { color: var(--ink-2); }
.w-scan-overlay .so-sw { flex: none; width: 18px; height: 12px; margin-top: 2px; border: 1px solid var(--ink-2); transition: opacity .24s ease; }
.w-scan-overlay .so-key-item.is-off .so-sw { opacity: .3; }
.w-scan-overlay .so-sw--scan { border-style: dashed; background: radial-gradient(circle, var(--ink-2) 0 1px, transparent 1.2px) 0 0 / 5px 5px; }
.w-scan-overlay .so-sw--part { border-color: var(--ink); background: repeating-linear-gradient(60deg, var(--ink) 0 1px, transparent 1px 4px); }
.w-scan-overlay .so-sw--fit { border: 2px solid var(--accent); background: transparent; }

.w-scan-overlay .so-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@container scan-overlay (min-width: 440px) {
  .w-scan-overlay .so-views { display: flex; flex-wrap: wrap; }
  .w-scan-overlay .so-btn { padding: 0 16px; }
  .w-scan-overlay .so-svg--narrow { display: none; }
  .w-scan-overlay .so-svg--wide { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .w-scan-overlay .so-btn,
  .w-scan-overlay .so-layer,
  .w-scan-overlay .so-key-item,
  .w-scan-overlay .so-sw { transition: none; }
}

@media (forced-colors: active) {
  .w-scan-overlay .so-btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}