/* ── Brand vars — added 2026-05-01 per cloudtaser-io-website#239 brand refresh.
   Mirrors PR #240 contract. Used for any inline mark/lockup; primary
   site logo is configured via mkdocs theme.logo (cloudtaser-logo.svg). */
:root {
  --brand-bg-dark:    #0a0a0a;
  --brand-bg-light:   #fafaf7;
  --brand-ink-dark:   #f0ede4;
  --brand-ink-light:  #0a0a0a;
  --brand-term-live:  #4ade80;
  --brand-term-warn:  #fbbf24;
  --brand-term-error: #f87171;
}

/* Inline lockup pattern (drop-in for body content if needed):
   <a class="logo" href="/"><svg class="logo-mark" aria-hidden="true" focusable="false"><use href="/cloudtaser-mark.svg#mark"/></svg><span class="logo-word">cloudtaser</span></a> */
.logo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo-mark {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  color: currentColor;
  flex-shrink: 0;
}
.logo-word { color: currentColor; }

/* Material theme header logo: ensure currentColor inheritance so the
   mark stays brand-correct across light/slate palettes. The SVG is
   monochrome geometry — no stroke, no transform per brand guide. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.4rem;
  width: auto;
}

/* ── Nav section headers (Installation, Configuration, Security, etc.) ── */
/* Make them visually distinct from clickable items */
label.md-nav__link {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--md-default-fg-color--light) !important;
  margin-top: 0.6rem !important;
  opacity: 0.7;
}

/* Highlight Journey and Ultimate Protection in the nav sidebar */
.md-nav__link[href*="journey"],
.md-nav__link[href*="ultimate-protection"] {
  font-weight: 700;
  color: var(--md-accent-fg-color) !important;
}

/* ── Sovereign Deployment Guide — promoted in primary nav only ── */
/* The deployment guide is the load-bearing decision document. We promote
   it visually above journey / ultimate-protection so a first-time visitor
   doesn't miss it. Scoped to .md-nav--primary so the rule does NOT match
   the right-hand TOC (.md-nav--secondary) which also contains anchor
   links with "sovereign-deployment-guide" in their href when the guide
   page itself is open. */
.md-nav--primary .md-nav__link[href*="sovereign-deployment-guide"] {
  font-weight: 800 !important;
  color: var(--md-primary-fg-color) !important;
}

/* ── Persona Selection Dialog ── */
.ct-persona-dialog {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s;
}

.ct-persona-dialog--visible {
  opacity: 1;
}

.ct-persona-dialog--hidden {
  opacity: 0;
  pointer-events: none;
}

.ct-persona-dialog__card {
  background: var(--md-default-bg-color);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.ct-persona-dialog__card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
}

.ct-persona-dialog__card p {
  margin: 0 0 0.5rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.9rem;
}

.ct-persona-dialog__subtitle {
  font-weight: 600;
  margin-top: 1rem !important;
  color: var(--md-default-fg-color) !important;
}

.ct-persona-dialog__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.ct-persona-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
  color: var(--md-default-fg-color);
  font-family: inherit;
}

.ct-persona-btn:hover {
  border-color: var(--md-accent-fg-color);
  background: rgba(var(--md-accent-fg-color--rgb, 0, 188, 212), 0.05);
}

/* ── Persona 8-bit pixel art icons (static) ── */
.ct-persona-btn__anim {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  position: relative;
}

.ct-pixel {
  width: 4px;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}

/* ── COIN (10x10 grid, 4px per pixel = 40x40) ── */
.ct-pixel-coin {
  box-shadow:
    12px 0 #daa520, 16px 0 #daa520, 20px 0 #daa520, 24px 0 #daa520,
    8px 4px #ffd700, 12px 4px #ffe44d, 16px 4px #ffe44d, 20px 4px #ffe44d, 24px 4px #ffd700, 28px 4px #daa520,
    4px 8px #ffd700, 8px 8px #ffe44d, 12px 8px #ffd700, 16px 8px #b8860b, 20px 8px #ffd700, 24px 8px #ffe44d, 28px 8px #daa520, 32px 8px #b8860b,
    4px 12px #ffd700, 8px 12px #ffe44d, 12px 12px #b8860b, 16px 12px #ffd700, 20px 12px #b8860b, 24px 12px #ffe44d, 28px 12px #daa520, 32px 12px #b8860b,
    4px 16px #ffd700, 8px 16px #ffe44d, 12px 16px #ffd700, 16px 16px #b8860b, 20px 16px #ffd700, 24px 16px #ffe44d, 28px 16px #daa520, 32px 16px #b8860b,
    4px 20px #ffd700, 8px 20px #ffe44d, 12px 20px #b8860b, 16px 20px #ffd700, 20px 20px #b8860b, 24px 20px #ffe44d, 28px 20px #daa520, 32px 20px #b8860b,
    4px 24px #ffd700, 8px 24px #ffe44d, 12px 24px #ffd700, 16px 24px #b8860b, 20px 24px #ffd700, 24px 24px #ffe44d, 28px 24px #daa520, 32px 24px #b8860b,
    8px 28px #ffd700, 12px 28px #ffe44d, 16px 28px #ffe44d, 20px 28px #ffe44d, 24px 28px #ffd700, 28px 28px #daa520,
    12px 32px #daa520, 16px 32px #daa520, 20px 32px #daa520, 24px 32px #daa520;
}

