/* ============================================================================
   blanny.org — default design system · Direction B: dark refined, luminous teal.
   Canvas near-black · hairline-border elevation (never shadows) · one accent.
   The org DOCUMENTATION theme — every docs site inherits it. Products keep their own brand.
   ============================================================================ */

:root {
  --aura-teal:      #2AD6C6;
  --aura-teal-ink:  #7FEDE1;
  --aura-teal-dim:  #1AA093;
  --aura-glow:      rgba(42,214,198,.16);
  --aura-remote:    #918AF6;   /* frontier / remote models */
  --aura-ok:        #4FC585;
  --aura-amber:     #E8B252;
  --aura-alert:     #F0837A;
  --aura-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- Dark brand (default) : override Material slate ---- */
[data-md-color-scheme="slate"] {
  --md-hue: 220;
  --md-default-bg-color:        #07090C;
  --md-default-bg-color--light: #0C1014;
  --md-default-fg-color:        #E8EDF1;
  --md-default-fg-color--light: #AEB7C1;
  --md-default-fg-color--lighter:#7C8794;
  --md-default-fg-color--lightest:#2A333C;
  --md-primary-fg-color:        #07090C;
  --md-primary-bg-color:        #E8EDF1;
  --md-accent-fg-color:         var(--aura-teal);
  --md-typeset-a-color:         var(--aura-teal);
  --md-code-bg-color:           #0C1014;
  --md-code-fg-color:           #D6E7E4;
  --aura-surface:  #0C1014;
  --aura-surface2: #12181E;
  --aura-line:     #1A222A;
  --aura-line-2:   #26313B;
  --aura-ink:      #E8EDF1;
  --aura-mut:      #8A97A3;
  --aura-board:    #090C10;
}

/* ---- Light brand : keep the teal, refine the ground ---- */
[data-md-color-scheme="default"] {
  --md-default-bg-color:        #F5F7F8;
  --md-default-fg-color:        #12181D;
  --md-accent-fg-color:         var(--aura-teal-dim);
  --md-typeset-a-color:         var(--aura-teal-dim);
  --aura-surface:  #FFFFFF;
  --aura-surface2: #FBFCFC;
  --aura-line:     #E1E6E9;
  --aura-line-2:   #CDD6DA;
  --aura-ink:      #12181D;
  --aura-mut:      #5C6B76;
  --aura-board:    #090C10;   /* diagrams stay dark in both themes (schematic) */
  --aura-teal:     var(--aura-teal-dim);
}

body { -webkit-font-smoothing: antialiased; }

/* ambient aura glow behind the header/top of page */
.md-container::before {
  content:""; position:fixed; inset:0 0 auto 0; height:420px; pointer-events:none; z-index:0;
  background: radial-gradient(680px 300px at 18% -40%, var(--aura-glow), transparent 70%),
              radial-gradient(560px 280px at 92% -30%, rgba(145,138,246,.10), transparent 70%);
}

/* ---- header : hairline, no shadow ---- */
.md-header {
  background: color-mix(in oklab, var(--md-default-bg-color) 78%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: none !important;
  border-bottom: 1px solid var(--aura-line);
}
.md-header__title { font-weight: 600; letter-spacing:.02em; }
.md-tabs { background: transparent; border-bottom:1px solid var(--aura-line); }

/* ---- typography ---- */
.md-typeset { font-size:.82rem; line-height:1.68; }
.md-typeset h1 { font-weight:680; letter-spacing:-.022em; line-height:1.05; }
.md-typeset h2 { font-weight:660; letter-spacing:-.014em; margin-top:2.6em; }
.md-typeset h3 { font-weight:620; letter-spacing:-.006em; }
.md-typeset a { text-underline-offset:.2em; }
.md-typeset code { border:1px solid var(--aura-line); border-radius:5px;
  background: color-mix(in oklab, var(--aura-teal) 8%, transparent); color: var(--aura-teal-ink); }
[data-md-color-scheme="default"] .md-typeset code { color: var(--aura-teal-dim); }

/* mono kicker */
.kicker { font-family:var(--aura-mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--aura-teal); font-weight:500; display:inline-flex; align-items:center; gap:10px; }
.kicker::before { content:""; width:22px; height:1px; background:var(--aura-teal); opacity:.6; }

/* ============================================================================
   HERO
   ============================================================================ */
.hero { position:relative; z-index:1; padding: 2.2rem 0 1.2rem; border-bottom:1px solid var(--aura-line);
  margin-bottom:2.4rem; }
.hero .wordmark { font-family:var(--aura-mono); letter-spacing:.42em; font-size:.72rem; color:var(--aura-mut);
  text-transform:uppercase; margin:1.1rem 0 1.2rem; }
.hero h1 { font-size: clamp(2rem,5.4vw,3.3rem) !important; margin:.1em 0 .35em !important; max-width:17ch; }
.hero .lede { font-size: clamp(1.02rem,2.2vw,1.24rem); color:var(--aura-ink); max-width:56ch; line-height:1.5; }
.hero .lede b { color:var(--aura-teal-ink); font-weight:600; }
[data-md-color-scheme="default"] .hero .lede b { color:var(--aura-teal-dim); }
.hero .meta { display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-top:1.5rem;
  font-family:var(--aura-mono); font-size:.68rem; color:var(--aura-mut); letter-spacing:.02em; }
.hero .meta span { display:inline-flex; align-items:center; gap:.5rem; }
.hero .meta .d { width:6px; height:6px; border-radius:50%; background:var(--aura-teal);
  box-shadow:0 0 8px var(--aura-teal); }

/* ============================================================================
   TENETS
   ============================================================================ */
.tenets { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;
  background:var(--aura-line); border:1px solid var(--aura-line); border-radius:12px; overflow:hidden; margin:1.4rem 0; }
.tenet { background:var(--aura-surface); padding:1.15rem 1.25rem; }
.tenet .n { font-family:var(--aura-mono); font-size:.66rem; color:var(--aura-teal); letter-spacing:.12em; }
.tenet h4 { margin:.5rem 0 .35rem; font-size:.94rem; font-weight:620; color:var(--aura-ink); }
.tenet p { margin:0; font-size:.78rem; color:var(--aura-mut); line-height:1.55; }

/* ============================================================================
   BOARD — the schematic panel that hosts D3 diagrams (dark in both themes)
   ============================================================================ */
.board { background:var(--aura-board); border:1px solid var(--aura-line-2); border-radius:14px;
  padding:1.4rem 1.3rem; margin:1.2rem 0 1.6rem; position:relative; overflow:hidden; }
.board::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
  background: radial-gradient(420px 200px at 12% 0%, var(--aura-glow), transparent 60%); opacity:.7; }
.board-cap { font-family:var(--aura-mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  color:#63707C; margin-bottom:1.1rem; position:relative; z-index:2; }
.board svg { display:block; width:100%; height:auto; overflow:visible; position:relative; z-index:2; }
.board .legend { display:flex; flex-wrap:wrap; gap:.9rem 1.2rem; margin-top:1.1rem; position:relative; z-index:2;
  font-family:var(--aura-mono); font-size:.62rem; color:#63707C; }
.board .legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:.4rem;
  vertical-align:-1px; }

/* D3 node/edge base styling (JS sets classes) */
.n-box { fill:#0F151B; stroke:#26313B; }
.n-box.local  { stroke:var(--aura-teal); }
.n-box.remote { stroke:var(--aura-remote); }
.n-box.human  { stroke:var(--aura-amber); }
.n-box.ok     { stroke:var(--aura-ok); }
.n-title { fill:#EAF1F3; font-family:"Geist", var(--aura-mono); font-weight:600; }
.n-kick  { fill:#63707C; font-family:var(--aura-mono); text-transform:uppercase; letter-spacing:.1em; }
.n-sub   { fill:#8A97A3; font-family:"Geist"; }
.edge    { stroke:#33414C; fill:none; }
.edge-lbl{ fill:#63707C; font-family:var(--aura-mono); }
.band-lbl{ fill:#63707C; font-family:var(--aura-mono); text-transform:uppercase; letter-spacing:.12em; }
.band-box{ fill:none; stroke:#1E2833; }

/* ============================================================================
   TABLES · pills · steps
   ============================================================================ */
.md-typeset table:not([class]) { border:1px solid var(--aura-line); border-radius:12px; overflow:hidden;
  font-size:.76rem; background:var(--aura-surface); box-shadow:none; }
.md-typeset table:not([class]) th { background:var(--aura-surface2); font-family:var(--aura-mono);
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--aura-mut); font-weight:500;
  border-bottom:1px solid var(--aura-line); }
.md-typeset table:not([class]) td { border-top:1px solid var(--aura-line); }

.pill { font-family:var(--aura-mono); font-size:.6rem; letter-spacing:.03em; padding:.14em .6em; border-radius:20px;
  font-weight:600; white-space:nowrap; }
.pill.live { color:var(--aura-ok);    background:color-mix(in oklab,var(--aura-ok) 16%,transparent); }
.pill.build{ color:var(--aura-amber); background:color-mix(in oklab,var(--aura-amber) 16%,transparent); }
.pill.keep { color:var(--aura-teal);  background:color-mix(in oklab,var(--aura-teal) 14%,transparent); }
.pill.drop { color:var(--aura-alert); background:color-mix(in oklab,var(--aura-alert) 14%,transparent); }

.md-typeset ol.steps { counter-reset:s; list-style:none; margin:1.1rem 0; padding:0; }
.md-typeset ol.steps > li { counter-increment:s; position:relative; padding-left:2.6rem; margin-bottom:.9rem; }
.md-typeset ol.steps > li::before { content:counter(s); position:absolute; left:0; top:-.1rem; width:1.7rem;
  height:1.7rem; border-radius:7px; background:color-mix(in oklab,var(--aura-teal) 14%,transparent);
  color:var(--aura-teal); font-family:var(--aura-mono); font-weight:700; font-size:.82rem; display:grid;
  place-items:center; border:1px solid color-mix(in oklab,var(--aura-teal) 30%,transparent); }

/* footer refine */
.md-footer { background: var(--aura-board); border-top:1px solid var(--aura-line); }
.md-footer-meta { background: transparent; }

/* content max width a touch tighter for reading */
.md-grid { max-width: 62rem; }

/* D3 flow animation for the loop edges */
@keyframes flowdash { to { stroke-dashoffset: -24; } }