/* ============================================================
   DocSpace — Design System · Forge Style
   Platform Engineering IDP · dark-first, terminal-native.
   White-label: --brand is the single mark lever.
   Full spec: docs/design-system-forge-style.md
   ============================================================ */

/* ---- 1. Tokens ------------------------------------------------ */
:root {
  /* Typography */
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif; /* editorial prose only */

  /* Type scale — Forge (14px base UI, 16px prose) */
  --fs-xs:   0.75rem;    /* 12px — metadata, timestamps, labels */
  --fs-sm:   0.8125rem;  /* 13px — inputs, tables, controls */
  --fs-base: 0.875rem;   /* 14px — UI default */
  --fs-md:   1rem;       /* 16px — prose body */
  --fs-lg:   1.125rem;   /* 18px — card/widget headings */
  --fs-xl:   1.375rem;   /* 22px — subsection headings */
  --fs-2xl:  1.75rem;    /* 28px — section headings */
  --fs-3xl:  2.25rem;    /* 36px — page title */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-body:  1.6;  /* UI and prose */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;

  --measure: 72ch; /* doc/prose max-width */

  /* --- Backgrounds (elevation ladder: base < surface < raised < overlay; inset is below base) --- */
  --c-bg:        #0A0E14; /* bg-base    — page background */
  --c-surface:   #11161F; /* bg-surface — cards, panels, navbar */
  --c-surface-2: #1A212C; /* bg-raised  — hover states, table headers, chips */
  --c-overlay:   #212A38; /* bg-overlay — modals, dropdowns */
  --c-inset:     #070A0F; /* bg-inset   — inputs and code blocks (darker than base) */

  /* --- Borders --- */
  --c-border:        #1C2430; /* border-subtle  — dividers, card outlines */
  --c-border-strong: #26303F; /* border-default — standard component borders */
  --border-strong:   #384456; /* border-strong  — emphasized borders */

  /* --- Text --- */
  --c-text:       #E8EDF4; /* text-primary   — 15.2:1 on bg-base */
  --c-text-soft:  #9BA8B9; /* text-secondary — 7.6:1  */
  --c-text-faint: #5E6B7E; /* text-muted     — metadata only */
  --text-inverse: #0A0E14; /* text on accent/filled backgrounds */

  /* === BRAND (white-label) — change only --brand to reskin ===
     When overriding --brand tenants should also override:
       --c-accent-hover, --accent-press, --c-accent-soft,
       --c-accent-glow,  --accent-border
     to values appropriate for their hue (see docs/design-system-forge-style.md).
  */
  --brand:          #2CE0A9;  /* Circuit Green — Forge primary accent */
  --c-accent:       var(--brand);
  --c-accent-hover: color-mix(in srgb, var(--brand) 78%, #fff); /* brightens on hover (dark mode) */
  --accent-press:   color-mix(in srgb, var(--brand) 88%, #000); /* slight darken on press */
  --c-accent-soft:  color-mix(in srgb, var(--brand) 12%, transparent);
  --c-accent-glow:  color-mix(in srgb, var(--brand) 18%, transparent); /* focus ring fill */
  --accent-border:  color-mix(in srgb, var(--brand) 35%, transparent);

  /* --- AI token — Neural Violet — RESERVED exclusively for AI-generated content ---
     Rule: if an element is violet, it was produced or suggested by AI.
     Never use --ai for non-AI UI. See docs/design-system-forge-style.md §AI surfaces.
  */
  --ai:        #8B7CFF;
  --ai-hover:  #A79BFF;
  --ai-subtle: rgba(139, 124, 255, 0.12);
  --ai-border: rgba(139, 124, 255, 0.40);

  /* --- Status (system health, deploys, pipelines — NEVER reuse as chart series colors) --- */
  --status-success:        #3FB950;
  --status-success-bg:     rgba(63, 185, 80,  0.12);
  --status-success-border: rgba(63, 185, 80,  0.35);

  --status-warning:        #D29922;
  --status-warning-bg:     rgba(210, 153, 34, 0.12);
  --status-warning-border: rgba(210, 153, 34, 0.35);

  --status-danger:         #F85149;
  --status-danger-bg:      rgba(248, 81,  73, 0.12);
  --status-danger-border:  rgba(248, 81,  73, 0.35);

  --status-info:           #58A6FF;
  --status-info-bg:        rgba(88,  166, 255, 0.12);
  --status-info-border:    rgba(88,  166, 255, 0.35);

  --status-neutral:        #9BA8B9;
  --status-neutral-bg:     rgba(155, 168, 185, 0.10);
  --status-neutral-border: rgba(155, 168, 185, 0.25);

  /* --- Dataviz — categorical palette, fixed order, CVD-validated ---
     chart-1 is always the primary series. Never reorder when filtering.
     Status colors (green/amber/red) are NEVER used as series here.
  */
  --chart-1: #0D9488;
  --chart-2: #6366F1;
  --chart-3: #DB2777;
  --chart-4: #D97706;
  --chart-5: #0284C7;
  --chart-6: #65A30D;

  /* --- Spacing (base 4px) --- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 5rem;     /* 80px */

  /* --- Border radii (DocSpace names, Forge absolute values) ---
     chips/kbd → xs (4)  ·  buttons/inputs → sm (8)
     cards/panels → md (12)  ·  modals → lg (16)
  */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-4xl:  28px;
  --radius-pill: 999px;

  /* --- Shadows (dark-mode: elevation by border + soft shadow, not dense black) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.22), 0 8px 16px rgba(0, 0, 0, 0.12);

  /* Glow effects — reserved for primary action hover and AI focus */
  --shadow-accent: 0 0 0 1px var(--accent-border), 0 0 24px color-mix(in srgb, var(--brand) 15%, transparent);
  --glow-accent:   var(--shadow-accent);
  --glow-ai:       0 0 0 1px var(--ai-border), 0 0 24px rgba(139, 124, 255, 0.18);

  /* no-op kept for backward compat with existing box-shadow compositions in web/src */
  --edge: 0 0 0 0 transparent;

  /* --- Sidebar (its own surface layer) --- */
  --sidebar:                   var(--c-surface);
  --sidebar-foreground:        var(--c-text);
  --sidebar-accent:            var(--c-surface-2);
  --sidebar-accent-foreground: var(--c-text);
  --sidebar-border:            var(--c-border);
  --sidebar-ring:              var(--c-accent);

  /* --- Wiki / knowledge graph --- */
  --c-wiki:         var(--ai);        /* violet: knowledge links feel AI-adjacent */
  --c-wiki-soft:    var(--ai-subtle);
  --c-wiki-broken:  #fb923c;          /* orange: broken link = needs fixing */

  --c-graph-node:       var(--c-accent);
  --c-graph-node-hover: var(--ai);
  --c-graph-edge:       var(--c-border-strong);

  /* Constellation gradient — violet (low degree) → red-orange (high degree) */
  --c-graph-lo:   #8B5CF6;
  --c-graph-hi:   #F97316;
  /* Translucent blue edge mesh for constellation view */
  --c-graph-constellation-edge: #93C5FD;

  --c-selection: color-mix(in srgb, var(--brand) 20%, transparent);

  /* --- Motion --- */
  --ease:     cubic-bezier(0.25, 0.6, 0.3, 1);
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;

  accent-color: var(--c-accent);
  color-scheme: dark;
}

/* Dark is now the default. This block is an explicit idempotent override
   for theme toggles that set [data-theme="dark"] on <html>. */
[data-theme="dark"] {
  color-scheme: dark;
}


/* ---- Tema CLARO estilo Claude (toggle ◐ → data-theme="light") ---------------
   Identidad Claude: superficies crema/marfil cálidas, acento terracota.
   Decisión 2026-08-16: light = identidad Claude, dark = identidad Forge.
   Solo cambia el modo light. El dark Forge (Circuit Green / #0A0E14) queda intacto. */
[data-theme="light"] {
  /* White-label: --brand se sobrescribe SOLO aquí, no en :root.
     Decisión 2026-08-16: light = identidad Claude (terracota), dark = identidad Forge (Circuit Green). */
  --brand: #C96442; /* terracota Claude — single mark lever en light mode */

  /* Superficies (escalera crema/marfil cálida, estilo claude.ai) */
  --c-bg:        #F0EEE6; /* crema base — fondo principal (claude.ai) */
  --c-surface:   #FAF9F5; /* marfil — cards, panels, navbar */
  --c-surface-2: #E8E6DC; /* hover, table headers, chips */
  --c-overlay:   #FFFFFF; /* modals/dropdowns */
  --c-inset:     #E5E2D9; /* inputs y code blocks (un paso más hundido que surface-2) */

  /* Bordes (cálidos, nunca grises azulados) */
  --c-border:        #E2DFD5;
  --c-border-strong: #D1CDC0;
  --border-strong:   #B8B3A4;

  /* Texto (gris cálido tipo Claude) */
  --c-text:       #3D3929; /* primario — ~10:1 sobre crema */
  --c-text-soft:  #6E6A5E;
  --c-text-faint: #9C978A;
  --text-inverse: #FFFFFF;

  /* Acento terracota — hover OSCURECE en light (en dark aclara) */
  --c-accent-hover: color-mix(in srgb, var(--brand) 82%, #000);
  --accent-press:   color-mix(in srgb, var(--brand) 68%, #000);
  --c-accent-soft:  color-mix(in srgb, var(--brand) 13%, transparent);
  --c-accent-glow:  color-mix(in srgb, var(--brand) 20%, transparent);
  --accent-border:  color-mix(in srgb, var(--brand) 40%, transparent);

  /* Status light; warning oscurecido un paso para AA ≥ 4.5:1 sobre crema #F0EEE6 */
  --status-success:        #1A7F37;
  --status-success-bg:     rgba(26, 127, 55, 0.10);
  --status-success-border: rgba(26, 127, 55, 0.35);
  --status-warning:        #8A5C00; /* oscurecido desde #9A6700 → ~5.0:1 sobre #F0EEE6 */
  --status-warning-bg:     rgba(138, 92, 0, 0.10);
  --status-warning-border: rgba(138, 92, 0, 0.35);
  --status-danger:         #CF222E;
  --status-danger-bg:      rgba(207, 34, 46, 0.08);
  --status-danger-border:  rgba(207, 34, 46, 0.35);
  --status-info:           #0969DA;
  --status-info-bg:        rgba(9, 105, 218, 0.08);
  --status-info-border:    rgba(9, 105, 218, 0.35);
  --status-neutral:        #57606A;
  --status-neutral-bg:     rgba(87, 96, 106, 0.08);
  --status-neutral-border: rgba(87, 96, 106, 0.25);

  /* IA (violeta legible en claro) */
  --ai:        #6C5CE7;
  --ai-hover:  #5A4BD1;
  --ai-subtle: rgba(108, 92, 231, 0.10);
  --ai-border: rgba(108, 92, 231, 0.35);

  /* Sombras cálidas (rgba(60,55,40,…) en vez del azulado rgba(16,24,40,…)) */
  --shadow-sm: 0 1px 2px rgba(60, 55, 40, 0.07);
  --shadow-md: 0 4px 10px rgba(60, 55, 40, 0.11);
  --shadow-lg: 0 12px 28px rgba(60, 55, 40, 0.15);
  --shadow-xl: 0 20px 40px rgba(60, 55, 40, 0.19);
  --shadow-accent: 0 0 0 1px var(--accent-border), 0 0 20px color-mix(in srgb, var(--brand) 14%, transparent);
  --glow-accent:   var(--shadow-accent);

  --c-selection: color-mix(in srgb, var(--brand) 20%, transparent);
  --c-wiki-broken: #d97706;

  color-scheme: light;
}


/* ---- 2. Reset / base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "calt" 1;
}
::selection { background: var(--c-selection); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: var(--radius-pill);
  border: 3px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-text-faint); }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ---- 3. Tipografía editorial --------------------------------- */
.prose {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  color: var(--c-text);
  max-width: var(--measure);
}
.prose .h1, .display {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.prose .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.prose .quote {
  font-style: italic;
  border-left: 3px solid var(--c-accent);
  padding-left: var(--space-4);
  color: var(--c-text-soft);
}
.prose .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--c-inset);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xs);
  padding: var(--space-3) var(--space-4);
  white-space: pre-wrap;
  color: var(--c-accent);
}
.text-soft { color: var(--c-text-soft); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-faint);
  font-weight: var(--weight-medium);
}


/* ---- 4. Wiki links ------------------------------------------- */
.wikilink {
  color: var(--c-wiki);
  background: var(--c-wiki-soft);
  border-radius: var(--radius-xs);
  padding: 0 4px;
  cursor: pointer;
  text-decoration: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background var(--dur-fast) var(--ease);
}
.wikilink:hover { background: color-mix(in srgb, var(--c-wiki) 22%, transparent); }
.wikilink.broken { color: var(--c-wiki-broken); border-bottom: 1px dashed currentColor; background: transparent; }
.tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--c-accent);
  background: var(--c-accent-soft);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}


