/* ============================================================
   bO. Shell v4 — ONE cohesive nav cluster, anchored bottom-right.
   © binomOne · 2026-05-21
   Single source of truth for project.binomone.com pages.

   The whole nav is a single frosted "pill" pinned to the bottom-right
   corner (right:24px bottom:24px) — NOT a full-edge bar. It carries:
     • bO. logo  • per-page nav items  • the bO.corner triangle link
   plus a chevron toggle that morphs the pill between two layouts:
     vertical   → items stacked in a column (logo top → triangle bottom)
     horizontal → items in a row          (logo left → triangle right)
   Both layouts share ONE background + ONE border-frame, so the unit
   never "scatters". An orange L-accent frames the bottom+right edge.
   Item count (3 or 6) only changes the pill's length, never its anchor.
   ============================================================ */

:root {
  --bo-bg-0: #0A0A0A;
  --bo-bg-1: #141414;
  --bo-bg-2: #1C1C1C;
  --bo-line: #404040;
  --bo-line-soft: #262626;
  --bo-fg: #FAFAFA;
  --bo-sec: #A3A3A3;
  --bo-mut: #737373;
  --bo-acc: #E67E22;
  --bo-acc-l: #F39C12;
  --bo-acc-d: #D35400;
  --bo-r: 4px;
  --bo-top-h: 56px;
  --bo-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bo-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace;

  /* cluster anchor + morph timing */
  --bo-edge: 24px;          /* distance from screen bottom & right */
  --bo-dur: 450ms;          /* mode-morph duration (matches keyOne original) */
  --bo-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --bo-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --bonav-bg: rgba(10, 10, 10, 0.92);
  --bonav-border: rgba(64, 64, 64, 0.55);
}

/* Top-bar is opt-in (bo-shell-parts). */
html[data-bo-topbar="1"] body { padding-top: var(--bo-top-h); }

/* Page-own headers are replaced by the universal bO. cluster: hide any
   that remain (dead headers are deleted from markup, this is a safety net). */
body > header:not(.bo-top),
main > header:not(.bo-top) {
  display: none !important;
}

/* ============================================================
   1) TOP-BAR — optional fixed brand header (brand-only)
   ============================================================ */
.bo-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--bo-top-h);
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bo-line);
  font-family: var(--bo-sans);
}
.bo-top__inner {
  max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 20px;
}
.bo-top__brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--bo-fg);
  font-weight: 800; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap;
}
.bo-top__brand .dot { color: var(--bo-acc); }
.bo-top__brand-slug {
  font-family: var(--bo-mono); font-size: 11px; font-weight: 500;
  color: var(--bo-mut); text-transform: uppercase; letter-spacing: 0.14em;
  margin-left: 8px; border-left: 1px solid var(--bo-line); padding-left: 10px;
}
@media (max-width: 760px) { .bo-top__brand-slug { display: none; } }

/* ============================================================
   2) bO. NAV CLUSTER — one frosted pill, pinned bottom-right
   ============================================================ */
.bonav {
  position: fixed;
  right: var(--bo-edge);
  z-index: 1000;
  font-family: var(--bo-sans);
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 6px;
  max-width: calc(100vw - 2 * var(--bo-edge));
  background: var(--bonav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--bonav-border);
  border-radius: var(--bo-r);
  transition: padding var(--bo-dur) var(--bo-ease);
  will-change: contents;
}
/* ONE position: corner anchored BOTTOM-RIGHT on every surface.
   Orange L-accent frames the right + bottom edge; triangle points into
   the bottom-right corner. Everything grows DOWN-right, never up-right. */
.bonav.pos-br {
  bottom: var(--bo-edge);
  border-right-color: var(--bo-acc);
  border-bottom-color: var(--bo-acc);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(230,126,34,0.06), 4px 4px 0 -1px rgba(230,126,34,0.18);
}

/* ── layout: vertical vs horizontal — ONE container, just flips axis ── */
.bonav[data-mode="vertical"]   { flex-direction: column; align-items: stretch; }
.bonav[data-mode="horizontal"] { flex-direction: row;    align-items: center;  }

