/*
 * BIAN Platform — Unified Design System v2
 * 20-year UX standard: WCAG AA on all text, both themes.
 *
 * Key fixes vs v1:
 *   - Accent colors in light mode are DARKER (not lighter) for contrast
 *   - No more rgba(255,255,255,X) hardcoded in components
 *   - Proper 4-level surface hierarchy
 *   - Text contrast ratios documented inline
 *   - Input / textarea / select unified
 *   - Semantic severity colors (error/warning/info/success)
 *   - Glass morphism only in dark mode
 */

/* ── 1. DESIGN TOKENS ────────────────────────────────────────────────────────── */

:root {
  /* Surfaces (dark default) */
  --s0: #0c1f1a;          /* page background */
  --s1: #142f28;          /* card — 1st level */
  --s2: #1c3e36;          /* card — 2nd level / input bg */
  --s3: #244e43;          /* hover / active state */

  /* Borders */
  --b-subtle:  rgba(255,255,255,.055);
  --b-default: rgba(255,255,255,.10);
  --b-strong:  rgba(255,255,255,.18);
  --b-focus:   #2d7c68;

  /* Text — contrast ratios on --s1 (#142f28) */
  --t1: #eef6f4;          /* 13.0:1 — headings */
  --t2: #c8d3e8;          /* 9.5:1  — body */
  --t3: #8899b4;          /* 5.0:1  — secondary ✅ WCAG AA */
  --t4: #546480;          /* 2.4:1  — muted / decorative only */

  /* Accent — Pine Green */
  --a1:  #5da291;         /* light tint  — dark mode text/icons */
  --a2:  #2d7c68;         /* base        — buttons */
  --a3:  #236051;         /* dark shade  — hover */
  --a-bg: rgba(45,124,104,.12);
  --a-border: rgba(45,124,104,.28);

  /* Forest Green / Success */
  --m1:  #7ab08f;
  --m2:  #2d7a52;
  --m3:  #24623f;
  --m-bg: rgba(45,122,82,.10);
  --m-border: rgba(45,122,82,.25);

  /* Amber / Warning */
  --w1:  #ebbc4f;
  --w2:  #d3841d;
  --w3:  #b86317;
  --w-bg: rgba(211,132,29,.10);
  --w-border: rgba(211,132,29,.25);

  /* Red / Error */
  --r1:  #f4a2a2;
  --r2:  #e14848;
  --r3:  #c83030;
  --r-bg: rgba(225,72,72,.10);
  --r-border: rgba(225,72,72,.25);

  /* Pink */
  --p1: #e5a8c7;
  --p2: #c8588b;
  --p3: #ab426d;
  --p-bg: rgba(200,88,139,.10);
  --p-border: rgba(200,88,139,.25);

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md:  0 4px 16px rgba(0,0,0,.4),  0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.25);
  --shadow-glow-a: 0 0 24px rgba(45,124,104,.25);
  --shadow-glow-m: 0 0 24px rgba(45,122,82,.2);

  /* Radius */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 300ms;
}

