/* Logs. Only what is particular to this page — surfaces come from
   platform-kit.css.

   A log is a history, not a stream: periods fold, and only the one happening
   now is open. That is the whole point of the layout, so the group heading is
   the main affordance and the entries inside are deliberately quiet. */

.pl-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.pl-controls input, .pl-controls select {
  padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--sd-line); background:var(--paper,#fff); color: var(--sd-ink);
}
.pl-controls input { flex: 1 1 240px; min-width: 0; }
.pl-controls select, .pl-controls .app-select-shell { flex: 0 1 180px; min-width: 150px; }
.pl-controls .app-select-shell > * { width: 100%; }
.pl-controls input:focus, .pl-controls select:focus {
  outline: none; border-color: var(--sd-blue); box-shadow: 0 0 0 3px rgba(54,126,245,.15);
}

/* ── the entries ─────────────────────────────────────────────────────── */
.pl-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sd-mut); font-size: 12.5px; }
.pl-event {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background:var(--sd-sunk,#eef2f8); padding: 2px 7px; border-radius: 6px; color: var(--sd-mut); white-space: nowrap;
}
.pl-msg { min-width: 0; word-break: break-word; }

/* ── the date pickers ────────────────────────────────────────────────── */
.pl-dates { align-items: center; }
.pl-dates-label { font-size: 12.5px; font-weight: 600; color: var(--sd-mut); }
.pl-dates select, .pl-dates .app-select-shell { flex: 0 1 170px; min-width: 140px; }
.pl-dates select:disabled { opacity: .5; cursor: not-allowed; }

/* ── paging ──────────────────────────────────────────────────────────────
   How many fit on a page sits on the left with the range it is showing; the
   page buttons sit on the right, where a hand already is after scrolling. */
.pl-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 16px;
}
.pl-per { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--sd-mut); }
.pl-per label { display: inline-flex; align-items: center; gap: 7px; }
.pl-per select {
  padding: 7px 10px; border-radius: 9px; font: inherit; font-size: 13px;
  border: 1px solid var(--sd-line); background:var(--paper,#fff); color: var(--sd-ink);
}
.pl-range { font-variant-numeric: tabular-nums; }

.pl-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pl-pbtn {
  min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px;
  border: 1px solid var(--sd-line); background:var(--paper,#fff); color: var(--sd-ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.pl-pbtn:hover:not(:disabled):not(.on) { border-color: #c9d6ea; background:var(--sd-sunk,#f5f8ff); }
.pl-pbtn.on { background: var(--sd-blue); border-color: var(--sd-blue-ink); color: #fff; }
.pl-pbtn:disabled { opacity: .4; cursor: default; }
.pl-gap { padding: 0 4px; color: var(--sd-mut); }

@media (max-width: 640px) {
  .pl-pager { flex-direction: column; align-items: stretch; }
  .pl-pages { justify-content: center; }
}