/* ==========================================================================
   GoVisually manual — "colorful utilitarian" skin for MkDocs Material.
   Design language: audit/traffic-recovery-runbook.html (Inter, warm stone,
   5-hue tint system, chip labels). Brand primary: marker-blue #0d6abe.
   ========================================================================== */

:root {
  /* 5-hue workstream identities (runbook palette) */
  --gv-a: #2563eb; --gv-a-dark: #1e40af; --gv-a-tint: #eef4ff; --gv-a-line: #c7d9fc;
  --gv-b: #d97706; --gv-b-dark: #92400e; --gv-b-tint: #fdf6ec; --gv-b-line: #f3dfc0;
  --gv-c: #059669; --gv-c-dark: #065f46; --gv-c-tint: #ecf9f4; --gv-c-line: #c3e8d9;
  --gv-d: #7c3aed; --gv-d-dark: #5b21b6; --gv-d-tint: #f4f0fe; --gv-d-line: #ddd0f9;
  --gv-e: #dc2626; --gv-e-dark: #991b1b; --gv-e-tint: #fdf0f0; --gv-e-line: #f5cccc;

  --md-primary-fg-color: #0d6abe;
  --md-primary-fg-color--light: #3b8ad0;
  --md-primary-fg-color--dark: #0a558f;
  --md-accent-fg-color: #0d6abe;

  /* current chapter hue (set by extra.js via body[data-hue]) */
  --hue-main: var(--gv-a);
  --hue-dark: var(--gv-a-dark);
  --hue-tint: var(--gv-a-tint);
  --hue-line: var(--gv-a-line);
}
body[data-hue="b"] { --hue-main: var(--gv-b); --hue-dark: var(--gv-b-dark); --hue-tint: var(--gv-b-tint); --hue-line: var(--gv-b-line); }
body[data-hue="c"] { --hue-main: var(--gv-c); --hue-dark: var(--gv-c-dark); --hue-tint: var(--gv-c-tint); --hue-line: var(--gv-c-line); }
body[data-hue="d"] { --hue-main: var(--gv-d); --hue-dark: var(--gv-d-dark); --hue-tint: var(--gv-d-tint); --hue-line: var(--gv-d-line); }
body[data-hue="e"] { --hue-main: var(--gv-e); --hue-dark: var(--gv-e-dark); --hue-tint: var(--gv-e-tint); --hue-line: var(--gv-e-line); }

/* --- Warm stone base (light scheme) ------------------------------------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #faf9f7;
  --md-default-fg-color: #44403c;
  --md-default-fg-color--light: #78716c;
  --md-default-fg-color--lighter: #d6d0c8;
  --md-default-fg-color--lightest: #f0ece6;
  --md-typeset-color: #44403c;
  --md-typeset-a-color: #1e40af;
  --md-code-bg-color: #f0ece6;
  --md-code-fg-color: #1c1917;
}

/* --- Header: charcoal bar + 5-hue topline strip -------------------------- */
.md-header { background: #1c1917; }
.md-header::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    var(--gv-a) 0 20%, var(--gv-b) 20% 40%, var(--gv-c) 40% 60%,
    var(--gv-d) 60% 80%, var(--gv-e) 80% 100%);
}
.md-header__title { font-weight: 700; letter-spacing: -0.2px; }

/* --- Typography ----------------------------------------------------------- */
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #1c1917;
}
[data-md-color-scheme="slate"] .md-typeset h1 { color: var(--md-default-fg-color); }
.md-typeset h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 99px;
  margin-top: 10px;
  background: var(--hue-main);
}
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #1c1917;
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-md-color-scheme="slate"] .md-typeset h2 { color: var(--md-default-fg-color); }
.md-typeset h2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--hue-main);
  flex: 0 0 auto;
}
.md-typeset h3 { font-weight: 700; color: #1c1917; }
[data-md-color-scheme="slate"] .md-typeset h3 { color: var(--md-default-fg-color); }

/* --- Sidebar nav: current page gets the hue ------------------------------ */
.md-nav__link--active, .md-nav__link:hover { color: var(--hue-dark); }
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:hover { color: var(--hue-main); }

/* --- Sidebar nav icons: colorful badge chips, 5-hue cycle ---------------- */
.md-nav--primary .md-nav__list > .md-nav__item > .md-nav__link > svg {
  width: 15px; height: 15px;
  padding: 4px;
  box-sizing: content-box;
  border-radius: 7px;
  margin-right: 4px;
  fill: currentColor;
  transition: transform 0.15s ease;
}
.md-nav--primary .md-nav__list > .md-nav__item:hover > .md-nav__link > svg { transform: scale(1.12) rotate(-4deg); }
.md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+1) > .md-nav__link > svg { color: var(--gv-a); background: color-mix(in srgb, var(--gv-a) 15%, transparent); }
.md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+2) > .md-nav__link > svg { color: var(--gv-b); background: color-mix(in srgb, var(--gv-b) 15%, transparent); }
.md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+3) > .md-nav__link > svg { color: var(--gv-c); background: color-mix(in srgb, var(--gv-c) 15%, transparent); }
.md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+4) > .md-nav__link > svg { color: var(--gv-d); background: color-mix(in srgb, var(--gv-d) 15%, transparent); }
.md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+5) > .md-nav__link > svg { color: var(--gv-e); background: color-mix(in srgb, var(--gv-e) 15%, transparent); }
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+1) > .md-nav__link > svg { background: color-mix(in srgb, var(--gv-a) 28%, transparent); }
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+2) > .md-nav__link > svg { background: color-mix(in srgb, var(--gv-b) 28%, transparent); }
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+3) > .md-nav__link > svg { background: color-mix(in srgb, var(--gv-c) 28%, transparent); }
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+4) > .md-nav__link > svg { background: color-mix(in srgb, var(--gv-d) 28%, transparent); }
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__list > .md-nav__item:nth-child(5n+5) > .md-nav__link > svg { background: color-mix(in srgb, var(--gv-e) 28%, transparent); }

