:root {
  /* Design typography token compatibility: Sans** San* */
  --courthouse-ink: #172338;
  --stream-blue: #2F6F9F;
  --civic-coral: #E66B4A;
  --rice-paper: #F5F1E8;
  --limestone-mist: #D9D2C3;
  --night-clerk: #0B1018;
  --pale-signal: #A8D4D8;
  --vellum: rgba(245, 241, 232, 0.78);
  --hairline: rgba(23, 35, 56, 0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--courthouse-ink);
  background:
    radial-gradient(circle at 72% 14%, rgba(168, 212, 216, 0.38), transparent 28rem),
    radial-gradient(circle at 12% 82%, rgba(230, 107, 74, 0.12), transparent 32rem),
    linear-gradient(135deg, #F5F1E8 0%, #EEE7DA 52%, #F5F1E8 100%);
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(23, 35, 56, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 35, 56, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 52% 44%, black 0%, transparent 78%);
  z-index: -3;
}

.paper-map {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.55;
  pointer-events: none;
}

.paper-map svg { width: 100%; height: 100%; }

.map-line,
.route-path,
.door-trace,
.draw-on-view {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-line {
  stroke: var(--limestone-mist);
  stroke-width: 2;
}

.map-line.soft { stroke: rgba(47, 111, 159, 0.2); }

.map-node {
  fill: rgba(168, 212, 216, 0.25);
  stroke: rgba(47, 111, 159, 0.25);
}

.directory-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 18px clamp(20px, 4vw, 56px);
  background: rgba(245, 241, 232, 0.76);
  border-bottom: 1px solid rgba(217, 210, 195, 0.72);
  backdrop-filter: blur(18px);
}

.wordmark {
  color: var(--courthouse-ink);
  text-decoration: none;
  font-family: Jost, Poppins, "Futura", system-ui, sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.wordmark span { color: var(--civic-coral); }

.room-nav {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2vw, 28px);
}

.room-nav a,
.live-pill,
.rail-label,
.eyebrow {
  font-family: Jost, Poppins, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.72rem;
}

.room-nav a {
  position: relative;
  color: rgba(23, 35, 56, 0.7);
  text-decoration: none;
  padding: 10px 0;
}

.room-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: var(--civic-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms ease;
}

.room-nav a:hover::after { transform: scaleX(1); }

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(47, 111, 159, 0.22);
  border-radius: 999px;
  background: rgba(168, 212, 216, 0.24);
  color: var(--stream-blue);
  white-space: nowrap;
}

.live-pill i,
.broadcast-topline b,
.status-card b {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: radial-gradient(circle, var(--civic-coral) 0 36%, var(--pale-signal) 40% 100%);
  box-shadow: 0 0 0 0 rgba(168, 212, 216, 0.72);
  animation: breathe 3.8s ease-in-out infinite;
}

.console-shell {
  width: min(1500px, calc(100vw - 40px));
  margin: 28px auto 72px;
  min-height: calc(100vh - 118px);
  display: grid;
  grid-template-columns: minmax(188px, 0.82fr) minmax(420px, 2.7fr) minmax(230px, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

.panel {
  border: 1px solid var(--hairline);
  border-radius: 34px;
  background: var(--vellum);
  box-shadow: 0 24px 80px rgba(23, 35, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(20px);
}

.docket-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 38px;
}

.rail-label { color: var(--stream-blue); padding-left: 14px; }

.docket-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 1px solid var(--limestone-mist);
  padding-left: 14px;
}

.docket-slip {
  position: relative;
  text-align: left;
  border: 1px solid rgba(217, 210, 195, 0.72);
  border-radius: 20px;
  padding: 16px;
  background: rgba(245, 241, 232, 0.65);
  color: var(--courthouse-ink);
  cursor: pointer;
  transition: transform 360ms ease, border-color 360ms ease, background 360ms ease;
  font: inherit;
}

.docket-slip::before {
  content: "";
  position: absolute;
  left: -21px;
  top: 25px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--limestone-mist);
  border: 3px solid var(--rice-paper);
}

.docket-slip::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--civic-coral);
  border-radius: 15px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 360ms ease, transform 360ms ease;
}

.docket-slip:hover,
.docket-slip.active {
  transform: translateX(6px);
  border-color: rgba(230, 107, 74, 0.5);
  background: rgba(255, 250, 240, 0.84);
}

.docket-slip:hover::after,
.docket-slip.active::after { opacity: 1; transform: scale(1); }
.docket-slip.active::before { background: var(--civic-coral); }
.docket-slip span { display: block; color: var(--stream-blue); font-weight: 600; font-size: 0.85rem; }
.docket-slip strong { display: block; margin: 7px 0 4px; font-family: Jost, Poppins, sans-serif; }
.docket-slip em { color: rgba(23, 35, 56, 0.58); font-style: normal; font-size: 0.88rem; }

