/* SolveTO Parking — component styles. Pixel-targets from screens-1.jsx + core-components.jsx. */
/* NOTE: never style html/body here — Turbo Drive keeps this CSS loaded on non-parking pages. */
.sto-app {
  font-family: var(--sto-display);
  -webkit-font-smoothing: antialiased;
  background: var(--sto-bg);
  color: var(--sto-text);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
}

/* Phone-frame max width on desktop for design fidelity. */
.sto-frame {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ─── Top bar ─────────────────────────────────────────────────── */
.sto-topbar {
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sto-topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sto-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sto-topbar__brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.sto-topbar__wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--sto-text);
}
.sto-topbar__kicker {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--sto-text-faint);
  text-transform: lowercase;
}
.sto-topbar__actions { display: inline-flex; align-items: center; gap: 8px; }
.sto-icon-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  color: var(--sto-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.sto-icon-btn:hover { color: var(--sto-text); border-color: var(--sto-border-hi); }
.sto-icon-btn[aria-pressed="true"] { color: var(--sto-blue); border-color: var(--sto-blue); }
.sto-icon-btn--voice { background: var(--sto-bg-deep); }

/* ─── Loon mark — concentric pulsing circles ─────────────────── */
.sto-loon { position: relative; flex-shrink: 0; }
.sto-loon__ring,
.sto-loon__inner-ring,
.sto-loon__core { position: absolute; border-radius: 50%; }
.sto-loon__ring {
  inset: 0;
  border: 1.5px solid var(--sto-blue);
  opacity: 0.5;
  animation: sto-pulse 3.2s ease-in-out infinite;
}
.sto-loon__inner-ring {
  inset: 18%;
  border: 1.5px solid var(--sto-blue);
  opacity: 0.7;
}
.sto-loon__core {
  inset: 36%;
  background: var(--sto-blue);
  box-shadow: 0 0 calc(var(--sto-loon-size, 24px) * 0.4) var(--sto-blue);
}
.sto-loon[data-state="listening"] .sto-loon__ring { animation-duration: 1.4s; opacity: 0.85; }
.sto-loon[data-state="listening"] .sto-loon__inner-ring { animation: sto-pulse-tight 0.9s ease-in-out infinite; }
.sto-loon[data-state="responding"] .sto-loon__ring,
.sto-loon[data-state="responding"] .sto-loon__inner-ring { border-color: var(--sto-green); }
.sto-loon[data-state="responding"] .sto-loon__core {
  background: var(--sto-green);
  box-shadow: 0 0 calc(var(--sto-loon-size, 24px) * 0.4) var(--sto-green);
}

/* ─── Mode toggle (Plan / Now) ───────────────────────────────── */
.sto-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
}
.sto-mode-toggle__btn {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sto-text-dim);
  font-family: var(--sto-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.sto-mode-toggle__btn:hover { color: var(--sto-text); }
.sto-mode-toggle__btn[aria-pressed="true"] {
  background: var(--sto-blue);
  color: #fff;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.33);
}

/* ─── Voice button hero ──────────────────────────────────────── */
.sto-voice {
  position: relative;
  width: 100%;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  border-radius: 28px;
  padding: 40px 28px 36px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  color: var(--sto-text);
  font-family: var(--sto-display);
  box-shadow:
    inset 0 1px 0 var(--sto-border-hi),
    0 24px 60px rgba(0, 0, 0, 0.4);
  transition: box-shadow .25s, border-color .25s;
}
.sto-voice::before {
  content: "";
  position: absolute;
  top: -120px; left: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.13), transparent 60%);
  pointer-events: none;
  animation: sto-pulse 3.6s ease-in-out infinite;
}
.sto-voice__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sto-voice__cap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sto-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
}
.sto-voice__label {
  font-family: var(--sto-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.05;
  color: var(--sto-text);
}
.sto-voice__hint {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sto-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
}

/* ─── Recents row ────────────────────────────────────────────── */
.sto-section-label {
  font-family: var(--sto-mono);
  font-size: 10px;
  color: var(--sto-text-faint);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-left: 4px;
}
.sto-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sto-chip {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  font-family: var(--sto-display);
  font-size: 13px;
  color: var(--sto-text);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sto-chip__main { font-weight: 500; letter-spacing: -0.2px; }
.sto-chip__sub  {
  font-size: 10px;
  font-family: var(--sto-mono);
  color: var(--sto-text-faint);
  letter-spacing: 0.4px;
}
a.sto-chip { text-decoration: none; }
a.sto-chip:hover { border-color: var(--sto-blue); }

/* ─── Search results page ────────────────────────────────────── */
.sto-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  border-radius: 14px;
}
.sto-search-bar__body { flex: 1; min-width: 0; }
.sto-search-bar__cap {
  margin: 0;
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
}
.sto-search-bar__title {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--sto-text);
}
.sto-search-bar__close {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--sto-bg-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sto-text-dim);
  text-decoration: none;
  font-size: 14px;
}
.sto-map--search { min-height: 260px; max-height: 320px; }

.sto-search-pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--sto-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sto-mono);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 0 18px var(--sto-blue);
  pointer-events: none;
  z-index: 3;
}
.sto-search-pin > * { transform: rotate(-45deg); display: inline-block; }

