/* ============================================================================
   BINDEX DESIGN SYSTEM · bindex.css
   Single-file stylesheet for the Bindex site (Emergent-ready).
   Load AFTER the font <link> (see README). Everything is a CSS variable +
   a small set of .bx-* component classes. No build step required.
   ----------------------------------------------------------------------------
   PRINCIPLES
   1. Ink is the primary UI color. Green (#00C674) is a *signal* accent — links,
      focus, the logo, one hero highlight. Never a button fill on white.
   2. Sora = display/headings. IBM Plex Sans = body/UI. IBM Plex Mono = code,
      endpoints, labels, stats. Sentence case everywhere.
   3. Whitespace and hairline borders carry hierarchy, not heavy shadows.
   ========================================================================== */

:root {
  /* ---- Brand green (signal green from the logo) ---- */
  --green-900:#0A3D26; --green-700:#00804C; --green-600:#00C674; /* brand accent */
  --green-500:#2BD98B; --green-400:#57E3A4; --green-200:#B2F2D3;
  --green-100:#DCF9EA; --green-50:#F2FAF5;

  /* ---- Ink & neutrals ---- */
  --ink-900:#17131F; /* brand ink — headings, primary actions */
  --ink-950:#101014; /* inverse panels, code */
  --ink-700:#322B40; --ink-500:#555062; --ink-400:#767185;
  --ink-300:#A5A1B2; --ink-200:#D2CFDA; --ink-100:#E8E6EE; --ink-50:#F3F2F7;
  --white:#FFFFFF;

  /* ---- Status (brand green is NOT a status color) ---- */
  --success-600:#14805E; --success-100:#DCF3EA;
  --warning-600:#A15C07; --warning-100:#FBEDD5;
  --danger-600:#C2334D;  --danger-100:#FBE2E7;
  --info-600:#2D6BFF;    --info-100:#E1EAFF;

  /* ---- Semantic aliases ---- */
  --surface-page:var(--white);
  --surface-subtle:var(--green-50);
  --surface-card:var(--white);
  --surface-inverse:var(--ink-950);
  --surface-code:var(--ink-950);
  --text-heading:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-400);
  --text-inverse:#F5F4F0;
  --text-on-primary:var(--white);
  --text-link:var(--green-700);
  --text-link-hover:var(--green-900);
  --border-default:var(--ink-100);
  --border-strong:var(--ink-200);
  --border-focus:var(--green-600);
  --accent-primary:var(--ink-900);
  --accent-primary-hover:var(--ink-700);
  --accent-primary-active:#000000;
  --accent-brand:var(--green-600);
  --accent-soft:var(--green-100);

  /* ---- Type ---- */
  --font-display:'Sora',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-serif:'IBM Plex Serif',Georgia,serif; /* editorial accents only; NOT the logo */

  --text-xs:12px;  --lh-xs:16px;
  --text-sm:13px;  --lh-sm:20px;
  --text-md:15px;  --lh-md:24px;
  --text-lg:18px;  --lh-lg:28px;
  --text-xl:24px;  --lh-xl:32px;
  --text-2xl:32px; --lh-2xl:40px;
  --text-3xl:44px; --lh-3xl:52px;
  --text-4xl:60px; --lh-4xl:66px;

  --tracking-tight:-0.015em; --tracking-mono:-0.02em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* ---- Space / radius / container ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:999px;
  --container-max:1120px;

  /* ---- Effects ---- */
  --shadow-sm:0 1px 2px rgba(23,19,31,.06);
  --shadow-md:0 1px 3px rgba(23,19,31,.08),0 8px 28px rgba(23,19,31,.06);
  --shadow-lg:0 4px 12px rgba(23,19,31,.10),0 20px 48px rgba(23,19,31,.12);
  --shadow-focus:0 0 0 3px var(--green-200);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --duration-fast:120ms; --duration-med:200ms;
}

