/* ============================================================
   apiegg — the guardian layer (guardian.html)
   Loads AFTER styles.css and reuses its tokens.
   Hero egg + orbiting action chips, gate simulation,
   ladder cards, watchlist, shadow-mode callout, scope note.
   ============================================================ */

/* ---------- Hero overrides ---------- */
.guardian-hero .hero-title { max-width: none; }

/* ---------- Hero visual: egg + orbiting action chips ---------- */
.gd-wrap {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1;
  margin: 0 auto;
  --chip: 44px;
  --half: 22px;
}
.gd-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1.5px dashed rgba(245, 239, 230, 0.12);
  animation: gdSpin 80s linear infinite;
}
.gd-ring.inner {
  inset: 15%;
  border-color: rgba(255, 194, 75, 0.1);
  animation-direction: reverse;
  animation-duration: 105s;
}
.gd-yolk {
  position: absolute;
  top: 50%; left: 50%;
  width: 78%; height: 78%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 194, 75, 0.16), rgba(167, 139, 250, 0.08) 55%, transparent 72%);
  filter: blur(22px);
  animation: yolkBreathe 6s ease-in-out infinite;
  pointer-events: none;
}
.gd-egg {
  position: absolute;
  top: 50%; left: 50%;
  width: 118px; height: 128px;
  transform: translate(-50%, -50%);
  animation: floaty 5s ease-in-out infinite;
}
.gd-egg svg { width: 100%; height: 100%; filter: drop-shadow(0 18px 36px rgba(255, 158, 44, 0.3)); }
.gd-orbit { position: absolute; inset: 0; animation: gdSpin 48s linear infinite; }
.gd-chip {
  position: absolute;
  width: var(--chip); height: var(--chip);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.1rem;
  background: rgba(20, 16, 28, 0.85);
  border: 1px solid var(--gd-border, var(--glass-border));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), var(--gd-glow, 0 0 20px rgba(124, 92, 252, 0.12));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: gdSpinRev 48s linear infinite;
}
.gd-chip.red    { --gd-border: rgba(251, 113, 133, 0.55); --gd-glow: 0 0 24px rgba(251, 113, 133, 0.28); }
.gd-chip.amber  { --gd-border: rgba(255, 194, 75, 0.55);  --gd-glow: 0 0 24px rgba(255, 194, 75, 0.26); }
.gd-chip.green  { --gd-border: rgba(52, 211, 153, 0.55);  --gd-glow: 0 0 24px rgba(52, 211, 153, 0.26); }
.gd-chip.blue   { --gd-border: rgba(96, 165, 250, 0.55);  --gd-glow: 0 0 24px rgba(96, 165, 250, 0.28); }
.gd-chip.c1 { left: calc(96% - var(--half)); top: calc(50% - var(--half)); }
.gd-chip.c2 { left: calc(50% - var(--half));   top: calc(96% - var(--half)); }
.gd-chip.c3 { left: calc(4% - var(--half));    top: calc(50% - var(--half)); }
.gd-chip.c4 { left: calc(50% - var(--half));   top: calc(4% - var(--half)); }
.gd-tag {
  position: absolute;
  bottom: 2%;
  right: -2%;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  background: rgba(20, 16, 28, 0.88);
  border: 1px solid rgba(251, 113, 133, 0.4);
  padding: 0.45rem 0.9rem;
  border-radius: 0.7rem;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: floaty 6s ease-in-out infinite;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gd-tag strong { color: var(--rose); font-weight: 500; }
@media (max-width: 640px) {
  .gd-wrap { --chip: 38px; --half: 19px; max-width: 300px; }
  .gd-egg { width: 96px; height: 104px; }
}
@keyframes gdSpin { to { transform: rotate(360deg); } }
@keyframes gdSpinRev { to { transform: rotate(-360deg); } }

/* ---------- Sim shell (shared look for both sims) ---------- */
.sim {
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: 1.4rem;
  max-width: 980px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(255, 194, 75, 0.03), rgba(124, 92, 252, 0.05));
}
@media (max-width: 640px) { .sim { padding: 1.2rem 0.9rem 1.1rem; } }
.sim-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.sim-head h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.sim-caption {
  min-height: 2.6em;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
  background: rgba(245, 239, 230, 0.03);
  border: 1px solid rgba(245, 239, 230, 0.07);
  border-radius: 0.75rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 1rem;
}
.sim-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.2rem;
}
.sim-btns button {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: rgba(245, 239, 230, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 2rem;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.sim-btns button:hover { color: var(--text); border-color: rgba(255, 194, 75, 0.4); }
.sim-btns button.is-active {
  color: #1F1300;
  background: linear-gradient(135deg, #FFD57E, #FF9E2C);
  border-color: transparent;
  box-shadow: 0 8px 22px -8px rgba(255, 158, 44, 0.6);
}

/* ---------- Gate sim stage ---------- */
.gate-stage {
  position: relative;
  height: 330px;
  --tone-red: #FB7185;
  --tone-amber: #FFC24B;
  --tone-blue: #60A5FA;
  --tone-green: #34D399;
}
.gate-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  padding: 0.9rem 0.6rem;
  border-radius: 1.1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.4s, box-shadow 0.4s, opacity 0.4s;
}
.gate-node .gn-icon { font-size: 1.5rem; line-height: 1; }
.gate-node .gn-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.gate-node .gn-sub { font-size: 0.64rem; color: var(--text-faint); line-height: 1.35; }
.gate-agent { left: 0; top: 44px; width: 26%; min-height: 128px; }
.gate-api   { right: 0; top: 44px; width: 26%; min-height: 128px; }
.gate-local { right: 0; bottom: 6px; width: 30%; min-height: 96px; }
.gate-node.lit { border-color: rgba(52, 211, 153, 0.5); box-shadow: 0 0 34px rgba(52, 211, 153, 0.16); }
.gate-node.dim { opacity: 0.35; }

.gate-gate {
  position: absolute;
  left: 41%; top: 10px;
  width: 18%;
  height: 84%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.gate-bar {
  flex: 1;
  width: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(245, 239, 230, 0.28), rgba(245, 239, 230, 0.1));
  border: 1px solid rgba(245, 239, 230, 0.14);
  box-shadow: 0 0 26px rgba(245, 239, 230, 0.12);
  transition: background 0.45s, box-shadow 0.45s, border-color 0.45s;
}
.gate-gate .gn-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-faint);
}
.gate-gate.red .gate-bar {
  background: linear-gradient(180deg, var(--tone-red), rgba(251, 113, 133, 0.35));
  border-color: rgba(251, 113, 133, 0.6);
  box-shadow: 0 0 40px rgba(251, 113, 133, 0.5);
}
.gate-gate.amber .gate-bar {
  background: linear-gradient(180deg, var(--tone-amber), rgba(255, 194, 75, 0.3));
  border-color: rgba(255, 194, 75, 0.6);
  box-shadow: 0 0 40px rgba(255, 194, 75, 0.45);
}
.gate-gate.blue .gate-bar {
  background: linear-gradient(180deg, var(--tone-blue), rgba(96, 165, 250, 0.35));
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 40px rgba(96, 165, 250, 0.5);
}
.gate-gate.green .gate-bar {
  background: linear-gradient(180deg, var(--tone-green), rgba(52, 211, 153, 0.35));
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 40px rgba(52, 211, 153, 0.45);
}
@keyframes gateSlam {
  0% { transform: scaleY(1); }
  35% { transform: scaleY(1.14); }
  70% { transform: scaleY(0.94); }
  100% { transform: scaleY(1); }
}
.gate-gate.slam .gate-bar { animation: gateSlam 0.5s var(--ease-bounce); }

