/* BHPM skin over hub.css. Brand standard: impacter-bhpm docs/BRAND.md + public/brand/bhpm-tokens.css (read only).
   Navy #083561 is the ink; Coral #FA5343 is emphasis only (eyebrows, one rule, one CTA per view); small coral text uses #CA2321.
   Merriweather = display, Plus Jakarta Sans = body/UI, DM Mono = metadata labels only. Paper ground, white cards, 6px radius. */
@font-face{font-family:"Merriweather";src:url(media/bh/fonts/merriweather-latin-opsz-normal.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Merriweather";src:url(media/bh/fonts/merriweather-latin-opsz-italic.woff2) format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(media/bh/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(media/bh/fonts/plus-jakarta-sans-latin-wght-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"DM Mono";src:url(media/bh/fonts/dm-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(media/bh/fonts/dm-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --bh-950:#001F47; --bh-900:#002953; --bh-800:#083561; --bh-700:#25436D; --bh-600:#3E557D; --bh-500:#5B6D92; --bh-400:#7E8BAB;
  --bh-300:#A4AEC7; --bh-200:#CBD1E3; --bh-100:#E3E8F5; --bh-50:#F1F5FF; --bh-25:#F7FAFF;
  --co-700:#CA2321; --co-600:#E33E33; --co-500:#FA5343; --co-400:#FF7C67; --co-300:#FFA895; --co-200:#FFCFC1; --co-100:#FFE4DA; --co-50:#FFEEE6;
  --met:#2C7C44; --met-t:#E5F5E7; --cond:#8B6720; --cond-t:#FBEFE0; --evid:#007E83; --evid-t:#DEF5F6;
  /* remap the hub tokens onto the BHPM ramp so every room inherits the brand */
  --bg:var(--bh-25); --panel:var(--bh-50); --panel-2:var(--bh-100); --rec:var(--bh-50);
  --ink:var(--bh-800); --ink-2:var(--bh-600); --ink-3:var(--bh-500); --warm:var(--bh-500);
  --rule:var(--bh-200); --rule-2:var(--bh-100);
  --red:var(--co-700); --orange:var(--co-500); --olive:var(--met); --blue:var(--bh-800); --magenta:var(--bh-700);
  --navy:var(--bh-800); --navy-2:var(--bh-900); --blue-2:var(--bh-100); --hl:var(--co-100);
  --sans:"Plus Jakarta Sans", Arial, sans-serif; --serif:"Merriweather", Georgia, serif; --mono:"DM Mono", ui-monospace, monospace;
  --bh-r:6px;
  /* coral that carries white text: #D63A30 = 4.66:1 (WCAG AA); brand #FA5343 stays for rules, bars and icons */
  --co-btn:#D63A30; --co-btn-h:#B91F1B;
}
body{background:var(--bh-25);color:var(--bh-800);font-family:var(--sans)}
h1,h2,h3,.bh-display{font-family:var(--serif);letter-spacing:-.01em}
a{color:var(--bh-800)}
:focus-visible{outline-color:var(--co-500)}
.petals{height:6px}.petals i{background:var(--bh-800)!important}.petals i:nth-child(3){background:var(--co-500)!important}
/* eyebrows: DM Mono, coral, the house label style */
.over,.kick,.lm-over,.k,.jn-over,.pk,.bh-eyebrow{font-family:var(--mono)!important;font-weight:500!important;letter-spacing:.08em!important;color:var(--co-700)!important}
.bh-rule{display:block;width:44px;height:3px;background:var(--co-500);margin:10px 0 16px}
/* top bar */
.topbar{background:rgba(255,255,255,.97);border-bottom:1px solid var(--bh-200)}
.topbar .home img.bh-logo{height:34px;width:auto}
.topbar .home span{font-family:var(--serif);font-weight:700;color:var(--bh-800)}
.topbar .home span small{font-family:var(--mono);font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;color:var(--bh-500)}
.rooms a{color:var(--bh-600);font-weight:600}
.rooms a:hover,.rooms a.on{color:var(--bh-800)}
.rooms a.on{border-bottom-color:var(--co-500)}
.nt-actions .join-link{background:var(--co-btn)!important;color:#fff!important}
.nt-actions .join-link:hover,.nt-actions .join-link:focus-visible{background:var(--co-btn-h)!important}
.nt-actions .add[aria-pressed="true"]{background:var(--co-btn)!important}
.nt-hint{background:var(--co-btn)!important}
/* footer: Navy 950 ribbon, white artwork only on Navy 800 or darker */
.foot{background:var(--bh-950)!important;color:var(--bh-200)}
.foot a{color:#fff}
.bh-foot-logos{display:flex;align-items:center;gap:22px;margin-bottom:14px}
.bh-foot-logos img{height:34px;width:auto}
.bh-foot-logos img+img{height:30px;padding-left:22px;border-left:1px solid var(--bh-600)}
/* cards and controls */
.bh-card{background:#fff;border:1px solid var(--bh-200);border-radius:var(--bh-r)}
.bh-btn{display:inline-flex;align-items:center;gap:8px;background:var(--bh-800);color:#fff;font-weight:700;font-size:15px;padding:12px 20px;border-radius:var(--bh-r);border:0;cursor:pointer;text-decoration:none}
.bh-btn:hover{background:var(--bh-900)}
.bh-btn.co{background:var(--co-btn)}.bh-btn.co:hover,.bh-btn.co:focus-visible{background:var(--co-btn-h)}
.bh-btn.ghost{background:#fff;color:var(--bh-800);box-shadow:inset 0 0 0 1.5px var(--bh-300)}
.bh-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:4px;background:var(--bh-50);color:var(--bh-700)}
.bh-chip i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--bh-500))}
.bh-tier{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px}
.bh-tier.t1{background:var(--met-t);color:#1D6635}.bh-tier.t2{background:var(--cond-t);color:#745414}.bh-tier.t3{background:var(--bh-100);color:var(--bh-700)}
/* karaoke on BHPM: highlight in coral tint, not yellow */
.kara.playing .kw.now{background:var(--co-100)!important;color:var(--bh-900)!important}
/* partner row in the footer: knockout marks from impacter-bhpm public/brand/knockout, optically sized */
.bh-foot-partners{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:18px 0 20px;margin-bottom:16px;border-top:1px solid var(--bh-700);border-bottom:1px solid var(--bh-700)}
.bh-foot-partners .t{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bh-300)}
.bh-foot-partners ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.bh-foot-partners img{display:block;height:calc(26px * var(--s,1));width:auto;opacity:.92}
@media (max-width:560px){.bh-foot-partners ul{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;align-items:center;gap:16px 18px;width:100%}.bh-foot-partners img{height:calc(21px * var(--s,1))}}
/* phone menu: the room links scroll sideways; fades show there is more, and "More" scrolls it (Codex review 10/25) */
.rooms-wrap{position:relative;flex:1;min-width:0;height:100%;display:flex}
.rooms-wrap .rooms{flex:1}
.rooms-more{display:none}
@media (max-width:640px){
  .rooms-wrap{order:3;flex-basis:100%;height:44px}
  .rooms-wrap .rooms{order:0;flex:1 1 0;height:44px}
  .rooms-wrap::before,.rooms-wrap::after{content:"";position:absolute;top:0;bottom:3px;width:34px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
  .rooms-wrap::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
  .rooms-wrap::after{right:58px;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
  .rooms-wrap.l::before,.rooms-wrap.r::after{opacity:1}
  .rooms-more{display:flex;align-items:center;gap:3px;flex:none;align-self:center;height:32px;padding:0 10px;margin-left:4px;border:1.5px solid var(--bh-200);border-radius:999px;background:#fff;color:var(--bh-800);font:700 13px var(--sans);cursor:pointer}
  .rooms-more svg{width:12px;height:12px;transition:transform .2s}
  .rooms-wrap:not(.r) .rooms-more svg{transform:rotate(180deg)}
}