/* ============================ BASE ============================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font-body); font-size:var(--text-md);
  line-height:var(--lh-md); color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--text-heading);
  letter-spacing:var(--tracking-tight); margin:0; font-weight:var(--weight-semibold);}
h1{font-size:var(--text-4xl); line-height:var(--lh-4xl); font-weight:var(--weight-bold);}
h2{font-size:var(--text-3xl); line-height:var(--lh-3xl);}
h3{font-size:var(--text-2xl); line-height:var(--lh-2xl);}
h4{font-size:var(--text-xl); line-height:var(--lh-xl);}
h5{font-size:var(--text-lg); line-height:var(--lh-lg);}
p{margin:0 0 var(--space-4); max-width:66ch; text-wrap:pretty;}
a{color:var(--text-link); text-decoration:none; transition:color var(--duration-fast) var(--ease-out);}
a:hover{color:var(--text-link-hover);}
small{font-size:var(--text-sm); color:var(--text-muted);}
strong{font-weight:var(--weight-semibold); color:var(--text-heading);}
hr{border:0; border-top:1px solid var(--border-default); margin:var(--space-8) 0;}
code,pre,kbd{font-family:var(--font-mono); letter-spacing:var(--tracking-mono);}
::selection{background:var(--green-200);}
:focus-visible{outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-sm);}

/* ============================ LAYOUT ============================ */
.bx-container{max-width:var(--container-max); margin-inline:auto; padding-inline:var(--space-6);}
.bx-section{padding-block:var(--space-24);}
.bx-stack{display:flex; flex-direction:column; gap:var(--space-4);}
.bx-row{display:flex; align-items:center; gap:var(--space-4);}
.bx-grid{display:grid; gap:var(--space-6);}
.bx-grid-2{grid-template-columns:repeat(2,1fr);}
.bx-grid-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:820px){.bx-grid-2,.bx-grid-3{grid-template-columns:1fr;}}

/* Editorial helpers */
.bx-kicker{font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:.18em; text-transform:uppercase; color:var(--green-700);}
.bx-eyebrow{font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted);}
.bx-lead{font-size:var(--text-lg); line-height:var(--lh-lg); color:var(--text-body);}
.bx-muted{color:var(--text-muted);}
.bx-accent{color:var(--green-700);}

/* ============================ BUTTONS ============================ */
.bx-btn{
  --_bg:var(--accent-primary); --_fg:var(--text-on-primary); --_bd:var(--accent-primary);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-size:var(--text-md); font-weight:var(--weight-semibold);
  line-height:1; padding:12px 20px; border-radius:var(--radius-md);
  background:var(--_bg); color:var(--_fg); border:1px solid var(--_bd);
  cursor:pointer; transition:background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  white-space:nowrap;
}
.bx-btn:hover{background:var(--accent-primary-hover); border-color:var(--accent-primary-hover);}
.bx-btn:active{transform:translateY(1px);}
.bx-btn--secondary{--_bg:transparent; --_fg:var(--ink-900); --_bd:var(--border-strong);}
.bx-btn--secondary:hover{--_bg:var(--ink-50); background:var(--ink-50); border-color:var(--border-strong);}
.bx-btn--ghost{--_bg:transparent; --_fg:var(--ink-700); --_bd:transparent;}
.bx-btn--ghost:hover{background:var(--ink-50); border-color:transparent;}
/* Accent button: reserved for ONE primary CTA, and only on dark or subtle surfaces */
.bx-btn--accent{--_bg:var(--green-600); --_fg:var(--ink-950); --_bd:var(--green-600);}
.bx-btn--accent:hover{--_bg:var(--green-500); border-color:var(--green-500);}
.bx-btn--sm{padding:8px 14px; font-size:var(--text-sm);}
.bx-btn--lg{padding:15px 26px; font-size:var(--text-lg);}