.sto-results { display: flex; flex-direction: column; gap: 10px; }
.sto-lot-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--sto-bg-deep);
  border: 1px solid var(--sto-border);
  text-decoration: none;
  color: var(--sto-text);
  transition: border-color .15s, background .15s;
}
.sto-lot-row:hover { border-color: var(--sto-border-hi); }
.sto-lot-row--active {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.40);
}
.sto-lot-row__rank {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--sto-border);
  color: var(--sto-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sto-mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.sto-lot-row--active .sto-lot-row__rank {
  background: var(--sto-blue);
  color: #fff;
}
.sto-lot-row__body { flex: 1; min-width: 0; }
.sto-lot-row__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--sto-text);
}
.sto-lot-row__sub {
  margin: 2px 0 0;
  font-family: var(--sto-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--sto-text-faint);
}
.sto-lot-row__price { text-align: right; flex-shrink: 0; }
.sto-lot-row__rate {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--sto-text);
}
.sto-warning-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sto-warning-row--block { margin-top: 0; }
.sto-civic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: var(--sto-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.sto-civic-chip__glyph {
  font-family: var(--sto-mono);
  font-weight: 700;
  font-size: 11px;
}
.sto-civic-chip--purple {
  background: rgba(167, 139, 250, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.40);
  color: var(--sto-text);
}
.sto-civic-chip--purple .sto-civic-chip__glyph { color: var(--sto-purple); }
.sto-civic-chip--amber {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.40);
  color: var(--sto-text);
}
.sto-civic-chip--amber .sto-civic-chip__glyph { color: var(--sto-amber); }

.sto-empty {
  padding: 28px 22px;
  border-radius: 18px;
  background: var(--sto-surface);
  border: 1px dashed var(--sto-border-hi);
  text-align: center;
}
.sto-empty__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--sto-text);
}
.sto-empty__sub {
  margin: 8px 0 18px;
  font-size: 13px;
  color: var(--sto-text-dim);
  line-height: 1.4;
}

/* ─── Lot detail ─────────────────────────────────────────────── */
.sto-back-link {
  font-family: var(--sto-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sto-text-dim);
  text-decoration: none;
  padding: 4px 0;
}
.sto-photo-stub {
  height: 140px;
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, var(--sto-surface) 0 8px, var(--sto-surface-hi) 8px 16px);
  border: 1px solid var(--sto-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sto-photo-stub__label {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
  background: rgba(10, 14, 20, 0.66);
  padding: 4px 8px;
  border-radius: 4px;
}
.sto-lot-detail__distance {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sto-text-dim);
  font-variant-numeric: tabular-nums;
}
.sto-lot-detail__title {
  margin: 6px 0 4px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--sto-text);
}
.sto-lot-detail__meta {
  margin: 0;
  font-family: var(--sto-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--sto-text-faint);
}
.sto-rate-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
}
.sto-rate-card__period {
  margin: 8px 0 4px;
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
}
.sto-rate-card__period:first-child { margin-top: 0; }
.sto-rate-card__line {
  margin: 4px 0;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sto-text);
}
.sto-rate-card__price {
  font-family: var(--sto-mono);
  font-weight: 600;
  color: var(--sto-text);
}

/* ─── Map container ──────────────────────────────────────────── */
.sto-map {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--sto-border);
}
.sto-map__canvas { position: absolute; inset: 0; }
.sto-map__pill {
  position: absolute; top: 12px; left: 14px;
  font-family: var(--sto-mono); font-size: 10px;
  letter-spacing: 1.4px; text-transform: uppercase;
  opacity: 0.85;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sto-text);
}
.sto-map__pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 3px;
  background: var(--sto-blue);
  box-shadow: 0 0 8px var(--sto-blue);
}

/* ─── Layer toggle (floating bottom-right of map) ────────────── */
.sto-layers {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 4;
}
.sto-layers__btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border-hi);
  backdrop-filter: blur(8px);
  color: var(--sto-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.sto-layers__btn:hover { border-color: var(--sto-blue); }
/* Anchored to the toggle button (.sto-layers wrapper), opening upward.
   Was previously position: fixed which made the panel float to the
   viewport's bottom-right on wider layouts (iPad, desktop) instead
   of next to the button. */
.sto-layers__panel {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 32px));
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 8px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border-hi);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 50;
}
.sto-layers__cap {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
  margin: 0 0 4px;
  padding: 4px 6px 2px;
}
.sto-layers__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 6px;
  font-family: var(--sto-display);
  font-size: 13px;
  color: var(--sto-text);
  cursor: pointer;
  user-select: none;
}
.sto-layers__row:hover { background: var(--sto-surface-hi); }
.sto-layers__row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--sto-border-hi);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.sto-layers__row input[type="checkbox"]:checked {
  background: var(--sto-blue);
  border-color: var(--sto-blue);
}
.sto-layers__row input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: -2px;
  left: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.sto-layers__dot {
  width: 8px; height: 8px; border-radius: 4px;
  flex-shrink: 0;
}
.sto-layers__row--purple .sto-layers__dot { background: var(--sto-purple); box-shadow: 0 0 6px var(--sto-purple); }
.sto-layers__row--red    .sto-layers__dot { background: var(--sto-red);    box-shadow: 0 0 6px var(--sto-red); }
.sto-layers__row--amber  .sto-layers__dot { background: var(--sto-amber);  box-shadow: 0 0 6px var(--sto-amber); }
.sto-layers__row--teal   .sto-layers__dot { background: var(--sto-teal);   box-shadow: 0 0 6px var(--sto-teal); }

