/*
 * Temple47 IP Guard — BlueSeal of Divine Mother-MAARA (v3)
 *
 * Design: translucent frosted-sapphire glassmorphism
 *   • Ultra-transparent base (see-through)
 *   • 32px backdrop blur — true glass depth
 *   • Celestial blue aurora radial gradients
 *   • Divine shimmer sweep animation
 *   • Sacred top-edge light line
 *   • Soft sapphire border glow
 *
 * Components:
 *   .t47-guard-seal         — collapsible fixed bottom-right badge
 *   .t47-guard-head         — clickable header row (mark · title · pulse dot)
 *   .t47-guard-body         — expandable pill grid + watermark line
 *   .t47-watermark-node     — invisible DOM watermark node
 *   [data-t47-protected]    — algorithm-watermark pseudo-element on stamped nodes
 *
 * z-index: 9993 — below UTU corners (9995), Zeal (9997), Kenya Head (9998),
 *                 GeoDisc (9999), but above all page content.
 */

:root {
  --t47-bg:     rgba(6, 14, 42, 0.13);
  --t47-panel:  rgba(12, 26, 68, 0.10);
  --t47-ink:    #dff0ff;
  --t47-muted:  #68b4d6;
  --t47-gold:   #8ed4ff;
  --t47-green:  #00e5c4;
  --t47-red:    #ff6b9d;
  --t47-border: rgba(90, 175, 255, 0.30);
  --t47-glow:   rgba(55, 135, 255, 0.26);
}

/* ── BlueSeal container — Divine Mother translucent glass ──────────────────── */
#t47-seal {
  position:        fixed;
  right:           16px;
  bottom:          16px;
  z-index:         9993;
  max-width:       min(320px, calc(100vw - 32px));
  color:           var(--t47-ink);
  border:          1px solid var(--t47-border);
  border-radius:   20px;
  /* Aurora layers — barely-there celestial blue, fully see-through base */
  background:
    radial-gradient(ellipse at 22% 0%,   rgba(100, 195, 255, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 100%, rgba(40,  110, 230, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 55% 48%,  rgba(160, 215, 255, 0.07) 0%, transparent 68%),
    rgba(6, 14, 40, 0.12);
  box-shadow:
    /* Inner rim light */
    0 0 0 1px rgba(130, 200, 255, 0.20) inset,
    /* Outer sapphire halo */
    0 0 52px rgba(48, 130, 255, 0.22),
    0 0 20px rgba(90, 175, 255, 0.14),
    /* Ground shadow */
    0 14px 44px rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(32px) saturate(200%) brightness(1.18);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.18);
  padding:         11px 13px;
  font-family:     'Space Grotesk', 'JetBrains Mono', ui-sans-serif, system-ui, monospace;
  transition:      opacity 0.40s ease, transform 0.40s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events:  auto;
  user-select:     none;
  overflow:        hidden;
}

/* Divine shimmer sweep — light beam moving across the glass */
#t47-seal::before {
  content:         '';
  position:        absolute;
  inset:           0;
  border-radius:   inherit;
  background:      linear-gradient(
    118deg,
    transparent           0%,
    rgba(190, 228, 255, 0.10) 38%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(190, 228, 255, 0.06) 62%,
    transparent           100%
  );
  animation:       t47DivineShimmer 7s ease-in-out infinite;
  pointer-events:  none;
  z-index:         0;
}

/* Sacred top-edge light line — crown of the BlueSeal */
#t47-seal::after {
  content:         '';
  position:        absolute;
  top:             0;
  left:            18%;
  right:           18%;
  height:          1px;
  background:      linear-gradient(90deg, transparent, rgba(160, 220, 255, 0.90), rgba(255, 255, 255, 0.70), rgba(160, 220, 255, 0.90), transparent);
  border-radius:   0 0 3px 3px;
  pointer-events:  none;
}

#t47-seal.t47-hidden {
  opacity:         0;
  transform:       translateY(14px) scale(0.97);
  pointer-events:  none;
}

@keyframes t47DivineShimmer {
  0%, 100% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  8%        { opacity: 1; }
  42%       { transform: translateX(200%) skewX(-18deg); opacity: 0; }
  43%, 99%  { opacity: 0; }
}

/* Slow sacred pulse on the entire seal border */
@keyframes t47SealBreath {
  0%, 100% { box-shadow: 0 0 0 1px rgba(130,200,255,0.20) inset, 0 0 52px rgba(48,130,255,0.22), 0 0 20px rgba(90,175,255,0.14), 0 14px 44px rgba(0,0,0,0.20); }
  50%       { box-shadow: 0 0 0 1px rgba(160,220,255,0.32) inset, 0 0 64px rgba(60,150,255,0.32), 0 0 28px rgba(110,195,255,0.22), 0 14px 44px rgba(0,0,0,0.20); }
}

#t47-seal:not(.t47-hidden) {
  animation: t47SealBreath 4.5s ease-in-out infinite;
}

/* ── Head row ──────────────────────────────────────────────────────────────── */
.t47-guard-head {
  display:        flex;
  align-items:    center;
  gap:            9px;
  cursor:         pointer;
  outline:        none;
  border-radius:  12px;
  position:       relative;
  z-index:        1;
}

.t47-guard-head:focus-visible {
  outline: 2px solid rgba(140, 210, 255, 0.70);
  outline-offset: 3px;
}