/* the travelling request card */
.gate-card {
  position: absolute;
  left: 3%; top: 46%;
  max-width: 190px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text);
  background: rgba(20, 16, 28, 0.92);
  border: 1px solid var(--c, var(--glass-border));
  border-radius: 0.7rem;
  padding: 0.42rem 0.7rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 18px color-mix(in srgb, var(--c, #FFC24B) 20%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: left 0.65s var(--ease-smooth), top 0.65s var(--ease-smooth), opacity 0.45s, transform 0.45s, filter 0.45s;
}
.gate-card.show { opacity: 1; }
.gate-card.pos-gate  { left: 34%; }
.gate-card.pos-api   { left: 74%; }
.gate-card.pos-local { left: 52%; top: 82%; }
.gate-card.dissolve { opacity: 0; transform: scale(0.55); filter: blur(4px); }
.gate-card.noanim { transition: none; }
@keyframes cardPulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 194, 75, 0.25); }
  50% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 194, 75, 0.55); }
}
.gate-card.paused { animation: cardPulse 1.4s ease-in-out infinite; }

/* toast + dialog */
.gate-toast {
  position: absolute;
  top: -6px; left: 50%;
  transform: translate(-50%, -8px);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(20, 16, 28, 0.94);
  border: 1px solid rgba(255, 194, 75, 0.4);
  border-radius: 2rem;
  padding: 0.5rem 1.1rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s;
  white-space: nowrap;
  z-index: 3;
}
.gate-toast.show { opacity: 1; transform: translate(-50%, 0); }
.gate-dialog {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(20, 16, 28, 0.96);
  border: 1px solid rgba(255, 194, 75, 0.45);
  border-radius: 0.9rem;
  padding: 0.6rem 0.8rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 4;
  max-width: 92%;
}
.gate-dialog.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.gate-dialog .gd-q {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--yolk);
  white-space: nowrap;
}
.gate-dialog button {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(245, 239, 230, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 2rem;
  padding: 0.34rem 0.7rem;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.gate-dialog button:hover { color: var(--yolk); border-color: rgba(255, 194, 75, 0.5); }

/* reroute path (scenario 3) */
.gate-path {
  position: absolute;
  left: 47%; top: 56%;
  width: 34%; height: 32%;
  border: 2px dashed rgba(96, 165, 250, 0.0);
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 70px;
  opacity: 0;
  transition: opacity 0.4s, border-color 0.4s;
  pointer-events: none;
}
.gate-path.show { opacity: 1; border-color: rgba(96, 165, 250, 0.55); }
.gate-path::after {
  content: '↘';
  position: absolute;
  right: -6px; bottom: -10px;
  color: var(--tone-blue);
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .gate-stage { height: 400px; }
  .gate-agent { width: 30%; top: 26px; min-height: 118px; }
  .gate-api { width: 30%; top: 26px; min-height: 118px; }
  .gate-gate { left: 40%; top: 6px; width: 20%; height: 56%; }
  .gate-local { width: 54%; right: 0; bottom: 8px; min-height: 92px; }
  .gate-card { max-width: 150px; font-size: 0.62rem; top: 40%; }
  .gate-card.pos-agent { left: 1%; top: 13%; }
  .gate-card.pos-gate { left: 36%; top: 40%; }
  .gate-card.pos-api { left: 66%; top: 13%; }
  .gate-card.pos-local { left: 42%; top: 84%; }
  .gate-path { left: 46%; top: 48%; width: 26%; height: 42%; }
  .gate-dialog { top: -4px; }
  .gate-toast { top: -10px; font-size: 0.78rem; }
}

/* ---------- Ladder cards ---------- */
.ladder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem;
}
@media (max-width: 900px) { .ladder-grid { grid-template-columns: 1fr; } }
.ladder-card {
  padding: 1.9rem 1.7rem 1.6rem;
  border-radius: 1.3rem;
  border-top: 2px solid var(--lc, var(--glass-border));
  transition: border-color 0.35s, box-shadow 0.35s;
}
.ladder-card:hover {
  border-color: var(--lc, var(--glass-border));
  border-top-color: var(--lc, var(--yolk));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 -4px 44px -12px var(--lc, transparent);
}
.ladder-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.ladder-dot {
  width: 15px; height: 15px;
  border-radius: 50%;
  flex: none;
  background: var(--lc, var(--yolk));
  box-shadow: 0 0 16px var(--lc, var(--yolk));
}
.ladder-head h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
}
.ladder-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lc, var(--yolk));
  border: 1px solid var(--lc, var(--yolk));
  padding: 0.22rem 0.6rem;
  border-radius: 2rem;
  opacity: 0.9;
}
.ladder-card p {
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.7;
}
.ladder-card p strong { color: var(--text); font-weight: 600; }
.ladder-card code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  color: var(--yolk);
  background: rgba(255, 194, 75, 0.09);
  border: 1px solid rgba(255, 194, 75, 0.22);
  border-radius: 0.45rem;
  padding: 0.05rem 0.35rem;
}

