/* ═══════════════════════════════════════════════
   SR-Forge — Documentation Theme
   Gold identity, restrained: gold marks IDENTITY
   (links, h1, active nav, brand) — structure
   (tables, admonitions, dividers, scrollbars) uses
   neutrals so semantic colors and whitespace can do
   their job. Dark (slate) is default; light
   (default) is a first-class citizen.
   ═══════════════════════════════════════════════ */

/* ── Shared palette ────────────────────────── */

:root {
  --sf-gold: #c9a84c;
  --sf-gold-light: #d4ba6a;
  --sf-gold-dark: #8a6d1f;          /* WCAG-safe on white */
  --sf-gold-dim: rgba(201, 168, 76, 0.15);
  --sf-gold-glow: rgba(201, 168, 76, 0.3);

  --sf-charcoal: #1a1a1a;
  --sf-graphite: #2d2d2d;
  --sf-slate: #6b7280;
  --sf-muted: #9ca3af;
}

/* ── Dark scheme (slate) — default ─────────── */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #c9a84c;
  --md-primary-fg-color--light: #d4ba6a;
  --md-primary-fg-color--dark: #b8953e;
  --md-primary-bg-color: #e6e1d8;
  --md-accent-fg-color: #d4ba6a;
  --md-default-bg-color: #0d1117;
  --md-default-fg-color: #e6e1d8;
  --md-default-fg-color--light: #b0a99e;
  --md-default-fg-color--lighter: #8a8279;
  --md-default-fg-color--lightest: rgba(230, 225, 216, 0.12);
  --md-code-bg-color: #161b22;
  --md-code-fg-color: #e6e1d8;
  --md-typeset-color: #e6e1d8;
  --md-typeset-a-color: var(--sf-gold);
  --md-footer-bg-color: #010409;
  --md-footer-bg-color--dark: #010409;

  /* structural neutrals (borders, dividers) */
  --sf-border: rgba(230, 225, 216, 0.12);
  --sf-surface: #161b22;
  --sf-thead-bg: #1a1f27;
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background: #0d1117;
  border-bottom: 1px solid var(--sf-border);
}

[data-md-color-scheme="slate"] .md-header {
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-search__input {
  background: #161b22;
}

/* ── Light scheme (default) ────────────────── */

[data-md-color-scheme="default"] {
  /* Dark header + gold accents on white content */
  --md-primary-fg-color: #20242c;
  --md-primary-fg-color--light: #2d3340;
  --md-primary-fg-color--dark: #171a20;
  --md-primary-bg-color: #e6e1d8;
  --md-accent-fg-color: var(--sf-gold-dark);
  --md-typeset-a-color: var(--sf-gold-dark);

  --sf-border: rgba(26, 26, 26, 0.12);
  --sf-surface: #f6f4ef;
  --sf-thead-bg: #efece4;
}

[data-md-color-scheme="default"] .md-typeset a {
  color: var(--sf-gold-dark);
}

[data-md-color-scheme="default"] .sf-brand-label {
  color: var(--sf-gold-dark);
}

/* ── Header title ──────────────────────────── */

.md-header__title {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Always show site name, never swap to page title */
.md-header__topic {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

.md-header__topic:nth-child(2) {
  display: none;
}

/* ── Sidebar ───────────────────────────────── */

.md-sidebar__scrollwrap {
  scrollbar-width: thin;
  scrollbar-color: var(--sf-border) transparent;
}

.md-nav__link:hover {
  color: var(--md-typeset-a-color);
}

.md-nav__link--active {
  color: var(--md-typeset-a-color) !important;
  font-weight: 600;
}

/* ── Content typography ────────────────────── */

.md-typeset {
  line-height: 1.7;                 /* breathing room for prose */
}

.md-typeset p {
  margin-bottom: 1.1em;
}

.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
  border-bottom: 2px solid var(--sf-gold);
  padding-bottom: 0.4em;
  margin-bottom: 1em;
}

/* Headings hug their own section: lots of air above, little below */
.md-typeset h2 {
  font-weight: 700;
  font-size: 1.6em;
  letter-spacing: -0.01em;
  margin-top: 2.8em;
  margin-bottom: 0.6em;
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.md-typeset a:hover {
  border-bottom-color: currentColor;
}

/* ── Code blocks ───────────────────────────── */

.highlight {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--sf-border);
}

pre code {
  border-radius: 10px;
  font-size: 0.82em;
  line-height: 1.7;
}

.md-typeset code {
  padding: 0.15em 0.45em;
  border-radius: 5px;
  font-size: 0.82em;
}

.md-clipboard {
  transition: all 0.2s ease;
  color: var(--sf-muted);
}

.md-clipboard:hover {
  color: var(--md-typeset-a-color);
  transform: scale(1.1);
}

/* ── Tables — size to content, neutral chrome ─ */

.md-typeset table:not([class]) {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--sf-border);
}

.md-typeset table:not([class]) thead {
  background: var(--sf-thead-bg);
}

.md-typeset table:not([class]) th {
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 0.78em;
  padding: 0.8em 1em;
  border-bottom: 1px solid var(--sf-border);
}

.md-typeset table:not([class]) td {
  padding: 0.7em 1em;
  border-bottom: 1px solid var(--sf-border);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--sf-gold-dim);
}