/* ============================ CARDS ============================ */
.bx-card{
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); padding:var(--space-6);
  transition:box-shadow var(--duration-med) var(--ease-out), border-color var(--duration-med) var(--ease-out);
}
.bx-card--hover:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong);}
.bx-card--feature{padding:var(--space-8);}
.bx-card__icon{width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); background:var(--green-50); color:var(--green-700); margin-bottom:var(--space-4);}
.bx-card__title{font-family:var(--font-display); font-weight:var(--weight-semibold);
  font-size:var(--text-lg); color:var(--text-heading); margin-bottom:var(--space-2);}

/* ============================ BADGES / CHIPS ============================ */
.bx-badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:var(--text-xs); font-weight:var(--weight-medium); padding:3px 8px;
  border-radius:var(--radius-sm); background:var(--ink-50); color:var(--ink-700);
  border:1px solid var(--border-default);}
.bx-badge--brand{background:var(--green-50); color:var(--green-700); border-color:var(--green-200);}
.bx-badge--live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green-600);}
.bx-badge--success{background:var(--success-100); color:var(--success-600); border-color:transparent;}
.bx-badge--warning{background:var(--warning-100); color:var(--warning-600); border-color:transparent;}
.bx-badge--danger{background:var(--danger-100); color:var(--danger-600); border-color:transparent;}

/* ============================ STAT ============================ */
.bx-stat{display:flex; flex-direction:column; gap:var(--space-1);}
.bx-stat__value{font-family:var(--font-mono); font-size:var(--text-3xl);
  font-weight:var(--weight-semibold); color:var(--ink-900); letter-spacing:var(--tracking-mono);}
.bx-stat__value--brand{color:var(--green-700);}
.bx-stat__label{font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted);}

/* ============================ INPUTS ============================ */
.bx-input,.bx-textarea,.bx-select{
  width:100%; font-family:var(--font-body); font-size:var(--text-md); color:var(--text-heading);
  padding:11px 14px; background:var(--white); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); transition:border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.bx-input::placeholder,.bx-textarea::placeholder{color:var(--ink-300);}
.bx-input:focus,.bx-textarea:focus,.bx-select:focus{outline:none; border-color:var(--border-focus);
  box-shadow:var(--shadow-focus);}
.bx-label{display:block; font-size:var(--text-sm); font-weight:var(--weight-medium);
  color:var(--text-heading); margin-bottom:6px;}

/* ============================ CODE / ENDPOINT ============================ */
.bx-code{background:var(--surface-code); color:#E9E7F0; border-radius:var(--radius-lg);
  padding:var(--space-6); font-family:var(--font-mono); font-size:var(--text-sm);
  line-height:var(--lh-md); overflow:auto;}
.bx-code .tok-method{color:var(--green-400); font-weight:var(--weight-semibold);}
.bx-code .tok-key{color:#9DB2FF;}
.bx-code .tok-str{color:var(--green-400);}
.bx-code .tok-com{color:var(--ink-400);}
.bx-endpoint{display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-sm); background:var(--ink-50);
  border:1px solid var(--border-default); border-radius:var(--radius-sm); padding:4px 10px; color:var(--ink-700);}
.bx-endpoint .verb{color:var(--green-700); font-weight:var(--weight-semibold);}

/* ============================ NAV / FOOTER ============================ */
.bx-nav{display:flex; align-items:center; justify-content:space-between; gap:var(--space-8);
  padding:var(--space-4) 0; border-bottom:1px solid var(--border-default);}
.bx-nav__links{display:flex; gap:var(--space-6); align-items:center;}
.bx-nav__links a{color:var(--ink-700); font-size:var(--text-sm); font-weight:var(--weight-medium);}
.bx-nav__links a:hover{color:var(--ink-900);}
.bx-footer{background:var(--surface-inverse); color:var(--text-inverse); padding-block:var(--space-16);}
.bx-footer a{color:var(--ink-300);} .bx-footer a:hover{color:var(--white);}

