/* page header: the date scope belongs here, with the page it scopes */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: var(--sp-150);
}
.kicker { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-120); color: var(--text-dim); }
.scope { display: flex; align-items: center; gap: var(--sp-35); flex-wrap: wrap; }

.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-125); margin-bottom: 2rem; }
.stat { padding: 1.6rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel); }
.stat-k { font-size: var(--fs-66); letter-spacing: 0.15em; color: var(--text-faint); }
.stat-v { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.005em; margin-top: var(--sp-50); font-variant-numeric: tabular-nums; }
.stat-n { font-size: var(--fs-76); color: var(--text-dim); margin-top: var(--sp-10); }

/* list toolbar sits ON the list, because it filters the list */
.toolbar {
  display: flex; align-items: center; gap: 0.4rem 0.5rem; flex-wrap: wrap;
  padding-bottom: var(--sp-80); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--sp-100);
}
.toolbar .search { margin-left: auto; }
.count { font-size: var(--fs-76); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.chip {
  padding: 0.36rem 0.78rem; border-radius: 999px; font-size: var(--fs-78); font-weight: 600;
  color: var(--text-dim); border: 1px solid var(--line-soft); white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.chip:hover { color: var(--text); border-color: var(--line); }
.chip[aria-pressed="true"] { color: var(--bg-0); background: var(--lilac); border-color: var(--lilac); }

.search {
  display: flex; align-items: center; gap: var(--sp-50); padding: 0.4rem 0.8rem;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line-soft);
  flex: 0 1 18rem; min-width: 9rem;
}
.search input { flex: 1; min-width: 0; font-size: var(--fs-85); }
.search input::placeholder { color: var(--text-faint); }
.search input:focus { outline: none; }
.search svg { flex: none; color: var(--text-faint); }

/* ---- call table: one line per call, time first ---- */
.tablewrap {
  overflow-x: auto; border: 1px solid var(--line-soft);
  border-radius: var(--radius); background: var(--panel);
}
table.calls { width: 100%; border-collapse: collapse; font-size: var(--fs-86); }
.calls thead th {
  text-align: left; font-size: var(--fs-62); letter-spacing: 0.14em;
  color: var(--text-faint); white-space: nowrap;
  padding: 0.62rem 0.8rem; border-bottom: 1px solid var(--line);
}
.calls thead th.sortable { cursor: pointer; user-select: none; }
.calls thead th.sortable:hover { color: var(--text); }
.calls thead th .caret { margin-left: var(--sp-25); color: var(--violet); }
.calls tbody tr { cursor: pointer; transition: background 0.15s ease; }
.calls tbody tr:hover { background: var(--panel-2); }
.calls tbody tr:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.calls tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.calls td { padding: 0.52rem 0.8rem; vertical-align: middle; }

.c-when { white-space: nowrap; color: var(--text-faint); font-variant-numeric: tabular-nums; width: 9rem; }
.c-when b { color: var(--text-dim); font-weight: 600; }
.c-who { white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); }
.c-who.anon { color: var(--text-faint); font-style: italic; }
.c-num { white-space: nowrap; color: var(--text-faint); font-variant-numeric: tabular-nums; width: 10rem; }
.c-why { color: var(--text); font-weight: 500; min-width: 14rem; }
.c-why .why { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-why .sub { display: none; font-size: var(--fs-74); color: var(--text-faint); margin-top: var(--sp-10); }
.c-len { text-align: right; white-space: nowrap; color: var(--text-faint); font-variant-numeric: tabular-nums; width: 4.5rem; }
.c-state { text-align: right; white-space: nowrap; width: 14.5rem; }
.c-state .pill + .pill { margin-left: var(--sp-30); }

/* Belongs to queue.css by area, but stays here: it shares equal specificity
   with .calls td / .calls thead th above and has always won only by coming
   after them in source. Moving it to queue.css (linked after list.css)
   would still let it win here, at base width -- the trap is its
   @media (max-width: 52rem) twin below, which needs the OPPOSITE order
   (.calls td's mobile override must win there), so both copies have to sit
   next to .calls td for their relative order to come out right in both
   places at once. */
.queue td, .queue thead th { padding-left: var(--sp-60); padding-right: var(--sp-60); }

/* a row you have just settled stays put until you leave the view, so the
   list never reshuffles under your finger */
.calls tbody tr.is-settled td { opacity: 0.55; }
.calls tbody tr.is-settled .c-why .why { text-decoration: line-through; text-decoration-color: var(--line); }

/* the drill-through chip the dashboard sets on the call list */
.pin { display: inline-flex; align-items: center; gap: var(--sp-35); font-size: var(--fs-74); font-weight: 600; color: var(--violet); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.65rem; }
.pin button { color: var(--text-faint); line-height: 1; padding: 0 0.3rem; border-radius: 50%; font-size: var(--fs-90); }
.pin button:hover { color: var(--crit); }

/* ---- pagination ---- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-100); flex-wrap: wrap; margin-top: var(--sp-100); }
.pager-info { font-size: var(--fs-78); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pager-btns { display: flex; gap: var(--sp-30); align-items: center; }
.pg {
  min-width: 2.1rem; padding: 0.35rem 0.6rem; border-radius: var(--radius);
  border: 1px solid var(--line-soft); font-size: var(--fs-80); font-weight: 600;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.pg:hover:not([disabled]) { color: var(--text); border-color: var(--line); background: var(--panel); }
.pg[aria-current="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.pg[disabled] { opacity: 0.35; cursor: default; }
.pg-gap { color: var(--text-faint); padding: 0 0.15rem; }

.pill {
  display: inline-flex; align-items: center; gap: var(--sp-30);
  font-size: var(--fs-68); letter-spacing: 0.07em;
  padding: 0.24rem 0.6rem; border-radius: 999px; white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill--ok { color: var(--ok); background: var(--ok-bg); }
.pill--crit { color: var(--crit); background: var(--crit-bg); }
.pill--lead { color: var(--lead); background: var(--lead-bg); }
.pill--quiet { color: var(--text-faint); background: var(--panel); }

@media (max-width: 52rem) {
  .page-head { gap: var(--sp-75); }
  .kicker { font-size: 1.05rem; flex: 1 1 100%; }
  .summary { grid-template-columns: repeat(3, 1fr); gap: var(--sp-60); }
  .stat { padding: 0.85rem 0.7rem; }
  .stat-v { font-size: var(--fs-120); }
  .stat-n { display: none; }
  .toolbar .search { margin-left: 0; flex: 1 1 100%; order: 5; }
  .count { order: 4; margin-left: auto; }
  .calls .c-num, .calls .c-len { display: none; }

  .c-why .sub { display: block; }
  .c-who { display: none; }
  .c-when { width: 6.5rem; white-space: normal; }
  .c-state { width: auto; }
  /* must come before .calls td below -- see the comment by its base rule
     above */
  .queue td, .queue thead th { padding-left: var(--sp-50); padding-right: var(--sp-50); }
  .calls td { padding: 0.6rem 0.65rem; }

  .search { padding: 0.45rem 0.85rem; }
}

@media (max-width: 30rem) {
  .calls thead { display: none; }
  .c-state .pill + .pill { margin-left: 0; margin-top: var(--sp-20); }
  .c-state { text-align: right; }
}