/* ─── Pin styles for MapLibre HTML markers ──────────────────── */
/* MapLibre handles marker positioning via the constructor's `anchor` option;
   no CSS transforms here or it fights MapLibre's transform writes. */
.sto-pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 999px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-green);
  font-family: var(--sto-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--sto-text);
  letter-spacing: 0.4px;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(16, 231, 143, 0.45);
}
.sto-pin__dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: var(--sto-green);
  box-shadow: 0 0 6px var(--sto-green);
}
.sto-pin__count { color: var(--sto-text-dim); }

.sto-civic-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(167, 139, 250, 0.20);
  border: 1px solid var(--sto-purple);
  color: var(--sto-purple);
  font-family: var(--sto-mono);
  font-size: 12px;
  font-weight: 700;
}
.sto-civic-mark--purple {
  background: rgba(167, 139, 250, 0.20);
  border-color: var(--sto-purple);
  color: var(--sto-purple);
}
.sto-civic-mark--red {
  background: rgba(239, 68, 68, 0.18);
  border-color: var(--sto-red);
  color: var(--sto-red);
}
.sto-civic-mark--amber {
  background: rgba(245, 158, 11, 0.20);
  border-color: var(--sto-amber);
  color: var(--sto-amber);
}
.sto-civic-mark--teal {
  background: rgba(45, 212, 191, 0.20);
  border-color: var(--sto-teal);
  color: var(--sto-teal);
}

.sto-locdot {
  display: block;
  width: 14px; height: 14px;
  border-radius: 7px;
  background: var(--sto-blue);
  border: 2px solid #fff;
  box-shadow: 0 0 12px var(--sto-blue);
  animation: sto-locdot 1.6s ease-in-out infinite;
}

/* ─── Plan home layout ───────────────────────────────────────── */
.sto-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 8px 18px 14px;
}
.sto-home__type-instead {
  text-align: center;
  font-family: var(--sto-display);
  font-size: 13px;
  color: var(--sto-text-dim);
  letter-spacing: -0.1px;
}
.sto-home__type-instead a {
  color: var(--sto-text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--sto-border-hi);
  text-decoration-thickness: 1px;
}

/* ─── Now mode camera CTA ────────────────────────────────────── */
.sto-now-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 24px;
  border-radius: 24px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  color: var(--sto-text);
  font-family: var(--sto-display);
  text-decoration: none;
}
.sto-now-cta__ring {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--sto-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px rgba(16, 231, 143, 0.55);
  color: #0A0E14;
}
.sto-now-cta__title {
  font-size: 22px; font-weight: 600; letter-spacing: -0.4px;
}
.sto-now-cta__sub {
  font-family: var(--sto-mono);
  font-size: 11px;
  color: var(--sto-text-faint);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
/* sto-now-voice-corner moved into the topbar for cleaner alignment.
   Kept as a no-op selector placeholder so any cached reference renders
   harmlessly. */
.sto-now-voice-corner { display: none; }

/* ─── Modal (parking-themed, matches design tokens) ─────────────── */
.sto-modal[hidden] { display: none; }
.sto-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sto-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 8, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sto-modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border-hi);
  border-radius: 20px;
  padding: 24px 22px 22px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--sto-text);
  font-family: var(--sto-display);
}
.sto-modal__cap {
  font-family: var(--sto-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
  margin-bottom: 8px;
}
.sto-modal__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin: 0 0 18px;
}
.sto-modal__input {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: var(--sto-bg-deep);
  border: 1px solid var(--sto-border);
  color: var(--sto-text);
  font-family: var(--sto-display);
  font-size: 16px;
  padding: 0 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.sto-modal__input:focus {
  border-color: var(--sto-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.sto-modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}
.sto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  font-family: var(--sto-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sto-text-dim);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.sto-btn:hover { color: var(--sto-text); }
.sto-btn--primary {
  background: var(--sto-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}
.sto-btn--primary:hover {
  color: #fff;
  background: color-mix(in srgb, var(--sto-blue) 90%, black);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}
.sto-modal__hint {
  margin-top: 12px;
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
}

/* ─── Sign decode result ─────────────────────────────────────── */
.sto-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sto-sign-result { display: flex; flex-direction: column; gap: 14px; }

.sto-sign-loading {
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  border: 1px solid var(--sto-border);
  border-radius: 22px;
  background: var(--sto-surface);
}
.sto-sign-loading__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--sto-text);
  margin: 0;
}
.sto-sign-loading__sub {
  font-family: var(--sto-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
  margin: 0;
}

.sto-sign-verdict {
  position: relative;
  padding: 18px 20px 16px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid;
}
.sto-sign-verdict::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  pointer-events: none;
}
.sto-sign-verdict--green {
  background: rgba(16, 231, 143, 0.08);
  border-color: rgba(16, 231, 143, 0.33);
}
.sto-sign-verdict--green::before {
  background: radial-gradient(circle, rgba(16, 231, 143, 0.20), transparent 60%);
}
.sto-sign-verdict--amber {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.33);
}
.sto-sign-verdict--amber::before {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.20), transparent 60%);
}
.sto-sign-verdict--red {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.33);
}
.sto-sign-verdict--red::before {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.20), transparent 60%);
}
.sto-sign-verdict__cap {
  position: relative;
  font-family: var(--sto-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.sto-sign-verdict--green .sto-sign-verdict__cap { color: var(--sto-green); }
.sto-sign-verdict--amber .sto-sign-verdict__cap { color: var(--sto-amber); }
.sto-sign-verdict--red   .sto-sign-verdict__cap { color: var(--sto-red); }
.sto-sign-verdict__title {
  position: relative;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--sto-text);
  text-wrap: balance;
}
.sto-sign-verdict__lines {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sto-sign-verdict__lines li {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.35;
  color: var(--sto-text);
  padding-left: 12px;
  position: relative;
}
.sto-sign-verdict__lines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}

/* ─── Pay parking / Green P card ─────────────────────────────── */
.sto-pay-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(16, 231, 143, 0.08);
  border: 1px solid rgba(16, 231, 143, 0.40);
  align-items: center;
}
.sto-pay-card__logo {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sto-green);
  color: #0A0E14;
  font-family: var(--sto-display);
  font-size: 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(16, 231, 143, 0.55);
}
.sto-pay-card__body { flex: 1; min-width: 0; }
.sto-pay-card__cap {
  margin: 0;
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sto-green);
}
.sto-pay-card__id {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--sto-text);
}
.sto-pay-card__id strong {
  font-family: var(--sto-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--sto-green);
  letter-spacing: 1px;
}
.sto-pay-card__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--sto-text-dim);
  line-height: 1.4;
}