/* ============================ INVERSE SURFACE ============================ */
.bx-inverse{background:var(--surface-inverse); color:var(--text-inverse);}
.bx-inverse h1,.bx-inverse h2,.bx-inverse h3,.bx-inverse h4{color:var(--white);}
.bx-inverse .bx-kicker{color:var(--green-400);}
.bx-inverse .bx-card{background:#17161C; border-color:#2A2833;}

/* ============================ UTILITIES ============================ */
.bx-hairline{border-top:1px solid var(--border-default);}
.bx-rule-brand{width:26px; height:2px; background:var(--green-600); border:0;}
.text-center{text-align:center;} .mono{font-family:var(--font-mono);}

/* ============================================================================
   V2 · DATA-PRODUCT COMPONENTS
   The pieces bindex.dev actually runs on: listings, provenance, freshness,
   tags, logo chips, the wire, sponsor slots, search, density mode, charts.
   ========================================================================== */

/* ---- Chart / data-viz tokens (on-brand; green stays meaningful) ---- */
:root{
  /* Sequential ink→green ramp for magnitude (e.g. coverage heat) */
  --seq-1:#E8E6EE; --seq-2:#B7D9C8; --seq-3:#7FCBA6; --seq-4:#3FC086; --seq-5:#00A862; --seq-6:#00713F;
  /* Categorical set for value-chain stages (distinct, muted, brand-adjacent) */
  --cat-newbiz:#00804C; --cat-underwriting:#2D6BFF; --cat-product:#8A6BF1;
  --cat-polamin:#C77D1A; --cat-distribution:#0FA6A0; --cat-claims:#C2334D; --cat-fraud:#555062;
  /* Density knobs — overridden inside .bx-dense */
  --card-pad:var(--space-6); --row-pad:var(--space-4); --list-gap:var(--space-4);
}

/* ---- Logo chip (tames mixed third-party logos) ---- */
.bx-logo-chip{width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-sm); overflow:hidden;}
.bx-logo-chip img{max-width:70%; max-height:70%; object-fit:contain; display:block;}
.bx-logo-chip--sm{width:32px; height:32px; border-radius:var(--radius-sm);}
.bx-logo-chip--fallback{font-family:var(--font-mono); font-weight:var(--weight-semibold);
  font-size:var(--text-sm); color:var(--ink-400); background:var(--ink-50);}

/* ---- Provenance chip (Bindex's core trust signal) ---- */
.bx-prov{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.02em; padding:2px 7px; border-radius:var(--radius-sm); border:1px solid transparent;}
.bx-prov::before{content:""; width:6px; height:6px; border-radius:2px;}
.bx-prov--sourced{background:var(--ink-50); color:var(--ink-500); border-color:var(--border-default);}
.bx-prov--sourced::before{background:var(--ink-300);}
.bx-prov--claimed{background:var(--green-50); color:var(--green-700); border-color:var(--green-200);}
.bx-prov--claimed::before{background:var(--green-600);}

/* ---- Freshness stamp ---- */
.bx-stamp{font-family:var(--font-mono); font-size:11px; color:var(--text-muted); white-space:nowrap;}
.bx-stamp--new{color:var(--green-700);}

/* ---- Tags / capability pills ---- */
.bx-tags{display:flex; flex-wrap:wrap; gap:6px;}
.bx-tag{font-family:var(--font-mono); font-size:11px; line-height:1; padding:4px 8px;
  border-radius:var(--radius-sm); background:var(--ink-50); color:var(--ink-500); border:1px solid var(--border-default);}
.bx-tag--region{background:transparent; color:var(--ink-400);}
.bx-tag--stage{background:var(--ink-50); color:var(--ink-700);}
.bx-tag--api{color:var(--ink-700); font-weight:var(--weight-medium);}
/* MCP is the differentiator — give it emphasis */
.bx-tag--mcp{background:var(--ink-950); color:var(--green-400); border-color:var(--ink-950); font-weight:var(--weight-semibold);}

