/* Wallboard, in the Lagoon design system: the floating pill header, tables
   in rounded cards, state pills and pill buttons. Colours are style.css
   tokens only, so both themes work. */
.wb-head { max-width: none; margin: 16px max(16px, calc((100% - 1648px) / 2)) 0; }
.wb-main { max-width: 1680px; }
.wb-spacer { flex: 1; }
.wb-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-links { display: flex; gap: 2px; }
.wb-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
.wb-auth { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wb-auth input { width: 150px; min-height: 44px; padding: 8px 16px; border-radius: var(--pill); font-size: 15px; }
.wb-auth.hidden { display: none; }

.wb table { font-size: 14.5px; }
.wb td, .wb th { white-space: nowrap; }
/* style.css gives every .num the mono face; headers stay in the text face. */
.wb th.num { font-family: var(--font); font-size: 13px; }
.wb td.name { font-weight: 800; }
.wb td.num { font-family: var(--mono); }
.wb td.mono { font-family: var(--mono); font-size: 14px; }
.wb .muted-cell { color: var(--muted); }
.wb .over { display: inline-block; padding: 1px 10px; border-radius: var(--pill); background: var(--bad-soft); color: var(--bad-text); font-weight: 500; }

/* Pills not covered by the base set. */
.wb .pill.wb-machine { background: var(--machine-soft); color: var(--machine-text); }
.wb .pill.wb-accent { background: var(--accent-soft); color: var(--accent-strong); }
.wb .pill .dot { width: 8px; height: 8px; }

/* Action and listen-in buttons: pill groups, comfortable to tap. */
.wb .acts { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
.wb td .acts button { min-height: 38px; padding: 6px 14px; font-size: 14px; border-width: 2px; }
.wb td .acts button.soft { border-color: transparent; }
.wb td .acts button.stop { background: var(--bad-soft); color: var(--bad-text); border-color: transparent; }
.wb td .acts button.stop:hover { border-color: var(--bad); }
.wb td .mon-note { font-size: 12.5px; color: var(--muted); margin-top: 4px; white-space: normal; }
@media (pointer: coarse) { .wb td .acts button { min-height: 44px; } }

@media (max-width: 1272px) { .wb-head { margin-left: 16px; margin-right: 16px; } }
@media (max-width: 640px) {
  .wb-head { margin: 10px 10px 0; }
  .wb-head h1 { font-size: 17px; }
  .wb-head .brand-mark { width: 28px; height: 28px; }
  .wb-spacer { display: none; }
  .wb-summary { flex: 1 1 100%; order: 3; }
  .wb-links { margin-left: auto; }
  .wb-auth { flex: 1 1 100%; order: 4; }
  .wb-auth input { flex: 1 1 120px; width: auto; }
  .wb-auth button { flex: 1 1 100%; }
}