/* ── SCALES (10x10 grid, 4px per pixel = 40x40) ── */
.ct-pixel-scales {
  box-shadow:
    16px 0 #b388ff,
    8px 4px #9575cd, 12px 4px #b388ff, 16px 4px #ede7f6, 20px 4px #b388ff, 24px 4px #9575cd,
    4px 8px #7c4dff, 8px 8px #b388ff, 12px 8px #9575cd, 20px 8px #9575cd, 24px 8px #b388ff, 28px 8px #7c4dff,
    4px 12px #651fff, 8px 12px #7c4dff, 16px 12px #ede7f6, 24px 12px #7c4dff, 28px 12px #651fff,
    16px 16px #b388ff,
    16px 20px #9575cd,
    16px 24px #7c4dff,
    8px 28px #651fff, 12px 28px #7c4dff, 16px 28px #b388ff, 20px 28px #7c4dff, 24px 28px #651fff,
    4px 32px #4527a0, 8px 32px #651fff, 12px 32px #7c4dff, 16px 32px #7c4dff, 20px 32px #7c4dff, 24px 32px #651fff, 28px 32px #4527a0;
}

/* ── DUCK (10x10 grid, 4px per pixel = 40x40) ── */
.ct-pixel-duck {
  box-shadow:
    16px 0 #ffeb3b, 20px 0 #fff176,
    12px 4px #ffeb3b, 16px 4px #fff9c4, 20px 4px #fff176, 24px 4px #fdd835,
    8px 8px #ff9800, 12px 8px #ff9800, 16px 8px #fff9c4, 20px 8px #212121, 24px 8px #fff176, 28px 8px #fdd835,
    8px 12px #f57c00, 12px 12px #ff9800, 16px 12px #ffeb3b, 20px 12px #fff176, 24px 12px #fdd835,
    16px 16px #ffeb3b, 20px 16px #fdd835,
    8px 20px #00e5ff, 12px 20px #00bcd4, 16px 20px #ffeb3b, 20px 20px #fdd835, 24px 20px #00bcd4, 28px 20px #00e5ff,
    4px 24px #00acc1, 8px 24px #00bcd4, 12px 24px #00e5ff, 16px 24px #fff176, 20px 24px #ffeb3b, 24px 24px #00e5ff, 28px 24px #00bcd4, 32px 24px #00acc1,
    4px 28px #00838f, 8px 28px #00acc1, 12px 28px #00bcd4, 16px 28px #00e5ff, 20px 28px #00bcd4, 24px 28px #00bcd4, 28px 28px #00acc1, 32px 28px #00838f,
    8px 32px #ff9800, 12px 32px #f57c00, 24px 32px #f57c00, 28px 32px #ff9800;
}

/* Switcher button icon */
.ct-switcher-icon {
  display: inline-block;
  font-size: 1rem;
  vertical-align: middle;
  margin-right: 0.3rem;
}

.ct-persona-btn__title {
  font-weight: 700;
  font-size: 0.9rem;
  display: block;
}

.ct-persona-btn__desc {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  display: block;
}

.ct-persona-skip {
  background: none;
  border: none;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.5rem;
  font-family: inherit;
  text-decoration: underline;
}

.ct-persona-skip:hover {
  color: var(--md-default-fg-color);
}

/* ── Persona Switcher Button (bottom-left corner) ── */
.ct-persona-switcher {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 100;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  color: var(--md-accent-fg-color);
  font-size: 0.75rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ct-persona-switcher:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* ── Persona-based nav hiding ── */
/* Nav items are hidden/shown by persona.js using .ct-nav-hidden class */
.ct-nav-hidden {
  display: none !important;
}