@font-face{font-family:"IBM Plex Sans";src:url(fonts/plex-sans-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plex-mono-500.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
/* Borderhole v2 mock: layered on top of the v1 sandbox stylesheet (borderhole-base.css) */
:root { --sample: #c9a227; --up: #d08a3a; --down: #6f9fc8; --flat: #8b95a8; --gov: #6f9fc8; --wire: #b9a46a; --nat: #a58bd0; --local: #6fb39a; --ngo: #d08a6a; --parl: #c97a9a; --sandbox-h: 0px; }
body { font-family: "IBM Plex Sans", system-ui, sans-serif; }
.card { background: var(--bg-elev); }
.card::before { opacity: .35; }
.nav-links a:hover, .nav-links a.active, .badge, .btn:hover, .chip.active { box-shadow: none; }
.badge { background: rgba(201,162,39,.08); }

/* sample banner */
.sandbox-banner { height: var(--sandbox-h); background: repeating-linear-gradient(135deg, #2a1f08 0 14px, #241a07 14px 28px); border-bottom: 1px solid var(--sandbox-border); font-size: .74rem; gap: .65rem; }
.sandbox-banner b { color: #fff; background: var(--sample); color: #1a1405; padding: .1rem .45rem; border-radius: 3px; letter-spacing: .1em; }
.sample-tag { display: inline-flex; align-items: center; gap: .25rem; font: 600 .6rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sample); border: 1px solid rgba(201,162,39,.55); border-radius: 3px; padding: .18rem .32rem; background: rgba(201,162,39,.07); white-space: nowrap; }
.sample-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sample); }

/* hero */
.v2-hero { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: end; padding: 1.4rem 0 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
@media (min-width: 980px) { .v2-hero { grid-template-columns: 1.5fr 1fr; } }
.v2-hero h1 { margin: .4rem 0 .45rem; font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.12; letter-spacing: .01em; text-transform: none; font-weight: 700; }
.v2-hero h1 span { color: var(--accent); }
.v2-hero p.lead { color: var(--muted); margin: 0; max-width: 44rem; font-size: 1rem; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.hero-stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .8rem; }
.hero-stat .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; justify-content: space-between; gap: .3rem; align-items: center; }
.hero-stat .v { font: 700 1.45rem/1.2 var(--font-mono); margin-top: .25rem; }
.hero-stat .h { font-size: .72rem; color: var(--muted); }

/* zone board */
.board { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
  .board > *, .zgrid2 > *, .issue-grid > *, .sides > * { min-width: 0; }
@media (min-width: 1100px) { .board { grid-template-columns: minmax(0, 1fr) 340px; } }
.map-card { padding: 0; overflow: hidden; }
.map-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.map-head h2 { margin: 0; font-size: .95rem; }
.map-wrap { position: relative; background: radial-gradient(ellipse at 50% 40%, #0f1a26 0%, #0b0e13 75%); overflow-x: auto; }
.map-wrap svg { display: block; width: 100%; min-width: 760px; height: auto; }
.map-legend { display: flex; gap: 1rem; flex-wrap: wrap; padding: .6rem 1.1rem .8rem; font-size: .72rem; color: var(--muted); border-top: 1px solid var(--border); align-items: center; }
.map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.zone-label { font: 600 12.5px var(--font-mono); fill: #e6e9ef; paint-order: stroke; stroke: #0b0e13; stroke-width: 3px; }
.zone-label .val { fill: var(--accent); }
.zone-hit { cursor: pointer; }
.zone-hit:hover .ring { stroke-width: 2.4; }

.zone-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 1rem; }
.zgroup-title { grid-column: 1 / -1; margin: .6rem 0 -.2rem; font: 600 .72rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .6rem; }
.zgroup-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ztile { display: block; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .85rem .6rem; color: var(--text); position: relative; transition: border-color .15s; }
.ztile:hover { border-color: var(--accent-dim); text-decoration: none; }
.ztile .zt-top { display: flex; justify-content: space-between; gap: .4rem; align-items: flex-start; }
.ztile h3 { margin: 0; font-size: .86rem; font-weight: 600; line-height: 1.25; }
.ztile .zt-metric { font-size: .68rem; color: var(--muted); margin-top: .1rem; }
.ztile .zt-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: .45rem; gap: .5rem; }
.ztile .zt-val { font: 700 1.35rem var(--font-mono); letter-spacing: -.02em; }
.ztile .zt-asof { font: .64rem var(--font-mono); color: var(--dim); margin-top: .2rem; display: flex; justify-content: space-between; }
.trend { font: 600 .74rem var(--font-mono); white-space: nowrap; }
.trend.up { color: var(--up); } .trend.down { color: var(--down); } .trend.flat { color: var(--flat); }
.spark { display: block; width: 100%; height: 30px; margin-top: .3rem; }

/* rail */
.rail { display: flex; flex-direction: column; gap: 1.25rem; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { border-bottom: 1px solid var(--border); }
.news-list li:last-child { border-bottom: 0; }
.news-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: .65rem 0; cursor: pointer; font: inherit; }
.news-item:hover h4 { color: var(--link); }
.news-item h4 { margin: .28rem 0 .2rem; font-size: .88rem; font-weight: 600; line-height: 1.35; }
.news-meta { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; font-size: .7rem; color: var(--muted); }
.srcb { font: 600 .58rem/1 var(--font-mono); letter-spacing: .1em; padding: .2rem .35rem; border-radius: 3px; border: 1px solid currentColor; }
.srcb.GOV { color: var(--gov); } .srcb.WIRE { color: var(--wire); } .srcb.NATIONAL { color: var(--nat); } .srcb.LOCAL { color: var(--local); } .srcb.NGO { color: var(--ngo); } .srcb.PARLIAMENT { color: var(--parl); }
.zchip { font: .62rem var(--font-mono); color: var(--muted); border: 1px solid var(--border); padding: .12rem .35rem; border-radius: 3px; }
.balance { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: .4rem 0 .3rem; }
.balance span { display: block; height: 100%; }
.balance-legend { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .66rem; color: var(--muted); }
.balance-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .25rem; vertical-align: -1px; }

/* video */
.video-strip { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.vcard { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.vframe { position: relative; aspect-ratio: 16/9; background: #000; cursor: pointer; overflow: hidden; }
.vframe img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; transition: transform .3s, opacity .2s; }
.vframe:hover img { transform: scale(1.03); opacity: 1; }
.vframe .play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(12,14,18,.72); border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; }
.vframe .play::after { content: ""; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.vframe .play.ext::after { content: "↗"; border: 0; margin: 0; color: #fff; font: 700 1.5rem/1 var(--font-sans); }
.vframe .sample-mark { position: absolute; top: .5rem; left: .5rem; font: 700 .62rem/1 var(--font-mono); letter-spacing: .16em; color: #1a1405; background: var(--sample); padding: .25rem .4rem; border-radius: 3px; }
.vframe .vmode { position: absolute; top: .5rem; right: .5rem; font: 600 .6rem/1 var(--font-mono); letter-spacing: .06em; color: #fff; background: rgba(12,14,18,.78); border: 1px solid rgba(255,255,255,.25); padding: .25rem .4rem; border-radius: 3px; }
.vframe .dur { position: absolute; bottom: .5rem; right: .5rem; font: 600 .66rem/1 var(--font-mono); background: rgba(0,0,0,.75); color: #fff; padding: .2rem .35rem; border-radius: 3px; }
.vframe.playing { cursor: default; }
.vframe video { width: 100%; height: 100%; display: block; background: #000; }
.vframe .mock-player-note { white-space: nowrap; overflow: hidden; position: absolute; left: 0; right: 0; top: 0; padding: .4rem .6rem; font: .64rem var(--font-mono); color: #e6e9ef; background: linear-gradient(rgba(0,0,0,.8), transparent); display: flex; justify-content: space-between; gap: .5rem; pointer-events: none; }
.vframe .vclose { position: absolute; right: .45rem; top: 1.6rem; background: rgba(12,14,18,.85); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; font: .7rem var(--font-mono); padding: .2rem .4rem; cursor: pointer; }
.vmeta { padding: .65rem .75rem .75rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.vmeta h4 { margin: 0; font-size: .86rem; line-height: 1.3; }
.vmeta .vsrc { font-size: .7rem; color: var(--muted); }
.vmeta .vnote { font: .64rem var(--font-mono); color: var(--dim); }
.vactions { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: auto; padding-top: .25rem; }
.vbtn { font: 600 .66rem var(--font-mono); letter-spacing: .04em; padding: .3rem .5rem; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
.vbtn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* modal + toast + drawer */
.overlay { position: fixed; inset: 0; background: rgba(5,6,8,.78); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 1rem; }
.overlay.open { display: flex; }
.modal { width: min(980px, 100%); background: var(--bg-elev); border: 1px solid var(--line-bright); border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: .95rem; }
.modal-body video { width: 100%; display: block; background: #000; aspect-ratio: 16/9; }
.modal-foot { display: flex; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; font-size: .74rem; color: var(--muted); flex-wrap: wrap; align-items: center; }
.xbtn { background: none; border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: .25rem .55rem; cursor: pointer; font: .75rem var(--font-mono); }
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%) translateY(20px); background: #1d2430; border: 1px solid var(--accent-dim); color: var(--text); font-size: .8rem; padding: .6rem .9rem; border-radius: 6px; z-index: 2100; opacity: 0; transition: .25s; max-width: 92vw; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.toast.show { opacity: 1; transform: translateX(-50%); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--bg-elev); border-left: 1px solid var(--line-bright); z-index: 2050; transform: translateX(105%); transition: transform .25s; display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(0,0,0,.5); }
.drawer.open { transform: none; }
.drawer-head { padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; }
.drawer-body { padding: 1rem 1.1rem; overflow: auto; font-size: .85rem; }
.drawer-body h3 { margin: .4rem 0 .6rem; font-size: 1.05rem; line-height: 1.35; }
.dl { display: grid; grid-template-columns: 110px 1fr; gap: .45rem .7rem; margin: 1rem 0; font-size: .78rem; }
.dl dt { color: var(--muted); font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding-top: .1rem; }
.dl dd { margin: 0; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 2040; display: none; }
.scrim.open { display: block; }

/* zone page */
.zone-head { display: grid; gap: 1rem; grid-template-columns: 1fr; padding: 1.2rem 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; align-items: end; }
@media (min-width: 980px) { .zone-head { grid-template-columns: 1.4fr 1fr; } }
.crumbs { font: .72rem var(--font-mono); color: var(--muted); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.zone-head h1 { margin: .35rem 0 .25rem; font-size: clamp(1.5rem, 3.2vw, 2.15rem); line-height: 1.15; }
.zone-head .place { color: var(--muted); }
.zone-switch { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.zone-switch select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: .4rem .5rem; font: .8rem var(--font-sans); }
.zone-banner { position: relative; height: 120px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-bottom: 1.2rem; }
.zone-banner img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.zone-banner .cap { position: absolute; inset: auto 0 0 0; padding: .5rem .9rem; font-size: .72rem; color: var(--muted); background: linear-gradient(transparent, rgba(5,6,7,.9)); display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.kpis { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 1.25rem; }
.kpi { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .85rem; position: relative; }
.kpi .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding-right: 3.6rem; min-height: 2em; }
.kpi .sample-tag { position: absolute; top: .6rem; right: .6rem; }
.kpi .v { font: 700 1.55rem/1.2 var(--font-mono); letter-spacing: -.02em; margin: .3rem 0 .15rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.kpi .n { font-size: .7rem; color: var(--muted); }
.kpi .s { font: .62rem var(--font-mono); color: var(--dim); margin-top: .35rem; }
.kpi.stale { border-style: dashed; }
.kpi .stale-flag { font: 600 .58rem var(--font-mono); color: var(--up); letter-spacing: .08em; }
.zgrid2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 1.25rem; }
@media (min-width: 1000px) { .zgrid2 { grid-template-columns: 1.55fr 1fr; } }
.chart-svg { width: 100%; height: auto; display: block; }
.legend-row { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .72rem; color: var(--muted); margin-top: .4rem; }
.legend-row i { display: inline-block; width: 14px; height: 3px; margin-right: .35rem; vertical-align: 3px; }
.bars { display: flex; flex-direction: column; gap: .45rem; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 56px 46px; gap: .5rem; align-items: center; font-size: .78rem; }
.bar-row .bl { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bt { height: 9px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.bar-row .bf { height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius: 3px; }
.bar-row .bv { font-family: var(--font-mono); text-align: right; }
.issue { border-left: 3px solid var(--accent); }
.issue h2 { justify-content: flex-start !important; }
.issue .summary { font-size: .92rem; margin: 0 0 1rem; color: var(--text); max-width: 60rem; }
.issue-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .issue-grid { grid-template-columns: 1fr 1fr; } }
.issue-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .85rem; }
.issue-box h4 { margin: 0 0 .45rem; font: 600 .68rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.issue-box p, .issue-box li { font-size: .84rem; margin: 0; color: var(--text); }
.issue-box ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.sides { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .sides { grid-template-columns: 1fr 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.timeline li { display: grid; grid-template-columns: 74px 1fr; gap: .5rem; font-size: .82rem; }
.timeline b { font: 600 .72rem var(--font-mono); color: var(--accent); }
.edit-note { font: .66rem var(--font-mono); color: var(--dim); margin-top: .8rem; }
.src-row { font: .66rem var(--font-mono); color: var(--dim); margin-top: .5rem; }

/* compare */
.cmp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cmp-table th { text-align: left; font: 600 .66rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .55rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cmp-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cmp-table td.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.cmp-table tr.grp td { background: var(--bg); font: 600 .68rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.cmp-cols { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .cmp-cols { grid-template-columns: repeat(3, 1fr); } }
.cmp-col h3 { margin: 0 0 .5rem; font-size: .9rem; display: flex; justify-content: space-between; }
.def-list { display: grid; gap: .5rem; grid-template-columns: 1fr; font-size: .8rem; }
@media (min-width: 800px) { .def-list { grid-template-columns: 1fr 1fr; } }
.def-list div { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .5rem .65rem; }
.def-list b { font-family: var(--font-mono); font-size: .72rem; color: var(--accent); display: block; margin-bottom: .15rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--muted); font: .72rem var(--font-mono); padding: .35rem .6rem; cursor: pointer; }
.seg button.on { background: rgba(201,162,39,.12); color: var(--accent); }
.hbar { display: grid; grid-template-columns: 150px 1fr 70px; gap: .5rem; align-items: center; font-size: .78rem; margin-bottom: .4rem; }
.hbar .t { height: 12px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.hbar .f { height: 100%; border-radius: 3px; }
.hbar .num { font-family: var(--font-mono); text-align: right; }
.sandbox-banner .short, .swipe-hint { display: none; }
.footer .foot-sample { color: var(--sample); font-family: var(--font-mono); font-size: .72rem; }

/* phone */
@media (max-width: 640px) {
  :root { --sandbox-h: 0px; }
  .sandbox-banner { font-size: .62rem; line-height: 1.25; padding: 0 .6rem; }
  .wrap-wide { padding: 1rem .85rem 2.5rem; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .hero-stat { padding: .5rem; } .hero-stat .v { font-size: 1.05rem; } .hero-stat .k { font-size: .58rem; }
  .map-wrap svg { min-width: 620px; }
  .zone-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .ztile { padding: .6rem .6rem .5rem; } .ztile .zt-val { font-size: 1.1rem; } .ztile h3 { font-size: .78rem; }
  .ztile .sample-tag { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .kpi .v { font-size: 1.2rem; }
  .bar-row { grid-template-columns: 96px 1fr 48px 40px; font-size: .72rem; }
  .video-strip { grid-template-columns: 1fr; }
  .zone-banner { height: 80px; }
  .hbar { grid-template-columns: 100px 1fr 60px; }
  .cmp-scroll { overflow-x: auto; }
  .sandbox-banner .long { display: none; } .sandbox-banner .short { display: inline; }
  .swipe-hint { display: block; font: .66rem var(--font-mono); color: var(--muted); padding: .4rem 1.1rem 0; }
  html, body { overflow-x: hidden; }
}

/* ---------- phase 2: live data ---------- */
.sandbox-banner.live { background: linear-gradient(180deg, #0f1620, #121a24); border-bottom-color: #2f4a63; color: #9fc3e0; }
.sandbox-banner.live b.live-b { background: #2f6f9f; color: #fff; }
.sample-inline { color: #1a1405; background: var(--sample); padding: 0 .3rem; border-radius: 2px; font-weight: 700; }
.real-tag { display: inline-flex; align-items: center; gap: .25rem; font: 600 .6rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #9fc3e0; border: 1px solid rgba(111,159,200,.55); border-radius: 3px; padding: .18rem .32rem; background: rgba(111,159,200,.08); white-space: nowrap; }
.real-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #6fb39a; }
.await-tag { display: inline-flex; align-items: center; gap: .25rem; font: 600 .6rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8b95a8; border: 1px dashed #5a6578; border-radius: 3px; padding: .18rem .32rem; white-space: nowrap; }
.kpi .real-tag, .kpi .await-tag { position: absolute; top: .6rem; right: .6rem; }
.kpi .k { padding-right: 6.5rem; }
.kpi.awaiting { border-style: dashed; background: transparent; }
.kpi .v.aw { color: var(--dim); }
.kpi.awaiting .n { font-size: .72rem; line-height: 1.4; }
.kpi .s a { color: var(--dim); }
.kpi .s a:hover { color: var(--link); }
.ztile.awaiting { border-style: dashed; background: transparent; }
.ztile .zt-val.aw { color: var(--dim); font-size: 1rem; }
.ztile .zt-sub { font-size: .68rem; color: var(--muted); margin-top: .2rem; line-height: 1.35; }
.hero-stat.aw .v { color: var(--dim); }
.sample-section { position: relative; }
.sample-note { font: .66rem var(--font-mono); color: var(--sample); }
.src-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.src-table th { text-align: left; font: 600 .64rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .5rem; border-bottom: 1px solid var(--line); }
.src-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.src-table td.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.src-table tr:target td { background: rgba(201,162,39,.08); }
.src-group h3 { margin: 1.4rem 0 .5rem; font-size: 1rem; display: flex; gap: .6rem; align-items: center; }
.src-group .lic { font-size: .75rem; color: var(--muted); margin: 0 0 .6rem; }
.fn { counter-reset: fn; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.fn li { counter-increment: fn; display: grid; grid-template-columns: 2rem 1fr; gap: .4rem; font-size: .86rem; }
.fn li::before { content: "[" counter(fn) "]"; font: 600 .75rem var(--font-mono); color: var(--accent); padding-top: .1rem; }
.def-grid { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .def-grid { grid-template-columns: repeat(3, 1fr); } }
.def-grid div { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .7rem .8rem; font-size: .82rem; }
.def-grid b { display: block; font-family: var(--font-mono); font-size: .74rem; color: var(--accent); margin-bottom: .25rem; }
.def-grid .who { font: .66rem var(--font-mono); color: var(--dim); margin-top: .35rem; }
@media (max-width: 640px) { .src-scroll { overflow-x: auto; } .src-table { min-width: 720px; } .kpi .k { padding-right: 0; padding-top: 1.3rem; } }
/* phase 2 fix: source tag sits above the label so narrow cards don't wrap to 4 lines */
.kpi .k { padding-right: 0 !important; padding-top: 1.35rem; min-height: 0; }
.def-grid > div > .who { border: 0 !important; background: none !important; padding: 0 !important; }
.v2-hero { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .v2-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-stat .k { flex-wrap: wrap; }
@media (max-width: 640px) {
  .hero-stat .k { flex-direction: column; align-items: flex-start; }
  .hero-stat .real-tag, .hero-stat .await-tag { white-space: normal; font-size: .5rem; line-height: 1.2; }
}
.board { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .board { grid-template-columns: minmax(0, 1fr) 340px; } }
.zgrid2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .zgrid2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
@media (max-width: 640px) {
  .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ztile { padding: .6rem .6rem .5rem; }
  .ztile .zt-top { flex-direction: column-reverse; gap: .3rem; }
  .ztile .zt-row { flex-wrap: wrap; gap: .1rem .4rem; }
  .ztile .zt-val { font-size: 1.15rem; }
  .ztile .zt-asof span + span { display: none; }
}

/* ---- timelines (js/timeline.js) ---- */
.tl-card { margin-bottom: 1.25rem; }
.tl-ctl { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: .6rem; }
.tl-chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 420px; min-width: 0; }
.tl-chip { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: .28rem .7rem; font: .74rem var(--font-sans); cursor: pointer; text-align: left; line-height: 1.25; }
.tl-chip span { display: inline-block; margin-left: .4rem; font: .62rem var(--font-mono); color: var(--dim); letter-spacing: .03em; }
.tl-chip:hover { border-color: var(--line-bright); color: var(--text); }
.tl-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(201,162,39,.08); }
.tl-chip.on span { color: var(--accent-dim); }
.tl-chip.zone i { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; background: var(--c); margin-right: .4rem; opacity: .35; vertical-align: 0; }
.tl-chip.zone.on { border-color: var(--c); color: var(--text); background: rgba(255,255,255,.03); }
.tl-chip.zone.on i { opacity: 1; }
.tl-segs { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tl-dl { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; font: .7rem var(--font-mono); padding: .33rem .55rem; cursor: pointer; }
.tl-dl:hover { color: var(--accent); border-color: var(--accent-dim); }
.tl-meta { font-size: .76rem; color: var(--muted); margin: .1rem 0 .4rem; }
.tl-meta b { color: var(--text); font-weight: 600; }
.tl-box { position: relative; width: 100%; min-height: 200px; }
.tl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tl-grid { stroke: #222a38; stroke-width: 1; }
.tl-base { stroke: #4a5568; stroke-dasharray: 2 3; }
.tl-axis { stroke: #3a4558; }
.tl-ytick, .tl-xtick { fill: var(--dim); font: 10px var(--font-mono); }
.tl-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.tl-area { opacity: .1; }
.tl-bar { opacity: .85; }
.tl-bar.partial { opacity: .45; }
.tl-break { stroke: #6f9fc8; stroke-dasharray: 3 3; stroke-width: 1; opacity: .8; }
.tl-break-lab { fill: #6f9fc8; font: 9px var(--font-mono); }
.tl-event { stroke: var(--accent); stroke-width: 1; opacity: .55; }
.tl-event-dot { fill: #0c0e12; stroke: var(--accent); stroke-width: 1.3; }
.tl-event-num { fill: var(--accent); font: 700 8.5px var(--font-mono); }
.tl-cross { stroke: #8b95a8; stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.tl-tip { position: absolute; z-index: 5; pointer-events: none; background: rgba(12,14,18,.96); border: 1px solid var(--accent-dim); border-radius: 4px; padding: .45rem .6rem; font: .72rem var(--font-sans); color: var(--text); max-width: 260px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.tl-tip b { display: block; font: 600 .7rem var(--font-mono); color: var(--accent); margin-bottom: .2rem; }
.tl-tip i { display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; margin-right: .35rem; }
.tl-tip .tv { font-family: var(--font-mono); font-weight: 600; }
.tl-tip .tr, .tl-tip .tp { color: var(--muted); font-size: .66rem; }
.tl-tip .tb { color: #9cc0dd; font-size: .66rem; margin-top: .2rem; }
.tl-notes { list-style: none; padding: 0; margin: .7rem 0 0; display: grid; gap: .35rem; font-size: .74rem; color: var(--muted); }
.tl-notes li { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
.tl-notes b { color: var(--text); font: 600 .7rem var(--font-mono); }
.tl-notes .d { color: var(--muted); }
.tl-n { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font: 700 .6rem var(--font-mono); }
.tl-n.br { border-radius: 3px; border-color: #6f9fc8; color: #6f9fc8; padding: 0 .2rem; }
.tl-def { margin-top: .6rem; }
@media (max-width: 560px) {
  .tl-chips { flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
  .tl-chip { white-space: nowrap; }
  .tl-segs { width: 100%; justify-content: space-between; }
  .tl-notes { font-size: .7rem; }
}

/* ---------- real news (preview) ---------- */
.rlist li.rnews { padding: .7rem 0; }
.rnews h4 { margin: .3rem 0 .25rem; font-size: .88rem; line-height: 1.35; }
.ntitle { all: unset; cursor: pointer; font-weight: 600; color: var(--text); }
.ntitle:hover, .ntitle:focus-visible { color: var(--link); text-decoration: underline; }
.nsum { margin: .15rem 0 .35rem; font-size: .8rem; line-height: 1.45; color: #c3cad6; }
.nsum.pending { color: var(--dim); font-style: italic; font-size: .72rem; }
.nfoot { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tchip { font: .6rem var(--font-mono); letter-spacing: .04em; color: var(--muted); border: 1px solid var(--border); border-radius: 10px; padding: .1rem .45rem; }
.tchip.t-deaths { color: #e07a6a; border-color: #5a2f2a; } .tchip.t-crossings { color: #c9a227; border-color: #4a3f1c; }
.tchip.t-policy { color: #8fb3e0; border-color: #2b3d57; } .tchip.t-court { color: #b49be0; border-color: #3d3157; }
.tchip.t-enforcement { color: #7fc4a8; border-color: #24463a; } .tchip.t-politics { color: #d6a3c4; border-color: #4f3045; }
.cfchip { font: 600 .6rem var(--font-mono); color: #e0a64a; border: 1px solid #6b4d1f; border-radius: 3px; padding: .1rem .35rem; }
.cfnote { color: #e0a64a; font-size: .8rem; }
.nsrc { margin-left: auto; font: 600 .66rem var(--font-mono); color: var(--link); text-decoration: none; white-space: nowrap; }
.nsrc:hover { text-decoration: underline; }
.nmore { font: .62rem var(--font-mono); color: var(--dim); }
.digest { border: 1px solid #4a3f1c; border-left: 3px solid #c9a227; background: #15130c; border-radius: 6px; padding: .7rem .9rem; margin: .2rem 0 .8rem; }
.digest .dk { font: 600 .66rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #c9a227; margin-bottom: .3rem; }
.digest p { margin: 0 0 .3rem; font-size: .85rem; line-height: 1.5; }
.morenews { margin-top: .8rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.morenews summary { cursor: pointer; font: 600 .74rem var(--font-mono); color: var(--link); }
.morenews ul { list-style: none; margin: .5rem 0 0; padding: 0; columns: 2 380px; column-gap: 1.6rem; }
.morenews li { break-inside: avoid; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .78rem; line-height: 1.35; }
.morenews li a { color: var(--text); text-decoration: none; } .morenews li a:hover { color: var(--link); text-decoration: underline; }
.mdate { font: .64rem var(--font-mono); color: var(--dim); margin-right: .45rem; white-space: nowrap; }
.mout { display: block; font-size: .66rem; color: var(--muted); }
.drawer-outlets { list-style: none; padding: 0; margin: 0; } .drawer-outlets li { padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .8rem; }
.drawer-outlets .dtitle { color: var(--muted); font-size: .74rem; margin-top: .15rem; }

/* top banner removed (Mike, Oct 8 9:47 AM CT): no strip above the header on any build */
.sandbox-banner { display: none !important; }

/* home hero: tight start under the header (old banner gap removed) + two-level desk pill (Mike, Oct 8 1:55 PM CT) */
body[data-page="home"] .wrap-wide { padding-top: 16px; }
body[data-page="home"] .v2-hero { padding-top: 0; }
.desk-badge { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; row-gap: .1rem; max-width: 100%; }
.desk-badge .b-main { white-space: nowrap; }
.desk-badge .b-sub { white-space: nowrap; font-size: .75em; font-weight: 500; letter-spacing: .08em; color: var(--muted); opacity: .85; }
.desk-badge .b-dot { margin-right: .3em; }
@media (max-width: 640px) {
  body[data-page="home"] .wrap-wide { padding-top: 14px; }
  .desk-badge { column-gap: .4em; }
  /* longer "Illegal border crossing desk" label (Oct 14): suffix always on its own line on phones, no leading dot */
  .desk-badge .b-sub { flex-basis: 100%; }
  .desk-badge .b-dot { display: none; }
}

/* BH-UI-HEADERCAMS start (stage_live.py strips this block on live until .ui-cams-nav-live-enabled exists) */
/* header Cams button (shown on every page when cams data is present; visible on phone without opening Menu) */
.site-nav { gap: .6rem; }
.brand { min-width: 0; flex-shrink: 1; }
.nav-cams { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .75rem;
  font: 700 .74rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: #0c0e12; background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; text-decoration: none; }
.nav-cams:hover, .nav-cams:focus-visible { background: #e0b934; border-color: #e0b934; color: #0c0e12; text-decoration: none; }
.nav-cams.active { background: transparent; color: var(--accent); }
.nav-cams-dot { width: 7px; height: 7px; border-radius: 50%; background: #b3261e; box-shadow: 0 0 0 2px rgba(179,38,30,.3); animation: navcampulse 1.6s infinite; }
.nav-cams.active .nav-cams-dot { background: #e0453a; }
@keyframes navcampulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .nav-cams-dot { animation: none; } }
.nav-toggle { flex-shrink: 0; }
.nav-links { flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; }
@media (max-width: 640px) { .site-nav { padding: 0 .9rem; } .nav-cams { height: 30px; padding: 0 .65rem; font-size: .7rem; } }
@media (max-width: 380px) { .site-nav { gap: .45rem; padding: 0 .75rem; } .brand-mark { font-size: 1.05rem; } }
@media (min-width: 861px) and (max-width: 1180px) { .brand-tag { display: none; } .nav-links a { padding: .4rem .45rem; font-size: .72rem; letter-spacing: .04em; } }
/* tablet: inline links don't fit next to brand + Cams below ~860px, so use the Menu drawer there too */
@media (min-width: 641px) and (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--bg-elev); border-bottom: 1px solid var(--border); flex-direction: column; padding: .5rem; }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: .8rem; padding: .4rem .65rem; }
}
/* BH-UI-HEADERCAMS end */

/* tappable hero cards (cleanup gate) */
.hero-stat.hs-link { position: relative; padding-right: 1.3rem; transition: border-color .15s, background .15s, transform .1s; }
.hero-stat.hs-link:hover { border-color: var(--accent, #c9a227); }
.hero-stat.hs-link:active { transform: scale(.98); background: rgba(201,162,39,.08); }
.hero-stat .hs-stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hero-stat .hs-stretch:focus-visible { outline: 2px solid var(--accent, #c9a227); outline-offset: 2px; }
.hero-stat button.hs-stretch { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.hero-stat .hs-chev { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.2rem; pointer-events: none; }
.hero-stat.hs-link:hover .hs-chev { color: var(--accent, #c9a227); }
/* hero pop-in */
body.hs-pop-open { overflow: hidden; }
.hs-pop[hidden] { display: none; }
.hs-pop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.hs-pop-bg { position: absolute; inset: 0; background: rgba(0,0,0,.6); animation: hsFade .15s ease-out; }
.hs-pop-box { position: relative; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); width: min(440px, calc(100vw - 2rem)); max-height: 80vh; overflow: auto; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: hsPop .18s ease-out; outline: none; }
.hs-pop-box h2 { margin: 0 2rem .5rem 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hs-pop-txt { font-size: .9rem; line-height: 1.5; margin: 0 0 .8rem; }
.hs-pop-src { font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.hs-pop-src a { color: var(--accent, #c9a227); font-weight: 600; padding: .3rem 0; }
.hs-pop-zone { display: inline-block; margin-top: .7rem; font-size: .76rem; color: var(--muted); }
.hs-pop-x { position: absolute; top: .45rem; right: .5rem; width: 2.2rem; height: 2.2rem; border: 0; background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.hs-pop-x:hover { color: var(--text); background: rgba(255,255,255,.06); }
.hs-pop a:focus-visible, .hs-pop-x:focus-visible { outline: 2px solid var(--accent, #c9a227); outline-offset: 2px; }
@media (max-width: 640px) {
  .hs-pop { align-items: flex-end; }
  .hs-pop-box { width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0; padding: 1.3rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); animation: hsSheet .22s ease-out; }
  .hs-pop-box::before { content: ""; position: absolute; top: .45rem; left: 50%; transform: translateX(-50%); width: 2.4rem; height: 4px; border-radius: 2px; background: var(--border); }
}
@keyframes hsFade { from { opacity: 0 } }
@keyframes hsPop { from { opacity: 0; transform: scale(.96) } }
@keyframes hsSheet { from { transform: translateY(100%) } }