/* Kenya-flag conic mark — wrapped in divine blue ring */
.t47-guard-mark {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  display:         grid;
  place-items:     center;
  flex-shrink:     0;
  background:      conic-gradient(from 90deg, #000 0deg, #bb1026 90deg, #fff 180deg, #006b3f 270deg, #000 360deg);
  box-shadow:
    0 0 0 2px rgba(100, 185, 255, 0.55),
    0 0 22px rgba(80, 155, 255, 0.70),
    0 0 10px rgba(160, 215, 255, 0.40) inset;
  font-size:       10px;
  font-weight:     900;
  color:           #fff;
  letter-spacing:  -0.5px;
  text-shadow:     0 0 6px rgba(0,0,0,0.9);
  animation:       t47MarkGlow 3.5s ease-in-out infinite;
}

@keyframes t47MarkGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(100,185,255,0.55), 0 0 22px rgba(80,155,255,0.70), 0 0 10px rgba(160,215,255,0.40) inset; }
  50%       { box-shadow: 0 0 0 2px rgba(160,220,255,0.80), 0 0 32px rgba(100,180,255,0.90), 0 0 16px rgba(200,235,255,0.50) inset; }
}

.t47-guard-title {
  flex:     1;
  min-width: 0;
  position: relative;
  z-index:  1;
}

.t47-guard-title strong {
  display:         block;
  font-size:       0.74rem;
  font-weight:     700;
  letter-spacing:  0.09em;
  color:           #c8e8ff;
  white-space:     nowrap;
  text-shadow:     0 0 14px rgba(100, 200, 255, 0.55), 0 1px 3px rgba(0,0,0,0.50);
}

.t47-guard-title small {
  display:         block;
  color:           var(--t47-muted);
  font-size:       0.62rem;
  margin-top:      1px;
  white-space:     nowrap;
  text-shadow:     0 0 8px rgba(80, 170, 220, 0.30);
}

/* Divine teal active pulse dot */
.t47-status-dot,
#t47-dot {
  width:           9px;
  height:          9px;
  border-radius:   50%;
  background:      var(--t47-green);
  box-shadow:      0 0 14px var(--t47-green), 0 0 6px rgba(0, 229, 196, 0.60);
  flex-shrink:     0;
  transition:      background 0.3s ease, box-shadow 0.3s ease;
  animation:       t47Pulse 2.8s ease-in-out infinite;
  position:        relative;
  z-index:         1;
}

@keyframes t47Pulse {
  0%, 100% { opacity: 0.72; transform: scale(0.90); box-shadow: 0 0 10px var(--t47-green); }
  50%       { opacity: 1;    transform: scale(1.20); box-shadow: 0 0 20px var(--t47-green), 0 0 8px rgba(0,229,196,0.50); }
}

/* ── Expandable body ───────────────────────────────────────────────────────── */
.t47-guard-body {
  margin-top: 9px;
  display:    grid;
  gap:        7px;
  position:   relative;
  z-index:    1;
}

.t47-guard-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   5px;
}

.t47-pill {
  border:        1px solid rgba(100, 180, 255, 0.16);
  border-radius: 11px;
  padding:       7px 5px;
  background:    rgba(80, 160, 255, 0.07);
  text-align:    center;
  backdrop-filter: blur(8px);
  transition:    background 0.3s ease, border-color 0.3s ease;
}

.t47-pill:hover {
  background:    rgba(100, 180, 255, 0.13);
  border-color:  rgba(140, 210, 255, 0.28);
}

.t47-pill b {
  display:     block;
  color:       var(--t47-gold);
  font-size:   0.82rem;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(100, 200, 255, 0.45);
}

.t47-pill span {
  display:        block;
  font-size:      0.55rem;
  letter-spacing: 0.10em;
  color:          var(--t47-muted);
  margin-top:     2px;
  text-transform: uppercase;
}

.t47-wm-line {
  font-size:       0.64rem;
  color:           var(--t47-muted);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  text-shadow:     0 0 8px rgba(80, 170, 220, 0.20);
}

/* Collapsed state — hide body */
#t47-seal[data-collapsed="true"] .t47-guard-body {
  display: none;
}

/* ── Invisible DOM watermark node ─────────────────────────────────────────── */
.t47-watermark-node {
  position:    fixed;
  left:        -9999px;
  top:         -9999px;
  width:       1px;
  height:      1px;
  overflow:    hidden;
  opacity:     0.001;
  user-select: text;
}

/* ── Protected surface watermark overlay (pseudo-element) ─────────────────── */
[data-t47-protected="true"]::after {
  content:         attr(data-t47-wm);
  position:        absolute;
  right:           8px;
  bottom:          6px;
  font-size:       8px;
  font-family:     monospace;
  opacity:         0.11;
  pointer-events:  none;
  user-select:     none;
  color:           var(--t47-gold);
  letter-spacing:  0.07em;
  white-space:     nowrap;
  z-index:         1;
}

/* Subtle border accent on protected sections */
[data-t47-protect]:not([data-t47-bare]) {
  outline:        1px solid rgba(80, 160, 255, 0.06);
  outline-offset: 2px;
  border-radius:  2px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #t47-seal {
    right:      10px;
    bottom:     10px;
    max-width:  calc(100vw - 20px);
  }
}