/**
 * Sláinte Employee OS sandbox — mirror-only visual identity (employee.ekmdupe.com).
 * Gated by html[data-ekm-mirror="1"]; zero effect on production hostname.
 */
html[data-ekm-mirror="1"] {
  --ekm-sandbox-forest: #3d5a48;
  --ekm-sandbox-forest-dim: #2d4336;
  --ekm-sandbox-forest-deep: #141a16;
  --ekm-sandbox-gold: #c9a962;
  --ekm-sandbox-gold-deep: #a89578;
  --ekm-sandbox-cream: #f0ebe3;
  --ekm-sandbox-ribbon-bg: linear-gradient(135deg, #2d4336 0%, #3d5a48 55%, #a89578 100%);
  --ekm-sandbox-ribbon-text: #f0ebe3;
  --ekm-sandbox-stripe: linear-gradient(90deg, #3d5a48 0%, #2d4336 45%, #c9a962 100%);
  --ekm-sandbox-banner-bg: linear-gradient(90deg, #141a16 0%, #2d4336 50%, #8a7760 100%);
}

html[data-ekm-mirror="1"][data-dark] {
  --ekm-sandbox-forest: #4a6e58;
  --ekm-sandbox-forest-dim: #3d5a48;
  --ekm-sandbox-forest-deep: #0c0e0d;
  --ekm-sandbox-gold: #d4af37;
  --ekm-sandbox-gold-deep: #c9a962;
  --ekm-sandbox-ribbon-bg: linear-gradient(135deg, #2d4336 0%, #3d5a48 55%, #8a7760 100%);
  --ekm-sandbox-banner-bg: linear-gradient(90deg, #0c0e0d 0%, #2d4336 50%, #6b5a48 100%);
}

html[data-ekm-mirror="1"] {
  --c-accent: var(--ekm-sandbox-gold);
  --hp-bronze: var(--ekm-sandbox-gold);
}

html[data-ekm-mirror="1"][data-dark] {
  --c-accent: var(--ekm-sandbox-gold);
  --hp-bronze: var(--ekm-sandbox-gold);
}

/* Full-width persistent banner — impossible to miss */
#ekm-sandbox-top-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  pointer-events: none;
  user-select: none;
  text-align: center;
  padding: 10px 16px 9px;
  color: #fff;
  background: var(--ekm-sandbox-banner-bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  border-bottom: 2px solid rgba(201, 169, 98, 0.65);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#ekm-sandbox-top-banner strong {
  display: block;
  font-size: clamp(11px, 2.4vw, 13px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ekm-sandbox-top-banner-sub {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.92;
}

html[data-ekm-mirror="1"] body {
  padding-top: 52px;
}

html[data-ekm-mirror="1"] #login-screen {
  padding-top: calc(clamp(1.25rem, 5vw, 2.5rem) + 8px);
  background:
    linear-gradient(180deg, rgba(45, 67, 54, 0.32) 0%, rgba(12, 11, 10, 1) 38%),
    #0c0b0a;
}

/* Corner ribbon (secondary indicator) */
#ekm-sandbox-ribbon {
  position: fixed;
  top: 52px;
  right: 10px;
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  z-index: 99990;
  pointer-events: none;
  user-select: none;
  padding: 6px 16px 6px 14px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ekm-sandbox-ribbon-text);
  background: var(--ekm-sandbox-ribbon-bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  border-bottom-left-radius: 8px;
}

#ekm-sandbox-ribbon::after {
  content: "Mock data";
  display: block;
  margin-top: 2px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.88;
}

/* Login card banner */
.ekm-sandbox-login-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  border-radius: 20px 20px 0 0;
  padding: 12px 14px 10px;
  text-align: center;
  color: #fff;
  background: var(--ekm-sandbox-banner-bg);
  border-bottom: 2px solid rgba(201, 169, 98, 0.55);
}

.ekm-sandbox-login-banner-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ekm-sandbox-login-banner-sub {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.92;
}

html[data-ekm-mirror="1"] .login-card {
  border-color: rgba(61, 90, 72, 0.55);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.48),
    0 0 0 2px rgba(201, 169, 98, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

html[data-ekm-mirror="1"] #login-screen .login-logo img:not(.ekm-sandbox-login-logo) {
  display: none !important;
}

.ekm-sandbox-login-logo {
  width: clamp(180px, 42vw, 260px);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: brightness(1.2) contrast(1.05) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

.ekm-sandbox-login-sub {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ekm-sandbox-gold);
  margin-top: 8px;
  text-align: center;
}

.ekm-sandbox-header-logo {
  /* Transparent S-mark (not the wide wordmark) — compact square nav lockup
     per Erin's 2026-07-19 logo swap request. */
  width: auto;
  max-width: 44px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
  display: block;
}

html[data-ekm-mirror="1"] .hp-lockup {
  gap: 4px;
}

html[data-ekm-mirror="1"] .login-divider {
  background: linear-gradient(90deg, transparent, #3d5a48, #c9a962, transparent);
}

/* Diagonal watermark */
html[data-ekm-mirror="1"] body::after {
  content: "Sláinte Sandbox";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-32deg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ekm-sandbox-forest);
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}

html[data-ekm-mirror="1"][data-dark] body::after {
  opacity: 0.06;
}

html[data-ekm-mirror="1"] .hp-topnav {
  position: relative;
}

html[data-ekm-mirror="1"] .hp-topnav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ekm-sandbox-stripe);
  z-index: 2;
  pointer-events: none;
}

html[data-ekm-mirror="1"] .hp-lockup-mark {
  display: none !important;
}

html[data-ekm-mirror="1"] .hp-lockup-sub {
  color: var(--ekm-sandbox-gold) !important;
}

html[data-ekm-mirror="1"] #login-screen::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(61, 90, 72, 0.28), transparent 58%),
    radial-gradient(ellipse 45% 40% at 92% 88%, rgba(201, 169, 98, 0.14), transparent 55%),
    radial-gradient(ellipse 40% 35% at 8% 92%, rgba(45, 67, 54, 0.16), transparent 50%);
}

html[data-ekm-mirror="1"] .login-btn {
  background: linear-gradient(180deg, #4a6e58 0%, #3d5a48 48%, #2d4336 100%);
  box-shadow: 0 4px 14px rgba(45, 67, 54, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-ekm-mirror="1"] #login-screen h2.ekm-sandbox-login-title {
  color: var(--ekm-sandbox-cream);
  letter-spacing: 0.08em;
}

html[data-ekm-mirror="1"] .login-build {
  color: rgba(201, 169, 98, 0.72) !important;
}

@media (max-width: 640px) {
  #ekm-sandbox-top-banner strong {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  #ekm-sandbox-ribbon {
    top: 48px;
    font-size: 9px;
    padding: 5px 22px 5px 10px;
  }

  html[data-ekm-mirror="1"] body {
    padding-top: 48px;
  }

  .ekm-sandbox-login-logo {
    width: clamp(150px, 56vw, 220px);
  }
}