.clerk-note {
  margin-top: auto;
  color: rgba(23, 35, 56, 0.62);
  line-height: 1.5;
  padding: 14px;
}

.chamber-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 720px;
  padding: clamp(24px, 4vw, 52px);
  overflow: hidden;
}

.chamber-stage::before {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: 26px;
  border: 1px dashed rgba(47, 111, 159, 0.16);
  pointer-events: none;
}

.stage-copy { max-width: 780px; position: relative; z-index: 2; }
.eyebrow { color: var(--stream-blue); margin: 0 0 14px; }

h1,
h2,
h3 { margin: 0; }

h1,
.section-heading h2 {
  font-family: "League Spartan", Jost, Poppins, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

h1 { font-size: clamp(3.8rem, 9vw, 9.4rem); max-width: 930px; }
.stage-copy p:last-child { max-width: 560px; margin: 22px 0 0; line-height: 1.7; font-size: 1.05rem; color: rgba(23, 35, 56, 0.68); }

.stream-frame {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(760px, 100%);
  aspect-ratio: 1.66;
  margin: 20px 0;
}

.route-frame { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); overflow: visible; }
.route-path { stroke: var(--civic-coral); stroke-width: 3; }
.branch-route { stroke: var(--stream-blue); stroke-width: 2; opacity: 0.66; }
.door-trace { stroke: rgba(23, 35, 56, 0.35); stroke-width: 1.4; }

.video-inset {
  position: absolute;
  inset: 0;
  border-radius: 36px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(168, 212, 216, 0.16), transparent 14rem),
    linear-gradient(160deg, #0B1018 0%, #172338 56%, #102945 100%);
  border: 1px solid rgba(245, 241, 232, 0.18);
  color: var(--rice-paper);
  box-shadow: 0 34px 84px rgba(11, 16, 24, 0.26);
}

