/* ═══════════════════════════════════════════════════════════════════════════
   expander_core.css — Expander-specific layout, chrome, and tree state

   Bord surface appearance (bord base, hover, press, underglow, corner-indicator,
   comment-trigger, comment-engrave, burn, ink/tone variants) lives ONLY in
   bitbord_bord_surface.css. Do NOT duplicate bord surface rules here.

   This file owns:
   - .bb_wrap container layout and spatial tokens
   - Toolbar chrome (.bb_toolbar-*)
   - Viewport / stage / .bbt container
   - Presentation-mode container variants
   - Content-mode typography (absolute-positioned, grain-stripe-aligned)
   - Rise/reveal mode transitions
   - Tree branch state (.bbt--l2-active, stagger, collapse)
   - Mobile responsive layout

   Directional corner chrome (expand_primary, expand_alternate) should also
   live here — currently in bitbord_bord_surface.css, to be migrated.

   .cs-hub__comment-* rules belong in context_gateway.css, not here.
   ═══════════════════════════════════════════════════════════════════════════ */

.bb_wrap {
    --bb-unit: calc(var(--bb-shell-unit-mm) * var(--bb-shell-mm-scale)); --bb-gap: calc(var(--bb-shell-gap-mm) * var(--bb-shell-mm-scale)); --bb-r:9px; --bb-dur:0.42s; --bb-ease:cubic-bezier(0.16,1,0.3,1);
    --bb-glow-rgb: 255, 128, 32; /* #ff8020 */
    --bb-glow-rest: rgba(var(--bb-glow-rgb), 0.24);
    --bb-glow-hover: rgba(var(--bb-glow-rgb), 0.42);
    --bb-glow-active: rgba(var(--bb-glow-rgb), 0.50);
    --bb-glow-root: rgba(var(--bb-glow-rgb), 0.58);
    --bb-slot-gap-mm: 2;
    --bb-motion-slack-mm: 1;
    --bb-rise-lift-multiplier: 7.6;
    --bb-press-factor: 1;
    --bb-stage-tint: rgba(10, 8, 18, 0.08);
  }
  body {
    margin:0;
    min-height:100vh;
    background:
      radial-gradient(circle at 50% 18%, rgba(128,128,255,0.10), rgba(128,128,255,0) 34%),
      linear-gradient(180deg, #0d0b12 0%, #09070e 100%);
    color:#fff9e8;
  }
  .bb_wrap { width:100vw;margin-left:calc(50% - 50vw);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(0.75rem,3vw,2rem) 0 clamp(2rem,8vw,5rem);overflow:visible; }
  .bb_wrap[data-presentation-mode="idealized"] {
    --bb-slot-gap-mm: 2.24;
    --bb-motion-slack-mm: 0;
    --bb-press-factor: 0.82;
    --bb-stage-tint: rgba(10, 8, 16, 0.08);
  }
  .bb_wrap[data-presentation-mode="physical"] {
    --bb-slot-gap-mm: 2;
    --bb-motion-slack-mm: 0.38;
    --bb-press-factor: 1;
    --bb-stage-tint: rgba(11, 9, 16, 0.12);
  }
  .bb_wrap[data-presentation-mode="expressive"] {
    --bb-slot-gap-mm: 2;
    --bb-motion-slack-mm: 1;
    --bb-press-factor: 1.18;
    --bb-stage-tint: rgba(13, 10, 18, 0.18);
  }
  .bb_toolbar {
    display:flex;
    flex-wrap:wrap;
    width:min(100%, 72rem);
    align-items:center;
    justify-content:flex-start;
    gap:0.5rem 0.7rem;
    padding:0 0.8rem 0.72rem;
    border-bottom:1px solid rgba(255,255,255,0.07);
  }
  .bb_toolbar_group {
    display:flex;
    align-items:center;
    gap:0.28rem;
    padding-left:0.72rem;
    border-left:1px solid rgba(255,255,255,0.07);
  }
  .bb_toolbar_btn {
    appearance:none;
    border:1px solid rgba(255,249,232,0.16);
    background:rgba(12,10,18,0.18);
    color:rgba(255,249,232,0.74);
    padding:0.34rem 0.58rem 0.26rem;
    border-radius:4px;
    font:inherit;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-size:0.58rem;
    line-height:1;
    cursor:pointer;
    transition:border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }
  .bb_toolbar_btn:hover,
  .bb_toolbar_btn:focus-visible,
  .bb_toolbar_btn.is-active {
    border-color:rgba(var(--bb-glow-rgb),0.48);
    color:rgba(255,249,232,0.96);
    background:rgba(20,14,28,0.82);
    box-shadow:0 0 0 1px rgba(var(--bb-glow-rgb),0.16), 0 0 16px rgba(var(--bb-glow-rgb),0.16);
    transform:translateY(-1px);
    outline:none;
  }
  .bb_toolbar_status {
    margin:0;
    margin-left:auto;
    font-size:0.6rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,249,232,0.54);
    white-space:nowrap;
  }
  .bb_toolbar_hint {
    width:min(100%, 72rem);
    margin:0;
    padding:0.45rem 0.8rem 0.65rem;
    border-bottom:1px solid rgba(255,255,255,0.05);
    font-size:0.58rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,249,232,0.46);
  }
  .bb_viewport {
    width:100%;
    max-height:calc(100vh - 8.75rem);
    overflow:auto;
    display:flex;
    justify-content:center;
    scrollbar-gutter:stable both-edges;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    cursor:grab;
  }
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] {
    justify-content:flex-start;
    align-items:flex-start;
    padding-top:0;
    padding-left:0;
    padding-right:0;
  }
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] .bb_toolbar,
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] .bb_toolbar_hint {
    width:100%;
    max-width:none;
    padding-left:0;
    padding-right:0;
  }
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] .bb_viewport {
    justify-content:flex-start;
    padding-left:0;
    padding-right:0;
    scrollbar-gutter:auto;
  }
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] .bb_stage {
    perspective-origin:0% 0%;
    align-self:flex-start;
  }

  /* ── Grid-placed mode ────────────────────────────────────────────────────
     When placed by the page layout contract via dashbord_grid.js,
     the full-viewport flex container is replaced by absolute positioning
     so --tx / --ty transforms work correctly within the scenic stage.
     ──────────────────────────────────────────────────────────────────────── */
  .bb_wrap.bb_wrap--grid-placed {
    width:auto;
    margin-left:0;
    display:block;
    padding:0;
    overflow:visible;
    position:absolute;
    top:0;
    left:0;
    transform: translate(
      calc(var(--tx, 0px) + var(--bb-stage-offset-x, 0px)),
      calc(var(--ty, 0px) + var(--bb-stage-offset-y, 0px))
    );
  }
  .bb_wrap.bb_wrap--grid-placed .bb_viewport {
    max-height:none;
    overflow:visible;
    -webkit-overflow-scrolling:auto;
  }

  @media (max-width: 720px) {
    .bb_toolbar_group {
      padding-left:0.55rem;
    }
    .bb_toolbar_status {
      width:100%;
      margin-left:0;
      padding-top:0.35rem;
      border-top:1px solid rgba(255,255,255,0.07);
    }
    .bb_toolbar_hint {
      padding:0.42rem 0.7rem 0.58rem;
    }
    .bb_viewport {
      max-height:calc(100vh - 10.5rem);
    }
  }
  .bb_viewport.is-dragging { cursor:grabbing; }
  .bb_stage {
    position:relative;
    flex:0 0 auto;
    width:var(--bb-stage-w, var(--bb-unit));
    height:var(--bb-stage-h, var(--bb-unit));
    background:transparent;
    perspective:1200px;
    perspective-origin:50% 50%;
  }
  .bbt { position:relative;width:var(--bb-unit);height:var(--bb-unit);overflow:visible;transform-style:preserve-3d; }
  .bb_wrap:not(.is-ready) .bord {
    transition:none !important;
  }
  .bb_wrap:not(.is-ready) .bord[data-id="root"],
  .bb_wrap:not(.is-ready) .bord--root {
    opacity:0;
  }