/* ─── Photo thumbnail at the top of the result page ──────────── */
.sto-photo-thumb {
  margin: 0 0 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.sto-photo-thumb__img {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--sto-border);
}
.sto-photo-thumb__cap {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
  padding-left: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sto-loon-speak-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--sto-border);
  border-radius: 20px;
  padding: 3px 10px 3px 6px;
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sto-text-dim);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.sto-loon-speak-btn:active { opacity: 0.7; }
.sto-sign-verdict__sub {
  position: relative;
  font-size: 13px;
  color: var(--sto-text-dim);
  line-height: 1.5;
  margin: 0;
}

.sto-rule-list { display: flex; flex-direction: column; gap: 6px; }
.sto-rule-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sto-bg-deep);
  border: 1px solid var(--sto-border);
}
.sto-rule-row__stripe {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  flex-shrink: 0;
}
.sto-rule-row--green .sto-rule-row__stripe { background: var(--sto-green); }
.sto-rule-row--amber .sto-rule-row__stripe { background: var(--sto-amber); }
.sto-rule-row--red   .sto-rule-row__stripe { background: var(--sto-red); }
.sto-rule-row__body { flex: 1; min-width: 0; }
.sto-rule-row__when {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
  margin: 0;
}
.sto-rule-row__what {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--sto-text);
}

.sto-confidence {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border-hi);
  display: flex;
  align-items: center;
  gap: 14px;
}
.sto-confidence__body { flex: 1; }
.sto-confidence__cap {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--sto-text-dim);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.sto-confidence__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--sto-border-hi);
  overflow: hidden;
}
.sto-confidence__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 0 8px currentColor;
}
.sto-confidence__pct {
  font-family: var(--sto-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--sto-text);
}

/* ─── Right-now callout ──────────────────────────────────────── */
.sto-now-card {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.sto-now-card--green { background: rgba(16, 231, 143, 0.10); border-color: rgba(16, 231, 143, 0.45); }
.sto-now-card--amber { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.45); }
.sto-now-card--red   { background: rgba(239, 68, 68, 0.10);  border-color: rgba(239, 68, 68, 0.45); }
.sto-now-card__cap {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0;
}
.sto-now-card--green .sto-now-card__cap { color: var(--sto-green); }
.sto-now-card--amber .sto-now-card__cap { color: var(--sto-amber); }
.sto-now-card--red   .sto-now-card__cap { color: var(--sto-red); }
.sto-now-card__what {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--sto-text);
}
.sto-now-card__when {
  margin: 0;
  font-family: var(--sto-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--sto-text-dim);
}

/* Active rule emphasis in the full-rules list */
.sto-rule-row--active {
  border-color: var(--sto-border-hi);
  background: var(--sto-surface);
}
.sto-rule-row__now {
  font-family: var(--sto-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--sto-text);
  color: var(--sto-bg);
  flex-shrink: 0;
}
.sto-rule-row__dir {
  font-family: var(--sto-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--sto-text);
  margin-right: 8px;
}
.sto-now-card__dir {
  margin-left: auto;
  font-family: var(--sto-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--sto-text);
}
.sto-now-card__cap { display: flex; align-items: center; gap: 6px; }