/* ── inner row that holds logo + items + triangle in chosen axis ── */
.bonav-cluster {
  display: flex;
  gap: 4px;
  /* the morph: vertical stacks, horizontal rows */
  transition: gap var(--bo-dur) var(--bo-ease);
}
.bonav[data-mode="vertical"]   .bonav-cluster { flex-direction: column; align-items: stretch; }
.bonav[data-mode="horizontal"] .bonav-cluster { flex-direction: row;    align-items: center;  }

/* ── bO. logo (always first element of the cluster) ── */
.bonav-logo {
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--bo-fg); text-decoration: none;
  padding: 6px 10px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 200ms var(--bo-ease), color 200ms var(--bo-ease);
}
.bonav-logo .dot { color: var(--bo-acc); }
.bonav-logo:hover { color: var(--bo-acc); background: rgba(230, 126, 34, 0.1); }

/* ── nav items ── */
.bonav-nav {
  display: flex;
  gap: 2px;
  transition: gap var(--bo-dur) var(--bo-ease);
}
.bonav[data-mode="vertical"]   .bonav-nav { flex-direction: column; align-items: stretch; }
.bonav[data-mode="horizontal"] .bonav-nav { flex-direction: row;    align-items: center;  }

.bonav-nav a {
  font-size: 12px;
  font-weight: 600;
  color: var(--bo-sec);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 9px 13px;
  border-radius: 2px;
  white-space: nowrap;
  text-align: center;
  transition: color 200ms var(--bo-ease), background-color 200ms var(--bo-ease);
}
.bonav-nav a:hover { color: var(--bo-fg); background: rgba(255, 255, 255, 0.07); }
.bonav-nav a.active {
  color: var(--bo-acc);
  background: rgba(230, 126, 34, 0.15);
}
.bonav-nav a.accent-link { color: var(--bo-acc); }
.bonav-nav a.accent-link:hover { color: var(--bo-acc-l); }

/* ── chevron toggle — sits ON the pill, between items and triangle ── */
.bonav-chevron {
  display: flex; align-items: center; justify-content: center;
  width: 26px; min-width: 26px; align-self: stretch;
  padding: 0; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 2px;
  opacity: 0.7;
  transition: opacity 200ms var(--bo-ease), background-color 200ms var(--bo-ease);
}
.bonav[data-mode="horizontal"] .bonav-chevron { width: auto; min-height: 26px; padding: 0 4px; }
.bonav-chevron:hover { opacity: 1; background: rgba(230, 126, 34, 0.1); }
.bonav-chevron svg {
  stroke: var(--bo-acc); fill: none; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  width: 14px; height: 14px;
  transition: transform var(--bo-dur) var(--bo-spring);
}
/* vertical → chevron points right (toward horizontal layout) */
.bonav[data-mode="vertical"]   .bonav-chevron svg { transform: rotate(0deg); }
/* horizontal → chevron points down (toward vertical layout) */
.bonav[data-mode="horizontal"] .bonav-chevron svg { transform: rotate(90deg); }

/* ── triangle = real link button, INTEGRATED as last cluster element ── */
.bonav-triangle {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; min-width: 40px; align-self: stretch;
  text-decoration: none;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}
.bonav[data-mode="horizontal"] .bonav-triangle { min-height: 40px; }
.bonav-tri-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transition: filter 300ms var(--bo-spring), transform 300ms var(--bo-spring);
  filter: drop-shadow(0 0 6px rgba(230, 126, 34, 0.18));
}
.bonav-triangle:hover .bonav-tri-svg {
  filter: drop-shadow(0 0 12px rgba(230, 126, 34, 0.6));
}
.bonav-tri-icon {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  transition: transform 300ms var(--bo-spring);
}
.bonav-triangle:hover .bonav-tri-icon { transform: scale(1.15); }
.bonav-tri-icon svg {
  width: 18px; height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ============================================================
   3) MOBILE (≤768px) — collapse to ONE round button; tap opens pill
   ============================================================ */