/* ── Blockquotes (Golden Rules) ────────────── */
/* The ONE structural element that keeps gold — used
   sparingly in the docs for "golden rule" callouts. */

blockquote {
  border-left: 3px solid var(--sf-gold);
  background: rgba(201, 168, 76, 0.08);
  border-radius: 0 8px 8px 0;
  padding: 1.2em 1.5em;
  margin: 2em 0;
  font-style: italic;
}

blockquote p {
  margin: 0;
}

/* ── Admonitions — let Material's semantic
     colors (blue/orange/green) differentiate ── */

.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
}

/* ── Section dividers — quiet, not striped ─── */

.md-typeset hr {
  border: none;
  height: 1px;
  background: var(--sf-border);
  margin: 2.4em 0;
}

/* ── Scrollbar ─────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--sf-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sf-muted);
}

/* ── Footer ────────────────────────────────── */

.md-footer {
  border-top: 1px solid var(--sf-border);
}

/* ── Search ────────────────────────────────── */

.md-search__input {
  border-radius: 8px;
}

/* ── Content animation ─────────────────────── */

.md-content article {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Back-to-top button ────────────────────── */

.md-top {
  border: 1px solid var(--sf-border);
}

/* ── List spacing ──────────────────────────── */

.md-typeset ul li {
  margin: 0.4em 0;
}

.md-typeset ul ul {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/* ── Keyboard keys ─────────────────────────── */

kbd {
  background: var(--md-code-bg-color);
  border: 1px solid var(--sf-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-family: var(--md-code-font-family);
  font-size: 0.82em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ── Monospace ligatures ───────────────────── */

.md-typeset code,
.md-typeset pre {
  font-variant-ligatures: common-ligatures;
}

/* ── Selection highlight ───────────────────── */

::selection {
  background: var(--sf-gold-glow);
}

/* ── Progress bar (instant loading) ────────── */

.md-progress {
  background: var(--sf-gold) !important;
}

/* ── Brand label ───────────────────────────── */

.sf-brand-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sf-gold);
  margin-bottom: 0.5em;
}

/* ── IDE support section ───────────────────── */

.sf-ide-section {
  margin: 1.5em 0;
}

.sf-ide-features {
  margin: 1em 0 1.5em;
}

.sf-ide-links {
  margin: 1.5em 0;
}

.sf-ide-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.8em 1.2em;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: 10px;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sf-ide-link:hover {
  border-color: var(--sf-gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.sf-ide-link-icon {
  font-size: 1.6em;
  color: var(--md-default-fg-color);
}

.sf-ide-link-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.sf-ide-link-text strong {
  color: var(--md-default-fg-color);
  font-size: 0.9em;
  border-bottom: none !important;
}

.sf-ide-link-text small {
  color: var(--sf-muted);
  font-size: 0.78em;
}

.sf-ide-widget {
  margin: 1.5em 0;
  max-width: 420px;
}

/* ── Mermaid click-to-enlarge lightbox ─────── */

.mermaid {
  cursor: zoom-in;
}

.mermaid-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(13, 17, 23, 0.94);
  display: none;
  z-index: 9999;
  cursor: grab;
  overflow: hidden;
}

.mermaid-lightbox--open {
  display: block;
}

.mermaid-lightbox--dragging {
  cursor: grabbing;
}

.mermaid-lightbox__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90vw;
  height: 90vh;
  margin-left: -45vw;
  margin-top: -45vh;
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mermaid-lightbox__stage svg {
  pointer-events: auto;
  background: var(--md-default-bg-color);
  border-radius: 6px;
  padding: 1rem;
}

.mermaid-lightbox::after {
  content: 'esc · scroll to zoom · drag to pan';
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  color: var(--sf-muted);
  font-size: 0.75rem;
  font-family: var(--md-code-font, monospace);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--sf-slate);
  border-radius: 4px;
  letter-spacing: 0.05em;
  pointer-events: none;
}