/* ── LIGHT THEME overrides ── */
[data-theme="light"] {
  --s0: #eef2f7;
  --s1: #ffffff;
  --s2: #f4f7fb;
  --s3: #e8edf5;

  --b-subtle:  rgba(10,20,50,.055);
  --b-default: rgba(10,20,50,.10);
  --b-strong:  rgba(10,20,50,.20);
  --b-focus:   #236051;

  /* CRITICAL: light text on light bg needs darker values */
  --t1: #0c1528;          /* 17:1 */
  --t2: #253047;          /* 10:1 */
  --t3: #4a5e7a;          /* 5.1:1 ✅ */
  --t4: #8096b0;          /* 3.2:1 — decorative only */

  /* Accent — must be DARKER in light mode */
  --a1:  #1a4a3e;         /* 5.2:1 on white ✅ */
  --a2:  #236051;         /* 4.9:1 on white ✅ */
  --a3:  #143b31;
  --a-bg: rgba(35,96,81,.08);
  --a-border: rgba(35,96,81,.22);

  /* Mint darker for light */
  --m1:  #1c4d33;         /* 5.5:1 on white ✅ */
  --m2:  #24623f;
  --m3:  #163f2a;
  --m-bg: rgba(36,98,63,.08);
  --m-border: rgba(36,98,63,.22);

  /* Amber darker */
  --w1:  #974616;
  --w2:  #b86317;
  --w3:  #793617;
  --w-bg: rgba(151,70,22,.07);
  --w-border: rgba(151,70,22,.22);

  /* Red darker */
  --r1:  #c83030;
  --r2:  #e14848;
  --r3:  #a52626;
  --r-bg: rgba(200,48,48,.07);
  --r-border: rgba(200,48,48,.22);

  /* Pink darker */
  --p1: #8f3256;
  --p2: #ab426d;
  --p3: #752b46;
  --p-bg: rgba(143,50,86,.07);
  --p-border: rgba(143,50,86,.22);

  --shadow-sm:  0 1px 3px rgba(10,20,50,.08), 0 1px 2px rgba(10,20,50,.05);
  --shadow-md:  0 4px 16px rgba(10,20,50,.10), 0 2px 4px rgba(10,20,50,.06);
  --shadow-lg:  0 12px 40px rgba(10,20,50,.14), 0 4px 12px rgba(10,20,50,.08);
  --shadow-glow-a: 0 0 24px rgba(35,96,81,.15);
  --shadow-glow-m: 0 0 24px rgba(36,98,63,.12);
}

/* ── 2. BASE RESET ────────────────────────────────────────────────────────────── */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  background: var(--s0);
  color: var(--t2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }
button { cursor: pointer; font-family: inherit; }

/* ── 3. NAVIGATION ────────────────────────────────────────────────────────────── */

.bds-nav {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in srgb, var(--s0) 85%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--b-subtle);
  transition: background var(--dur-base) var(--ease);
}
.bds-nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.bds-logo {
  display: flex; align-items: center; gap: .6rem;
}
.bds-logo-mark {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--a2);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 900; color: #fff;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.bds-logo-name { font-size: .88rem; font-weight: 800; color: var(--t1); }

.bds-nav-links {
  display: flex; align-items: center; gap: 1.25rem; list-style: none;
}
@media (max-width: 860px) { .bds-nav-links { display: none; } }
.bds-nav-links a {
  font-size: .82rem; font-weight: 600; color: var(--t3);
  padding: .3rem .5rem; border-radius: var(--r-xs);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.bds-nav-links a:hover { color: var(--t1); background: rgba(255,255,255,.05); }
[data-theme="light"] .bds-nav-links a:hover { background: rgba(10,20,50,.05); }
.bds-nav-links a.active { color: var(--a1); }
[data-theme="light"] .bds-nav-links a.active { color: var(--a2); }

.bds-nav-right { display: flex; align-items: center; gap: .5rem; }

.bds-theme-btn {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--b-default);
  color: var(--t3); font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease);
}
.bds-theme-btn:hover { background: var(--s2); color: var(--t1); border-color: var(--b-strong); }

/* ── 4. CARDS ────────────────────────────────────────────────────────────────── */

