/* ============================================================
   16 — BOARD & ROOM
   The two homepage graphics.

   SWITCHBOARD, not a radial fan. A fan from one core down to a
   row of receivers says "one hub". This product is not a hub, it
   is a MATRIX — any sender can reach any receiver — so the two
   sides are columns and between them sits a visible grid of
   crosspoints with the live ones lit. The shape is the claim.

   Not every crosspoint is lit, deliberately. A grid where every
   cell glows says nothing about which ones the customer turned
   on, and choosing is the whole point of the control.

   ROOM, not a dashboard screenshot. A screenshot is a picture of
   software; a room card is the thing itself — one source, its
   channels, the accounts it reaches, and the last execution with
   a status per account.
   ============================================================ */

.board{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(255,79,216,.13),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}

/* ---------- header ------------------------------------------- */
.board-hd{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--line-2);
  font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
}
.bh-brand{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-weight:600}
.bh-brand i{width:11px;height:11px;border-radius:3px;background:var(--spectrum);display:block}
.bh-sep{color:var(--faint)}
.bh-tag{color:var(--dim);letter-spacing:.08em;text-transform:none;font-size:12px}
.bh-live{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:var(--mint);
  padding:5px 11px;border-radius:var(--r-pill);border:1px solid rgba(49,229,164,.35);
  background:rgba(49,229,164,.1);
}
.bh-live i{
  width:6px;height:6px;border-radius:50%;background:var(--mint);display:block;
  animation:bpulse 2.4s ease-in-out infinite;
}
@keyframes bpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- stat strip ---------------------------------------
   Four figures, monospace, aligned on their own baseline. The
   labels are below the numbers, not beside them: read down the
   row it is four facts, and read across it is a sentence nobody
   wanted.
   ------------------------------------------------------------ */