.bonav-fab {
  display: none;
  position: fixed;
  right: var(--bo-edge);
  z-index: 1001;
  width: 52px; height: 52px;
  border: 1px solid var(--bo-acc);
  border-radius: var(--bo-r);
  background: var(--bonav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0;
}
.bonav-fab.pos-br { bottom: var(--bo-edge); }
.bonav-fab span {
  display: block; width: 20px; height: 2px; margin: 2.5px 0;
  background: var(--bo-fg);
  transition: transform 300ms var(--bo-spring), opacity 200ms var(--bo-ease);
}
.bonav-fab.active span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.bonav-fab.active span:nth-child(2) { opacity: 0; }
.bonav-fab.active span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 768px) {
  .bonav-fab { display: flex; }
  /* hide the pill until the FAB opens it; same markup, no divergence */
  .bonav { display: none; }
  .bonav.open {
    display: flex;
    /* on mobile always present the items stacked (overlay near the FAB) */
    flex-direction: column;
    max-width: calc(100vw - 2 * var(--bo-edge));
  }
  .bonav.open.pos-br { bottom: calc(var(--bo-edge) + 60px); top: auto; }
  .bonav.open .bonav-cluster { flex-direction: column; align-items: stretch; }
  .bonav.open .bonav-nav { flex-direction: column; align-items: stretch; }
  .bonav.open .bonav-nav a { text-align: left; padding: 12px 14px; font-size: 14px; }
  /* chevron is meaningless on mobile (always stacked) — hide it */
  .bonav.open .bonav-chevron { display: none; }
  .bonav.open .bonav-triangle { min-height: 44px; }
}

/* ============================================================
   4) FOOTER — 4-column brand footer, always page-end (normal flow)
   ============================================================ */
.bo-footer {
  position: relative;
  margin-top: 80px;
  /* clear the bottom-right cluster so nothing hides behind it */
  padding: 56px 24px calc(80px + var(--bo-edge));
  background: var(--bo-bg-0);
  border-top: 1px solid var(--bo-line);
  font-family: var(--bo-sans);
  color: var(--bo-sec);
  z-index: 1;
}
.bo-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.bo-footer__col h4 {
  font-family: var(--bo-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--bo-acc); margin: 0 0 14px;
}
.bo-footer__col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.bo-footer__col a {
  font-size: 13px; color: var(--bo-sec); text-decoration: none;
  transition: color 0.15s ease;
}
.bo-footer__col a:hover { color: var(--bo-fg); }
.bo-footer__brand-line {
  font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
  color: var(--bo-fg); margin: 0 0 10px;
}
.bo-footer__brand-line .dot { color: var(--bo-acc); }
.bo-footer__brand-sub {
  font-size: 13px; line-height: 1.6; color: var(--bo-sec);
  margin: 0 0 14px; max-width: 32ch;
}
.bo-footer__brand-meta {
  font-family: var(--bo-mono); font-size: 11px; color: var(--bo-mut);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.bo-footer__bottom {
  max-width: 1200px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid var(--bo-line-soft);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-family: var(--bo-mono); font-size: 11px; color: var(--bo-mut); letter-spacing: 0.06em;
}
@media (max-width: 760px) {
  .bo-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .bo-footer { padding: 40px 20px 56px; }
}
@media (max-width: 480px) {
  .bo-footer__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   5) KEYBOARD FOCUS — visible orange ring on :focus-visible only
   (mouse/touch focus stays clean; keyboard tabbing is clearly tracked)
   ============================================================ */
.bonav-logo:focus,
.bonav-nav a:focus,
.bonav-chevron:focus,
.bonav-triangle:focus,
.bonav-fab:focus { outline: none; }

.bonav-logo:focus-visible,
.bonav-nav a:focus-visible,
.bonav-chevron:focus-visible,
.bonav-triangle:focus-visible,
.bonav-fab:focus-visible {
  outline: 2px solid var(--bo-acc);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bonav, .bonav-cluster, .bonav-nav, .bonav-chevron svg,
  .bonav-tri-svg, .bonav-tri-icon, .bonav-fab span {
    transition: none !important;
  }
}