/* ======================================================================
   3RD-I SIGNAL SYSTEM v2
   Purpose-driven replacement for generic pulse dots, radar rings, beacons,
   and continuously glowing buttons.

   Components:
   N1  Brand notch (static)
   L1  Live telemetry (animated only when visible)
   R1  Route orbit (animated only when visible)
   H1  Human available (static confirmation)
   S1  SOS interaction (no idle pulse)
   O1  Offline/stale state (static)
   P1  Play control (hover/focus only)
   B1  Nudge/action chip (press only)
   T1  Compact trust strip (static)
   X0  Ordinary static icon (no signal animation)
   ====================================================================== */

:root {
  --i3s-ink: #101832;
  --i3s-muted: #6f7892;
  --i3s-soft: #8d95aa;
  --i3s-pink: #f52d8c;
  --i3s-pink-2: #ff4f98;
  --i3s-violet: #8b5cf6;
  --i3s-blue: #5678ff;
  --i3s-green: #0fac73;
  --i3s-red: #ff3f55;
  --i3s-gray: #a7afc2;
  --i3s-surface: rgba(255,255,255,.86);
  --i3s-surface-solid: #ffffff;
  --i3s-line: rgba(64,75,119,.13);
  --i3s-shadow: 0 14px 36px rgba(34,44,84,.10);
  --i3s-radius: 18px;
}

.i3s,
.i3s * { box-sizing: border-box; }

.i3s {
  color: var(--i3s-ink);
  font: inherit;
}

/* ----------------------------------------------------------------------
   N1 — STATIC BRAND NOTCH
   Use for section eyebrows, decorative bullets, dividers, and card accents.
   Never animate this component.
   ---------------------------------------------------------------------- */
.i3s-notch {
  display: inline-block;
  width: 26px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--i3s-pink), var(--i3s-violet) 56%, var(--i3s-blue));
  box-shadow: 0 4px 11px rgba(139,92,246,.16);
}

.i3s-notch--short { width: 18px; }
.i3s-notch--wide { width: 44px; }
.i3s-notch--vertical { width: 5px; height: 24px; }

.i3s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--i3s-muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.i3s-static-bullet {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(139,92,246,.20);
  border-radius: 6px;
  color: var(--i3s-violet);
  background: rgba(139,92,246,.07);
}

.i3s-static-bullet::before {
  width: 7px;
  height: 3px;
  content: "";
  border-left: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
}

/* ----------------------------------------------------------------------
   L1 — LIVE TELEMETRY
   Only for actual live video, active trip, active connection, or viewer count.
   ---------------------------------------------------------------------- */
.i3s-bars {
  display: inline-flex;
  width: 24px;
  height: 20px;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 2px 1px;
  flex: 0 0 auto;
}

.i3s-bars > i {
  display: block;
  width: 3.5px;
  min-height: 4px;
  border-radius: 99px;
  transform-origin: 50% 100%;
  opacity: .96;
}

.i3s-bars > i:nth-child(1) { height: 8px;  background: var(--i3s-pink); }
.i3s-bars > i:nth-child(2) { height: 15px; background: #ec4ed1; }
.i3s-bars > i:nth-child(3) { height: 11px; background: var(--i3s-violet); }
.i3s-bars > i:nth-child(4) { height: 18px; background: var(--i3s-blue); }

[data-i3s-running="true"] .i3s-bars > i:nth-child(1),
.i3s-bars[data-i3s-running="true"] > i:nth-child(1) { animation: i3s-bar-a 1.28s ease-in-out infinite; }
[data-i3s-running="true"] .i3s-bars > i:nth-child(2),
.i3s-bars[data-i3s-running="true"] > i:nth-child(2) { animation: i3s-bar-b 1.08s .11s ease-in-out infinite; }
[data-i3s-running="true"] .i3s-bars > i:nth-child(3),
.i3s-bars[data-i3s-running="true"] > i:nth-child(3) { animation: i3s-bar-c 1.40s .04s ease-in-out infinite; }
[data-i3s-running="true"] .i3s-bars > i:nth-child(4),
.i3s-bars[data-i3s-running="true"] > i:nth-child(4) { animation: i3s-bar-d 1.18s .18s ease-in-out infinite; }

@keyframes i3s-bar-a {
  0%,100% { transform: scaleY(.48); }
  38% { transform: scaleY(1); }
  70% { transform: scaleY(.68); }
}
@keyframes i3s-bar-b {
  0%,100% { transform: scaleY(.78); }
  34% { transform: scaleY(.36); }
  74% { transform: scaleY(1); }
}
@keyframes i3s-bar-c {
  0%,100% { transform: scaleY(1); }
  48% { transform: scaleY(.46); }
  78% { transform: scaleY(.82); }
}
@keyframes i3s-bar-d {
  0%,100% { transform: scaleY(.58); }
  30% { transform: scaleY(.96); }
  68% { transform: scaleY(.42); }
}

.i3s-live-badge {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  border: 1px solid rgba(245,45,140,.20);
  border-radius: 999px;
  color: #35213f;
  background: linear-gradient(112deg, rgba(255,255,255,.97), rgba(255,246,252,.88));
  box-shadow: 0 8px 22px rgba(107,57,143,.08), inset 0 1px 0 rgba(255,255,255,.98);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.i3s-live-badge .i3s-bars { width: 20px; height: 16px; gap: 2px; }
.i3s-live-badge .i3s-bars > i { width: 2.6px; }

.i3s-viewers {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--i3s-ink);
  font-size: 13px;
  font-weight: 680;
}

/* ----------------------------------------------------------------------
   R1 — ROUTE ORBIT
   Only for a currently shared live location or active route.
   ---------------------------------------------------------------------- */
.i3s-route {
  position: relative;
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--i3s-blue);
  background: rgba(255,255,255,.80);
  box-shadow: inset 0 0 0 1px rgba(91,105,175,.11), 0 8px 20px rgba(50,61,112,.08);
}