/* ---------- Watchlist ---------- */
.watch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 900px) { .watch-grid { grid-template-columns: 1fr; } }
.watch-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  border-radius: 1.1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.watch-row:hover { border-color: rgba(255, 194, 75, 0.28); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); }
.watch-emoji { font-size: 1.4rem; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 0.9rem; background: linear-gradient(135deg, rgba(255, 194, 75, 0.12), rgba(167, 139, 250, 0.12)); border: 1px solid var(--glass-border); }
.watch-row .wt { flex: 1; min-width: 0; }
.watch-row .wt strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.watch-row .wt span { display: block; font-size: 0.83rem; color: var(--text-muted); line-height: 1.5; }
.watch-action {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.34rem 0.7rem;
  border-radius: 2rem;
  white-space: nowrap;
}
.watch-action.red   { color: #FB7185; border: 1px solid rgba(251, 113, 133, 0.4); background: rgba(251, 113, 133, 0.08); }
.watch-action.amber { color: var(--yolk); border: 1px solid rgba(255, 194, 75, 0.4); background: rgba(255, 194, 75, 0.08); }
.watch-action.green { color: var(--green); border: 1px solid rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.08); }
.watch-action.blue  { color: #60A5FA; border: 1px solid rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.08); }

/* ---------- Shadow mode + scope ---------- */
.guard-callouts {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.3rem;
  max-width: 920px;
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 900px) { .guard-callouts { grid-template-columns: 1fr; } }
.shadow-card {
  padding: 2rem 1.9rem;
  border-radius: 1.3rem;
  border: 1px dashed rgba(167, 139, 250, 0.4);
  background: linear-gradient(150deg, rgba(167, 139, 250, 0.06), rgba(255, 194, 75, 0.03));
}
.shadow-card .ghost {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  font-size: 1.3rem;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.1);
  border: 1px dashed rgba(167, 139, 250, 0.45);
  margin-bottom: 1rem;
}
.shadow-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  letter-spacing: -0.01em;
}
.shadow-card p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.7; }
.shadow-card p strong { color: var(--text); font-weight: 600; }
.scope-card {
  padding: 2rem 1.9rem;
  border-radius: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.scope-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.scope-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.65; }
.scope-card p strong { color: var(--text); font-weight: 600; }

/* ---------- Reduced motion (page-specific) ---------- */
@media (prefers-reduced-motion: reduce) {
  .gd-ring, .gd-orbit, .gd-chip, .gd-egg, .gd-yolk, .gd-tag { animation: none !important; }
  .gate-card, .gate-toast, .gate-dialog, .gate-path { transition: none !important; }
  .gate-card.paused { animation: none !important; }
}