/* ═════════════════════════════════════════════════════════════════════
   THE BLUEBIRD BAR — Mini Sports Tab Graphic (v1, 2026-05-02)

   Renders a CSS-only mini replica of a real opened pull-tab:
     ┌───────────────────────────────────────────┐
     │ ▍▎▍▎ 2901 H&V        HOME  VISITOR        │
     │  39858               9 - 3                │
     │                      NINE - THREE         │
     └───────────────────────────────────────────┘

   Drop into any page that shows results. The .bb-tab element is built
   by results-loader.js into the "Winning Tab" cell. CSS-only — no
   images required. Mimics the orange/gold cardstock, red serial,
   black HOME/VISITOR digits of the physical tabs.
   ═════════════════════════════════════════════════════════════════════ */

.bb-tab{
  --tab-bg:#e8a040;          /* orange/gold cardstock */
  --tab-bg-edge:#d68f30;     /* slightly darker for shadow lip */
  --tab-red:#c8242a;         /* serial-print red */
  --tab-ink:#1a1a1a;         /* digit black */
  --tab-ink-soft:#3a3a3a;    /* small caps "THREE" */

  display:inline-grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:14px;
  padding:8px 14px 8px 12px;
  min-width:200px;
  background:var(--tab-bg);
  border-radius:3px;
  border:1px solid var(--tab-bg-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -2px 0 var(--tab-bg-edge) inset,
    0 2px 4px rgba(0,0,0,.35);
  font-family:'Oswald','Arial Narrow',Arial,sans-serif;
  line-height:1;
  position:relative;
  /* torn perforation hint along the top edge */
  background-image:
    radial-gradient(circle at 4px -2px, transparent 2.5px, var(--tab-bg) 2.5px),
    linear-gradient(var(--tab-bg),var(--tab-bg));
  background-size:8px 6px, 100% 100%;
  background-repeat:repeat-x, no-repeat;
  background-position:top left, 0 0;
}

.bb-tab__left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.bb-tab__barcode{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:8px;
  color:var(--tab-red);
  font-weight:600;
  letter-spacing:.05em;
}

/* fake barcode bars */
.bb-tab__barcode::before{
  content:"";
  display:inline-block;
  width:46px;
  height:10px;
  background-image:linear-gradient(
    90deg,
    var(--tab-ink) 0 1px, transparent 1px 3px,
    var(--tab-ink) 3px 4px, transparent 4px 7px,
    var(--tab-ink) 7px 9px, transparent 9px 11px,
    var(--tab-ink) 11px 12px, transparent 12px 15px,
    var(--tab-ink) 15px 17px, transparent 17px 19px,
    var(--tab-ink) 19px 20px, transparent 20px 23px,
    var(--tab-ink) 23px 25px, transparent 25px 28px,
    var(--tab-ink) 28px 29px, transparent 29px 32px,
    var(--tab-ink) 32px 34px, transparent 34px 36px,
    var(--tab-ink) 36px 37px, transparent 37px 40px,
    var(--tab-ink) 40px 42px, transparent 42px 44px,
    var(--tab-ink) 44px 46px
  );
}

.bb-tab__serial{
  font-family:'Oswald','Arial Narrow',Arial,sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--tab-red);
  letter-spacing:.5px;
  margin-top:1px;
}

.bb-tab__right{
  display:grid;
  grid-template-columns:auto auto auto;
  align-items:center;
  gap:0 8px;
  text-align:center;
}

.bb-tab__hdr{
  font-size:8px;
  font-weight:700;
  color:var(--tab-ink);
  letter-spacing:.1em;
  text-transform:uppercase;
  padding-bottom:1px;
}

.bb-tab__hdr--dash{visibility:hidden}

.bb-tab__digit{
  font-family:'Oswald','Arial Narrow',Arial,sans-serif;
  font-weight:800;
  font-size:26px;
  color:var(--tab-ink);
  line-height:1;
  letter-spacing:.5px;
}

.bb-tab__dash{
  font-weight:800;
  font-size:24px;
  color:var(--tab-ink);
  padding:0 1px;
}

.bb-tab__word{
  font-size:8px;
  font-weight:700;
  color:var(--tab-ink-soft);
  letter-spacing:.08em;
  margin-top:2px;
  text-transform:uppercase;
}

.bb-tab__word--dash{visibility:hidden}

/* "Pending" placeholder — same shape, dimmed */
.bb-tab--pending{
  --tab-bg:#caa771;
  --tab-bg-edge:#a8884f;
  --tab-red:#7a4a4a;
  --tab-ink:#5a5a5a;
  --tab-ink-soft:#6a6a6a;
  opacity:.75;
}

/* Compact variant for tight cells (NBA 15-row table) */
.bb-tab--sm{
  padding:6px 10px 6px 10px;
  gap:10px;
  min-width:170px;
}
.bb-tab--sm .bb-tab__serial{font-size:16px}
.bb-tab--sm .bb-tab__digit{font-size:21px}
.bb-tab--sm .bb-tab__dash{font-size:20px}
.bb-tab--sm .bb-tab__barcode::before{width:36px;height:8px}

/* Center inside table cells */
td.tab-win{ text-align:center !important; }
td.tab-win .bb-tab{ margin:0 auto; }