/* ---- 5. Botones ---------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-2);
  color: var(--c-text);
  border-radius: var(--radius-sm);
  height: 36px;
  padding: 0 var(--space-4);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:hover  { background: var(--c-overlay); border-color: var(--border-strong); }
.btn:active { opacity: 0.85; }
.btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--text-inverse);
}
.btn-primary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  box-shadow: var(--shadow-accent);
}
.btn-primary:active { background: var(--accent-press); box-shadow: none; }

.btn-ghost { border-color: transparent; background: transparent; color: var(--c-text-soft); }
.btn-ghost:hover  { background: var(--c-surface-2); color: var(--c-text); border-color: transparent; }

.btn-danger {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border-color: var(--status-danger-border);
}
.btn-danger:hover { background: color-mix(in srgb, var(--status-danger) 20%, transparent); }

.btn-ai {
  background: var(--ai-subtle);
  color: var(--ai-hover);
  border-color: var(--ai-border);
}
.btn-ai:hover { box-shadow: var(--glow-ai); }

.btn-sm { height: 28px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
.btn-lg { height: 44px; padding: 0 var(--space-5); font-size: var(--fs-base); border-radius: var(--radius-md); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: none; background: transparent; color: var(--c-text-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--spring);
}
.icon-btn:hover  { background: var(--c-surface-2); color: var(--c-text); }
.icon-btn:active { transform: scale(0.9); }
.icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--c-accent); }
.icon-btn.active { background: var(--c-accent-soft); color: var(--c-accent); }


/* ---- 6. Navegación / árbol ----------------------------------- */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.nav-item.active {
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: var(--weight-medium);
}
.nav-item.active::before {
  content: "";
  position: absolute; left: -2px; top: 7px; bottom: 7px;
  width: 3px; border-radius: var(--radius-pill);
  background: var(--c-accent);
}


