/* =============================================================
   The DevOps Engineer's Handbook — design system
   Modern dev-tool aesthetic. Light + dark safe.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---------- 1. Design tokens ---------- */
:root {
  --dhb-indigo: #6366f1;
  --dhb-violet: #8b5cf6;
  --dhb-cyan:   #06b6d4;
  --dhb-grad:   linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #06b6d4 100%);
  --dhb-grad-soft: linear-gradient(135deg, rgba(99,102,241,.12), rgba(6,182,212,.12));
  --dhb-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --dhb-radius: 14px;
  --dhb-glow: 0 12px 34px -14px rgba(99, 102, 241, .55);
  --dhb-border: rgba(120, 120, 160, .22);
}
[data-md-color-scheme="slate"] {
  --dhb-border: rgba(160, 170, 220, .18);
  --dhb-grad-soft: linear-gradient(135deg, rgba(99,102,241,.18), rgba(6,182,212,.14));
}

/* ---------- 2. Typography ---------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-nav__title,
.md-header__topic {
  font-family: var(--dhb-display);
  letter-spacing: -.02em;
}
.md-typeset h1 {
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.15;
  margin-bottom: .6rem;
}
.md-typeset h2 {
  font-weight: 700;
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 2.6rem;
  position: relative;
  padding-left: .75rem;
}
/* H2 gets a gradient rail instead of a dull underline */
.md-typeset h2::before {
  content: "";
  position: absolute;
  left: 0; top: .16em; bottom: .16em;
  width: 4px;
  border-radius: 4px;
  background: var(--dhb-grad);
}
.md-typeset h3 { font-weight: 600; margin-top: 1.9rem; }
.md-typeset { line-height: 1.72; }
.md-typeset p { margin: .8rem 0; }