/* ---- Listing card (the atomic unit of the index) ---- */
.bx-listing{display:flex; flex-direction:column; gap:var(--space-3); background:var(--surface-card);
  border:1px solid var(--border-default); border-radius:var(--radius-lg); padding:var(--card-pad);
  transition:box-shadow var(--duration-med) var(--ease-out), border-color var(--duration-med) var(--ease-out);}
.bx-listing:hover{box-shadow:var(--shadow-md); border-color:var(--border-strong);}
.bx-listing__head{display:flex; align-items:flex-start; gap:var(--space-3);}
.bx-listing__title{font-family:var(--font-display); font-weight:var(--weight-semibold);
  font-size:var(--text-lg); line-height:var(--lh-md); color:var(--text-heading);}
.bx-listing__title a{color:inherit;} .bx-listing__title a:hover{color:var(--green-700);}
.bx-listing__provider{font-size:var(--text-sm); color:var(--text-muted);}
.bx-listing__desc{font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--text-body); margin:0;}
.bx-listing__meta{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;}
.bx-listing__foot{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--border-default);}
.bx-listing__view{font-family:var(--font-mono); font-size:var(--text-sm); font-weight:var(--weight-medium);
  color:var(--green-700);}

/* ---- Wire row (news feed item) ---- */
.bx-wire{display:flex; gap:var(--space-3); padding:var(--row-pad) 0; border-top:1px solid var(--border-default);}
.bx-wire__body{display:flex; flex-direction:column; gap:4px; min-width:0;}
.bx-wire__kind{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--green-700);}
.bx-wire__kind .src{color:var(--text-muted);}
.bx-wire__title{font-family:var(--font-display); font-weight:var(--weight-semibold);
  font-size:var(--text-md); color:var(--text-heading);}
.bx-wire__title a{color:inherit;} .bx-wire__title a:hover{color:var(--green-700);}
.bx-wire__excerpt{font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--text-muted);}
.bx-wire__date{font-family:var(--font-mono); font-size:11px; color:var(--ink-300); white-space:nowrap; flex:none;}

/* ---- Search ---- */
.bx-search{display:flex; align-items:center; gap:var(--space-2); width:100%;
  background:var(--white); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:10px 12px;}
.bx-search:focus-within{border-color:var(--border-focus); box-shadow:var(--shadow-focus);}
.bx-search input{flex:1; border:0; outline:0; font-family:var(--font-body); font-size:var(--text-md); color:var(--text-heading); background:transparent;}
.bx-search input::placeholder{color:var(--ink-300);}
.bx-search__key{font-family:var(--font-mono); font-size:12px; color:var(--ink-400);
  background:var(--ink-50); border:1px solid var(--border-default); border-radius:var(--radius-sm); padding:1px 7px;}

/* ---- Sponsor slot (clearly non-editorial) ---- */
.bx-sponsor{border:1px dashed var(--border-strong); border-radius:var(--radius-lg); background:var(--ink-50);
  padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-2);}
.bx-sponsor__eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-300);}
.bx-sponsor__title{font-family:var(--font-display); font-weight:var(--weight-semibold); color:var(--ink-700);}

/* ---- Distribution / stage bar ---- */
.bx-distbar{display:flex; height:10px; border-radius:var(--radius-full); overflow:hidden; background:var(--ink-50);}
.bx-distbar > span{display:block; height:100%;}
.bx-distlegend{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-3);}
.bx-distlegend div{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-500);}
.bx-distlegend i{width:9px; height:9px; border-radius:2px; display:inline-block;}

/* ---- Density mode: wrap any index/table region in .bx-dense ---- */
.bx-dense{--card-pad:var(--space-4); --row-pad:var(--space-3); --list-gap:var(--space-3);}
.bx-dense .bx-listing__title{font-size:var(--text-md);}
.bx-dense .bx-listing{gap:var(--space-2);}