.broadcast-topline {
  display: flex;
  justify-content: space-between;
  padding: 22px 26px;
  color: rgba(245, 241, 232, 0.72);
  font-family: Jost, Poppins, sans-serif;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.broadcast-topline span:first-child { display: inline-flex; align-items: center; gap: 9px; }

.bench-line {
  position: absolute;
  left: 12%; right: 12%; bottom: 31%; height: 82px;
  border: 1px solid rgba(168, 212, 216, 0.28);
  border-radius: 110px 110px 18px 18px;
  border-bottom-color: rgba(230, 107, 74, 0.55);
}

.mic-row { position: absolute; left: 50%; top: 44%; display: flex; gap: 34px; transform: translateX(-50%); }
.mic-row i { width: 2px; height: 58px; background: rgba(168, 212, 216, 0.7); position: relative; }
.mic-row i::before { content: ""; position: absolute; top: -12px; left: -5px; width: 12px; height: 18px; border: 1px solid rgba(245, 241, 232, 0.52); border-radius: 999px; }

.caption-ribbon {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(245, 241, 232, 0.08);
  color: rgba(245, 241, 232, 0.82);
  border: 1px solid rgba(245, 241, 232, 0.14);
}

.room-labels { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 2; }
.room-chip {
  border: 1px solid rgba(47, 111, 159, 0.24);
  background: rgba(168, 212, 216, 0.17);
  color: var(--stream-blue);
  border-radius: 999px;
  padding: 12px 16px;
  font-family: Jost, Poppins, sans-serif;
  cursor: pointer;
  transition: background 300ms ease, transform 300ms ease;
}
.room-chip:hover, .room-chip.pulsing { background: rgba(230, 107, 74, 0.12); transform: translateY(-2px); color: var(--civic-coral); }

.context-wall { display: grid; gap: 18px; align-content: start; padding-top: 78px; }
.small-note { padding: 24px; border-radius: 28px; }
.small-note h2, .small-note h3 { font-family: Jost, Poppins, sans-serif; letter-spacing: -0.03em; }
.small-note p { color: rgba(23, 35, 56, 0.64); line-height: 1.58; }
.seal { display: block; width: 62px; height: 62px; border: 1px solid var(--civic-coral); border-radius: 50%; margin-bottom: 20px; background: radial-gradient(circle, rgba(230,107,74,0.13) 0 32%, transparent 34%); }
.node-line { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 8px; align-items: center; margin-top: 18px; color: var(--stream-blue); font-family: Jost, Poppins, sans-serif; font-size: 0.8rem; }
.node-line i { height: 1px; background: linear-gradient(90deg, var(--stream-blue), var(--civic-coral)); }
.status-card b { margin-right: 8px; vertical-align: -1px; }

.room-section { width: min(1180px, calc(100vw - 40px)); margin: 0 auto 96px; scroll-margin-top: 100px; }
.section-heading { display: grid; grid-template-columns: minmax(180px, 0.45fr) 1fr; gap: 30px; align-items: end; margin-bottom: 26px; }
.section-heading h2 { font-size: clamp(3rem, 6vw, 6.8rem); max-width: 860px; }

.corridor,
.transcript-garden,
.signal-board,
.archive-wall { position: relative; min-height: 330px; padding: clamp(22px, 4vw, 48px); overflow: hidden; }

.rail-track { position: absolute; left: 8%; right: 8%; top: 52%; height: 1px; background: var(--limestone-mist); }
.hearing-marker { position: absolute; width: 210px; padding: 18px; border-radius: 22px; background: rgba(245, 241, 232, 0.78); border: 1px solid var(--hairline); transform: translateY(0); transition: transform 600ms ease; }
.hearing-marker:nth-of-type(2) { left: 9%; top: 28%; }
.hearing-marker:nth-of-type(3) { left: 39%; top: 55%; }
.hearing-marker:nth-of-type(4) { right: 9%; top: 24%; }
.hearing-marker.active { border-color: rgba(230,107,74,0.42); }
.hearing-marker span, .archive-slip span { color: var(--stream-blue); font-size: 0.78rem; font-family: Jost, Poppins, sans-serif; text-transform: uppercase; letter-spacing: 0.12em; }
.hearing-marker strong, .archive-slip strong { display: block; margin-top: 8px; font-family: Jost, Poppins, sans-serif; }
.corridor-route, .underline-svg, .signal-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.draw-on-view { stroke: var(--civic-coral); stroke-width: 3; opacity: 0.9; }
.draw-on-view.delay { stroke: var(--stream-blue); }

.transcript-line {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 760px;
  margin: 18px 0;
  padding: 18px 22px;
  border: 1px solid rgba(217, 210, 195, 0.82);
  border-radius: 18px 18px 18px 4px;
  background: rgba(245, 241, 232, 0.84);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  box-shadow: 0 12px 26px rgba(23, 35, 56, 0.06);
}
.transcript-line.offset { margin-left: min(24vw, 260px); border-radius: 18px 18px 4px 18px; }

.signal-board { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 24px; }
.signal-node {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(47, 111, 159, 0.28);
  background: rgba(168, 212, 216, 0.17);
  font-family: Jost, Poppins, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stream-blue);
}
.signal-node.active { background: rgba(230, 107, 74, 0.13); color: var(--civic-coral); box-shadow: 0 0 0 16px rgba(168, 212, 216, 0.14); }

.archive-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.archive-slip { min-height: 210px; padding: 22px; border-radius: 24px; background: rgba(245, 241, 232, 0.82); border: 1px solid rgba(217, 210, 195, 0.82); display: flex; flex-direction: column; justify-content: space-between; }
.archive-slip em { color: rgba(23, 35, 56, 0.55); font-style: normal; }

.is-visible .draw-on-view,
.loaded .route-path,
.loaded .door-trace,
.loaded .map-line { animation: drawPath 2.8s ease forwards; }
.loaded .branch-route { animation-delay: 520ms; }
.loaded .door-trace { animation-delay: 900ms; }
.route-frame.path-pulse .main-route { animation: redrawPulse 1.4s ease forwards; }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes redrawPulse { 0% { stroke-dashoffset: var(--path-length); } 100% { stroke-dashoffset: 0; } }
@keyframes breathe { 50% { box-shadow: 0 0 0 12px rgba(168, 212, 216, 0.08); } }

@media (max-width: 1050px) {
  .directory-bar { grid-template-columns: 1fr auto; }
  .room-nav { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; }
  .console-shell { grid-template-columns: 1fr; }
  .docket-rail { order: 2; padding-top: 0; }
  .context-wall { grid-template-columns: repeat(3, 1fr); padding-top: 0; }
  .chamber-stage { min-height: 650px; }
  .section-heading { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .directory-bar { display: flex; flex-wrap: wrap; }
  .console-shell, .room-section { width: min(100vw - 24px, 1180px); }
  .chamber-stage { padding: 22px; border-radius: 26px; min-height: 620px; }
  .context-wall, .signal-board, .archive-wall { grid-template-columns: 1fr; }
  .section-heading h2 { font-size: clamp(2.8rem, 14vw, 5rem); }
  .hearing-marker { position: relative; width: auto; left: auto !important; right: auto !important; top: auto !important; margin: 14px 0; }
  .rail-track { display: none; }
  .transcript-line.offset { margin-left: 0; }
}