.i3s-route__svg {
  width: 44px;
  height: 44px;
  overflow: visible;
}

.i3s-route__track {
  fill: none;
  stroke: rgba(86,120,255,.14);
  stroke-width: 2;
}

.i3s-route__arc {
  fill: none;
  stroke: #6f66f4;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 42 78;
  transform-origin: 22px 22px;
}

.i3s-route__pin {
  fill: rgba(86,120,255,.10);
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-i3s-running="true"] .i3s-route__arc,
.i3s-route[data-i3s-running="true"] .i3s-route__arc {
  animation: i3s-route-orbit 3.5s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes i3s-route-orbit { to { transform: rotate(360deg); } }

.i3s-route[data-state="idle"] .i3s-route__arc { opacity: 0; }
.i3s-route[data-state="connecting"] .i3s-route__arc { opacity: .55; }
.i3s-route[data-state="live"] .i3s-route__arc { opacity: 1; }

/* ----------------------------------------------------------------------
   H1 — HUMAN AVAILABLE
   Calm confirmation. No continuous animation.
   ---------------------------------------------------------------------- */
.i3s-human {
  position: relative;
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(15,172,115,.16);
  border-radius: 15px;
  color: var(--i3s-green);
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(241,253,248,.85));
  box-shadow: 0 8px 20px rgba(28,125,90,.08), inset 0 1px 0 rgba(255,255,255,.98);
}

.i3s-human svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.i3s-human::after {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: block;
  width: 13px;
  height: 13px;
  content: "";
  border: 3px solid var(--i3s-surface-solid);
  border-radius: 50%;
  background: var(--i3s-green);
  box-shadow: 0 2px 8px rgba(15,172,115,.22);
}

.i3s-human--compact { width: 34px; height: 34px; border-radius: 11px; box-shadow: none; }
.i3s-human--compact svg { width: 19px; height: 19px; }

.i3s-human[data-status="busy"] { color: var(--i3s-violet); border-color: rgba(139,92,246,.18); }
.i3s-human[data-status="busy"]::after { background: var(--i3s-violet); }
.i3s-human[data-status="offline"] { color: var(--i3s-gray); border-color: rgba(167,175,194,.22); background: rgba(255,255,255,.68); }
.i3s-human[data-status="offline"]::after { background: var(--i3s-gray); }

