/* CSMate per-panel identity (Layer 1.6) — var()-ONLY, no hex literals (§13).
 * Accent = nebula-magenta (Mantis §5.3); ambient = csmate-deep-space tint (§4.1).
 * Keyed on body.panel-csmate so the var override wins on the body element + descendants
 * regardless of link order. MUST NOT touch --focus-ring (stays universal plasma-cyan, §10.4). */
body.panel-csmate {
  --accent-primary: var(--nebula-magenta);
  --deep-space: var(--csmate-deep-space);
}

/* Callout / note boxes (readability fix 2026-07-02): the templates previously used
 * light hex backgrounds (#fff8e1 / #f1f8e9 …) which, on the dark base with light body
 * text, rendered light-on-light = invisible. These dark-theme-native callouts use a dark
 * panel background + a semantic left-accent + --starlight text so the content is legible.
 * var()-only per §13. Semantics: note=amber (pending/heads-up), ok=green (success),
 * warn=rust (error/danger), info=cyan. */
body.panel-csmate .callout {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 1rem;
  border-radius: 6px;
  background: var(--panel-grey);
  border: 1px solid var(--gunmetal);
  border-left: 4px solid var(--muted-comm);
  color: var(--starlight);
}
body.panel-csmate .callout small,
body.panel-csmate .callout strong { color: var(--starlight); }
body.panel-csmate .callout--note { border-left-color: var(--quill-amber); }
body.panel-csmate .callout--ok   { border-left-color: var(--groot-bioluminescent); }
body.panel-csmate .callout--warn { border-left-color: var(--rocket-rust); }
body.panel-csmate .callout--info { border-left-color: var(--plasma-cyan); }

/* Customer-detail navigability (2026-07-02, operator-approved): the page is grouped
 * into 5 labeled groups with a STICKY JUMP-BAR — everything stays visible, nothing
 * hidden behind clicks (dummy-proof rule). var()-only per §13.
 * top:3px clears the fixed .identity-strip (height 3px, z-index 100). */
body.panel-csmate .jump-bar {
  position: sticky;
  top: 3px;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  margin: 0 0 1.25rem;
  background: var(--deep-space);
  border: 1px solid var(--gunmetal);
  border-radius: 6px;
}
body.panel-csmate .jump-bar a {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--gunmetal);
  border-radius: 999px;
  background: var(--panel-grey);
  color: var(--starlight);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}
body.panel-csmate .jump-bar a:hover { border-color: var(--accent-primary); }

/* Anchor targets land below the sticky bar, not under it. */
body.panel-csmate .detail-group { scroll-margin-top: 4.5rem; }
body.panel-csmate .detail-group > .group-heading {
  border-bottom: 2px solid var(--accent-primary);
  padding-bottom: 0.3rem;
  margin: 2rem 0 1rem;
}

/* Section card — replaces the old per-section inline border styles. */
body.panel-csmate .card {
  border: 1px solid var(--gunmetal);
  background: var(--panel-grey);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}