.bds-card {
  background: var(--s1);
  border: 1px solid var(--b-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.bds-card:hover {
  border-color: var(--b-strong);
  box-shadow: var(--shadow-md);
}
.bds-card--accent::before {
  content: ''; display: block;
  height: 3px; background: var(--a2);
}
.bds-card--mint::before   { content:''; display:block; height:3px; background: var(--m2); }
.bds-card--amber::before  { content:''; display:block; height:3px; background: var(--w2); }
.bds-card--red::before    { content:''; display:block; height:3px; background: var(--r2); }
.bds-card--pink::before   { content:''; display:block; height:3px; background: var(--p2); }

.bds-card-head {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--b-subtle);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.bds-card-title {
  font-size: .84rem; font-weight: 700; color: var(--t1);
  display: flex; align-items: center; gap: .4rem;
}
.bds-card-title i { color: var(--t4); font-size: .8rem; }
.bds-card-body { padding: 1.25rem; }

/* ── 5. BUTTONS ──────────────────────────────────────────────────────────────── */

.bds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: inherit; font-size: .84rem; font-weight: 700;
  border: none; border-radius: var(--r-sm); padding: .6rem 1.1rem;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap; line-height: 1;
}
.bds-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

.bds-btn--primary {
  background: var(--a2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(45,124,104,.25);
}
.bds-btn--primary:hover:not(:disabled) {
  background: var(--a3);
  box-shadow: 0 3px 10px rgba(45,124,104,.3);
}

.bds-btn--mint {
  background: var(--m2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(45,122,82,.2);
}
.bds-btn--mint:hover:not(:disabled) {
  background: var(--m3);
  box-shadow: 0 3px 10px rgba(45,122,82,.25);
}

.bds-btn--amber {
  background: var(--w2);
  color: #fff;
}
[data-theme="dark"] .bds-btn--amber { color: #1a0f00; }
.bds-btn--amber:hover:not(:disabled) { transform: translateY(-1px); }

.bds-btn--ghost {
  background: transparent;
  border: 1px solid var(--b-default);
  color: var(--t3);
}
.bds-btn--ghost:hover:not(:disabled) {
  background: var(--s2);
  color: var(--t1);
  border-color: var(--b-strong);
}

.bds-btn--danger {
  background: transparent;
  border: 1px solid var(--r-border);
  color: var(--r1);
}
.bds-btn--danger:hover:not(:disabled) { background: var(--r-bg); }

.bds-btn--full { width: 100%; }
.bds-btn--lg { font-size: .92rem; padding: .875rem 1.5rem; border-radius: var(--r-md); }
.bds-btn--sm { font-size: .74rem; padding: .32rem .75rem; }

/* ── 6. FORM CONTROLS ────────────────────────────────────────────────────────── */

.bds-input,
.bds-textarea,
.bds-select {
  width: 100%;
  background: var(--s2);
  border: 1.5px solid var(--b-default);
  border-radius: var(--r-sm);
  padding: .65rem .875rem;
  color: var(--t1);
  font-family: inherit;
  font-size: .85rem;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.bds-input::placeholder,
.bds-textarea::placeholder { color: var(--t4); }
.bds-input:focus,
.bds-textarea:focus,
.bds-select:focus {
  border-color: var(--b-focus);
  box-shadow: 0 0 0 3px rgba(45,124,104,.15);
}
[data-theme="light"] .bds-input:focus,
[data-theme="light"] .bds-textarea:focus { box-shadow: 0 0 0 3px rgba(35,96,81,.12); }

.bds-textarea { resize: vertical; min-height: 160px; font-family: var(--font-mono); font-size: .8rem; line-height: 1.7; }
.bds-select { cursor: pointer; }

.bds-code {
  background: var(--s2);
  border: 1px solid var(--b-default);
  border-radius: var(--r-md);
  overflow: hidden;
}
.bds-code-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem .875rem;
  border-bottom: 1px solid var(--b-subtle);
  background: var(--s0);
}
.bds-code-bar-label { font-size: .7rem; color: var(--t4); }
.bds-code pre {
  padding: .875rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  line-height: 1.7;
  color: var(--t2);
  overflow: auto;
  max-height: 380px;
  white-space: pre;
}

/* ── 7. BADGES & CHIPS ───────────────────────────────────────────────────────── */

.bds-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700;
  padding: .18rem .6rem; border-radius: var(--r-full);
  border: 1px solid; line-height: 1;
}
.bds-badge--accent  { color: var(--a1); background: var(--a-bg);  border-color: var(--a-border); }
.bds-badge--mint    { color: var(--m1); background: var(--m-bg);  border-color: var(--m-border); }
.bds-badge--amber   { color: var(--w1); background: var(--w-bg);  border-color: var(--w-border); }
.bds-badge--red     { color: var(--r1); background: var(--r-bg);  border-color: var(--r-border); }
.bds-badge--pink    { color: var(--p1); background: var(--p-bg);  border-color: var(--p-border); }
.bds-badge--neutral { color: var(--t3); background: var(--s2);    border-color: var(--b-default); }

/* Method badges */
.bds-method {
  display: inline-block;
  font-size: .65rem; font-weight: 800;
  padding: .12rem .5rem; border-radius: var(--r-xs);
  font-family: var(--font-mono);
  min-width: 46px; text-align: center;
}
.bds-method--GET    { background: var(--m-bg);  color: var(--m1); border: 1px solid var(--m-border); }
.bds-method--POST   { background: var(--a-bg);  color: var(--a1); border: 1px solid var(--a-border); }
.bds-method--PUT    { background: var(--w-bg);  color: var(--w1); border: 1px solid var(--w-border); }
.bds-method--PATCH  { background: var(--w-bg);  color: var(--w1); border: 1px solid var(--w-border); }
.bds-method--DELETE { background: var(--r-bg);  color: var(--r1); border: 1px solid var(--r-border); }

/* ── 8. SEVERITY ITEMS ───────────────────────────────────────────────────────── */

.bds-sev-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .75rem; border-radius: var(--r-sm);
  font-size: .78rem; line-height: 1.55;
}
.bds-sev-item--error   { background: var(--r-bg); border: 1px solid var(--r-border); }
.bds-sev-item--warning { background: var(--w-bg); border: 1px solid var(--w-border); }
.bds-sev-item--info    { background: var(--a-bg); border: 1px solid var(--a-border); }
.bds-sev-item--success { background: var(--m-bg); border: 1px solid var(--m-border); }

.bds-sev-badge {
  font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: .1rem .4rem; border-radius: var(--r-xs); flex-shrink: 0; margin-top:.1rem;
}
.bds-sev-badge--error   { background: var(--r-bg);  color: var(--r1); }
.bds-sev-badge--warning { background: var(--w-bg);  color: var(--w1); }
.bds-sev-badge--info    { background: var(--a-bg);  color: var(--a1); }
.bds-sev-badge--success { background: var(--m-bg);  color: var(--m1); }

/* ── 9. TABS ─────────────────────────────────────────────────────────────────── */

.bds-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--b-subtle);
  margin-bottom: 1rem;
}
.bds-tab {
  padding: .55rem .9rem;
  font-size: .78rem; font-weight: 700;
  color: var(--t4); background: none;
  border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.bds-tab:hover { color: var(--t2); }
.bds-tab.active { color: var(--a1); border-bottom-color: var(--a1); }
[data-theme="light"] .bds-tab.active { color: var(--a2); border-bottom-color: var(--a2); }
.bds-tab-panel { display: none; }
.bds-tab-panel.active { display: block; }

/* ── 10. PROGRESS & SCORES ───────────────────────────────────────────────────── */

.bds-progress-wrap { margin-bottom: .875rem; }
.bds-progress-label {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--t3); margin-bottom: .35rem;
}
.bds-progress-track {
  height: 7px; border-radius: var(--r-full);
  background: var(--s3); overflow: hidden;
}
.bds-progress-fill {
  height: 100%; border-radius: var(--r-full);
  background: var(--m2);
  transition: width .6s var(--ease);
}
.bds-progress-fill--accent { background: var(--a2); }
.bds-progress-fill--amber  { background: var(--w2); }
.bds-progress-fill--red    { background: var(--r2); }

