/* One stylesheet. Two screens do not need a design system. */

:root {
  --ink: #16181d;
  --dim: #5b6270;
  --line: #e3e6ec;
  --bg: #f7f8fa;
  --card: #fff;
  --accent: #1f6feb;
  --good: #148a45;
  --warn: #b26a00;
  --bad: #c0392b;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

header {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--line);
}
header .brand { font-weight: 650; letter-spacing: -0.01em; }
header nav { display: flex; gap: 14px; }
header nav a { color: var(--dim); text-decoration: none; padding: 4px 2px; }
header nav a:hover { color: var(--ink); }
header nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px var(--accent); }
header .who { margin-left: auto; color: var(--dim); font-size: 13px; }

main { max-width: 1100px; margin: 0 auto; padding: 22px 20px 60px; }

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 16px; margin: 26px 0 10px; letter-spacing: -0.01em; }
.sub { color: var(--dim); margin: 0 0 18px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}

.row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 0; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.tile b { display: block; font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.tile span { color: var(--dim); font-size: 13px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 550; font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
.scroll { overflow-x: auto; }

.pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
}
.pill.good { color: var(--good); border-color: #bfe3cd; background: #f2fbf5; }
.pill.warn { color: var(--warn); border-color: #f0dcb4; background: #fffaf0; }
.pill.bad  { color: var(--bad);  border-color: #f2c9c3; background: #fdf5f4; }

.muted { color: var(--dim); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

button, .btn {
  font: inherit; padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;
}
button:hover { border-color: #c8cdd7; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.06); }
button[disabled] { opacity: 0.5; cursor: default; }

input, select, textarea {
  font: inherit; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); width: 100%;
}
label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--dim); }
textarea { min-height: 90px; resize: vertical; }

.note {
  border-left: 3px solid var(--line); padding: 8px 12px;
  color: var(--dim); font-size: 13px; background: var(--card); border-radius: 0 8px 8px 0;
}
.note.warn { border-left-color: #e0b040; }

.empty { padding: 28px; text-align: center; color: var(--dim); }

form.signin { max-width: 360px; margin: 60px auto; }

/* ── The comms desk ───────────────────────────────────────────
   A two-pane inbox: conversations on the left, the one you are in on the
   right. It is the only screen here that is worked all day rather than
   looked at, so it gets the width and its own furniture. */

main.wide { max-width: 1340px; }

.comms {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 14px;
  align-items: start;
}

.pane { overflow: hidden; }

.pane-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--card);
}
.pane-head input[type="search"] { flex: 1 1 140px; min-width: 0; padding: 5px 9px; font-size: 13px; }

/* Segmented control: which side of the network you are looking at. */
.segbar { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segbar button {
  border: 0; border-radius: 0; padding: 5px 11px; font-size: 13px;
  color: var(--dim); background: var(--card);
}
.segbar button + button { border-left: 1px solid var(--line); }
.segbar button[aria-selected="true"] { background: var(--accent); color: #fff; }
.segbar button:hover { border-color: var(--line); color: var(--ink); }
.segbar button[aria-selected="true"]:hover { color: #fff; }

.only { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--dim); }
.only input { width: auto; }

/* ── the list ── */
.threadlist { max-height: 62vh; overflow-y: auto; }

.thread {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 10px 12px; background: var(--card);
}
.thread:hover { background: #fafbfd; border-color: var(--line); }
.thread.on { background: #eef4fe; box-shadow: inset 3px 0 var(--accent); }

.thread .line1 { display: flex; align-items: baseline; gap: 8px; }
.thread .nm { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread .when { color: var(--dim); font-size: 12px; flex: 0 0 auto; }
.thread .line2 { display: flex; align-items: center; gap: 6px; margin: 3px 0 2px; flex-wrap: wrap; }
.thread .prev {
  display: block; color: var(--dim); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread .prev em { font-style: normal; color: #97a0b0; }

/* They spoke last. The one thing worth a color in a list of gray. */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); flex: 0 0 auto; }

.pill.alt { color: #5a4b9c; border-color: #d9d3f0; background: #f7f5fd; }

/* ── the conversation ── */
.convo-head { align-items: flex-start; }
.convo-head b { margin-right: 8px; }

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px 16px; margin: 0; padding: 10px 12px;
  border-bottom: 1px solid var(--line); background: #fbfcfe;
}
.facts dt { color: var(--dim); font-size: 12px; }
.facts dd { margin: 0 0 6px; font-size: 13px; }

.msgs {
  height: 46vh; min-height: 260px; overflow-y: auto;
  padding: 14px 12px; display: flex; flex-direction: column; gap: 10px;
  background: var(--bg);
}
.msg { max-width: 76%; }
.msg.them { align-self: flex-start; }
.msg.us { align-self: flex-end; }

.bub {
  padding: 8px 11px; border-radius: 12px; white-space: pre-wrap;
  overflow-wrap: anywhere; border: 1px solid var(--line); background: var(--card);
}
.msg.us .bub { background: var(--accent); border-color: var(--accent); color: #fff; }

.stamp { color: var(--dim); font-size: 11px; margin-top: 3px; }
.msg.us .stamp { text-align: right; }

.reply { padding: 12px; border-top: 1px solid var(--line); background: var(--card); }
.reply textarea { min-height: 0; }

.tile b.good { color: var(--good); }
.tile b.warn { color: var(--warn); }
.tile b.bad  { color: var(--bad); }

@media (max-width: 860px) {
  .comms { grid-template-columns: 1fr; }
  .threadlist { max-height: 42vh; }
  .msgs { height: 40vh; }
  .msg { max-width: 88%; }
}