/* --- Tables: runbook zebra cards ----------------------------------------- */
.md-typeset table:not([class]) {
  font-size: 0.68rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color);
}
[data-md-color-scheme="default"] .md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: #fcfbf9;
}

/* --- Blockquotes: tinted callout cards ----------------------------------- */
.md-typeset blockquote {
  border-left: 4px solid var(--hue-main);
  background: var(--hue-tint);
  color: var(--hue-dark);
  border-radius: 0 10px 10px 0;
  padding: 0.55rem 0.9rem;
  font-size: 0.68rem;
}
[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: color-mix(in srgb, var(--hue-main) 12%, transparent);
  color: var(--md-default-fg-color);
}

/* --- Screenshot placeholders (built by extra.js) -------------------------- */
.screenshot-placeholder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  border: 1.5px dashed var(--md-default-fg-color--lighter);
  border-radius: 0.5rem;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  padding: 0.7rem 1rem;
  margin: 0.4rem 0 1rem;
}
.screenshot-placeholder .screenshot-file {
  margin-left: auto;
  background: var(--gv-b-tint);
  border: 1px solid var(--gv-b-line);
  color: var(--gv-b-dark);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 0.58rem;
  white-space: nowrap;
}
.md-content img { border: 1px solid var(--md-default-fg-color--lightest); border-radius: 10px; }

/* --- NEEDS TRANSLATION chip (built by extra.js) ---------------------------- */
.gv-needs-tr {
  display: inline-block;
  background: var(--gv-d-tint);
  border: 1px solid var(--gv-d-line);
  color: var(--gv-d-dark);
  border-radius: 99px;
  padding: 0 0.6em;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
[data-md-color-scheme="slate"] .gv-needs-tr {
  background: color-mix(in srgb, var(--gv-d) 15%, transparent);
  color: #ddd0f9;
}

/* --- Homepage hero + chapter card grid ------------------------------------ */
.gv-kicker {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gv-a-dark);
}
[data-md-color-scheme="slate"] .gv-kicker { color: var(--gv-a); }
.gv-status {
  display: inline-block;
  padding: 3px 12px;
  background: var(--gv-b-tint);
  border: 1px solid var(--gv-b-line);
  color: var(--gv-b-dark);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 99px;
}
.gv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin: 1.1rem 0 1.75rem;
}
/* md_in_html wraps the anchors in a single <p>; remove it from layout so
   each .gv-card becomes a direct grid item again. */
.gv-grid > p { display: contents; }
.gv-card {
  display: block;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid var(--card-hue, var(--gv-a));
  border-radius: 12px;
  background: var(--md-default-bg-color);
  padding: 18px 20px 20px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
[data-md-color-scheme="default"] .gv-card { background: #ffffff; }
[data-md-color-scheme="slate"] .gv-card { box-shadow: none; }
.gv-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-hue, var(--gv-a)) 35%, var(--md-default-fg-color--lightest));
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--card-hue, var(--gv-a)) 25%, transparent);
}
.gv-card .gv-card-emoji {
  display: flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  margin-bottom: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-hue, var(--gv-a)) 14%, transparent);
  color: var(--card-hue, var(--gv-a));
  transition: transform 0.15s ease, background 0.15s ease;
}
.gv-card .gv-card-emoji .twemoji { width: 20px; height: 20px; }
.gv-card .gv-card-emoji svg { fill: currentColor; }
.gv-card:hover .gv-card-emoji {
  transform: scale(1.1) rotate(-4deg);
  background: color-mix(in srgb, var(--card-hue, var(--gv-a)) 22%, transparent);
}
[data-md-color-scheme="slate"] .gv-card .gv-card-emoji {
  background: color-mix(in srgb, var(--card-hue, var(--gv-a)) 25%, transparent);
}
.gv-card .gv-card-title {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.1px;
  color: #1c1917;
  margin-bottom: 4px;
}
[data-md-color-scheme="slate"] .gv-card .gv-card-title { color: var(--md-default-fg-color); }
.gv-card .gv-card-desc {
  display: block;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
}
.gv-card.hue-a { --card-hue: var(--gv-a); }
.gv-card.hue-b { --card-hue: var(--gv-b); }
.gv-card.hue-c { --card-hue: var(--gv-c); }
.gv-card.hue-d { --card-hue: var(--gv-d); }
.gv-card.hue-e { --card-hue: var(--gv-e); }

/* Hide the footer copyright row entirely — "Made with Material for MkDocs"
   has no config toggle, so it's suppressed at the CSS layer. */
.md-footer-meta__inner {
  display: none;
}