/* GPS status line under the camera CTA */
.sto-loc-status {
  margin-top: 12px;
  padding-left: 4px;
  text-transform: none;
  letter-spacing: 0.4px;
  color: var(--sto-text-faint);
}

.sto-cta-row { display: flex; gap: 8px; align-items: stretch; }
.sto-cta-row > .sto-btn--block { flex: 1; }
.sto-btn--block { width: 100%; flex-shrink: 0; }
.sto-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* The HTML `hidden` attribute defaults to `display: none`, but loses
   to any class-level `display:` rule (flex, inline-flex, …). These
   buttons + pills set their own display, so explicit override needed. */
[hidden] { display: none !important; }

/* ─── Saved-spot timer card ──────────────────────────────────── */
.sto-spot-section { margin-top: 18px; }
.sto-timer {
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  border-radius: 16px;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sto-timer__body { display: flex; flex-direction: column; gap: 4px; }
.sto-timer__cap {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--sto-text-faint);
  margin: 0;
}
.sto-timer__until {
  font-family: var(--sto-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--sto-text);
  margin: 0;
}
.sto-timer__sub {
  font-size: 12px;
  color: var(--sto-text-dim);
  margin: 0;
}
.sto-timer__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sto-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: var(--sto-green, #22c55e);
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sto-btn--sm { height: 32px; padding: 0 12px; font-size: 12px; }
.sto-btn--ghost { border-color: var(--sto-border); }
/* Soft variant — visible counterweight to .sto-btn--primary that
   still reads as "secondary action." Light blue tint background,
   blue text, subtle border. Keeps both actions tappable without
   the secondary disappearing into the page (was a bare ghost btn). */
.sto-btn--soft {
  background: color-mix(in srgb, var(--sto-blue) 12%, transparent);
  color: var(--sto-blue);
  border-color: color-mix(in srgb, var(--sto-blue) 28%, transparent);
}
.sto-btn--soft:hover {
  background: color-mix(in srgb, var(--sto-blue) 18%, transparent);
  color: var(--sto-blue);
  border-color: color-mix(in srgb, var(--sto-blue) 40%, transparent);
}
.sto-btn--danger {
  background: transparent;
  color: var(--sto-red, #ef4444);
  border: 1px solid var(--sto-red, #ef4444);
}
.sto-btn--danger:hover { background: rgba(239, 68, 68, 0.08); color: var(--sto-red, #ef4444); }

/* ─── Retake button beside the photo thumbnail ───────────────── */
.sto-photo-thumb__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sto-photo-thumb__retake {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--sto-border);
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sto-text-dim);
  text-decoration: none;
  white-space: nowrap;
}
.sto-photo-thumb__retake:hover { color: var(--sto-text); border-color: var(--sto-border-hi); }

/* ─── My Spots quick-save card ───────────────────────────────── */
.sto-quick-save {
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sto-quick-save__copy {
  font-size: 13px;
  color: var(--sto-text-dim);
  margin: 0;
  line-height: 1.4;
}

/* ─── Recent spots history list ──────────────────────────────── */
.sto-history { display: flex; flex-direction: column; gap: 8px; }
.sto-history__row {
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  border-radius: 10px;
  padding: 10px 12px;
}
.sto-history__addr { margin: 0; font-size: 13px; color: var(--sto-text); }
.sto-history__meta {
  margin: 2px 0 0;
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--sto-text-faint);
}

/* ─── Active-spot ribbon on Plan home ────────────────────────── */
.sto-active-spot-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34,197,94,0.16), rgba(34,197,94,0.04));
  border: 1px solid rgba(34,197,94,0.35);
  text-decoration: none;
  color: var(--sto-text);
}
.sto-active-spot-link__cap {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--sto-green, #22c55e);
}
.sto-active-spot-link__until {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.sto-active-spot-link__addr {
  font-size: 11px;
  color: var(--sto-text-dim);
}

/* ─── Geo-anchored search destination pin ────────────────────── */
.sto-pin--destination {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--sto-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.85), 0 4px 14px rgba(59,130,246,0.5);
  transform: rotate(45deg);
  cursor: default;
}
.sto-pin--destination > * { transform: rotate(-45deg); display: inline-block; }

/* ─── Map marker popup ───────────────────────────────────────── */
.sto-popup .maplibregl-popup-content {
  background: var(--sto-surface);
  color: var(--sto-text);
  border: 1px solid var(--sto-border-hi);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  padding: 14px 16px 12px;
  font-family: var(--sto-display);
}
.sto-popup .maplibregl-popup-tip { border-top-color: var(--sto-surface); border-bottom-color: var(--sto-surface); }
.sto-popup .maplibregl-popup-close-button {
  font-size: 18px;
  color: var(--sto-text-faint);
  padding: 4px 8px;
}
.sto-popup__body { display: flex; flex-direction: column; gap: 6px; }
.sto-popup__cap {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
  margin: 0;
}
.sto-popup__cap--purple { color: var(--sto-purple); }
.sto-popup__cap--red    { color: var(--sto-red); }
.sto-popup__cap--amber  { color: var(--sto-amber); }
.sto-popup__cap--teal   { color: var(--sto-teal); }
.sto-popup__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--sto-text);
  margin: 0;
  line-height: 1.25;
}
.sto-popup__meta {
  font-size: 12px;
  color: var(--sto-text-dim);
  margin: 0;
  line-height: 1.4;
}
.sto-popup__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.sto-popup__actions .sto-btn { flex: 1; }