/* Score ring helper */
.bds-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.bds-ring svg { transform: rotate(-90deg); }
.bds-ring circle.track { fill: none; stroke: var(--s3); stroke-width: 7; }
.bds-ring circle.fill  { fill: none; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 188; transition: stroke-dashoffset .8s var(--ease); }
.bds-ring-val {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.bds-ring-num  { font-size: 1.2rem; font-weight: 900; line-height: 1; color: var(--t1); }
.bds-ring-lbl  { font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--t4); }

/* ── 11. STAT BOXES ──────────────────────────────────────────────────────────── */

.bds-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .6rem;
  margin-bottom: 1rem;
}
.bds-stat {
  padding: .75rem .875rem; border-radius: var(--r-md);
  background: var(--s2); border: 1px solid var(--b-subtle);
  text-align: center;
}
.bds-stat-val { font-size: 1.4rem; font-weight: 900; color: var(--t1); line-height: 1; }
.bds-stat-lbl { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--t4); margin-top: .2rem; }

/* ── 12. TABLE ───────────────────────────────────────────────────────────────── */

.bds-table-wrap { overflow-x: auto; }
.bds-table-wrap::-webkit-scrollbar { height: 4px; width: 4px; }
.bds-table-wrap::-webkit-scrollbar-thumb { background: var(--b-strong); border-radius: var(--r-full); }