.i3s-human-status {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.i3s-human-status__copy { min-width: 0; }
.i3s-human-status__title { display: block; color: var(--i3s-ink); font-weight: 720; line-height: 1.2; }
.i3s-human-status__meta { display: block; margin-top: 4px; color: var(--i3s-green); font-size: 12px; font-weight: 650; line-height: 1.25; }

/* ----------------------------------------------------------------------
   S1 — SOS / EMERGENCY INTERACTION
   No idle pulse. Illumination is interaction- or state-driven only.
   ---------------------------------------------------------------------- */
.i3s-sos {
  position: relative;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid rgba(255,63,85,.22);
  border-radius: 999px;
  color: var(--i3s-red);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 24px rgba(62,36,76,.09);
  font: inherit;
  font-weight: 780;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.i3s-sos::before {
  position: absolute;
  inset: 2px;
  content: "";
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.i3s-sos::after {
  display: none;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: currentColor;
}

.i3s-sos:hover,
.i3s-sos:focus-visible {
  color: #fff;
  border-color: transparent;
  outline: none;
  background: linear-gradient(100deg, #ff3f55, #f52d8c 52%, #8b5cf6);
  box-shadow: 0 15px 34px rgba(245,45,140,.24);
  transform: translateY(-2px);
}

.i3s-sos:hover::before,
.i3s-sos:focus-visible::before {
  border-color: rgba(255,255,255,.54);
  box-shadow: inset 0 0 18px rgba(255,255,255,.18);
}

.i3s-sos:active,
.i3s-sos.is-pressed { transform: translateY(0) scale(.975); }

.i3s-sos[data-state="active"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(100deg, #ff3149, #f52d8c 54%, #8457ee);
  box-shadow: 0 0 0 5px rgba(255,63,85,.10), 0 14px 32px rgba(245,45,140,.28);
}

.i3s-sos[data-state="active"]::after { display: block; }
.i3s-sos.is-activated { animation: i3s-sos-once .42s cubic-bezier(.2,.8,.2,1) 1; }

@keyframes i3s-sos-once {
  0% { box-shadow: 0 0 0 0 rgba(255,63,85,.28), 0 14px 32px rgba(245,45,140,.25); }
  100% { box-shadow: 0 0 0 13px rgba(255,63,85,0), 0 14px 32px rgba(245,45,140,.25); }
}

.i3s-sos--informational {
  pointer-events: none;
  min-height: 34px;
  padding: 0 12px;
  color: var(--i3s-red);
  background: rgba(255,63,85,.07);
  box-shadow: none;
}

/* ----------------------------------------------------------------------
   O1 — STALE / OFFLINE
   Use instead of a pulse for "last seen" or inactive location.
   ---------------------------------------------------------------------- */
.i3s-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--i3s-muted);
  font-size: 13px;
  font-weight: 650;
}

.i3s-state__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: var(--i3s-gray);
  box-shadow: 0 0 0 1px rgba(90,101,139,.16);
}

.i3s-state[data-state="safe"] .i3s-state__dot { background: var(--i3s-green); }
.i3s-state[data-state="urgent"] .i3s-state__dot { background: var(--i3s-red); }

/* ----------------------------------------------------------------------
   P1 — PLAY CONTROL
   No idle pulse. Motion only on hover/focus/press.
   ---------------------------------------------------------------------- */
.i3s-play {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(86,120,255,.18);
  border-radius: 50%;
  color: var(--i3s-blue);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 26px rgba(43,55,105,.12);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.i3s-play svg { width: 18px; height: 18px; fill: currentColor; transform: translateX(1px); }
.i3s-play:hover,
.i3s-play:focus-visible {
  color: #fff;
  outline: none;
  background: linear-gradient(135deg, var(--i3s-pink), var(--i3s-violet), var(--i3s-blue));
  box-shadow: 0 15px 34px rgba(105,75,205,.22);
  transform: translateY(-2px) scale(1.03);
}
.i3s-play:active { transform: scale(.96); }

/* ----------------------------------------------------------------------
   B1 — NUDGE / SMALL ACTION CHIP
   No ambient motion. A brief press response only.
   ---------------------------------------------------------------------- */
.i3s-nudge {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid var(--i3s-line);
  border-radius: 999px;
  color: var(--i3s-ink);
  background: rgba(255,255,255,.88);
  box-shadow: 0 7px 18px rgba(34,44,84,.07);
  font: inherit;
  font-size: 13px;
  font-weight: 660;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.i3s-nudge:hover,
.i3s-nudge:focus-visible {
  border-color: rgba(139,92,246,.30);
  outline: none;
  box-shadow: 0 10px 24px rgba(91,63,166,.12);
  transform: translateY(-1px);
}
.i3s-nudge:active,
.i3s-nudge.is-pressed { transform: scale(.975); }

/* ----------------------------------------------------------------------
   T1 — COMPACT TRUST STRIP
   For subpage header utility areas. Static by design.
   ---------------------------------------------------------------------- */
.i3s-trust-strip {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.35fr 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 20px;
  background: rgba(255,255,255,.77);
  box-shadow: var(--i3s-shadow), inset 0 1px 0 rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.i3s-trust-strip__item {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  color: var(--i3s-ink);
  font-size: 13px;
  font-weight: 660;
  line-height: 1.25;
}

.i3s-trust-strip__item + .i3s-trust-strip__item { border-left: 1px solid var(--i3s-line); }
.i3s-trust-strip__item--lead { font-weight: 760; }
.i3s-trust-strip__icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: var(--i3s-violet);
  background: rgba(139,92,246,.08);
}
.i3s-trust-strip__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Static meta row used beneath heroes. */
.i3s-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 13px;
  color: var(--i3s-muted);
  font-size: 13px;
  font-weight: 620;
}
.i3s-meta-row__sep { width: 1px; height: 14px; border-radius: 0; background: rgba(111,120,146,.30); }

/* Static step navigation for the product page. */
.i3s-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.i3s-step {
  position: relative;
  padding: 11px 12px 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--i3s-muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.i3s-step::after {
  position: absolute;
  right: 12px;
  bottom: 7px;
  left: 12px;
  height: 3px;
  content: "";
  border-radius: 99px;
  background: transparent;
}
.i3s-step[aria-selected="true"] {
  color: var(--i3s-ink);
  border-color: rgba(139,92,246,.12);
  background: rgba(255,255,255,.70);
}
.i3s-step[aria-selected="true"]::after {
  background: linear-gradient(90deg, var(--i3s-pink), var(--i3s-violet), var(--i3s-blue));
}

/* Generic status card for contexts in the current site. */
.i3s-status-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: var(--i3s-radius);
  background: var(--i3s-surface);
  box-shadow: var(--i3s-shadow), inset 0 1px 0 rgba(255,255,255,.98);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.i3s-status-card__copy { min-width: 0; }
.i3s-status-card__title { display: block; color: var(--i3s-ink); font-size: 14px; font-weight: 730; line-height: 1.2; }
.i3s-status-card__meta { display: block; margin-top: 4px; color: var(--i3s-muted); font-size: 12px; line-height: 1.35; }

/* Dark-theme compatibility. Map these selectors if the project uses another theme hook. */
html[data-theme="dark"],
html.dark,
body.dark {
  --i3s-ink: #f4f6ff;
  --i3s-muted: #afb6ce;
  --i3s-soft: #929bb8;
  --i3s-surface: rgba(20,25,48,.82);
  --i3s-surface-solid: #151b34;
  --i3s-line: rgba(194,201,231,.14);
  --i3s-shadow: 0 16px 38px rgba(0,0,0,.24);
}
html[data-theme="dark"] .i3s-live-badge,
html.dark .i3s-live-badge,
body.dark .i3s-live-badge,
html[data-theme="dark"] .i3s-route,
html.dark .i3s-route,
body.dark .i3s-route,
html[data-theme="dark"] .i3s-human,
html.dark .i3s-human,
body.dark .i3s-human,
html[data-theme="dark"] .i3s-nudge,
html.dark .i3s-nudge,
body.dark .i3s-nudge,
html[data-theme="dark"] .i3s-play,
html.dark .i3s-play,
body.dark .i3s-play,
html[data-theme="dark"] .i3s-trust-strip,
html.dark .i3s-trust-strip,
body.dark .i3s-trust-strip,
html[data-theme="dark"] .i3s-status-card,
html.dark .i3s-status-card,
body.dark .i3s-status-card {
  background: rgba(22,27,51,.84);
  border-color: rgba(202,208,234,.13);
  box-shadow: var(--i3s-shadow), inset 0 1px 0 rgba(255,255,255,.05);
}

@media (max-width: 980px) {
  .i3s-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i3s-trust-strip__item:nth-child(3) { border-left: 0; border-top: 1px solid var(--i3s-line); }
  .i3s-trust-strip__item:nth-child(4) { border-top: 1px solid var(--i3s-line); }
}

@media (max-width: 620px) {
  .i3s-trust-strip { grid-template-columns: 1fr; border-radius: 17px; }
  .i3s-trust-strip__item + .i3s-trust-strip__item { border-left: 0; border-top: 1px solid var(--i3s-line); }
  .i3s-trust-strip__item { padding: 13px 15px; }
  .i3s-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .i3s-bars > i,
  .i3s-route__arc,
  .i3s-sos.is-activated { animation: none !important; }
  .i3s-sos,
  .i3s-play,
  .i3s-nudge { transition: none !important; }
}