/* ─── Recent search chips: per-item × + footer ───────────────── */
.sto-chip-with-clear {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.sto-chip-with-clear .sto-chip { padding-right: 28px; }
.sto-chip__clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border: none;
  background: transparent;
  color: var(--sto-text-faint);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sto-chip__clear:hover { color: var(--sto-text); background: var(--sto-bg-deep); }
.sto-recent-footer {
  margin: 8px 4px 0;
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--sto-text-faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sto-recent-footer__hint { font-style: italic; }
.sto-recent-footer__clear {
  background: none;
  border: none;
  color: var(--sto-blue);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  padding: 2px 6px;
  border-radius: 6px;
}
.sto-recent-footer__clear:hover { background: var(--sto-bg-deep); }

/* ─── My Spots history rows: clickable to re-save ────────────── */
.sto-history__form { margin: 0; }
.sto-history__row--clickable {
  width: 100%;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.sto-history__row--clickable:hover {
  border-color: var(--sto-blue);
  background: var(--sto-surface-hi, var(--sto-surface));
}
.sto-history__row--disabled { opacity: 0.55; }
.sto-history__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sto-history__cta {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sto-blue);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Full-width CTA button ──────────────────────────────────── */
.sto-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-family: var(--sto-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .15s, box-shadow .15s, opacity .15s;
  box-sizing: border-box;
}
.sto-cta--primary {
  background: var(--sto-blue);
  color: #fff;
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.30);
}
.sto-cta--primary:hover {
  background: color-mix(in srgb, var(--sto-blue) 88%, black);
  box-shadow: 0 0 32px rgba(59, 130, 246, 0.40);
  color: #fff;
}
.sto-cta--soft {
  background: color-mix(in srgb, var(--sto-text) 6%, transparent);
  color: var(--sto-text);
  border-color: var(--sto-border-hi);
}
.sto-cta--soft:hover {
  background: color-mix(in srgb, var(--sto-text) 10%, transparent);
  color: var(--sto-text);
}
.sto-cta:disabled,
.sto-cta[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ─── Form fields ────────────────────────────────────────────── */
.sto-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sto-field label {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
}
.sto-field input,
.sto-field select,
.sto-field textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--sto-bg-deep);
  border: 1px solid var(--sto-border);
  color: var(--sto-text);
  font-family: var(--sto-display);
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.sto-field input:focus,
.sto-field select:focus,
.sto-field textarea:focus {
  border-color: var(--sto-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.sto-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6470' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.sto-field input[type="datetime-local"] { padding: 0 14px; }
.sto-field textarea { height: auto; padding: 12px 14px; resize: vertical; }

.sto-form-errors {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sto-form-errors li {
  font-size: 13px;
  color: var(--sto-red);
  line-height: 1.4;
}

/* Form wrapper: add gap between fields since form tag breaks sto-home's gap */
.sto-ticket-form form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sto-field__hint {
  font-size: 12px;
  color: var(--sto-text-faint);
  line-height: 1.4;
  margin: 0;
}

/* ─── Address suggestion dropdown ───────────────────────────── */
.sto-address-suggestions {
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border-hi);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 20;
}
.sto-address-suggestions[hidden] { display: none; }
.sto-address-suggestions li {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--sto-text);
  cursor: pointer;
  line-height: 1.3;
}
.sto-address-suggestions li:hover,
.sto-address-suggestions li.is-active {
  background: var(--sto-surface-hi);
  color: var(--sto-text);
}

/* ─── Ticket form page ───────────────────────────────────────── */
.sto-ticket-form__header h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--sto-text);
  margin: 0 0 6px;
}
.sto-ticket-form__header p {
  font-size: 13px;
  color: var(--sto-text-dim);
  margin: 0;
  line-height: 1.4;
}

/* ─── Ticket show page ───────────────────────────────────────── */
.sto-ticket-show header h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--sto-text);
  margin: 0 0 4px;
}
.sto-ticket-show__meta {
  font-family: var(--sto-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--sto-text-faint);
  line-height: 1.6;
  margin: 0;
}
.sto-ticket-show__step {
  padding: 20px;
  border-radius: 20px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sto-ticket-show__step h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--sto-text);
  margin: 0;
}
.sto-ticket-show__step h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--sto-text);
  margin: 4px 0 0;
}
.sto-ticket-show__step p {
  font-size: 14px;
  color: var(--sto-text-dim);
  margin: 0;
  line-height: 1.5;
}
.sto-ticket-show__step ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sto-ticket-show__step ol li {
  font-size: 14px;
  color: var(--sto-text-dim);
  line-height: 1.5;
}
.sto-ticket-show__step ol li a {
  color: var(--sto-blue);
  text-decoration: none;
}
.sto-ticket-show__step ol li a:hover { text-decoration: underline; }
/* Analyzing — blue pulse */
.sto-ticket-show__step--analyzing {
  background: rgba(59, 130, 246, 0.07);
  border-color: rgba(59, 130, 246, 0.35);
  animation: sto-step-pulse 2.4s ease-in-out infinite;
}
/* Analyzed / paywall — amber */
.sto-ticket-show__step--paywall {
  background: rgba(245, 158, 11, 0.07);
  border-color: rgba(245, 158, 11, 0.35);
}
/* Ready — green */
.sto-ticket-show__step--ready {
  background: rgba(16, 231, 143, 0.07);
  border-color: rgba(16, 231, 143, 0.35);
}
/* Failed — red */
.sto-ticket-show__step--failed {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.33);
}
@keyframes sto-step-pulse {
  0%, 100% { border-color: rgba(59, 130, 246, 0.35); }
  50%       { border-color: rgba(59, 130, 246, 0.65); }
}
.sto-ticket-show__paywall {
  font-size: 14px;
  color: var(--sto-text-dim);
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--sto-border);
}
.sto-ticket-show__fineprint {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
  margin: 0;
}

