/* Briefing Hub — post-unlock home */
:root {
  --bh-bg: #04070d;
  --bh-panel: #0c121c;
  --bh-ink: #e8f4ff;
  --bh-muted: #9db0c4;
  --bh-cyan: #7fe9ff;
  --bh-purple: #c084fc;
  --bh-gold: #fbbf24;
  --bh-mono: "Share Tech Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
.bh-body {
  background:
    radial-gradient(ellipse 60% 40% at 10% 0%, rgba(127, 233, 255, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 35% at 90% 5%, rgba(192, 132, 252, 0.14), transparent 50%),
    linear-gradient(180deg, #071018, var(--bh-bg));
  color: var(--bh-ink);
  font-family: Inter, system-ui, sans-serif;
}
.bh-skip { position: absolute; left: -999px; }
.bh-skip:focus { left: 0.5rem; top: 0.5rem; z-index: 99; background: #000; color: #fff; padding: 0.5rem; }

.bh-top {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(127, 233, 255, 0.28);
  background: rgba(4, 7, 13, 0.92);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
}
.bh-brand {
  display: flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: inherit;
}
.bh-brand img { border-radius: 50%; border: 1px solid rgba(127, 233, 255, 0.4); }
.bh-brand strong { display: block; letter-spacing: 0.08em; font-size: 0.9rem; }
.bh-brand em {
  display: block; font-style: normal;
  font-family: var(--bh-mono); font-size: 0.55rem;
  letter-spacing: 0.14em; color: var(--bh-cyan);
}
.bh-top-actions {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
}
.bh-clr {
  font-family: var(--bh-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  padding: 0.35rem 0.55rem; border-radius: 4px;
  border: 1px solid rgba(127, 233, 255, 0.35);
  color: var(--bh-cyan); background: rgba(8, 20, 28, 0.85);
}
.bh-elevate {
  font-family: var(--bh-mono); font-size: 0.58rem; letter-spacing: 0.08em;
  color: var(--bh-gold); text-decoration: none;
  /* 44px, not 40 — house floor for anything tappable */
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0.25rem 0.4rem;
}
.bh-elevate:hover { text-decoration: underline; }

.bh-main {
  width: min(1100px, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: 1.25rem 0 3rem;
}
.bh-session {
  margin: 0 0 0.55rem;
  font-family: var(--bh-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  color: var(--bh-cyan);
}
.bh-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.04em;
}
.bh-lede {
  margin: 0 0 1.35rem;
  color: var(--bh-muted); font-size: 1.02rem; max-width: 36rem;
}

.bh-tiles {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .bh-tiles { grid-template-columns: 1fr 1fr; }
  /* Eight tiles at identical weight gave no read on what matters. The lead
     lane spans the row so the eye has somewhere to land first; everything
     below it stays a peer of everything else, which is honest — they ARE
     peers. Only the lead is promoted, so the hierarchy is two levels, not
     eight shades of important. */
  .bh-tile-lead { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .bh-tiles { grid-template-columns: repeat(4, 1fr); }
}
.bh-tile {
  display: flex; flex-direction: column; gap: 0.25rem;
  min-height: 112px;
  padding: 0.9rem 1rem;
  text-decoration: none; color: inherit;
  border-radius: 12px;
  border: 1px solid rgba(127, 233, 255, 0.28);
  background:
    linear-gradient(160deg, rgba(14, 24, 36, 0.96), rgba(10, 14, 22, 0.96));
  box-shadow: 0 0 0 rgba(127, 233, 255, 0);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.bh-tile:hover, .bh-tile:focus-visible {
  border-color: rgba(192, 132, 252, 0.65);
  box-shadow: 0 0 24px rgba(127, 233, 255, 0.18);
  transform: translateY(-2px);
  outline: none;
}
.bh-tile-board {
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(160deg, rgba(36, 24, 10, 0.95), rgba(12, 14, 20, 0.96));
}
.bh-tile-kicker {
  font-family: var(--bh-mono); font-size: 0.58rem; letter-spacing: 0.12em;
  color: var(--bh-cyan); text-transform: uppercase;
}
.bh-tile strong { font-size: 1.05rem; letter-spacing: 0.02em; }
.bh-tile-sub { font-size: 0.8rem; color: var(--bh-muted); }

.bh-today {
  margin-top: 1.75rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(192, 132, 252, 0.35);
  background: rgba(18, 10, 28, 0.55);
}
.bh-today h2, .bh-field h2 {
  margin: 0 0 0.75rem;
  font-family: var(--bh-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--bh-purple); font-weight: 700;
}
.bh-today-grid {
  display: grid; gap: 0.65rem;
}
@media (min-width: 700px) {
  .bh-today-grid { grid-template-columns: 1fr 1fr; }
}
.bh-today-card {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  text-decoration: none; color: inherit;
  background: rgba(4, 7, 13, 0.65);
  border: 1px solid rgba(127, 233, 255, 0.2);
  min-height: 44px;
}
.bh-today-card:hover { border-color: var(--bh-gold); }
.bh-today-tag {
  font-family: var(--bh-mono); font-size: 0.52rem; letter-spacing: 0.12em;
  color: var(--bh-gold);
}
.bh-today-card span:last-child { font-size: 0.82rem; color: var(--bh-muted); }

.bh-field { margin-top: 1.75rem; }
.bh-field-note { margin: 0 0 0.65rem; color: var(--bh-muted); font-size: 0.88rem; }
.bh-field-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .bh-field-list { grid-template-columns: 1fr 1fr; }
}
.bh-field-list a {
  display: flex; align-items: center;
  min-height: 44px; padding: 0.45rem 0.75rem;
  border-radius: 8px;
  color: var(--bh-ink); text-decoration: none;
  border: 1px solid rgba(127, 233, 255, 0.18);
  background: rgba(8, 14, 22, 0.7);
  font-size: 0.92rem;
}
.bh-field-list a:hover { border-color: var(--bh-cyan); color: var(--bh-cyan); }

.bh-quick {
  margin-top: 2rem; padding-top: 1rem;
  border-top: 1px solid rgba(127, 233, 255, 0.2);
  font-family: var(--bh-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--bh-muted);
}
.bh-quick a { color: var(--bh-cyan); }