.bds-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.bds-table th {
  text-align: left;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--t4); padding: .45rem .75rem;
  border-bottom: 1px solid var(--b-default);
}
.bds-table td {
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--b-subtle);
  color: var(--t3);
}
.bds-table td:first-child { color: var(--t2); font-weight: 600; }
.bds-table tr:last-child td { border-bottom: none; }
.bds-table tr:hover td { background: var(--s2); }

/* ── 13. SPINNER / LOADING ───────────────────────────────────────────────────── */

.bds-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2.5px solid var(--b-default);
  border-top-color: var(--m2);
  border-radius: 50%;
  animation: bds-spin .7s linear infinite;
}
.bds-spinner--accent { border-top-color: var(--a2); }
.bds-spinner--amber  { border-top-color: var(--w2); }
.bds-spinner--pink   { border-top-color: var(--p2); }
.bds-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes bds-spin { to { transform: rotate(360deg); } }

/* ── 14. PLACEHOLDER ─────────────────────────────────────────────────────────── */

.bds-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 1.5rem; text-align: center; gap: .75rem;
  min-height: 240px;
}
.bds-placeholder-icon { font-size: 2rem; color: var(--t4); opacity: .5; }
.bds-placeholder p { font-size: .82rem; color: var(--t3); max-width: 260px; line-height: 1.65; }

/* ── 15. EYEBROW / SECTION LABELS ───────────────────────────────────────────── */

.bds-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  padding: .26rem .75rem; border-radius: var(--r-full); border: 1px solid;
}
.bds-eyebrow--accent { color: var(--a1); background: var(--a-bg); border-color: var(--a-border); }
.bds-eyebrow--mint   { color: var(--m1); background: var(--m-bg); border-color: var(--m-border); }
.bds-eyebrow--amber  { color: var(--w1); background: var(--w-bg); border-color: var(--w-border); }
.bds-eyebrow--pink   { color: var(--p1); background: var(--p-bg); border-color: var(--p-border); }
[data-theme="light"] .bds-eyebrow--accent { color: var(--a2); }
[data-theme="light"] .bds-eyebrow--mint   { color: var(--m2); }
[data-theme="light"] .bds-eyebrow--amber  { color: var(--w2); }
[data-theme="light"] .bds-eyebrow--pink   { color: var(--p2); }

.bds-eyebrow-dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  animation: bds-pulse 2.2s ease-in-out infinite;
}
@keyframes bds-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(.65); }
}

/* ── 16. LAYOUT HELPERS ──────────────────────────────────────────────────────── */

.bds-page {
  max-width: 1100px; margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}
.bds-page-hero { margin-bottom: 2.5rem; }
.bds-page-hero h1 {
  font-size: 1.9rem; font-weight: 900; color: var(--t1);
  line-height: 1.15; margin-bottom: .6rem;
  letter-spacing: -.015em;
}
.bds-page-hero h1 .accent { color: var(--a1); }
[data-theme="light"] .bds-page-hero h1 .accent { color: var(--a2); }
.bds-page-hero h1 .mint   { color: var(--m1); }
[data-theme="light"] .bds-page-hero h1 .mint   { color: var(--m2); }
.bds-page-hero h1 .amber  { color: var(--w1); }
[data-theme="light"] .bds-page-hero h1 .amber  { color: var(--w2); }
.bds-page-hero h1 .pink   { color: var(--p1); }
[data-theme="light"] .bds-page-hero h1 .pink   { color: var(--p2); }

