/* ===================== dispatch board ===================== */
#board-wrap{margin-bottom:26px}

.bstrip{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--panel,#122232);border:1px solid var(--line,rgba(255,255,255,.09));
  border-radius:12px;padding:11px 16px;margin-bottom:10px}
.bstrip .v{font:700 21px/1 var(--mono,monospace);color:var(--ok,#3ecf8e);
  font-variant-numeric:tabular-nums}
.bstrip .l{font-size:12px;color:var(--dim,#8ba3b8);margin-right:4px}
.bstrip .sep{width:1px;height:22px;background:var(--line,rgba(255,255,255,.12))}
.bstrip .right{margin-left:auto;font-size:12.5px;color:var(--warn,#f5a524)}
.bstrip .prov{font:10px var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim,#8ba3b8);border:1px solid var(--line,rgba(255,255,255,.14));
  border-radius:20px;padding:2px 8px;cursor:help}

.board{background:var(--panel,#122232);border:1px solid var(--line,rgba(255,255,255,.09));
  border-radius:14px;overflow:hidden}

.bhead,.brow{display:grid;
  grid-template-columns:12px 210px 96px minmax(0,1fr) 190px 78px 16px;
  gap:13px;align-items:center;padding:11px 16px}
.bhead{font:10px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim,#8ba3b8);background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--line,rgba(255,255,255,.09))}

.brow{border-bottom:1px solid var(--line,rgba(255,255,255,.07));cursor:pointer;
  transition:background .18s ease}
.brow:hover{background:rgba(255,255,255,.035)}
.brow.open{background:rgba(255,255,255,.05)}

.blamp{width:9px;height:9px;border-radius:50%;background:#3a4150;justify-self:center}
.s-work .blamp{background:var(--ok,#3ecf8e);animation:blamp 1.7s ease-in-out infinite}
.s-wait .blamp{background:var(--warn,#f5a524);animation:blampA 1.4s ease-in-out infinite}
/* idle stays neutral on purpose: amber must only ever mean "needs you",
   and an accent-coloured lamp reads as a second alert state */
.s-idle .blamp{background:#4a5568}
@keyframes blamp{0%,100%{box-shadow:0 0 0 0 rgba(62,207,142,.5)}50%{box-shadow:0 0 0 7px rgba(62,207,142,0)}}
@keyframes blampA{0%,100%{box-shadow:0 0 0 0 rgba(245,165,36,.55)}50%{box-shadow:0 0 0 7px rgba(245,165,36,0)}}

.bwho{display:flex;align-items:center;gap:10px;min-width:0}
.bface{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--bg2,#0e1a26);cursor:pointer;display:block;position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:box-shadow .2s ease}
.bface img{width:100%;height:100%;object-fit:cover;display:block}
.bface:hover{box-shadow:inset 0 0 0 1px var(--ac),0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent)}
.binit{display:grid;place-items:center;width:100%;height:100%;
  font:600 13px var(--mono,monospace);color:var(--ac)}
.bnm{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.bnm b{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnm span{font:10px var(--mono,monospace);letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim,#8ba3b8)}

.bclk{font:13px var(--mono,monospace);color:var(--dim,#8ba3b8);font-variant-numeric:tabular-nums}
.s-work .bclk{color:var(--ok,#3ecf8e)}
.s-wait .bclk{color:var(--warn,#f5a524)}

.bnow{font:12.5px var(--mono,monospace);color:#c7f0da;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnow.wait{color:var(--warn,#f5a524)}
.bnow.quiet{color:var(--dim,#8ba3b8)}
.s-work .bnow::after{content:"";display:inline-block;width:7px;height:13px;
  background:var(--ok,#3ecf8e);vertical-align:-2px;margin-left:2px;
  animation:bcur 1s steps(1) infinite}
@keyframes bcur{50%{opacity:0}}

.bday{display:flex;gap:1.5px;height:9px;align-items:stretch}
.bday i{flex:1;border-radius:1.5px;min-width:2px}

.bcnt{font:13px var(--mono,monospace);color:var(--dim,#8ba3b8);text-align:right}
.bcnt b{color:var(--text,#e8f0f6);font-weight:650}
.bchev{color:var(--dim,#8ba3b8);font-size:17px;transition:transform .2s ease;justify-self:center}
.brow.open .bchev{transform:rotate(90deg)}

.bdrawer{display:none;padding:4px 16px 16px 51px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.07));
  background:rgba(0,0,0,.18)}
.bdrawer.open{display:block}
.bdh{font:10px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim,#8ba3b8);margin:10px 0 7px}
.blog{background:rgba(0,0,0,.3);border:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:9px;padding:9px 12px}
.bl{display:flex;gap:11px;font:11.5px/1.75 var(--mono,monospace);align-items:baseline}
.bl .tm{color:var(--dim,#8ba3b8);flex:0 0 52px}
.bl .tx{color:var(--text,#e8f0f6);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.bl .tx.quiet{color:var(--dim,#8ba3b8)}
.bchips{display:flex;gap:7px;flex-wrap:wrap}
.chipb{font-size:11.5px;color:var(--dim,#8ba3b8);background:var(--panel2,rgba(255,255,255,.05));
  border:1px solid var(--line,rgba(255,255,255,.09));border-radius:20px;padding:4px 11px}
.bacts{margin-top:11px}
.bbtn{font-size:12px;color:var(--ac);text-decoration:none;border:1px solid var(--ac);
  border-radius:8px;padding:6px 12px;display:inline-block;opacity:.85}
.bbtn:hover{opacity:1;background:color-mix(in srgb,var(--ac) 14%,transparent)}

/* narrow: drop the day bar, then the clock */
@media(max-width:1000px){
  .bhead,.brow{grid-template-columns:12px 180px 88px minmax(0,1fr) 70px 16px}
  .bhead span:nth-child(5),.brow .bday{display:none}
}
@media(max-width:680px){
  .bhead{display:none}
  .brow{grid-template-columns:12px 1fr 62px 16px;gap:10px}
  .brow .bclk{display:none}
  .brow .bnow{grid-column:2 / span 3;white-space:normal;font-size:12px}
  .bdrawer{padding-left:16px}
}
@media (prefers-reduced-motion: reduce){
  .blamp,.s-work .bnow::after{animation:none !important}
}