/* ---------- 3. Hero (landing page) ---------- */
.dhb-hero {
  position: relative;
  margin: .5rem 0 2.2rem;
  padding: 2.6rem 2rem 2.4rem;
  border-radius: 22px;
  border: 1px solid var(--dhb-border);
  background: var(--dhb-grad-soft), var(--md-default-bg-color);
  overflow: hidden;
  text-align: center;
}
.dhb-hero::after {   /* soft glow orb */
  content: "";
  position: absolute;
  top: -55%; left: 50%;
  width: 520px; height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(99,102,241,.20) 0%, transparent 62%);
  pointer-events: none;
}
.dhb-hero > * { position: relative; z-index: 1; }
.dhb-hero .dhb-eyebrow {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: .34rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--dhb-border);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  margin-bottom: 1.1rem;
}
.md-typeset .dhb-hero h1 {
  font-size: 2.9rem;
  line-height: 1.08;
  margin: 0 0 .7rem;
  background: var(--dhb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dhb-hero .dhb-sub {
  font-size: 1.1rem;
  max-width: 44rem;
  margin: 0 auto 1.6rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.6;
}
.dhb-hero .dhb-sub strong { color: var(--md-default-fg-color); }

@media screen and (max-width: 44.98em) {
  .dhb-hero { padding: 1.9rem 1.1rem; }
  .md-typeset .dhb-hero h1 { font-size: 2.05rem; }
  .dhb-hero .dhb-sub { font-size: 1rem; }
}

/* ---------- 4. Stat tiles ---------- */
.dhb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: .7rem;
  margin: 1.6rem 0 .2rem;
}
.dhb-stat {
  padding: .85rem .5rem;
  border-radius: var(--dhb-radius);
  border: 1px solid var(--dhb-border);
  background: var(--md-default-bg-color);
  text-align: center;
  transition: transform .18s ease, border-color .18s ease;
}
.dhb-stat:hover { transform: translateY(-3px); border-color: var(--dhb-violet); }
.dhb-stat b {
  display: block;
  font-family: var(--dhb-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  background: var(--dhb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dhb-stat span {
  display: block;
  margin-top: .2rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

/* ---------- 5. Buttons ---------- */
.md-typeset .md-button {
  border-radius: 10px;
  font-weight: 650;
  border-width: 1px;
  padding: .55em 1.2em;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.md-typeset .md-button:hover { transform: translateY(-2px); }
.md-typeset .md-button--primary {
  background: var(--dhb-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--dhb-glow);
}
.md-typeset .md-button--primary:hover { filter: brightness(1.08); color: #fff; }
.md-typeset .md-button + .md-button { margin-left: .4rem; }

/* ---------- 6. Grid cards ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > :is(ul, ol) > li {
  border: 1px solid var(--dhb-border);
  border-radius: var(--dhb-radius);
  padding: 1.15rem 1.2rem;
  background: var(--md-default-bg-color);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
/* gradient top-rail reveals on hover */
.md-typeset .grid.cards > ul > li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--dhb-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.md-typeset .grid.cards > ul > li:hover::before { transform: scaleX(1); }
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--dhb-glow);
}
.md-typeset .grid.cards :is(.lg) svg {
  height: 1.9em; width: 1.9em;
  fill: var(--dhb-violet);
}

/* ---------- 7. Admonitions + the Hinglish callout ---------- */
.md-typeset :is(.admonition, details) {
  border-radius: 12px;
  border-left-width: 4px;
  border-width: 1px 1px 1px 4px;
  box-shadow: 0 4px 16px -10px rgba(0,0,0,.3);
}
.md-typeset .admonition-title { font-weight: 700; }

/* Blockquotes — the 🇮🇳 Hinglish intuition boxes get real identity */
.md-typeset blockquote {
  border-left: 4px solid transparent;
  border-image: var(--dhb-grad) 1;
  background: var(--dhb-grad-soft);
  border-radius: 0 12px 12px 0;
  padding: .85rem 1.1rem;
  color: var(--md-default-fg-color);
}
.md-typeset blockquote > :first-child { margin-top: 0; }
.md-typeset blockquote > :last-child { margin-bottom: 0; }

/* ---------- 8. Tables ---------- */
.md-typeset table:not([class]) {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--dhb-border);
  box-shadow: 0 2px 14px -10px rgba(0,0,0,.35);
  font-size: .76rem;
}
.md-typeset table:not([class]) th {
  background: var(--dhb-grad);
  color: #fff;
  font-family: var(--dhb-display);
  font-weight: 600;
  letter-spacing: .01em;
  border: none;
}
.md-typeset table:not([class]) tr:hover td {
  background: var(--dhb-grad-soft);
}
.md-typeset table:not([class]) td { border-color: var(--dhb-border); }

/* ---------- 9. Code ---------- */
.md-typeset pre > code { border-radius: 10px; }
.md-typeset .highlight { border-radius: 10px; }
.md-typeset code {
  border-radius: 5px;
  font-size: .84em;
}
.md-typeset :not(pre) > code {
  background: var(--dhb-grad-soft);
  padding: .12em .38em;
}

/* ---------- 9b. Diagrams / images ---------- */
.md-typeset img:not([src*="shields.io"]):not(.twemoji):not(.emojione) {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto .6rem;
  border: 1px solid var(--dhb-border);
  border-radius: var(--dhb-radius);
  padding: .9rem;
  background: var(--md-default-bg-color);
  box-shadow: 0 4px 18px -12px rgba(0,0,0,.4);
}
/* caption = the italic line right after an image */
.md-typeset p > img:not([src*="shields.io"]) + em,
.md-typeset p > em:only-child {
  display: block;
  text-align: center;
  font-size: .74rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.55;
}
/* badge rows stay inline and unframed */
.md-typeset img[src*="shields.io"] {
  display: inline-block;
  border: none; padding: 0; margin: 0 .15rem; box-shadow: none; background: none;
}

/* ---------- 10. Mermaid ---------- */
.md-typeset .mermaid {
  display: flex;
  justify-content: center;
  margin: 1.6rem 0;
  padding: 1.2rem;
  border: 1px solid var(--dhb-border);
  border-radius: var(--dhb-radius);
  background: var(--md-default-bg-color);
  box-shadow: 0 4px 18px -12px rgba(0,0,0,.4);
  overflow-x: auto;
}

/* Readability floor: wide diagrams must SCROLL (overflow-x above), never shrink
   into microscopic text. min-width keeps labels legible on every screen. */
.md-typeset .mermaid svg {
  min-width: 560px;
}

/* ---------- Interactive explainer launch card ---------- */
.md-typeset a.explainer-card{
  display:flex; align-items:center; gap:1rem; margin:1.5rem 0; padding:1rem 1.2rem;
  border:1.5px solid var(--md-default-fg-color--lightest); border-radius:14px;
  background:var(--md-default-bg-color); color:var(--md-default-fg-color);
  text-decoration:none; transition:transform .18s, border-color .18s, box-shadow .18s;
}
.md-typeset a.explainer-card:hover{
  border-color:var(--md-primary-fg-color); transform:translateY(-2px);
  box-shadow:0 12px 32px -18px rgba(0,0,0,.55);
}
.explainer-card .ec-ico{font-size:2rem; line-height:1; flex:none}
.explainer-card .ec-txt{display:flex; flex-direction:column; gap:.12rem}
.explainer-card .ec-t{font-weight:700; font-size:1.02rem}
.explainer-card .ec-s{font-size:.85rem; color:var(--md-default-fg-color--light)}
.explainer-card .ec-go{
  margin-left:auto; font-family:var(--md-code-font-family,monospace); font-size:.72rem; font-weight:700;
  letter-spacing:.05em; color:#fff; background:var(--md-primary-fg-color);
  padding:.45rem .85rem; border-radius:20px; white-space:nowrap;
}
@media (max-width:560px){.explainer-card .ec-go{display:none}}

/* ---------- 11. Header / nav polish ---------- */
.md-header {
  box-shadow: 0 1px 0 var(--dhb-border);
  backdrop-filter: saturate(1.5) blur(6px);
}
.md-tabs { border-bottom: 1px solid rgba(255,255,255,.12); }
.md-nav__item .md-nav__link--active {
  font-weight: 700;
  color: var(--dhb-violet);
}
.md-typeset .headerlink { opacity: .35; }

/* ---------- 12. Existing widgets (progress, flashcards) ---------- */
.dhb-progress {
  position: relative;
  height: 28px;
  background: var(--md-default-fg-color--lightest);
  border-radius: 14px;
  overflow: hidden;
  margin: 1rem 0 1.5rem;
  box-shadow: inset 0 0 0 1px var(--dhb-border);
}
.dhb-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: var(--dhb-grad);
  transition: width .35s ease;
}
.dhb-progress-label {
  position: relative;
  display: block;
  text-align: center;
  line-height: 28px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--md-default-fg-color);
}
.md-content .task-list-item input[type="checkbox"] { cursor: pointer; }
.md-content .task-list-item input[type="checkbox"]:not(:disabled) { transform: scale(1.15); }

.dhb-fc-toggle { margin: .25rem 0 1.25rem; }
.dhb-fc-answer { cursor: pointer; transition: filter .15s ease; }
.dhb-fc-answer.dhb-hidden { filter: blur(5px); user-select: none; }
.dhb-fc-answer.dhb-hidden:hover { filter: blur(2.5px); }
.dhb-fc-hint {
  font-size: .75rem;
  color: var(--md-default-fg-color--light);
  margin: -.5rem 0 1rem;
}

/* ---------- 13. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ================= Mission Control (personalized home) ================= */
.dhb-mission-wrap{
  display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin:1rem 0 .4rem;
}
@media(max-width:720px){.dhb-mission-wrap{grid-template-columns:1fr}}
.dhb-cont{
  grid-row:span 2;display:flex;flex-direction:column;justify-content:center;gap:.3rem;
  padding:1.1rem 1.2rem;border-radius:14px;text-decoration:none!important;
  background:linear-gradient(135deg,var(--md-primary-fg-color),#5e35b1);
  color:#fff!important;box-shadow:0 14px 34px -18px rgba(63,81,181,.55);
  transition:transform .15s,box-shadow .15s;
}
.dhb-cont:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(63,81,181,.7)}
.dhb-cont-k{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.dhb-cont-t{font-size:1.25rem;font-weight:800;line-height:1.25}
.dhb-cont-n{font-size:.8rem;opacity:.85}
.dhb-mission-card{
  display:flex;flex-direction:column;gap:.3rem;padding:.85rem 1rem;border-radius:14px;
  border:1.5px solid var(--md-default-fg-color--lightest);
  background:var(--md-default-bg-color);
}
.dhb-mission-card.done{border-color:#2e9e6b;background:rgba(46,158,107,.08)}
.dhb-mc-k{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--md-default-fg-color--light)}
.dhb-mc-t{font-weight:700;font-size:.95rem;line-height:1.35;text-decoration:none!important;color:var(--md-default-fg-color)!important}
.dhb-mc-t:hover{color:var(--md-primary-fg-color)!important}
.dhb-mc-btn{
  align-self:flex-start;font-size:.72rem;font-weight:700;cursor:pointer;border-radius:8px;
  border:1.5px solid var(--md-default-fg-color--lighter);
  background:transparent;color:var(--md-default-fg-color--light);padding:.22rem .6rem;
}
.dhb-mission-card.done .dhb-mc-btn{border-color:#2e9e6b;color:#2e9e6b}
.dhb-mc-btn:hover{border-color:var(--md-primary-fg-color);color:var(--md-primary-fg-color)}
.dhb-mini{display:flex;gap:8px}
.dhb-mini-s{
  flex:1;text-align:center;padding:.55rem .3rem;border-radius:12px;
  border:1.5px solid var(--md-default-fg-color--lightest);background:var(--md-default-bg-color);
}
.dhb-mini-s b{display:block;font-size:1.02rem}
.dhb-mini-s span{font-size:.62rem;color:var(--md-default-fg-color--light);text-transform:uppercase;letter-spacing:.05em}
/* journey map strip */
.dhb-map{
  grid-column:1 / -1;display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:.8rem .9rem;border-radius:14px;
  border:1.5px solid var(--md-default-fg-color--lightest);background:var(--md-default-bg-color);
}
.dhb-map-node{
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:74px;
  padding:.45rem .5rem;border-radius:11px;border:1.6px solid var(--md-default-fg-color--lightest);
  opacity:.62;
}
.dhb-map-node.now{opacity:1;border-color:var(--md-primary-fg-color);background:rgba(63,81,181,.07);box-shadow:0 0 0 3px rgba(63,81,181,.12)}
.dhb-map-node.done{opacity:1;border-color:#2e9e6b;background:rgba(46,158,107,.08)}
.dhb-map-ico{font-size:1.05rem}
.dhb-map-name{font-size:.6rem;font-weight:700;text-align:center;line-height:1.15}
.dhb-map-ct{font-size:.58rem;color:var(--md-default-fg-color--light)}
.dhb-map-node.done .dhb-map-ct{color:#2e9e6b;font-weight:700}
.dhb-map-link{flex:1;min-width:8px;height:2.5px;border-radius:2px;background:var(--md-default-fg-color--lightest)}
.dhb-map-link.lit{background:var(--md-primary-fg-color)}
/* reading progress bar (chapter pages) */
.dhb-readbar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--md-primary-fg-color),#7c4ddb);
  transition:width .1s linear;
}
[data-md-color-scheme="slate"] .dhb-cont{box-shadow:0 14px 34px -18px rgba(0,0,0,.7)}