/* Checks & Balances — page styles.
   standard.css is LINKED from standard.bornbetween2generals.com, never copied.
   This file holds only (a) the four class families that live in the Standard
   site's own site.css and are NOT in the shared standard.css adopters link,
   and (b) styles specific to this app. Every colour below is a Standard token. */

/* ---- (a) ported from bb2g-standard/assets/site.css, token-for-token -------
   Delete these if the Standard ever promotes them into standard.css. -------- */
.bb-brandlink { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.bb-headermark { flex:none; }
.bb-brandlink__txt { display:flex; flex-direction:column; line-height:1; }
.bb-brandlink__wm { font-family:var(--font-display); font-weight:700; font-size:1.28rem;
  letter-spacing:.04em; color:var(--text); }
.bb-brandlink__wm b { font-weight:700; }
.bb-brandlink__wm i { font-style:normal; }
.bb-brandlink__sub { font-size:.58rem; font-weight:600; letter-spacing:.27em;
  text-transform:uppercase; color:var(--gold-ink); margin-top:.28rem; }
.bb-themebtn { display:inline-grid; place-items:center; width:32px; height:32px;
  border:1px solid var(--line-strong); border-radius:50%; background:transparent;
  color:var(--text-2); cursor:pointer; transition:all var(--dur) var(--ease); }
.bb-themebtn:hover { border-color:var(--gold); color:var(--gold-ink); background:var(--gold-wash); }
.bb-foot-motto { font-family:var(--font-serif); font-size:1.2rem; font-style:italic;
  color:var(--gold-bright); margin-bottom:var(--s3); }
.bb-foot-motto span { font-size:.82rem; font-style:normal; color:#93A9D6; letter-spacing:.05em; }
.bb-foot-small { font-size:.8rem; line-height:1.85; color:#B9C7E2; }
.bb-foot-rule { height:1px; background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);
  margin:var(--s6) 0 var(--s4); opacity:.5; }
.bb-foot-legal { color:#8296B8; font-size:.74rem; }
@media (max-width:900px){ .bb-header__in{flex-wrap:wrap;gap:var(--s3);} .bb-nav{width:100%;margin-left:0;gap:var(--s3) var(--s4);} .bb-nav a{font-size:.68rem;} }

/* ---- (b) this app -------------------------------------------------------- */
.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__scrim { position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,30,68,.86), rgba(10,30,68,.72) 45%, rgba(10,30,68,.92)); }
.hero__in { position:relative; z-index:2; padding:var(--s8) var(--s5); max-width:1180px; margin:0 auto; }
.hero h1 { font-family:var(--font-display); color:#fff; font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.06; letter-spacing:-.01em; margin:0 0 var(--s3); }
.hero p.lede { color:#E8EEF9; font-family:var(--font-serif); font-size:clamp(1.05rem,2vw,1.35rem);
  max-width:46em; margin:0 0 var(--s4); }
.creed { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-bright); border:1px solid rgba(201,162,39,.5);
  border-radius:999px; padding:.5rem .95rem; }

.doors { display:flex; flex-wrap:wrap; gap:var(--s4); }
.door { flex:1 1 300px; display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:var(--s5); transition:all var(--dur) var(--ease); }
.door:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 28px rgba(10,30,68,.10); }
.door h3 { font-family:var(--font-display); font-size:1.3rem; margin:.2rem 0 .4rem; }
.door .stat { font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); }
.door p { color:var(--text-2); font-size:.95rem; margin:0 0 var(--s3); }
.door .go { font-weight:600; color:var(--navy-3); font-size:.9rem; }

.toolbar { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin:var(--s4) 0 var(--s3); }
.toolbar .grow { flex:1 1 260px; }
.ask { position:relative; }
.ask input { width:100%; font-size:1rem; padding:.85rem 1rem .85rem 2.6rem;
  border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--text); }
