/* ============================================================
   Identity Bytes — LAB light theme (matches identity-bytes.com home)
   Loaded LAST so it overrides each lab's own inline styles.
   Goal: labs read as the same site as the home page, with a
   compact header. Light surfaces, purple/violet + pink accents,
   Poppins headings, Inter body, dark code panels.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ib-violet:#7c3aed; --ib-violet-600:#6d28d9; --ib-violet-700:#5b21b6; --ib-violet-300:#a78bfa;
  --ib-violet-050:#f5f3ff; --ib-pink:#ec4899;
  --ib-grad:linear-gradient(90deg,#7c3aed,#ec4899);
  --ib-grad-135:linear-gradient(135deg,#6d28d9,#ec4899);
  --ib-ink:#0f1020; --ib-body:#414763; --ib-mute:#8890a6;
  --ib-line:#eceaf5; --ib-line-2:#e2def2;
  --ib-bg:#ffffff; --ib-soft:#f8f7fe; --ib-slate:#f8fafc;
  --ib-code:#120a2a; --ib-code-2:#1c1140;
  --ib-shadow:0 14px 38px -20px rgba(91,33,182,.30);
  --ib-shadow-sm:0 8px 24px -16px rgba(91,33,182,.26);
  --ib-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ib-head:"Poppins",var(--ib-font);
  --ib-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}

/* ---------- Global surface --------------------------------- */
html,body{overflow-x:hidden;}
html{background:var(--ib-bg) !important; scroll-behavior:smooth;}
body{
  background:var(--ib-bg) !important;
  color:var(--ib-body) !important;
  font-family:var(--ib-font) !important;
  line-height:1.65 !important;
  -webkit-font-smoothing:antialiased;
}
body::before,body::after{display:none !important;content:none !important;} /* kill dark-theme backdrops */