.bds-page-hero p {
  font-size: .9rem; color: var(--t3); line-height: 1.75; max-width: 620px;
}

.bds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.bds-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.bds-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media (max-width:860px) { .bds-grid-2, .bds-grid-3 { grid-template-columns:1fr; } }
@media (max-width:720px) { .bds-grid-4 { grid-template-columns:repeat(2,1fr); } }

/* ── 17. SCROLLBAR GLOBAL ────────────────────────────────────────────────────── */

::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--b-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--a2); }

/* ── 18. FOCUS VISIBLE ───────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--b-focus);
  outline-offset: 2px;
}

/* ── 19. ANIMATIONS ──────────────────────────────────────────────────────────── */

@keyframes bds-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.bds-fadein { animation: bds-fadein .25s var(--ease) both; }

/* ── 20. SANDBOX status bar ─────────────────────────────────────────────────── */

.bds-live-bar {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem 1.25rem;
  background: var(--s1);
  border: 1.5px solid var(--m-border);
  border-radius: var(--r-lg);
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.bds-live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--m2); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(45,122,82,.4);
  animation: bds-ping 2s ease-in-out infinite;
}
@keyframes bds-ping {
  0%  { box-shadow: 0 0 0 0 rgba(45,122,82,.4); }
  70% { box-shadow: 0 0 0 8px rgba(45,122,82,0); }
  100%{ box-shadow: 0 0 0 0 rgba(45,122,82,0); }
}

/* ── 21. LEGACY COMPATIBILITY ALIASES ────────────────────────────────────────
 * Maps the old variable names from v1 pages to the new tokens.
 * This ensures all existing pages get the correct theme-aware values
 * without needing a full rewrite. Override per-page if needed.
 * ─────────────────────────────────────────────────────────────────────────── */
:root {
  --bg:           var(--s0);
  --bg-card:      var(--s1);
  --bg-card2:     var(--s2);
  --border:       var(--b-subtle);
  --border-med:   var(--b-default);
  --text-primary: var(--t1);
  --text-sec:     var(--t2);
  --text-ter:     var(--t3);
  --accent:       var(--a2);
  --accent-light: var(--a1);
  --mint:         var(--m2);
  --mint-light:   var(--m1);
  --amber:        var(--w2);
  --red:          var(--r2);
  --pink:         var(--p2);
}

/* ── 22. INLINE RGBA FIXES ────────────────────────────────────────────────────
 * Replace the most common hard-coded dark-only rgba patterns used across pages.
 * These classes/properties get proper light-mode overrides.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Input / textarea dark background fix */
.spec-area,
.test-input,
textarea[class*="spec"],
textarea[class*="area"] {
  background: var(--s2) !important;
  border-color: var(--b-default) !important;
  color: var(--t1) !important;
}
.spec-area::placeholder,
.test-input::placeholder { color: var(--t4) !important; }

/* Card inner sections that used rgba(0,0,0,.15) */
.score-block,
.download-section,
.result-code-bar,
.bundle-sds,
.bds-code-bar,
.log-list { background: var(--s2) !important; }

/* Code blocks */
.result-code-wrap,
.response-area { background: var(--s0) !important; color: var(--t2) !important; }

/* Chips and pills using rgba(255,255,255,.04) */
.sd-chip {
  background: var(--s2) !important;
  border-color: var(--b-default) !important;
  color: var(--t3) !important;
}

/* Stat boxes */
.stat-box, .layer-item {
  background: var(--s2) !important;
  border-color: var(--b-default) !important;
}
.stat-val { color: var(--t1) !important; }
.stat-lbl { color: var(--t4) !important; }

/* Panel heads and bodies */
.panel {
  background: var(--s1) !important;
  border-color: var(--b-default) !important;
}
.panel-head {
  border-color: var(--b-subtle) !important;
}
.panel-title { color: var(--t1) !important; }