.ask input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash); }
.ask svg { position:absolute; left:.95rem; top:50%; transform:translateY(-50%); opacity:.55; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.chip { font-size:.76rem; padding:.34rem .7rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text-2); }
.chip:hover { border-color:var(--gold); color:var(--gold-ink); background:var(--gold-wash); }
.answer { border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px;
  background:var(--surface-2); padding:var(--s4); margin:var(--s3) 0; }
.answer h4 { font-family:var(--font-display); font-size:1.05rem; margin:0 0 .5rem; }
.answer .big { font-family:var(--font-display); font-size:1.9rem; color:var(--navy); }
.answer .src { font-size:.74rem; color:var(--text-3); margin-top:.7rem; }

table.data { width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:.92rem; }
table.data th, table.data td { padding:.62rem .8rem; border-bottom:1px solid var(--line); text-align:left; }
table.data th { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-3); background:var(--surface-2); cursor:pointer; white-space:nowrap; }
table.data th.num, table.data td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.data tbody tr:hover { background:var(--gold-wash); }
table.data tr:last-child td { border-bottom:none; }
.tag { font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.16rem .45rem; border-radius:4px; background:var(--gold-wash); color:var(--gold-ink); }
.tag.county { background:#FBE9D9; color:#8A4A12; }
.bar { height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; min-width:70px; }
.bar span { display:block; height:100%; background:var(--navy-3); }
.note { font-size:.84rem; color:var(--text-3); }
.wrap { max-width:1180px; margin:0 auto; padding:var(--s6) var(--s5); }
.grid2 { display:flex; flex-wrap:wrap; gap:var(--s4); }
.grid2 > * { flex:1 1 320px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:var(--s4); }
.scroll { overflow-x:auto; }

@media print {
  .bb-header, .bb-footer, .toolbar, .chips, .bb-themebtn, .hero__media, video { display:none !important; }
  .hero__scrim { background:none !important; }
  .hero h1, .hero p.lede { color:#000 !important; }
  body { background:#fff !important; }
  table.data { border:1px solid #999; font-size:10pt; }
  table.data th { background:#eee !important; color:#000 !important; }
  .door, .panel, .answer { break-inside:avoid; }
  a[href]:after { content:""; }
}

/* The Standard's nav assumes few items; this app has six. Let it wrap rather
   than run off the right edge. */
.bb-header__in { flex-wrap: wrap; row-gap: var(--s2); }
.bb-nav { flex-wrap: wrap; }
@media (max-width: 1180px) { .bb-nav a { font-size: .66rem; } }

/* ---- BB2G house lockup, taken from the business card ---------------------
   Wordmark, star rule and laurel globe only. The card also carries a street
   address, a phone number and a QR code; those are deliberately NOT reproduced
   here or anywhere else in the fleet. Contact surface is email only. */
.bb2g-lockup { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap;
  padding-top:var(--s4); }
.bb2g-lockup__mark { flex:none; width:56px; height:56px; }
.bb2g-lockup__txt { display:flex; flex-direction:column; gap:.28rem; }
.bb2g-wm { font-family:var(--font-display); font-weight:700; font-size:1.75rem;
  line-height:1; letter-spacing:.02em; color:#F4EFE3; }
.bb2g-wm i { font-style:normal;
  background:linear-gradient(180deg,#f0d0a0,#d9b45e 30%,#a07020 64%,#7d5616);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.bb2g-rule { display:flex; align-items:center; gap:.5rem; color:var(--gold); font-size:.6rem; }
.bb2g-rule::before, .bb2g-rule::after { content:""; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.6; }
.bb2g-sub { font-size:.62rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:#C3D0E8; }
.bb2g-tag { font-family:var(--font-serif); font-style:italic; color:var(--gold-bright);
  font-size:.95rem; }
@media (max-width:640px){ .bb2g-wm{font-size:1.4rem} }
/* The Standard's header assumes a shorter nav; six items ran into the right
   edge at 1456px. Give the bar its own padding and let the nav wrap. */
.bb-header__in { padding-left:var(--s5); padding-right:var(--s5); max-width:1400px; margin:0 auto; }
.bb-nav { margin-left:auto; }
@media (max-width:1240px){ .bb-nav a{ font-size:.63rem; } }
/* Footer inner needs the same gutter as the header — it was running flush to
   the viewport edge. */
.bb-footer__in { max-width:1400px; margin:0 auto; padding:var(--s6) var(--s5); }

/* ---- icons ---------------------------------------------------------------
   One sprite, referenced by <use>. Icons inherit currentColor so they are
   always the same colour as the text they sit beside; the gold accent inside
   each one is the only fixed colour. */
.ic { width:1.15em; height:1.15em; flex:none; vertical-align:-.22em; }
.bb-btn .ic { margin-right:.45rem; }

/* Door plate: the icon gets a parchment disc with a gold hairline so it reads
   as a thing you press, not decoration. */
.door__plate { display:inline-grid; place-items:center; width:52px; height:52px;
  border-radius:50%; background:var(--gold-wash); border:1px solid var(--gold);
  color:var(--navy); margin-bottom:var(--s3); transition:all var(--dur) var(--ease); }
.door__plate .ic { width:26px; height:26px; }
.door:hover .door__plate { background:var(--navy); color:#fff; border-color:var(--navy); transform:scale(1.06); }
.door h3 { display:flex; align-items:center; gap:.5rem; }

/* Stat cards */
.stat-row { display:flex; align-items:center; gap:.5rem; }
.stat-row .ic { width:1.05rem; height:1.05rem; color:var(--gold-ink); }

/* Sortable headers: show the affordance, and make the active column obvious. */
table.data th.sortable { position:relative; padding-right:1.6rem; }
table.data th.sortable .ic { position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  width:.9rem; height:.9rem; opacity:.35; transition:opacity var(--dur) var(--ease); }
table.data th.sortable:hover .ic { opacity:.85; }
table.data th[data-dir] .ic { opacity:1; color:var(--gold-ink); }
table.data td .ic { color:var(--gold-ink); margin-right:.35rem; }
.jur-link { display:inline-flex; align-items:center; }

@media print { .door__plate { border-color:#999; background:none; } }
/* The eyebrow and the icon plate were sharing a line because both are inline.
   Eyebrow, then plate, then heading — each on its own line. */
.door .stat { display:block; margin-bottom:var(--s3); }
.door__plate { display:flex; align-items:center; justify-content:center; }

/* ---- the console: lenses, provenance, kept answers ----------------------- */
.lenses { display:flex; flex-wrap:wrap; gap:.4rem; margin:.55rem 0 0; }
.lens { font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.36rem .7rem; border-radius:999px; cursor:pointer; background:var(--surface);
  border:1px solid var(--line-strong); color:var(--text-3); display:inline-flex; align-items:center; gap:.35rem; }
.lens .ic { width:.95rem; height:.95rem; }
.lens:hover { border-color:var(--gold); color:var(--gold-ink); }
.lens.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.lens.on .ic { color:var(--gold-bright); }

.answer__top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); }
.prov { flex:none; font-size:.58rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:.24rem .5rem; border-radius:4px; white-space:nowrap;
  background:var(--gold-wash); color:var(--gold-ink); border:1px solid var(--gold); }
.prov--usa { background:#E8EEF9; color:var(--navy-2); border-color:var(--navy-3); }
.prov--os  { background:#E7F1EA; color:#215F42; border-color:#3E8963; }
.prov--cw  { background:#FBE9D9; color:#8A4A12; border-color:#C08A1E; }
.answer__foot { display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  flex-wrap:wrap; margin-top:.7rem; }
.bb-btn--sm { font-size:.72rem; padding:.34rem .7rem; }
#findings { margin-top:var(--s5); }