/* ─── Scan candidate list ────────────────────────────────────── */
.sto-scan-candidates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sto-scan-candidates__use {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sto-bg-deep);
  border: 1px solid var(--sto-border);
  color: var(--sto-text);
  font-family: var(--sto-display);
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color .15s, background .15s;
}
.sto-scan-candidates__use:hover {
  border-color: var(--sto-blue);
  background: rgba(59, 130, 246, 0.06);
}
.sto-scan-candidates__use strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.sto-scan-candidates__use span {
  font-size: 12px;
  color: var(--sto-text-dim);
  line-height: 1.3;
}
.sto-scan-candidates__use small {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--sto-text-faint);
}
.sto-scan-candidates__use em {
  font-style: normal;
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sto-blue);
  margin-top: 2px;
}
/* button_to wraps in form; reset margin */
.sto-scan-candidates li form { margin: 0; }

/* ─── Dispute history index ──────────────────────────────────── */
.sto-ticket-index header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sto-ticket-index header h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--sto-text);
  margin: 0;
}
.sto-ticket-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sto-ticket-list li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  text-decoration: none;
  color: var(--sto-text);
  transition: border-color .15s, background .15s;
}
.sto-ticket-list li a:hover {
  border-color: var(--sto-border-hi);
  background: var(--sto-surface-hi);
}
.sto-ticket-list li a strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.sto-ticket-list li a span {
  font-size: 13px;
  color: var(--sto-text-dim);
}
.sto-ticket-list li a small {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--sto-text-faint);
  margin-top: 2px;
}

/* ─── Home dual CTA grid ─────────────────────────────────────── */
.sto-home-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sto-home-ctas .sto-now-cta {
  padding: 28px 16px;
  text-decoration: none;
}
.sto-home-ctas .sto-now-cta__ring {
  width: 72px;
  height: 72px;
}
/* ─── Grounds picker (pre-analysis, optional) ────────────────── */
.sto-grounds-picker {
  border: 1px solid var(--sto-border);
  border-radius: 14px;
  background: var(--sto-bg-deep);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sto-grounds-picker summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--sto-text);
}
.sto-grounds-picker summary::-webkit-details-marker { display: none; }
.sto-grounds-picker summary::after {
  content: "▾";
  font-family: var(--sto-mono);
  color: var(--sto-text-faint);
  font-size: 11px;
  margin-left: 8px;
}
.sto-grounds-picker[open] summary::after { content: "▴"; }
.sto-grounds-picker__count {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sto-text-faint);
  font-weight: 500;
}
.sto-grounds-picker__hint {
  font-size: 12px;
  color: var(--sto-text-dim);
  line-height: 1.4;
  margin: 0;
}
.sto-grounds-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sto-grounds-picker__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  font-size: 12px;
  color: var(--sto-text-dim);
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.sto-grounds-picker__chip input { display: none; }
.sto-grounds-picker__chip.is-on,
.sto-grounds-picker__chip:has(input:checked) {
  background: rgba(59, 130, 246, 0.12);
  border-color: var(--sto-blue);
  color: var(--sto-text);
}
.sto-grounds-picker form { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sto-grounds-picker button[type="submit"] { align-self: flex-start; width: auto; padding: 0 18px; }

.sto-download-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sto-download-row .sto-cta { flex: 1 1 0; }
.sto-download-row form { flex: 1 1 0; margin: 0; }
.sto-download-row form .sto-cta { width: 100%; }

/* ─── Stage guide (Stage 1 / 2 / 3) ──────────────────────────── */
.sto-stage-guide {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.sto-stage {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--sto-surface);
  border: 1px solid var(--sto-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sto-stage--active {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.06);
}
.sto-stage--done {
  border-color: rgba(16, 231, 143, 0.40);
  background: rgba(16, 231, 143, 0.06);
}
.sto-stage--warning {
  border-color: rgba(239, 68, 68, 0.40);
  background: rgba(239, 68, 68, 0.06);
}
.sto-stage__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sto-stage__head > div { padding-top: 2px; min-width: 0; }
.sto-stage__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sto-bg-deep);
  color: var(--sto-text);
  font-family: var(--sto-mono);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sto-stage--active .sto-stage__num { background: var(--sto-blue); color: #fff; }
.sto-stage--done   .sto-stage__num { background: var(--sto-green); color: #0A0E14; }
.sto-stage--warning .sto-stage__num { background: var(--sto-red); color: #fff; }
.sto-stage h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--sto-text);
  margin: 0;
}
.sto-stage__meta {
  font-family: var(--sto-display);
  font-size: 12px;
  letter-spacing: -0.1px;
  color: var(--sto-text-faint);
  margin: 3px 0 0;
  line-height: 1.4;
}
.sto-stage p {
  font-size: 13px;
  color: var(--sto-text-dim);
  line-height: 1.5;
  margin: 0;
}
.sto-stage__locations {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  background: var(--sto-bg-deep);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--sto-text-dim);
  line-height: 1.4;
}
.sto-stage__locations strong { color: var(--sto-text); }
.sto-stage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sto-stage__actions .sto-cta { width: auto; flex: 1 1 200px; }
.sto-stage__actions form { margin: 0; flex: 1 1 200px; }
.sto-stage__actions form .sto-cta { width: 100%; }
.sto-stage__wait-notice {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sto-bg-deep);
  border: 1px solid var(--sto-border-hi);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sto-stage__wait-notice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sto-text-dim);
}
.sto-stage__wait-notice strong { color: var(--sto-text); }
.sto-stage__wait-notice code {
  font-family: var(--sto-mono);
  font-size: 11px;
  background: var(--sto-surface);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--sto-text);
}
.sto-stage__stamp {
  font-family: var(--sto-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--sto-green);
  margin: 0;
}
.sto-stage__updater {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sto-stage__updater .sto-cta { font-size: 14px; }
.sto-stage__updater form { margin: 0; }

/* ─── Outcome form (radios + save) ───────────────────────────── */
.sto-outcome-form form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sto-outcome-form__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sto-outcome-form__choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sto-bg-deep);
  border: 1px solid var(--sto-border);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sto-outcome-form__choice:hover { border-color: var(--sto-border-hi); }