/* Route items in sandbox */
.route-item {
  border-color: var(--b-subtle) !important;
}
.route-item:hover { background: var(--s2) !important; }
.route-path { color: var(--t3) !important; }

/* Roadmap items */
.roadmap-item {
  background: var(--s2) !important;
  border-color: var(--b-subtle) !important;
}
.roadmap-sd { color: var(--t2) !important; }
.roadmap-num { background: var(--a-bg) !important; color: var(--a1) !important; }

/* Change list items */
.change-field { color: var(--t4) !important; }
.change-msg   { color: var(--t3) !important; }

/* SD result items */
.sd-result-name { color: var(--t2) !important; }
.sd-result-item--pending { background: var(--s2) !important; border-color: var(--b-subtle) !important; }

/* Nav theme button + nav links: intentionally removed. These were
   !important overrides for an older nav markup (.nav-theme doesn't even
   match the current partials/nav.ejs, which uses .nav-theme-toggle) and
   were unconditionally forcing .nav-links a's color regardless of theme
   or page — silently fighting the real nav color system in style.css
   (--nav-text etc.) on every page that also loads this file. */

/* Overlay modal */
.modal {
  background: var(--s1) !important;
  border-color: var(--b-default) !important;
}
.modal-title { color: var(--t1) !important; }

/* Log entries */
.log-entry { color: var(--t3) !important; }
.log-time,
.log-path  { color: var(--t3) !important; }
.log-list  { background: transparent !important; }

/* Expand buttons */
.btn-expand {
  border-color: var(--b-default) !important;
  color: var(--t3) !important;
}
.btn-expand:hover {
  color: var(--t1) !important;
}

/* Sidebar in dependency map */
.sidebar {
  background: var(--s1) !important;
  border-color: var(--b-subtle) !important;
}
.legend-item { color: var(--t3) !important; }
.sidebar-head,
.sidebar-stats,
.sidebar-export { border-color: var(--b-subtle) !important; }

/* Filter selects */
.filter-select,
.method-select {
  background: var(--s2) !important;
  border-color: var(--b-default) !important;
  color: var(--t1) !important;
}

/* Status pills text */
.status-pill--ok   { background: var(--m-bg)  !important; color: var(--m1) !important; border: 1px solid var(--m-border) !important; }
.status-pill--fail { background: var(--r-bg)  !important; color: var(--r1) !important; border: 1px solid var(--r-border) !important; }

/* Tabs */
.tab { color: var(--t4) !important; border-bottom-color: transparent; background: none !important; }
.tab:hover { color: var(--t2) !important; }
.tab.active { color: var(--a1) !important; border-bottom-color: var(--a1) !important; }
[data-theme="light"] .tab.active { color: var(--a2) !important; border-bottom-color: var(--a2) !important; }

/* Duplicate pill */
.dup-pill { color: var(--w1) !important; border-color: var(--w-border) !important; background: var(--w-bg) !important; }

/* Conf badges */
.conf-badge--hi { background: var(--m-bg)  !important; color: var(--m1) !important; }
.conf-badge--md { background: var(--w-bg)  !important; color: var(--w1) !important; }
.conf-badge--lo { background: var(--r-bg)  !important; color: var(--r1) !important; }

/* Score ring track */
.score-ring circle.track { stroke: var(--s3) !important; }

/* Sandbox bar */
.sandbox-bar {
  background: var(--s1) !important;
  border-color: var(--m-border) !important;
}
.sb-url  { color: var(--t3) !important; }
.sb-expires { color: var(--t4) !important; }

/* Global table fix */
.sd-table th { color: var(--t4) !important; border-color: var(--b-default) !important; }
.sd-table td { color: var(--t3) !important; border-color: var(--b-subtle) !important; }

