
      /* Local copies of the relevant index.html utility classes so this view
         renders identically without depending on Tailwind being loaded. */
      .bh-meta-bar {
        font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
        letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
        padding-bottom: 10px; border-bottom: 1px solid var(--border-2);
        margin-bottom: 16px;
      }
      .bh-card {
        background: var(--paper, white); border: 1px solid var(--border-2); border-radius: 10px;
        padding: 14px 16px;
      }
      .bh-card-label {
        font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
        letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4);
      }
      .bh-card-val {
        font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums;
        color: var(--ink); margin-top: 4px; font-family: 'Inter', sans-serif;
      }
      .bh-card-val.sage { color: var(--sage-ink); }
      .bh-card-val.clay { color: var(--clay); }
      .bh-card-foot {
        font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-4);
        margin-top: 4px;
      }
      .bh-stat-grid {
        display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
        margin-bottom: 22px;
      }
      .bh-filter-pill {
        padding: 6px 14px; border-radius: 999px; font-size: 10px; font-weight: 600;
        letter-spacing: 0.06em; text-transform: uppercase; border: none; cursor: pointer;
        background: transparent; color: var(--ink-3); font-family: inherit;
        transition: all 0.12s;
      }
      .bh-filter-pill.is-active { background: var(--ink); color: white; }
      .bh-csv-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 14px; background: white; color: var(--ink);
        border: 1.5px solid var(--border-2); border-radius: 4px; cursor: pointer;
        font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .bh-table-shell {
        overflow-x: auto; border: 1px solid var(--border-2); border-radius: 10px;
      }
      /* Condensed table per Steven 2026-05-23 — was sprawling at 1200px min-width
         with 10/12px padding.  Tightened to fit more comfortably without
         horizontal scroll on standard desktops. */
      .bh-tbl { width: 100%; font-size: 10.5px; white-space: nowrap; border-collapse: collapse; }
      .bh-tbl thead tr {
        background: rgba(245,240,232,0.6); border-bottom: 1px solid var(--border-2);
      }
      .bh-tbl th {
        text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--ink-4); padding: 6px 6px; font-weight: 600;
        font-family: 'JetBrains Mono', monospace;
      }
      .bh-tbl th.r { text-align: right; }
      .bh-tbl th.c { text-align: center; }
      .bh-tbl td { padding: 3px 6px; white-space: nowrap; }
      .bh-tbl td:first-child, .bh-tbl th:first-child { padding-left: 10px; }
      .bh-tbl td:last-child, .bh-tbl th:last-child { padding-right: 10px; }
      /* Project column (2nd, after the # id column was removed) capped at 200px ·
         long names truncate with ellipsis · hover for full text via title attr. */
      .bh-tbl td:nth-child(2), .bh-tbl th:nth-child(2) {
        max-width: 200px; overflow: hidden; text-overflow: ellipsis;
      }
      /* GC column (3rd) capped at 130px · same treatment */
      .bh-tbl td:nth-child(3), .bh-tbl th:nth-child(3) {
        max-width: 130px; overflow: hidden; text-overflow: ellipsis;
      }
      .bh-tbl .tabular { font-variant-numeric: tabular-nums; }
      .bh-tbl .mono { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; }
      .bh-pill-won  { display: inline-block; padding: 2px 6px; border-radius: 999px; background: rgba(135,158,107,0.30); color: var(--sage-ink); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 8.5px; }
      .bh-pill-active { display: inline-block; padding: 2px 6px; border-radius: 999px; background: rgba(240,185,20,0.20); color: #8a6d00; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 8.5px; }
      .bh-pill-bidding { display: inline-block; padding: 2px 6px; border-radius: 999px; background: var(--ink); color: white; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 8.5px; }
      .bh-pill-lost { display: inline-block; padding: 2px 6px; border-radius: 999px; background: #F3E4E0; color: #8B3A28; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 8.5px; }
      .bh-pill-budget { display: inline-block; padding: 2px 6px; border-radius: 999px; background: rgba(207,179,116,0.30); color: #7a5d1a; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 8.5px; }
      .bh-cortex-note {
        margin-top: 22px; padding: 18px 22px; border-radius: 10px;
        background: rgba(245,240,232,0.6); border: 1px dashed var(--border-2);
        font-size: 12px; color: var(--ink-2); line-height: 1.65;
      }
      .bh-cortex-note .lab {
        font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600;
        letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay);
        margin-bottom: 6px;
      }
