/*
 * Bridge console.
 *
 * Deliberately plainer than Essentials. This is an operator tool used by a
 * handful of people who need to read tables quickly, not a product surface.
 * Clay rather than teal, so nobody confuses the two while both are open.
 */

:root {
  --paper: #fbfaf8; --surface: #fff; --surface-2: #f3f1ec;
  --ink: #1d1a16; --ink-2: #55504a; --ink-3: #8a837a;
  --line: #e4e0d7; --clay: #a4551f; --clay-deep: #7b3f16; --clay-soft: #f6ece2;
  --good: #0d6d5e; --good-soft: #dcece8; --bad: #a32e2e; --bad-soft: #f7e6e4;
  --shadow: 0 1px 2px rgba(29,26,22,.05), 0 6px 18px rgba(29,26,22,.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14120f; --surface: #1c1916; --surface-2: #24201c;
    --ink: #ece8e2; --ink-2: #b0a89e; --ink-3: #837b71;
    --line: #2c2823; --clay: #d99a67; --clay-deep: #eab588; --clay-soft: #2d2117;
    --good: #4cbca6; --good-soft: #16302c; --bad: #e08a84; --bad-soft: #33201e;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.25);
  }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
h1 { font-size:1.6rem; margin:.1em 0 .3em; letter-spacing:-.015em; }
h2 { font-size:1.05rem; margin:0 0 .6em; }
h3 { font-size:.95rem; margin:1.4em 0 .4em; }
p { margin:0 0 .9em; }
a { color:var(--clay); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--clay); outline-offset:2px; }
.mono { font-family:ui-monospace, Menlo, Consolas, monospace; }
.small { font-size:.88rem; } .xsmall { font-size:.78rem; } .muted { color:var(--ink-3); }
.num { font-variant-numeric:tabular-nums; text-align:right; }
.bad { color:var(--bad); font-weight:600; }
.eyebrow { font-family:ui-monospace,monospace; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .3em; }

.bar { background:var(--surface); border-bottom:1px solid var(--line); }
.bar__in { max-width:1040px; margin:0 auto; padding:12px 24px; display:flex;
  align-items:center; justify-content:space-between; gap:16px; }
.bar__right { display:flex; align-items:center; gap:12px; }
.bar__right form { margin:0; }
.who { font-size:.84rem; color:var(--ink-3); }
.brand { display:flex; align-items:center; gap:9px; font-weight:650;
  text-decoration:none; color:var(--ink); }
.brand__mark { width:22px; height:22px; border-radius:6px;
  background:linear-gradient(140deg,var(--clay),var(--clay-deep)); }

.wrap { max-width:1040px; margin:0 auto; padding:30px 24px 70px; }
.head { margin-bottom:22px; }

.panel { background:var(--surface); border:1px solid var(--line); border-radius:11px;
  padding:20px 22px; box-shadow:var(--shadow); margin-bottom:16px; }
.panel--warn { border-left:3px solid var(--clay); background:var(--clay-soft); }

.notice { background:var(--good-soft); color:var(--good); border-radius:8px;
  padding:11px 15px; margin:0 0 16px; font-size:.92rem; }
.notice--bad { background:var(--bad-soft); color:var(--bad); }

.tbl { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.88rem; min-width:520px; }
th { text-align:left; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--line); }
td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2); }
td:first-child { color:var(--ink); }
tr:last-child td { border-bottom:none; }

.pill { display:inline-block; padding:.1em .6em; border-radius:99px; font-size:.75rem;
  font-weight:600; background:var(--surface-2); color:var(--ink-2); }
.pill--active, .pill--delivered { background:var(--good-soft); color:var(--good); }
.pill--error, .pill--dead, .pill--failed { background:var(--bad-soft); color:var(--bad); }
.pill--pending, .pill--delivering { background:var(--clay-soft); color:var(--clay); }

.form { display:flex; flex-direction:column; gap:13px; margin-top:16px; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media (max-width:640px){ .row { grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:4px; }
.field > span { font-size:.8rem; font-weight:600; color:var(--ink-2); }
input, select { font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:7px; padding:8px 11px; width:100%; }

.btn { font:inherit; font-weight:600; font-size:.9rem; color:#fff; background:var(--clay);
  border:1px solid transparent; border-radius:7px; padding:8px 17px; cursor:pointer;
  align-self:flex-start; }
.btn:hover { background:var(--clay-deep); }
.btn--quiet { background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn--quiet:hover { background:var(--surface-2); }
.btn--sm { padding:5px 12px; font-size:.82rem; }

.actions { display:flex; flex-wrap:wrap; gap:9px; }
.actions form { margin:0; }

.kv { display:grid; grid-template-columns:max-content 1fr; gap:5px 16px; margin:12px 0 0; }
.kv dt { color:var(--ink-3); } .kv dd { margin:0; word-break:break-all; }

.bare { display:grid; place-items:center; min-height:100vh; padding:24px; }
.bare .panel { max-width:420px; width:100%; padding:32px 34px; }