/* ── pinned-header transition override ─────────────────────────────────── */
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] .bord--pinned-header {
    transition:
      opacity 0.22s ease,
      box-shadow 0.2s ease,
      background 0.2s ease,
      filter 0.2s ease;
  }

/* ── rise / reveal mode ────────────────────────────────────────────────── */
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"] {
    transition:
      transform 1.14s cubic-bezier(0.22,0.94,0.28,1.02),
      opacity 0.42s ease,
      box-shadow 0.2s ease,
      background 0.2s ease,
      filter 0.32s ease;
    filter:saturate(1.02);
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--rise-reveal,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--rise-reveal {
    animation:bbt-rise-surface 1.14s cubic-bezier(0.22,0.94,0.28,1.02) both;
    animation-delay:var(--bb-stagger-delay, 0s);
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--rise-reveal .bord_surface,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--rise-reveal .bord_surface {
    animation:bbt-rise-overlay 0.98s cubic-bezier(0.22,0.94,0.28,1.02) both;
    animation-delay:var(--bb-stagger-delay, 0s);
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--rise-conceal,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--rise-conceal {
    animation:bbt-rise-sink 1.14s cubic-bezier(0.4,0.02,0.28,1) both;
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--visible,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--visible {
    filter:saturate(1.06) brightness(1.02);
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--rise-reveal img,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--rise-reveal img {
    animation:bbt-rise-art 1.14s cubic-bezier(0.22,0.94,0.28,1.02) both;
    animation-delay:calc(var(--bb-stagger-delay, 0s) + 0.08s);
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--rise-conceal img,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--rise-conceal img {
    animation:bbt-rise-art-sink 1.14s cubic-bezier(0.4,0.02,0.28,1) both;
    animation-delay:0s;
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--rise-conceal img,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--rise-conceal img {
    animation-name:bbt-rise-art-sink;
    animation-duration:1.14s;
    animation-delay:0s;
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--rise-reveal::after,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--rise-reveal::after {
    background-image:
      radial-gradient(circle at 50% 50%, rgba(10,8,15,0) 0 8%, rgba(10,8,15,0.08) 12%, rgba(10,8,15,0.38) 19%, rgba(10,8,15,0.78) 28%, rgba(12,10,18,0.96) 44%, rgba(12,10,18,0.98) 100%),
      radial-gradient(circle at 16% 20%, rgba(255,255,255,0.18) 0 1.1px, transparent 1.7px),
      radial-gradient(circle at 28% 34%, rgba(255,255,255,0.24) 0 1.3px, transparent 1.9px),
      radial-gradient(circle at 42% 18%, rgba(255,255,255,0.16) 0 1px, transparent 1.5px),
      radial-gradient(circle at 52% 48%, rgba(255,255,255,0.22) 0 1.2px, transparent 1.8px),
      radial-gradient(circle at 64% 28%, rgba(255,255,255,0.2) 0 1.1px, transparent 1.7px),
      radial-gradient(circle at 72% 46%, rgba(255,255,255,0.14) 0 0.9px, transparent 1.4px),
      radial-gradient(circle at 82% 64%, rgba(255,255,255,0.18) 0 1.05px, transparent 1.6px),
      radial-gradient(circle at 34% 70%, rgba(255,255,255,0.14) 0 0.95px, transparent 1.5px),
      radial-gradient(circle at 58% 78%, rgba(255,255,255,0.16) 0 1px, transparent 1.5px),
      radial-gradient(circle at 22% 82%, rgba(255,255,255,0.12) 0 0.85px, transparent 1.35px),
      linear-gradient(180deg, rgba(10,8,15,0.94), rgba(12,10,18,0.82)),
      var(--bb-overlay-tint),
      var(--bb-surface-field-active);
    background-size:auto, 8px 8px, 10px 10px, 7px 7px, 9px 9px, 8px 8px, 7px 7px, 9px 9px, 8px 8px, 8px 8px, 7px 7px, auto, auto, auto;
    background-position:0 0, 0 0, 3px 2px, 2px 1px, 4px 4px, 1px 3px, 5px 1px, 3px 5px, 2px 6px, 6px 3px, 1px 5px, 0 0, 0 0, 0 0;
    animation:bbt-rise-veil 1.14s ease-out both;
    animation-delay:calc(var(--bb-stagger-delay, 0s) + 0.08s);
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--rise-conceal::after,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--rise-conceal::after {
    background-image:
      radial-gradient(circle at 50% 50%, rgba(10,8,15,0) 0 8%, rgba(10,8,15,0.08) 12%, rgba(10,8,15,0.38) 19%, rgba(10,8,15,0.78) 28%, rgba(12,10,18,0.96) 44%, rgba(12,10,18,0.98) 100%),
      radial-gradient(circle at 16% 20%, rgba(255,255,255,0.18) 0 1.1px, transparent 1.7px),
      radial-gradient(circle at 28% 34%, rgba(255,255,255,0.24) 0 1.3px, transparent 1.9px),
      radial-gradient(circle at 42% 18%, rgba(255,255,255,0.16) 0 1px, transparent 1.5px),
      radial-gradient(circle at 52% 48%, rgba(255,255,255,0.22) 0 1.2px, transparent 1.8px),
      radial-gradient(circle at 64% 28%, rgba(255,255,255,0.2) 0 1.1px, transparent 1.7px),
      radial-gradient(circle at 72% 46%, rgba(255,255,255,0.14) 0 0.9px, transparent 1.4px),
      radial-gradient(circle at 82% 64%, rgba(255,255,255,0.18) 0 1.05px, transparent 1.6px),
      radial-gradient(circle at 34% 70%, rgba(255,255,255,0.14) 0 0.95px, transparent 1.5px),
      radial-gradient(circle at 58% 78%, rgba(255,255,255,0.16) 0 1px, transparent 1.5px),
      radial-gradient(circle at 22% 82%, rgba(255,255,255,0.12) 0 0.85px, transparent 1.35px),
      linear-gradient(180deg, rgba(10,8,15,0.94), rgba(12,10,18,0.82)),
      var(--bb-overlay-tint),
      var(--bb-surface-field-active);
    background-size:auto, 8px 8px, 10px 10px, 7px 7px, 9px 9px, 8px 8px, 7px 7px, 9px 9px, 8px 8px, 8px 8px, 7px 7px, auto, auto, auto;
    background-position:0 0, 0 0, 3px 2px, 2px 1px, 4px 4px, 1px 3px, 5px 1px, 3px 5px, 2px 6px, 6px 3px, 1px 5px, 0 0, 0 0, 0 0;
    animation:bbt-rise-veil-sink 1.14s ease-out both;
    animation-delay:0s;
  }
  .bb_wrap[data-reveal-mode="rise"] .bord.bord--rise-eligible.bord--rise-conceal::after,
  .bb_wrap[data-reveal-mode="rise"] .bord[data-level="2"].bord--rise-conceal::after {
    animation-name:bbt-rise-veil-sink;
    animation-duration:1.14s;
    animation-delay:0s;
  }
  .bord--press-pulse::before {
    animation:bbt-press-underglow 0.28s ease-out;
  }
  .bb_wrap[data-mobile-mode="macro"] .bb_stage {
    background:transparent;
  }
  /* overlay: positioned container — text aligns to grain stripe boundaries */
  .bord_surface { position:absolute;inset:0;background:transparent;overflow:hidden;z-index:3; }

  .bb_content_seal {
    position:absolute;
    left:50%;
    bottom:8px;
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:center;
    width:1.08rem;
    height:1.08rem;
    transform:translateX(-50%);
    color:rgba(255,249,232,0.56);
    font-family:"Cormorant Garamond","Garamond","Georgia",serif;
    font-size:0.72rem;
    line-height:1;
    text-shadow:0 1px 2px rgba(10,8,18,0.28);
    opacity:0.58;
    pointer-events:none;
  }
  .bb_debug_layer {
    position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
    transition:opacity 0.18s ease;
  }
  body.bb_grain_debug .bb_debug_layer { opacity:1; }
  body.bb_grain_debug::after {
    content:"grain debug on  ·  press g to toggle";
    position:fixed; right:14px; bottom:14px; z-index:120;
    padding:6px 9px 5px;
    font-family:"SF Mono","Fira Mono","Consolas","Menlo",monospace;
    font-size:0.58rem; letter-spacing:0.06em; text-transform:lowercase;
    color:rgba(232,242,255,0.92);
    background:rgba(8,10,18,0.82);
    border:1px solid rgba(114,214,255,0.45);
    border-radius:999px;
    box-shadow:0 8px 24px rgba(0,0,0,0.28);
  }
  .bb_debug_band {
    position:absolute; left:0; right:0;
    display:flex; align-items:center;
    padding-left:6px;
  }
  .bb_debug_band_label {
    position:relative;
    font-family:"SF Mono","Fira Mono","Consolas","Menlo",monospace;
    font-size:0.42rem; line-height:1.05; letter-spacing:0.05em;
    color:rgba(244,247,255,0.9);
    text-shadow:0 1px 2px rgba(0,0,0,0.75);
    white-space:nowrap;
  }
  .bb_debug_band_label--title {
    color:rgba(255,159,64,0.98);
  }
  .bb_debug_boundary {
    position:absolute; left:0; right:0;
    border-top:1px solid rgba(244,247,255,0.72);
    box-shadow:0 0 0 1px rgba(7,12,18,0.18);
  }
  .bb_debug_sample {
    position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px;
    border-radius:999px; border:1px solid rgba(8,10,18,0.72);
    box-shadow:0 0 0 1px rgba(244,247,255,0.18);
  }
  .bb_debug_sample--title  { background:rgba(255,159,64,1); }
  .bb_debug_sample--body   { background:rgba(99,209,255,1); }
  .bb_debug_sample--letter { background:rgba(255,226,120,1); }
  .bb_debug_tag {
    position:absolute; right:8px; transform:translateY(-50%);
    font-family:"SF Mono","Fira Mono","Consolas","Menlo",monospace;
    font-size:0.42rem; line-height:1.05; letter-spacing:0.04em;
    color:rgba(244,247,255,0.92);
    text-shadow:0 1px 2px rgba(0,0,0,0.82);
    white-space:nowrap;
  }
  .bb_debug_tag--letter { left:18px; right:auto; }
  .bb_debug_meta {
    position:absolute; left:6px; right:6px; bottom:5px;
    font-family:"SF Mono","Fira Mono","Consolas","Menlo",monospace;
    font-size:0.42rem; line-height:1.2; letter-spacing:0.05em;
    color:rgba(244,247,255,0.78);
    text-shadow:0 1px 2px rgba(0,0,0,0.82);
    background:linear-gradient(to top, rgba(6,8,14,0.72), rgba(6,8,14,0));
    padding-top:10px;
  }

/* ── content-mode typography ───────────────────────────────────────────── */
/* These rules govern absolute-positioned text in content/template bords.
   They override bitbord_bord_surface.css flex-layout defaults for the
   expander context where text aligns to grain stripe boundaries. */

  .bord[data-mode="template"] .bord_surface {
    display: block;
    overflow: hidden;
  }
  .bord[data-mode="template"] .bord_surface::after { content: none; }

  /* notes container: just a grouping wrapper; JS takes children out of flow */
  .bord_notes { display: contents; }
  .bord_notes_line {
    font-family: "P22 Typewriter", "American Typewriter", "Courier Prime", "Courier New", monospace;
    font-size: 0.83rem;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.025em;
    color: #151020;
    mix-blend-mode: multiply;
    /* shadow = darkened ink color, not black */
    text-shadow: 0 0 1px rgba(10,8,18,0.55), 0 1px 1px rgba(10,8,18,0.22);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* dark board default: Vc silver-lavender (fallback only) */
  .bord[data-tone="dark"] .bord_notes_line {
    color: rgba(205,196,238,1.0);
    mix-blend-mode: normal;
    text-shadow: 0 0 1px rgba(80,70,110,0.50), 0 1px 1px rgba(80,70,110,0.22);
  }
  /* burnt amber — #bb6030; shadow = darkened amber #804020 */
  .bord[data-ink="gold2"] .bord_notes_line {
    color: #bb6030;
    mix-blend-mode: normal;
    text-shadow: 0 0 1px rgba(128,64,32,0.65), 0 1px 1px rgba(128,64,32,0.30);
  }
  /* key–value pairs: label at reduced opacity */
  .bord_notes_line b {
    font-weight: bold;
    opacity: 0.48;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  /* ── perimeter burn — warm dark radial vignette ──────────────────────────
     Draws eye inward, adds physical depth. No linework — vignette only.    */
  .bord[data-burn="light"] .bord_surface::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 50%,
      transparent 28%,
      rgba(5,2,1,0.22) 60%,
      rgba(2,0,0,0.52) 100%
    );
  }

  /* ── ether grain mask ─────────────────────────────────────────────────────
     Flat tint calms the sapeleQS ribbon pattern; radial burn adds edge depth. */
  .bord[data-board="ether"] .bord_surface::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
      radial-gradient(ellipse at 50% 50%,
        transparent 25%,
        rgba(3,1,0,0.38) 65%,
        rgba(2,0,0,0.58) 100%
      ),
      rgba(4,2,1,0.22);
  }

  .bb_wrap .bord_letter {
    display:none; /* hidden — glyph/position TBD; will sit upper-left corner */
    position:absolute;left:11px;right:11px;
    top:50%;transform:translateY(-1em);
    font-family:"P22 Typewriter","American Typewriter","Courier New",serif;
    font-size:0.62rem;letter-spacing:0.18em;
    color:rgba(21,16,32,0.80);
    text-transform:lowercase;line-height:1;margin:0;
    mix-blend-mode:multiply;
    text-shadow:0 0 1px rgba(0,0,0,0.90),0 0 3px rgba(0,0,0,0.40);
  }
  .bb_wrap .bord_title {
    position:absolute;left:11px;right:11px;
    top:20px;transform:none;
    /* Cormorant Garamond italic — organic high-contrast serif, floral quality;
       falls back through IM Fell English → Garamond → Georgia for similar feel */
    font-family:"Cormorant Garamond","IM Fell English","Garamond","Georgia",serif;
    font-style:italic;
    font-size:2.0rem;font-weight:600;letter-spacing:0.01em;
    color:rgba(21,16,32,0.90);
    text-align:center;
    text-transform:lowercase;line-height:1.0;margin:0;
    mix-blend-mode:multiply;
    text-shadow: 0 1px 2px rgba(10,8,18,0.18);
  }
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] .bord--root .bord_title,
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] .bord[data-level="1"] .bord_title {
    font-size:1.34rem;
    top:16px;
    line-height:0.98;
  }
  .bb_wrap .bord_body {
    position:absolute;left:11px;right:11px;
    top:83%;transform:translateY(-0.8em);
    font-family:"Helvetica Neue","Arial Narrow",Arial,sans-serif;
    font-weight:700;
    font-size:1.0rem;letter-spacing:0.01em;
    color:rgba(21,16,32,0.80);
    line-height:1.15;margin:0;
    mix-blend-mode:multiply;
    text-shadow:
      0 0 1px rgba(0,0,0,0.90),
      0 0 3px rgba(0,0,0,0.40);
  }
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] .bord--root .bord_body,
  .bb_wrap[data-expansion-scheme="upper_left_column_stack"] .bord[data-level="1"] .bord_body {
    font-size:0.72rem;
    line-height:1.08;
    top:81%;
  }

  /* ── individual body word lines — each sits on a grain ruling ── */
  .bb_wrap .bord_body-line {
    position:absolute;left:11px;right:11px;
    transform:translateY(-1em);
    font-family:"Helvetica Neue","Arial Narrow",Arial,sans-serif;
    font-weight:700;font-size:1.0rem;letter-spacing:0.01em;
    color:rgba(21,16,32,0.80);
    line-height:1.0;margin:0;white-space:nowrap;overflow:hidden;
    mix-blend-mode:multiply;
    text-shadow:0 0 1px rgba(0,0,0,0.90),0 0 3px rgba(0,0,0,0.40);
  }

  /* ── ether bords (dark board) — Vc: cool silver-lavender + thin 1px dark stroke ── */
  .bord[data-tone="dark"] .bord_letter {
    color:rgba(205,196,238,1.0); mix-blend-mode:normal;
    -webkit-text-stroke:0.75px rgba(16,12,28,0.88);
  }
  .bord[data-tone="dark"] .bord_title {
    color:rgba(205,196,238,1.0); mix-blend-mode:normal;
    text-shadow: none;
  }
  .bord[data-tone="dark"] .bord_body {
    color:rgba(205,196,238,1.0); mix-blend-mode:normal;
    -webkit-text-stroke:1px rgba(16,12,28,0.82);
  }
  .bord[data-tone="dark"] .bord_body-line {
    color:rgba(205,196,238,1.0); mix-blend-mode:normal;
    -webkit-text-stroke:1px rgba(16,12,28,0.82);
  }

  /* ── ink overrides — must follow data-tone="dark" to win cascade ──────────
     Bords with data-ink get their named color regardless of tone.            */
  .bord[data-ink="gold2"]    .bord_title {
    color: #bb6030; mix-blend-mode: normal; text-shadow: none;
  }
  .bord[data-ink="electric"] .bord_title {
    color: #6060bb; mix-blend-mode: normal; text-shadow: none;
  }
  .bord[data-ink="frost"]    .bord_title {
    color: #bbbbdd; mix-blend-mode: normal; text-shadow: none;
  }
  .bord[data-ink="indigo"]   .bord_title {
    color: #404080; mix-blend-mode: normal; text-shadow: none;
  }

  /* ── magnet snap-point overlay — M key toggles .bb_snap_viz ── */
  .bb_magnet { display:none; }
  .bb_snap_viz .bord--visible .bb_magnet,
  .bb_snap_viz .bord[data-id="root"] .bb_magnet,
  .bb_snap_viz .bord--root .bb_magnet { display:block; }
  .bb_magnet--n { background:rgba(255,90,70,0.80);  box-shadow:0 0 4px rgba(255,50,30,0.55); }
  .bb_magnet--s { background:rgba(60,130,255,0.80); box-shadow:0 0 4px rgba(30,90,255,0.55); }

  /* root bord has a longer name — scale down to fit */
  .bord[data-id="root"] .bord_title,
  .bord--root .bord_title { font-size:1.1rem;letter-spacing:0.02em; }

  /* ── title hierarchy — L1 spacious, L2 compact above notes ─────────────── */
  /* L1: single-word face bord — large, airy, weight 400 (thin serif strokes) */
  .bord[data-level="1"] .bord_title {
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.0;
  }
  /* L2: sits above a dense notes block — crisper, heavier, tighter */
  .bord[data-mode="template"] .bord_title {
    font-size: 1.42rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.05;
    margin-bottom: 3px;
  }

  /* ── active bord underglow — diffuse outer halo + inset corner shadow ────
     Inset shadow fills corner gap on bords without the ether ::before overlay. */
  .bord--active { box-shadow: 0 0 6px 2px var(--bb-glow-active), inset 0 0 10px 3px rgba(0,0,0,0.30) !important; z-index:25; }

  /* ── L2 bords: underglow instead of solid border ring ───────────────────
     Visible L2 bords carry a subtle halo; hover amplifies it like L1.      */
  .bord[data-level="2"].bord--visible {
    box-shadow: 0 0 5px 1px var(--bb-glow-rest), inset 0 0 8px 2px rgba(0,0,0,0.22);
  }
  /* L2 hover — soft glow replaces sharp orange ring */
  .bord[data-level="2"]:hover {
    box-shadow: 0 0 10px 3px var(--bb-glow-hover), inset 0 0 8px 2px rgba(0,0,0,0.26) !important;
    z-index: 30;
  }

  /* ── comment bord — slides out from under host, tucks back on dismiss ── */
  .bord--comment {
    box-shadow: 0 4px 18px rgba(0,0,0,0.52), 0 0 10px 2px var(--bb-glow-rest), inset 0 0 8px 2px rgba(0,0,0,0.20);
    cursor: pointer;
    z-index: 35 !important;
  }
  .bord--comment:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.52), 0 0 12px 3px var(--bb-glow-hover), inset 0 0 8px 2px rgba(0,0,0,0.24) !important;
  }
  /* no Enter/Esc hint chrome on comment bords — they're minimal */
  .bord--comment.bord--editing::after { display:none; }

  /* ── active-path focus: dim inactive siblings, not the active branch ── */
  .bbt--l2-active .bord--visible,
  .bbt--l2-active .bord[data-id="root"],
  .bbt--l2-active .bord--root {
    opacity: 1;
    transition: transform var(--bb-dur) var(--bb-ease), opacity 0.35s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }
  .bbt--l2-active .bord--branch-sibling {
    opacity: 0.22;
    filter: saturate(0.72) brightness(0.76);
  }
  .bbt--l2-active .bord--active,
  .bbt--l2-active .bord--l2-focus,
  .bbt--l2-active .bord--path-anchor {
    opacity: 1;
    filter: brightness(1.02) saturate(1.02);
  }
  .bbt--l2-active .bord--branch-sibling:hover { opacity: 0.42; }
  .bord[data-level="2"].bbt--stagger-1 { transition-delay:0.04s; }
  .bord[data-level="2"].bbt--stagger-2 { transition-delay:0.09s; }
  .bord[data-level="2"].bbt--stagger-3 { transition-delay:0.14s; }
  .bord.bbt--stagger-1 { --bb-stagger-delay:0.04s; }
  .bord.bbt--stagger-2 { --bb-stagger-delay:0.09s; }
  .bord.bbt--stagger-3 { --bb-stagger-delay:0.14s; }

  @keyframes bbt-rise-surface {
    0% {
      opacity:0;
      transform:
        translate(calc(var(--tx,0px) + var(--bb-reveal-dx,0px)),calc(var(--ty,0px) + var(--bb-reveal-dy,0px)))
        translateZ(calc(var(--bb-rise-z-start, -18px) * 0.65))
        scale(0.993);
      filter:saturate(0.9) brightness(0.86);
    }
    72% {
      opacity:1;
      transform:
        translate(calc(var(--tx,0px) + var(--bb-reveal-dx,0px)),calc(var(--ty,0px) + var(--bb-reveal-dy,0px)))
        translateZ(var(--bb-rise-z-overshoot, 8px))
        scale(1.004);
      filter:saturate(1.05) brightness(1.03);
    }
    100% {
      opacity:1;
      transform:
        translate(calc(var(--tx,0px) + var(--bb-reveal-dx,0px)),calc(var(--ty,0px) + var(--bb-reveal-dy,0px)))
        translateZ(var(--bb-reveal-z,0px))
        scale(var(--bb-reveal-scale,1));
      filter:saturate(1.06) brightness(1.02);
    }
  }

  @keyframes bbt-rise-sink {
    0% {
      opacity:1;
      transform:
        translate(calc(var(--tx,0px) + var(--bb-reveal-dx,0px)),calc(var(--ty,0px) + var(--bb-reveal-dy,0px)))
        translateZ(var(--bb-reveal-z,0px))
        scale(var(--bb-reveal-scale,1));
      filter:saturate(1.06) brightness(1.02);
    }
    24% {
      opacity:1;
      transform:
        translate(calc(var(--tx,0px) + var(--bb-reveal-dx,0px)),calc(var(--ty,0px) + var(--bb-reveal-dy,0px)))
        translateZ(calc(var(--bb-rise-z-overshoot, 8px) * 0.26))
        scale(1.004);
      filter:saturate(1.02) brightness(1);
    }
    100% {
      opacity:0;
      transform:
        translate(calc(var(--tx,0px) + var(--bb-reveal-dx,0px)),calc(var(--ty,0px) + var(--bb-reveal-dy,0px)))
        translateZ(calc(var(--bb-rise-z-start, -18px) * 0.65))
        scale(0.993);
      filter:saturate(0.9) brightness(0.86);
    }
  }

  @keyframes bbt-rise-art {
    0% {
      transform:scale(0.999);
      opacity:0.12;
      filter:saturate(0.86) brightness(0.82);
    }
    100% {
      opacity:var(--bb-artwork-opacity);
      transform:scale(1);
      filter:var(--bb-artwork-filter);
    }
  }

  @keyframes bbt-rise-overlay {
    0% {
      opacity:0;
      transform:translateY(3px);
      filter:brightness(1.06);
    }
    100% {
      opacity:1;
      transform:translateY(0);
      filter:none;
    }
  }

  @keyframes bbt-rise-art-sink {
    0% {
      opacity:var(--bb-artwork-opacity);
      transform:scale(1);
      filter:var(--bb-artwork-filter);
    }
    100% {
      opacity:0.12;
      transform:scale(0.994);
      filter:saturate(0.86) brightness(0.82);
    }
  }

  @keyframes bbt-rise-veil {
    0% {
      opacity:0.92;
      filter:saturate(0.92);
      background-position:0 0, 0 0, 3px 2px, 2px 1px, 4px 4px, 1px 3px, 5px 1px, 3px 5px, 2px 6px, 6px 3px, 1px 5px, 0 0, 0 0, 0 0;
      transform:translateY(0) scale(1);
    }
    100% {
      opacity:0;
      filter:none;
      background-position:0 0, -9px -11px, -8px -9px, -4px -12px, 5px -5px, 13px -8px, 16px -7px, 11px -1px, -7px 13px, 17px 6px, -10px 10px, 0 0, 0 0, 0 0;
      transform:translateY(-1.8px) scale(1.12);
    }
  }

  @keyframes bbt-rise-veil-sink {
    0% {
      opacity:0.12;
      filter:none;
      background-position:0 0, -9px -11px, -8px -9px, -4px -12px, 5px -5px, 13px -8px, 16px -7px, 11px -1px, -7px 13px, 17px 6px, -10px 10px, 0 0, 0 0, 0 0;
      transform:translateY(-1.8px) scale(1.12);
    }
    100% {
      opacity:0.92;
      filter:saturate(0.92);
      background-position:0 0, 0 0, 3px 2px, 2px 1px, 4px 4px, 1px 3px, 5px 1px, 3px 5px, 2px 6px, 6px 3px, 1px 5px, 0 0, 0 0, 0 0;
      transform:translateY(0) scale(1);
    }
  }

  @keyframes bbt-press-underglow {
    0% {
      opacity:0.78;
      transform:scale(1.02);
    }
    45% {
      opacity:1;
      transform:scale(1.12);
    }
    100% {
      opacity:0.88;
      transform:scale(1.04);
    }
  }
  .bord--collapsing { transition-delay:0s !important; }
  @media (max-width:619px) {
    .bb_wrap {
      align-items:stretch;
      padding:0.85rem 0 1.2rem;
      overflow:visible;
      --bb-mobile-pad: 14px;
      --bb-mobile-gap-x: 16px;
      --bb-mobile-gap-y: 12px;
    }
    .bb_toolbar {
      flex-wrap:wrap;
      align-items:flex-start;
      justify-content:center;
      gap:0.55rem;
    }
    .bb_viewport {
      justify-content:flex-start;
      padding:0 0.4rem 0.6rem;
      touch-action:pan-x pan-y;
      scrollbar-width:none;
    }
    .bb_viewport::-webkit-scrollbar {
      display:none;
    }
    .bb_stage {
      width:var(--bb-stage-w, var(--bb-mobile-stage-w, calc(var(--bb-unit) * 3 + 48px)));
      height:var(--bb-stage-h, var(--bb-mobile-stage-h, calc(var(--bb-unit) * 3 + 48px)));
      min-width:var(--bb-stage-w, var(--bb-mobile-stage-w, calc(var(--bb-unit) * 3 + 48px)));
      min-height:var(--bb-stage-h, var(--bb-mobile-stage-h, calc(var(--bb-unit) * 3 + 48px)));
    }
    .bbt {
      width:var(--bb-mobile-stage-w, calc(var(--bb-unit) * 3 + 48px));
      height:var(--bb-mobile-stage-h, calc(var(--bb-unit) * 3 + 48px));
      min-width:var(--bb-mobile-stage-w, calc(var(--bb-unit) * 3 + 48px));
      min-height:var(--bb-mobile-stage-h, calc(var(--bb-unit) * 3 + 48px));
      overflow:visible;
    }
    .bord {
      display:block;
      top:0;
      left:0;
    }
    .bb_wrap[data-mobile-mode="tree"] .bb_viewport {
      overflow:auto;
      touch-action:pan-x pan-y;
    }
    .bb_wrap[data-mobile-mode="macro"] .bb_viewport {
      overflow:auto;
      touch-action:pan-x pan-y;
    }
    .bb_wrap[data-mobile-mode="path"] .bord[data-level="2"]::before {
      opacity:0.82;
      transform:scale(1.02);
    }
    .bb_wrap[data-mobile-mode="path"] .bord--active {
      box-shadow:0 0 12px 4px var(--bb-glow-active), inset 0 0 10px 3px rgba(0,0,0,0.28);
    }
    .bb_wrap[data-mobile-mode="path"] .bord--branch-sibling {
      opacity:0.32;
    }
    .bb_wrap[data-mobile-mode="path"] .bord--path-anchor {
      box-shadow:0 0 10px 3px var(--bb-glow-active), inset 0 0 9px 2px rgba(0,0,0,0.24);
    }
  }