/* ---- 7. Tarjetas / paneles ----------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm), var(--edge);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:is(.interactive):hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md), var(--edge);
}
.divider { height: 1px; background: var(--c-border); border: 0; margin: var(--space-5) 0; }

.empty {
  text-align: center;
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--radius-md);
}
.empty .empty-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: grid; place-items: center;
  font-size: 28px;
  margin: 0 auto var(--space-4);
  box-shadow: var(--edge);
}
.empty h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--c-text);
}
.empty p { margin: 0 auto; color: var(--c-text-soft); font-size: var(--fs-sm); max-width: 38ch; }


/* ---- 8. Space Member List ------------------------------------ */
.space-member-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  max-width: 800px;
}

.member-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.member-list-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--weight-bold);
  color: var(--c-text);
}

.member-list-table {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.member-list-row {
  display: grid;
  grid-template-columns: 1fr 1fr 140px 40px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-border);
  transition: background-color var(--dur-fast) var(--ease);
}

.member-list-row:last-child {
  border-bottom: none;
}

.member-list-row:not(.member-list-row--header):hover {
  background-color: var(--c-surface-2);
}

.member-list-row--header {
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--c-text-faint);
  background-color: var(--c-surface-2);
}

.member-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.member-cell--email {
  color: var(--c-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-cell--role .btn {
  margin: 0;
}

.member-cell--actions {
  justify-content: center;
}

.member-cell--name {
  overflow: hidden;
}

.member-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Member Avatar ─────────────────────────────────────────── */
.member-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background-color: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  user-select: none;
}

/* ── Member Badge (self indicator) ─────────────────────────── */
.member-badge {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  color: var(--c-accent);
  background-color: var(--c-accent-soft);
  border-radius: var(--radius-pill);
  padding: 1px var(--space-2);
}

.member-remove-btn:hover:not(:disabled) {
  color: var(--status-danger);
}

/* ── Visually Hidden (a11y) ─────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---- 9. Backlinks -------------------------------------------- */
.backlinks { font-family: var(--font-sans); }
.backlink {
  display: block;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.backlink:hover {
  border-color: var(--c-border-strong);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.backlink .title   { font-weight: var(--weight-medium); font-size: var(--fs-sm); }
.backlink .snippet { color: var(--c-text-soft); font-size: var(--fs-xs); margin-top: 2px; }


/* ---- 9. Utilidades ------------------------------------------- */
.stack > * + * { margin-top: var(--space-4); }
.row    { display: flex; align-items: center; gap: var(--space-3); }
.spacer { flex: 1; }
.muted  { color: var(--c-text-soft); }
.center { display: grid; place-items: center; }


/* ---- La marca tiñe la interfaz (primario/secundario del space) --------------
   Los fondos llevan un matiz sutil del color primario (2-5%) para que el
   white-label se sienta en toda la superficie, no solo en los acentos.
   Los botones primarios usan gradiente primario→secundario (--brand-2,
   definido por App desde spaces.branding; cae a --brand si no hay). */
:root {
  --brand-2: var(--brand);
  --c-bg:        color-mix(in srgb, #0A0E14 96%, var(--brand));
  --c-surface:   color-mix(in srgb, #11161F 97%, var(--brand));
  --c-surface-2: color-mix(in srgb, #1A212C 96%, var(--brand));
  --c-overlay:   color-mix(in srgb, #212A38 96%, var(--brand));
}
[data-theme="light"] {
  --c-bg:        color-mix(in srgb, #F0EEE6 96%, var(--brand));
  --c-surface:   color-mix(in srgb, #FAF9F5 98%, var(--brand));
  --c-surface-2: color-mix(in srgb, #E8E6DC 96%, var(--brand));
  --c-overlay:   color-mix(in srgb, #FFFFFF 98%, var(--brand));
}