.sto-outcome-form__choice:has(input:checked) {
  border-color: var(--sto-blue);
  background: rgba(59, 130, 246, 0.08);
}
.sto-outcome-form__choice input[type="radio"] {
  accent-color: var(--sto-blue);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
}
.sto-outcome-form__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--sto-text);
  flex: 1;
}
.sto-outcome-form__hint {
  font-family: var(--sto-mono);
  font-size: 10px;
  color: var(--sto-text-faint);
  letter-spacing: 0.4px;
}

/* ─── Evidence grounds checklist ─────────────────────────────── */
.sto-evidence-checklist { display: flex; flex-direction: column; gap: 6px; }
.sto-evidence-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sto-evidence-checklist__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--sto-text-faint);
}
.sto-evidence-checklist__row.is-detected {
  background: rgba(16, 231, 143, 0.08);
  color: var(--sto-text);
}
.sto-evidence-checklist__mark {
  font-family: var(--sto-mono);
  font-size: 12px;
  font-weight: 700;
  width: 18px;
  text-align: center;
  color: var(--sto-text-faint);
}
.sto-evidence-checklist__row.is-detected .sto-evidence-checklist__mark {
  color: var(--sto-green);
}

/* ─── Deadline banner ────────────────────────────────────────── */
.sto-deadline {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sto-deadline__cap {
  font-family: var(--sto-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0;
}
.sto-deadline__head {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--sto-text);
  margin: 0;
}
.sto-deadline__sub {
  font-size: 12px;
  color: var(--sto-text-dim);
  margin: 0;
  line-height: 1.4;
}
.sto-deadline--green {
  background: rgba(16, 231, 143, 0.08);
  border-color: rgba(16, 231, 143, 0.35);
}
.sto-deadline--green .sto-deadline__cap { color: var(--sto-green); }
.sto-deadline--amber {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.40);
}
.sto-deadline--amber .sto-deadline__cap { color: var(--sto-amber); }
.sto-deadline--red {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.45);
}
.sto-deadline--red .sto-deadline__cap { color: var(--sto-red); }

/* ─── Payment warning (never dismissible) ───────────────────── */
.sto-payment-warning {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sto-payment-warning__cap {
  font-family: var(--sto-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--sto-red);
  margin: 0;
}
.sto-payment-warning__body {
  font-size: 13px;
  color: var(--sto-text);
  line-height: 1.5;
  margin: 0;
}
.sto-payment-warning__body strong { color: var(--sto-red); font-weight: 700; }

/* My Spots variant: teal ring */
.sto-now-cta--spots .sto-now-cta__ring {
  background: var(--sto-teal);
  box-shadow: 0 0 24px rgba(45, 212, 191, 0.50);
  color: #0A0E14;
}
/* Dispute variant: amber ring instead of green */
.sto-now-cta--dispute .sto-now-cta__ring {
  background: var(--sto-amber);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.50);
  color: #0A0E14;
}
.sto-now-cta--dispute { text-decoration: none; }