/* ---------- Compact header (all three patterns) ------------ */
body > header,
header.hero,
.hero,
.hero-banner{
  background:linear-gradient(135deg,#faf8ff 0%, #f3effe 60%, #fbf4fb 100%) !important;
  color:var(--ib-ink) !important;
  border:0 !important;
  border-bottom:3px solid transparent !important;
  border-image:var(--ib-grad) 1 !important;
  padding:26px 0 24px !important;
  position:relative !important;
  overflow:hidden !important;
  box-shadow:none !important;
  min-height:0 !important;
}
body > header::before, body > header::after,
.hero::before, .hero::after,
.hero-banner::before, .hero-banner::after{
  background:radial-gradient(30rem 16rem at 92% -20%, rgba(124,58,237,.12), transparent 60%) !important;
  opacity:1 !important; filter:none !important;
}
/* header inner text -> dark */
body > header *, header.hero *, .hero *, .hero-banner *{
  color:var(--ib-ink) !important;
  text-shadow:none !important;
}
/* header wrappers that centre/limit width */
.banner-content,.logo-container,.hero .wrap,.hero-banner .wrap{
  max-width:1100px !important; margin:0 auto !important; padding-left:22px !important; padding-right:22px !important;
}
/* brand / eyebrow */
.brand,.kicker{
  color:var(--ib-violet) !important;
  font-family:var(--ib-head) !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  font-size:11px !important;
}
/* titles (compact) */
h1,.hero-title{
  font-family:var(--ib-head) !important;
  color:var(--ib-ink) !important;
  -webkit-text-fill-color:var(--ib-ink) !important;   /* beats gradient-clip fills */
  background:none !important; background-image:none !important; background-clip:border-box !important; -webkit-background-clip:border-box !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  font-size:clamp(1.5rem,2.6vw,2rem) !important;
  line-height:1.14 !important;
  margin:8px 0 6px !important;
  max-width:34ch;
}
h1 .accent,.hero-title .accent,h1 span[class*="accent"],h1 .grad-text{
  color:var(--ib-violet) !important; -webkit-text-fill-color:var(--ib-violet) !important;
}
/* subtitle */
.lede,.hero-subtitle{
  color:var(--ib-body) !important;
  font-size:1rem !important;
  max-width:70ch !important;
  margin:0 !important;
}
/* badges / hero-meta chips */
.badges{gap:8px !important;}
.badge,.hero-meta > *,.header-meta > *{
  background:#fff !important;
  border:1px solid var(--ib-line-2) !important;
  color:var(--ib-violet-700) !important;
  border-radius:999px !important;
  font-family:var(--ib-head) !important;
  font-weight:700 !important;
  font-size:11px !important;
  letter-spacing:.06em !important;
  box-shadow:var(--ib-shadow-sm) !important;
}
.badge.diff{background:var(--ib-violet-050) !important;color:var(--ib-violet-700) !important;border-color:var(--ib-violet-300) !important;}
.badge.track{background:#fff0f7 !important;color:#be185d !important;border-color:#f7c9df !important;}
.badge.time{background:#fff !important;color:var(--ib-body) !important;}
.logo-icon,.logo-icon svg{filter:none !important;}

/* ---------- Sections & type -------------------------------- */
section,.container,main,.content,article{
  background:transparent !important;
  border-bottom-color:var(--ib-line) !important;
}
section{padding:34px 0 !important;}
h2,h3,h4,h5{font-family:var(--ib-head) !important;color:var(--ib-ink) !important;-webkit-text-fill-color:var(--ib-ink) !important;background:none !important;background-image:none !important;-webkit-background-clip:border-box !important;letter-spacing:-.01em !important;}
h2 .accent,h3 .accent,h2 span[class*="accent"],h2 .grad-text,h3 .grad-text{color:var(--ib-violet) !important;-webkit-text-fill-color:var(--ib-violet) !important;}
h2{font-size:clamp(1.4rem,2.2vw,1.9rem) !important;font-weight:800 !important;}
h3{font-size:1.18rem !important;font-weight:700 !important;}
h4{font-size:1.02rem !important;font-weight:700 !important;}
p,li,dd,dt,td,label,span{color:var(--ib-body);}
p{color:var(--ib-body) !important;}
strong,b{color:var(--ib-ink) !important;}
a{color:var(--ib-violet) !important;text-decoration:none !important;border-bottom:1px solid var(--ib-violet-300) !important;}
a:hover{color:var(--ib-violet-700) !important;border-bottom-color:var(--ib-violet-700) !important;}

/* ---------- Meta grid + tags ------------------------------- */
.meta .cell,.meta > *{
  background:#fff !important;border:1px solid var(--ib-line) !important;
  border-top:3px solid var(--ib-violet) !important;border-radius:12px !important;
  box-shadow:var(--ib-shadow-sm) !important;color:var(--ib-body) !important;
}
.meta .k{color:var(--ib-mute) !important;font-family:var(--ib-head) !important;letter-spacing:.12em !important;}
.meta .v{color:var(--ib-ink) !important;}
.tag,.tags span,.chip,.pill{
  background:var(--ib-violet-050) !important;color:var(--ib-violet-700) !important;
  border:1px solid var(--ib-line-2) !important;border-radius:999px !important;
  font-family:var(--ib-head) !important;font-weight:600 !important;font-size:11px !important;
  padding:4px 10px !important;
}

/* ---------- Tables ----------------------------------------- */
table,.table-container{
  background:#fff !important;border:1px solid var(--ib-line) !important;
  border-radius:12px !important;overflow:hidden !important;
}
th{
  background:var(--ib-violet-050) !important;color:var(--ib-violet-700) !important;
  font-family:var(--ib-head) !important;font-size:12px !important;letter-spacing:.04em !important;
  text-transform:uppercase !important;border-color:var(--ib-line-2) !important;
}
td{background:transparent !important;color:var(--ib-body) !important;border-color:var(--ib-line) !important;}
tbody tr:nth-child(even) td{background:#faf9ff !important;}

/* ---------- Code (dark panel, like home terminal) ---------- */
pre,.code-block,.code-header{
  border-radius:12px !important;font-family:var(--ib-mono) !important;
}
pre{
  background:var(--ib-code) !important;color:#e9e4ff !important;
  border:1px solid #2a1c52 !important;border-left:3px solid var(--ib-violet) !important;
  box-shadow:0 12px 30px -16px rgba(91,33,182,.4) !important;
}
pre *{color:#e9e4ff !important;}
pre .c,pre .comment,pre .token.comment{color:#9c93c9 !important;}
pre .k,pre .keyword,pre .token.keyword{color:#c4b5fd !important;}
pre .s,pre .string,pre .token.string{color:#a6f0c6 !important;}
pre .v,pre .variable,pre .token.variable{color:#ffd479 !important;}
.code-header{
  background:var(--ib-code-2) !important;color:#d7ccff !important;
  border:1px solid #2a1c52 !important;border-bottom:0 !important;
  border-radius:12px 12px 0 0 !important;
}
.code-header *{color:#d7ccff !important;}
code,code.inl,kbd,.inline-code{
  background:var(--ib-violet-050) !important;color:var(--ib-violet-700) !important;
  border:1px solid var(--ib-line-2) !important;border-radius:5px !important;
  padding:2px 6px !important;font-family:var(--ib-mono) !important;font-size:.88em !important;
}
pre code{background:transparent !important;border:0 !important;color:inherit !important;padding:0 !important;}

/* ---------- Cards / steps / details / callouts ------------- */
.step,details,.card,.diagram,.next,.module,.panel,.box,.section-card{
  background:#fff !important;border:1px solid var(--ib-line) !important;
  border-radius:14px !important;color:var(--ib-body) !important;box-shadow:var(--ib-shadow-sm) !important;
}
.step{border-left:3px solid var(--ib-violet) !important;}
.step *,.card *,.module *{color:var(--ib-body);}
.step h2,.step h3,.step h4,.card h3,.module h3{color:var(--ib-ink) !important;}
.step .num,.step-number,.step-header .step-number{
  background:var(--ib-grad-135) !important;color:#fff !important;border-radius:9px !important;
  box-shadow:var(--ib-shadow-sm) !important;
}
details[open]{box-shadow:var(--ib-shadow) !important;}
summary{
  background:linear-gradient(90deg,var(--ib-violet-050),#fff) !important;color:var(--ib-ink) !important;
  border-bottom:1px solid var(--ib-line) !important;font-family:var(--ib-head) !important;font-weight:600 !important;
}
summary:before{color:var(--ib-violet) !important;}
.diagram{background:var(--ib-soft) !important;border-color:var(--ib-line-2) !important;}
.diagram *{color:var(--ib-body);}

/* generic callouts across all lab sources */
.call,.callout,.note,.info,.tip,.warn,.warning,.danger,.verify,.success,.prod,
.info-box,.alert,.admonition,.notice{
  background:#fff !important;border:1px solid var(--ib-line-2) !important;
  border-left:4px solid var(--ib-violet) !important;border-radius:12px !important;
  color:var(--ib-body) !important;box-shadow:var(--ib-shadow-sm) !important;
}
.call *,.callout *,.info-box *,.note *,.alert *,.admonition *,.notice *{color:var(--ib-body);}
.call b,.callout b,.info-box-title,.admonition-title{color:var(--ib-ink) !important;font-family:var(--ib-head) !important;}
.info,.tip,.info-box.enterprise,.info-box.info{border-left-color:var(--ib-violet) !important;background:#faf8ff !important;}
.warn,.warning,.info-box.warning,.notice.warning{border-left-color:#f59e0b !important;background:#fffaf0 !important;}
.danger,.error,.info-box.danger{border-left-color:#ef4444 !important;background:#fff5f5 !important;}
.verify,.success,.info-box.success{border-left-color:#10b981 !important;background:#f2fdf7 !important;}
.prod{border-left-color:var(--ib-pink) !important;background:#fff5fa !important;}

/* table of contents (Downloads labs) */
.toc,.table-of-contents{
  background:var(--ib-soft) !important;border:1px solid var(--ib-line-2) !important;
  border-radius:14px !important;color:var(--ib-body) !important;
}
.toc *,.toc-title{color:var(--ib-body) !important;}
.toc-title{color:var(--ib-ink) !important;font-family:var(--ib-head) !important;font-weight:700 !important;}
.toc a{color:var(--ib-violet) !important;}

/* phase / module / section headers inside labs */
.module-header,.phase-header,.section-header{
  background:var(--ib-soft) !important;border:1px solid var(--ib-line) !important;
  border-radius:12px !important;color:var(--ib-ink) !important;
}
.module-header *,.phase-header *,.section-header *{color:var(--ib-ink) !important;}

/* ---------- Entra orientation + path components ------------ */
.ef-orientation-inner{
  background:linear-gradient(135deg,#f6f2ff,#fdeef7) !important;border:1px solid var(--ib-line-2) !important;
  color:var(--ib-ink) !important;border-radius:16px !important;box-shadow:var(--ib-shadow-sm) !important;
}
.ef-orientation-inner *{color:var(--ib-ink) !important;}
.ef-orientation-inner p{color:var(--ib-body) !important;}
.ef-orientation-inner::after{display:none !important;}
.ef-eyebrow{background:var(--ib-grad-135) !important;color:#fff !important;border-radius:999px !important;font-family:var(--ib-head) !important;}
.ef-loop b{background:var(--ib-grad-135) !important;color:#fff !important;}
.ef-orientation a{color:var(--ib-violet) !important;border-bottom-color:var(--ib-violet) !important;}
.ef-path-title{color:var(--ib-violet) !important;font-family:var(--ib-head) !important;}
.ef-track a,.ef-track span{color:var(--ib-mute) !important;}
.ef-track i{background:#fff !important;border:1px solid var(--ib-line) !important;color:var(--ib-body) !important;}
.ef-track .done i{background:#f2fdf7 !important;border-color:#10b981 !important;color:#0f9d63 !important;}
.ef-track .now i{background:var(--ib-grad-135) !important;border-color:transparent !important;color:#fff !important;box-shadow:0 0 0 5px #f0e7ff !important;}
.ef-track .now{color:var(--ib-ink) !important;}

/* ---------- Footer / misc --------------------------------- */
/* floating reading-mode toggle on Entra labs */
#bionicToggle{
  background:var(--ib-grad-135) !important;color:#fff !important;
  border:0 !important;box-shadow:var(--ib-shadow) !important;
}
#bionicToggle *{color:#fff !important;}

.foot,footer{color:var(--ib-mute) !important;}
.foot *,footer *{color:var(--ib-mute);}
blockquote{background:var(--ib-soft) !important;border-left:3px solid var(--ib-pink) !important;color:var(--ib-body) !important;}
hr{border:0 !important;border-top:1px solid var(--ib-line) !important;}
::selection{background:var(--ib-violet) !important;color:#fff !important;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--ib-slate);}
::-webkit-scrollbar-thumb{background:var(--ib-violet-300);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--ib-violet);}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important;}}
@media(max-width:720px){
  body > header,.hero,.hero-banner{padding:22px 0 20px !important;}
  h1,.hero-title{font-size:1.4rem !important;}
  section{padding:26px 0 !important;}
}