.board-stats{
  display:flex;gap:0;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--line-2);
}
.board-stats > span{
  display:flex;flex-direction:column;gap:4px;padding-right:38px;
}
.board-stats b{
  font:700 22px/1 var(--display);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.board-stats em{font-style:normal;font-size:12px;color:var(--faint);margin-left:2px}
.board-stats small{
  font:500 10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
}

/* ---------- the svg ------------------------------------------ */
.board-svg{display:block;margin:0 auto;max-width:100%;height:auto;padding:8px 0 18px}
.axis{
  fill:var(--faint);font:500 10px var(--mono);letter-spacing:.16em;text-anchor:middle;
}
.axis.end{text-anchor:middle}

.gridlines .gcol,.gridlines .grow{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 6}
.xpt{fill:var(--faint);opacity:.45}
.xpt.on{
  fill:var(--cyan);opacity:1;
  animation:xon .5s cubic-bezier(.34,1.4,.64,1) both;
  animation-delay:calc(.5s + var(--i) * .035s);
}
@keyframes xon{from{opacity:0;r:1}}

.route{
  fill:none;stroke:url(#sw-wire);stroke-width:1.6;opacity:.5;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:rdraw 1.4s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(.7s + var(--i) * .1s);
}
@keyframes rdraw{to{stroke-dashoffset:0}}
.rider{fill:var(--cyan)}

.bchip rect{
  fill:rgba(26,15,46,.94);stroke:var(--line);stroke-width:1;
}
.bchip text{fill:var(--text);font:600 12.5px var(--display);dominant-baseline:central}
.bchip{animation:bin .5s cubic-bezier(.34,1.4,.64,1) both}
.bchip.sndr{animation-delay:calc(var(--i) * .07s)}
.bchip.rcvr{animation-delay:calc(.3s + var(--i) * .07s)}
@keyframes bin{from{opacity:0}}

@media(max-width:860px){
  .board-stats > span{padding-right:26px}
  .board-stats b{font-size:19px}
}
@media(max-width:560px){
  .board-hd{padding:12px 14px;gap:8px}
  .bh-live{margin-left:0}
  .board-stats{padding:13px 14px}
  .board-stats > span{padding-right:20px}
}

/* ============================================================
   ROOM
   ============================================================ */
.room{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.room-hd{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:15px 18px;border-bottom:1px solid var(--line-2);
}
.room-hd.sub{border-top:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.r-title{font:700 15px/1 var(--display);letter-spacing:-.01em}
.r-state{
  display:inline-flex;align-items:center;gap:7px;color:var(--mint);
  font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
}
.r-state i{width:6px;height:6px;border-radius:50%;background:var(--mint);
  animation:bpulse 2.4s ease-in-out infinite}
.r-count{
  margin-left:auto;font:500 11px/1 var(--mono);color:var(--faint);
  letter-spacing:.08em;
}

.room-src{padding:16px 18px}
.rs-lbl{
  font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);
}
.rs-body{
  display:flex;align-items:center;gap:13px;margin-top:11px;
  padding:13px;border-radius:var(--r);
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
}
.rs-name{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.rs-name b{font:700 14.5px/1.2 var(--display)}
.rs-name small{font-size:12px;color:var(--faint)}
.rs-chans{display:flex;flex:0 0 auto}
.rs-chans i{
  width:26px;height:26px;border-radius:50%;margin-left:-8px;font-style:normal;
  border:2px solid var(--deep);background:var(--lift);color:var(--dim);
  display:inline-block;text-align:center;font:600 9px/22px var(--mono);
  overflow:hidden;
}

/*  The flow strip is the only moving part of the room, and it moves once
    every few seconds rather than continuously — a room where something is
    always in flight tells you nothing about when anything actually fires. */
.room-flow{position:relative;height:44px;text-align:center}
.rf-line{
  position:absolute;left:18px;right:18px;top:50%;height:1px;margin-top:-.5px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.rf-line::after{
  content:"";position:absolute;top:-1.5px;left:0;width:70px;height:4px;border-radius:4px;
  background:var(--spectrum);filter:blur(1px);
  animation:rfrun 4.2s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes rfrun{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 70px);opacity:0}}
.rf-pill{
  position:relative;display:inline-block;top:50%;transform:translateY(-50%);
  padding:6px 14px;border-radius:var(--r-pill);
  border:1px solid rgba(255,79,216,.35);background:rgba(18,10,34,.96);
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}

.room-tgts{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 18px;
}
@media(max-width:620px){.room-tgts{grid-template-columns:1fr}}
.tgt{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:var(--r);
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  transition:border-color .2s,background .2s;
}
.tgt:hover{border-color:rgba(255,79,216,.4);background:rgba(255,79,216,.05)}
.t-name{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.t-name b{font:600 13.5px/1.2 var(--display);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.t-name small{font:400 11px/1 var(--mono);color:var(--faint)}
.t-dot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--mint);
}
/*  Waiting is amber and it is NOT hidden. An account that has not executed is
    the single most useful thing on this card, and a green dot on all six
    would be the most misleading. */
.tgt.wait .t-dot{background:var(--gold)}
.tgt.wait{border-color:rgba(255,201,60,.3)}

.room-exec{
  display:flex;align-items:center;gap:13px;
  padding:14px 18px;border-top:1px solid var(--line-2);
  background:rgba(49,229,164,.06);
}
.re-tick{
  width:28px;height:28px;border-radius:9px;flex:0 0 auto;
  display:inline-block;text-align:center;line-height:30px;
  background:rgba(49,229,164,.16);color:var(--mint);border:1px solid rgba(49,229,164,.35);
}
.re-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.re-body b{font:600 13.5px/1.3 var(--display)}
.re-body small{font-size:11.5px;color:var(--faint);line-height:1.5}
.re-ms{
  font:700 17px/1 var(--display);color:var(--mint);flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.re-ms em{font-style:normal;font-size:11px;color:var(--faint);margin-left:1px}

@media(prefers-reduced-motion:reduce){
  .bh-live i,.r-state i,.rf-line::after,.rider,.xpt.on,.route,.bchip{
    animation:none !important;
  }
  .route{stroke-dashoffset:0}
  .xpt.on,.bchip{opacity:1}
}