/* Audit logs (/audit): filters and calendar on the side, results beside them; stacked on phones. */
.al-layout { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.al-side, .al-main { min-width: 0; }
.al-jump { display: none; }
.al-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.al-more summary { cursor: pointer; margin: var(--s2) 0; font-weight: 600; }
.al-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.al-month th { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0 6px; }
.al-month td { padding: 2px; text-align: center; }
.al-day { display: grid; place-items: center; min-height: 36px; border-radius: 8px; color: var(--text); text-decoration: none; line-height: 1.1; }
.al-day small { font-size: 10px; color: var(--muted); }
.al-day.has { background: var(--accent-soft); font-weight: 600; }
.al-day:hover, .al-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.al-day.sel { background: var(--primary); color: var(--on-primary); }
.al-day.sel small { color: inherit; }
.al-saved { list-style: none; margin: 0; padding: 0; }
.al-saved li { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 2px 0; }
.al-save { gap: var(--s2); }
.al-save .input { flex: 1; min-width: 0; }
.al-table td { vertical-align: top; }
.al-who { min-width: 180px; max-width: 260px; }
.al-email { overflow-wrap: anywhere; }
.al-table td:first-child { min-width: 130px; }
.al-detail { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; }
.al-detail dt { font-weight: 600; color: var(--muted); }
.al-detail dd { margin: 0; overflow-wrap: anywhere; }
.al-json { margin: 0; padding: var(--s3); background: var(--surface-2); border-radius: 8px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow: auto; }
.al-hash { word-break: break-all; }
dialog.al-drawer { max-width: 640px; }
@media (max-width: 1100px) {
  .al-layout { grid-template-columns: 1fr; }
  .al-main { order: -1; }
  .al-jump { display: inline-flex; }
  .al-cal { max-width: 420px; }
}
@media (max-width: 520px) {
  .al-detail { grid-template-columns: 1fr; gap: 2px; }
  .al-detail dd { margin-bottom: var(--s2); }
}