/* tools/shared/tokens.css — shared design tokens + component classes for the
   free tools' map-first upgrade. Own copy for the tools, ported from
   autopilot/motion.css + autopilot/app.html's scan/provenance component
   CSS — autopilot's files are untouched.

   Every class here is prefixed --sk- (shared-kit) for custom properties and
   sk- for component classes, so it can never collide with a tool's own
   scoped prefix (.frc-, .tl-, .aeo-, .rv-, ...) or with global styles.css
   component prefixes (cs-, cr-, pc-, ...). A tool opts in by adding
   sk-* classes inside its own markup; it never has to rename anything
   it already has. */

:root {
  /* Durations (from autopilot/motion.css) */
  --sk-dur-instant: 100ms;
  --sk-dur-fast:    180ms;
  --sk-dur-base:    280ms;
  --sk-dur-slow:    450ms;
  --sk-dur-scene:   700ms;

  /* Easings */
  --sk-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --sk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --sk-rise-enter: 10px;
  --sk-fall-exit:  4px;

  /* Map + scan surface (navy scan panel, matches Autopilot's sc-/sm- look) */
  --sk-navy: #0B132E;
  --sk-navy-2: #111A3D;
  --sk-gold: #F7BF34;
  --sk-live: #16A34A;
  --sk-modeled: #D97706;
}

@keyframes sk-enter {
  from { opacity: 0; transform: translateY(var(--sk-rise-enter)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sk-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(var(--sk-fall-exit)); }
}
@keyframes sk-spin {
  to { transform: rotate(360deg); }
}

.sk-spin {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: sk-spin .7s linear infinite;
}
.sk-spin.dark {
  border-color: rgba(11,19,46,.2); border-top-color: var(--sk-navy);
}

/* ---- LIVE / MODELED provenance tag (ported from autopilot's .sm-tag) ---- */
.sk-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono, monospace); font-size: 9.5px; letter-spacing: .08em;
  font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
}
.sk-tag .sk-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.sk-tag-live { color: var(--sk-live); background: rgba(22,163,74,.1); }
.sk-tag-live .sk-dot { background: var(--sk-live); }
.sk-tag-modeled { color: #B26A00; background: rgba(217,119,6,.1); }
.sk-tag-modeled .sk-dot { background: var(--sk-modeled); }

/* ---- Narrated scan stage list (ported from autopilot's .sc-*) ---- */
.sk-narr { padding: 8px 0; }
.sk-narr-h {
  font-family: var(--font-display, inherit); font-weight: 800;
  font-size: clamp(19px, 2.2vw, 25px); color: #fff; margin: 22px 0 26px; line-height: 1.3;
}
.sk-narr-h b { color: var(--sk-gold); }
.sk-stages { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.sk-stage { display: flex; align-items: flex-start; gap: 12px; opacity: .4; transition: opacity var(--sk-dur-slow); }
.sk-stage-active, .sk-stage-done { opacity: 1; }
.sk-stage span { font-size: 14.5px; color: #fff; font-weight: 500; line-height: 1.4; }
.sk-stage-dot {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2);
  flex-shrink: 0; margin-top: 1px; display: inline-block;
}
.sk-stage-sub { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 3px; }
.sk-countdown { font-family: var(--font-mono, monospace); font-size: 12.5px; color: rgba(255,255,255,.6); letter-spacing: .02em; }
.sk-countdown b { color: var(--sk-gold); font-weight: 700; }

/* ---- Rank badge (ported from scan-map.js's sm-badge, used off-map too e.g. result tables) ---- */
.sk-badge {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--sk-navy); color: #FBF6EC; font-weight: 800;
  font-family: var(--font-mono, monospace); border: 2px solid transparent;
}
.sk-badge-top { border-color: var(--sk-gold); }
.sk-badge-poor { background: #E5484D; }
.sk-badge-halo { box-shadow: 0 0 0 6px rgba(247,191,52,.18); }

/* ---- Cross-tool continuity chip (spec 3.6) - "Continue as X / Change".
   Deliberately plain/neutral (no navy/gold map styling) since it has to
   sit correctly on every tool's own light-card form, not just the map
   surfaces. ---- */
.sk-continuity-chip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: rgba(37,99,234,.06); border: 1px solid rgba(37,99,234,.18);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 13.5px; color: var(--ink, #0B132E);
}
.sk-continuity-txt b { font-weight: 700; }
.sk-continuity-go, .sk-continuity-change {
  font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px;
  padding: 5px 12px; cursor: pointer; border: 1px solid transparent; transition: opacity .15s;
}
.sk-continuity-go { background: var(--brand, #2563EA); color: #fff; }
.sk-continuity-go:hover { opacity: .88; }
.sk-continuity-change { background: none; border-color: rgba(11,19,46,.18); color: var(--muted, #5B6480); }
.sk-continuity-change:hover { background: rgba(11,19,46,.05); }

/* ---- Map surface (ported from autopilot/app.html's .sm-* map CSS).
   Requires Leaflet's own stylesheet (unpkg leaflet@1.9.4/dist/leaflet.css)
   loaded on the page alongside tools/shared/scanMap.js. ---- */
.sk-map-wrap { position: relative; border-radius: 16px; overflow: hidden; background: var(--sk-navy); height: 100%; min-height: 320px; }
.sk-tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7); }
.leaflet-container { background: var(--sk-navy) !important; }
.leaflet-control-attribution { background: rgba(11,19,46,.7) !important; color: rgba(255,255,255,.5) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: rgba(255,255,255,.7) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--sk-navy-2) !important; color: #fff; }

@keyframes sk-map-bounce { 0% { transform: translateY(-14px); opacity: 0; } 60% { transform: translateY(2px); } 100% { transform: translateY(0); opacity: 1; } }
@keyframes sk-map-pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes sk-map-sweep-rot { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.sk-map-popup { font-size: 12.5px; color: #fff; }
.sk-map-popup b { font-size: 14px; }
.sk-map-popup-r { color: var(--sk-gold); font-size: 11.5px; margin-top: 3px; }
.sk-pin-bounce { animation: sk-map-bounce .6s var(--sk-ease-out); }
.sk-pin-wrap { position: relative; }
.sk-pin-pulse::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--sk-gold); animation: sk-map-pulse 2s ease-out infinite; }
.sk-grid-dot { width: 10px; height: 10px; border-radius: 50%; background: #93B4FF; box-shadow: 0 0 0 3px rgba(147,180,255,.25); }
.sk-grid-dot-wrap-flat, .sk-comp-wrap-flat { position: absolute; transform: translate(-50%,-50%); }
.sk-comp-wrap-flat { filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.sk-map-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; overflow: hidden; }
.sk-map-sweep.on { opacity: 1; }
.sk-map-sweep::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 70%; transform-origin: 0 0;
  background: conic-gradient(from 0deg, rgba(247,191,52,.32), transparent 50deg);
  animation: sk-map-sweep-rot 2s linear 1;
}
.sk-map-flat { background: radial-gradient(circle at 50% 50%, #12294A, var(--sk-navy)); position: relative; }
.sk-map-flat-note { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,.4); text-transform: uppercase; z-index: 2; }
.sk-map-flat-plane { position: absolute; inset: 0; }
.sk-comp-tip { background: var(--sk-navy) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.15) !important; font-size: 12px !important; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .sk-spin { animation: none; border-top-color: currentColor; }
  .sk-stage, [class*="sk-enter"], [class*="sk-exit"] { transition: none !important; animation: none !important; }
  .sk-pin-bounce, .sk-pin-pulse::after, .sk-map-sweep::before { animation: none !important; }
}