/* ── 8. BLUEPRINT LAYER — technical/schematic identity ─────────────────────────
 * BIAN is a banking ARCHITECTURE standard, so the platform's visual identity
 * leans on architecture/engineering blueprints rather than generic SaaS
 * gradients: graph-paper texture, squared corners with crop-mark brackets,
 * monospace spec tags, dashed technical rules, stamp-style badges. This
 * section is purely additive — it never redefines .bds-card or any existing
 * component, only adds new opt-in classes plus one global body texture, so
 * nothing that already ships across the 85 views can regress from it.
 * Loaded on every page (bian-system.css is included everywhere), so the body
 * texture and .bp-* utilities are available platform-wide without touching
 * individual view files. */

/* Graph-paper backdrop — reuses the theme's own --b-subtle border tint so it
   auto-adjusts light/dark and never needs its own contrast check. Kept at
   32px cells / 1px lines so it reads as texture from normal viewing distance,
   never as visual noise or a distraction from content.
   Implemented as a fixed, click-through ::after pseudo-element rather than
   `body { background-image: ... }` — dozens of per-page stylesheets set
   `background: var(--bg)` (the shorthand) on `body` or a body class, which
   silently resets background-image/size/attachment back to `none` regardless
   of selector specificity or load order. A pseudo-element sidesteps that
   entirely: nothing in the codebase targets `body::after`, so nothing can
   clobber it. z-index:1 keeps it above ordinary unpositioned content (where
   it's cheap/safe since the tint is nearly invisible) but well below the
   nav (200+) and modals/toasts (9000+), so it never competes with real UI. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--b-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--b-subtle) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Crop-mark corners — two opposing L-brackets (top-left + bottom-right),
   the same motif as camera viewfinders / design-tool selection handles.
   Pure CSS, zero extra markup: add the class, get the frame. */
.bp-frame { position: relative; }
.bp-frame::before, .bp-frame::after {
  content: ''; position: absolute; width: 11px; height: 11px;
  border-color: var(--a2); border-style: solid; opacity: .55;
  pointer-events: none;
}
[data-theme="light"] .bp-frame::before, [data-theme="light"] .bp-frame::after { opacity: .7; }
.bp-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.bp-frame::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Full 4-corner frame — for hero-level elements where markup already exists
   to hold 4 corner marks (see .bp-corner usage in landing/explorer). */
.bp-corner {
  position: absolute; width: 11px; height: 11px;
  border-color: var(--a2); border-style: solid; opacity: .55;
  pointer-events: none;
}
[data-theme="light"] .bp-corner { opacity: .7; }
.bp-corner--tl { top: -1px;  left: -1px;  border-width: 2px 0 0 2px; }
.bp-corner--tr { top: -1px;  right: -1px; border-width: 2px 2px 0 0; }
.bp-corner--bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.bp-corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Spec tag — monospace uppercase label for IDs/codes/status, e.g. "SD-042",
   "CR + 14 BQ". Mixing mono-for-technical-data with sans-for-prose is the
   same signal serious engineering tools (not generic AI SaaS) use. */
.bp-tag {
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--t3);
}
.bp-tag--accent { color: var(--a1); }
[data-theme="light"] .bp-tag--accent { color: var(--a2); }

/* Dashed technical rule — spec-sheet divider, distinct from the platform's
   existing solid hairline borders. */
.bp-rule {
  border: none; border-top: 1px dashed var(--b-strong);
  margin: .75rem 0;
}

/* Stamp badge — double-border square, like a certification/compliance stamp.
   Squared (2px radius, not the platform's usual pill/rounded badges) on
   purpose to read as "official mark" rather than "status pill". */
.bp-stamp {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .3rem .6rem .3rem .65rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  position: relative;
}
.bp-stamp::before {
  content: ''; position: absolute; inset: 2px;
  border: 1px solid currentColor; opacity: .35; border-radius: 1px;
  pointer-events: none;
}

/* Technical panel — squared card (no radius) with graph texture + crop-mark
   corners, for flagship "this is a specification" surfaces (hero panels,
   domain/registry detail views). Opt-in, does not touch .bds-card. */
.bp-panel {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--b-default);
  border-radius: 2px;
}
.bp-panel > .bp-corner { display: block; }
.sd-table td:first-child { color: var(--t2) !important; }