/* Styles for the auditor UI the audit_log gem mounts at /audit.

   HOST ASCENDER: turned on, loaded with every other stylesheet by
   stylesheet_link_tag :app (all rules are scoped under .audit-log), and
   rethemed: the palette reads the dashboard's tokens (application.css), so
   light and dark follow the rest of the app. The frame no longer paints its own
   panel, and section headings are sentence case. The gem's original notes
   follow.
   ---------------------------------------------------------------------------
   SHIPPED COMMENTED OUT, so this file is a no-op until you decide otherwise.
   The engine's screens carry semantic class names and no stylesheet, because
   CSS pushed into an application nobody asked for is worse than none. This is a
   starting point you own outright: it is never re-generated, and nothing in the
   gem depends on it existing.

   TO TURN IT ON: delete the bare `/*` line just below this comment, and the
   last line of the file. In most editors you can instead select from there to
   the end and hit the toggle-block-comment key.

   THEN LINK IT -- nothing loads a stylesheet that is merely present:
     Propshaft   <%= stylesheet_link_tag "audit_log" %> in your layout
     Sprockets   *= require audit_log  in application.css
     Sass        @import "audit_log"; in application.scss -- one line, and
                 what an importmap app with a dartsass pipeline wants

   WHAT IS IN THERE, in order. There are deliberately no comments inside the
   block: one would close it early and leave the rest of the stylesheet live, so
   the map lives up here instead.

     1. Palette          15 custom properties on .audit-log -- 14 colours and a
                         font stack. Every other rule reads them, so rethemeing
                         is these and not a rewrite.
     2. Frame            typography, links, and the width of the audit region
     3. Text helpers     notes, hints, monospace, numerics
     4. Tables           table.grid, the bordered panel the browse screens use
     5. Badges           operation, source, out-of-band
     6. Diffs            table.diff, and the red and green of a field change
     7. Association labels, and the ids they annotate
     8. Nav and tabs
     9. Filters          date and dimension, inputs, buttons
    10. Cards            the dashboard tiles and its two-column split
    11. Payload          the dl an event's metadata renders into
    12. Timeline         the ?view=timeline rail, its cards and disclosures
    13. Responsive       two breakpoints
    14. Dark mode        the @media block at the very end

   FIVE RULES LOOK ODD AND ARE NOT. They were arrived at by rendering these
   screens and fixing what broke, so they are worth keeping if you rework this:

     .timeline .fields is a GRID and its <li> is `display: contents`, so every
       child of an <li> is a grid cell and all four columns size against every
       row. Per-row layout leaves arrows out of line and a short value marooned
       across half a card. A helper returning two elements for one cell shifts
       every later column -- valid markup, correct values, scrambled page.
     .timeline .record-list .fields li repeats that `display: contents` because
       the .record-list li rule above it matches the same elements at the SAME
       specificity, so source order alone decides, and without the repeat every
       cell re-flows into one flex line.
     .timeline .record-list details drops the -7px hanging summary the outer two
       disclosure levels use. Left at that default the deepest triangle hangs
       further LEFT than the record row it belongs to and the nesting reads
       inside out.
     The disclosure triangle is drawn with BORDERS rather than a glyph. At this
       size a character renders as a speck in the system stack; a border
       triangle is crisp at any size and needs no font coverage.
     .timeline .activity::before is the rail dot, and it is the only thing
       carrying `kind`: a registered action gets the accent fill, a change with
       no narrative gets a hollow one. A sentence this library composed from
       column names must never look like one the registry froze at emit time.

   DARK MODE IS LAST SO IT IS EASY TO DROP. Keeping it makes these screens
   follow the READER's system setting rather than your application's, which on a
   light-only app shows as a dark panel inside a light page. Delete that one
   @media block and the screens stay light for everyone.

   EVERY RULE IS SCOPED under .audit-log, the element the engine wraps each of
   its screens in, so nothing here can reach your own .card or .note. The four
   properties on that element -- background, max-width, margin and padding --
   are the first thing to change if your layout already provides a frame: they
   are there so the screens look finished with no help from the host, which
   means they paint a panel your page did not ask for.

   COLOUR IS NEVER THE ONLY SIGNAL: a before value is muted when it is an
   absence rather than red, badges carry their own text, and a redacted payload
   says so in words. Keep that if you retheme -- an auditor may be colour blind,
   and these screens are read as evidence.
*/

.audit-log {
  --al-bg: transparent;
  --al-panel: var(--surface);
  --al-ink: var(--ink);
  --al-muted: var(--muted);
  --al-line: var(--line);
  --al-line-soft: var(--surface-sunken);
  --al-well: var(--surface-sunken);
  --al-accent: var(--busy);
  --al-warn: var(--warn);
  --al-warn-line: var(--line-strong);
  --al-warn-bg: var(--surface-sunken);
  --al-insert: var(--ok);
  --al-update: var(--busy);
  --al-delete: var(--danger);
  --al-mono: var(--mono);
}

.audit-log {
  background: var(--al-bg);
  color: var(--al-ink);
  font: inherit;
  margin-inline: auto;
  max-width: 74rem;
  padding: 0 0 40px;
}

.audit-log *,
.audit-log *::before,
.audit-log *::after { box-sizing: border-box; }

.audit-log h1 { font-size: 22px; margin: 0 0 4px; }

.audit-log h2 {
  color: var(--al-ink);
  font-size: 15px;
  margin: 28px 0 8px;
}

.audit-log a { color: var(--al-accent); text-decoration: none; }
.audit-log a:hover { text-decoration: underline; }

.audit-log .note {
  color: var(--al-muted);
  font-size: 13px;
  margin: 4px 0 14px;
  max-width: 78ch;
}

.audit-log .hint { color: var(--al-muted); font-size: 12px; }
.audit-log .small { font-size: 12px; }
.audit-log .muted { color: var(--al-muted); }
.audit-log .nowrap { white-space: nowrap; }
.audit-log .num { font-variant-numeric: tabular-nums; text-align: right; }

.audit-log .mono,
.audit-log .req,
.audit-log code { font-family: var(--al-mono); font-size: 12.5px; }

.audit-log table.grid {
  background: var(--al-panel);
  border: 1px solid var(--al-line);
  border-collapse: collapse;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  width: 100%;
}

.audit-log table.grid th {
  background: var(--al-well);
  border-bottom: 1px solid var(--al-line);
  color: var(--al-muted);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 8px 10px;
  text-align: left;
  text-transform: uppercase;
}

.audit-log table.grid td {
  border-bottom: 1px solid var(--al-line-soft);
  padding: 8px 10px;
  vertical-align: top;
}

.audit-log table.grid tr:last-child td { border-bottom: none; }

.audit-log table.grid.compact td,
.audit-log table.grid.compact th { font-size: 13px; padding: 5px 10px; }

.audit-log td.empty { color: var(--al-muted); font-style: italic; }
.audit-log td.empty.ok { color: var(--al-insert); font-style: normal; }

.audit-log tr.detail td {
  background: var(--al-well);
  border-bottom: 1px solid var(--al-line-soft);
  padding-top: 0;
}

.audit-log tr.out-of-band-row td { background: light-dark(#fffaf2, #2a2317); }
.audit-log summary { color: var(--al-muted); cursor: pointer; font-size: 12px; }

.audit-log .badge {
  background: var(--al-well);
  border: 1px solid var(--al-line);
  border-radius: 10px;
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  white-space: nowrap;
}

.audit-log .badge.op-insert { background: light-dark(#f2f8f3, #1b2a1f); border-color: light-dark(#c8dfcd, #2f4a37); color: var(--al-insert); }
.audit-log .badge.op-update { background: light-dark(#f2f6fa, #1a2530); border-color: light-dark(#c8d6e2, #2f4356); color: var(--al-update); }
.audit-log .badge.op-delete { background: light-dark(#fdf3f1, #2e1d1a); border-color: light-dark(#e6cdc8, #563430); color: var(--al-delete); }

.audit-log .badge.warn,
.audit-log .badge.out-of-band {
  background: var(--al-warn-bg);
  border-color: var(--al-warn-line);
  color: var(--al-warn);
}

.audit-log .badge.source-web,
.audit-log .badge.source-api { color: var(--al-update); }
.audit-log .badge.source-job { color: var(--al-warn); }
.audit-log .badge.source-system,
.audit-log .badge.source-console { color: var(--al-delete); }

.audit-log .col-chip { background: light-dark(#f1f1ec, #2b2d31); border-radius: 4px; padding: 1px 5px; }

.audit-log table.diff { border-collapse: collapse; margin: 6px 0 10px; width: 100%; }

.audit-log table.diff td {
  border-bottom: 1px solid light-dark(#f2f2ee, var(--al-line-soft));
  font-size: 13px;
  padding: 3px 8px;
}

.audit-log table.diff .field-name {
  color: var(--al-muted);
  font-family: var(--al-mono);
  font-size: 12px;
  width: 22%;
}

.audit-log table.diff .old { color: var(--al-delete); width: 34%; }
.audit-log table.diff .new { color: var(--al-insert); width: 34%; }
.audit-log table.diff .arrow { color: var(--al-muted); text-align: center; width: 4%; }
.audit-log .nil-value { color: var(--al-muted); font-style: italic; }

.audit-log .assoc-id {
  color: var(--al-muted);
  font-family: var(--al-mono);
  font-size: 11px;
}

.audit-log .assoc-missing,
.audit-log .assoc-failed {
  color: var(--al-warn);
  font-size: 11px;
  font-style: italic;
}

.audit-log .label-note { margin: 4px 0 10px; }

.audit-log .audit-nav {
  align-items: baseline;
  border-bottom: 1px solid var(--al-line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
  padding: 8px 0 14px;
}

.audit-log .audit-nav .audit-brand { font-weight: 700; margin-right: 6px; }

.audit-log .audit-nav a.on,
.audit-log .tabs a.on { color: var(--al-ink); font-weight: 700; }

.audit-log .tabs { display: flex; gap: 14px; margin: 10px 0 14px; }

.audit-log .date-filter,
.audit-log .dimension-filter {
  align-items: center;
  background: var(--al-panel);
  border: 1px solid var(--al-line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
}

.audit-log .date-filter label,
.audit-log .dimension-filter label { color: var(--al-muted); }
.audit-log .date-filter label.chk { color: var(--al-ink); }

.audit-log input,
.audit-log select {
  background: var(--al-panel);
  border: 1px solid var(--al-line);
  border-radius: 5px;
  color: var(--al-ink);
  font: inherit;
  font-size: 13px;
  padding: 5px 7px;
}

.audit-log .button,
.audit-log button,
.audit-log input[type="submit"] {
  background: var(--al-panel);
  border: 1px solid var(--al-line);
  border-radius: 6px;
  color: var(--al-ink);
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  padding: 6px 12px;
}

.audit-log .button:hover,
.audit-log button:hover { border-color: var(--al-accent); text-decoration: none; }

.audit-log .cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 20px;
}

.audit-log .card {
  background: var(--al-panel);
  border: 1px solid var(--al-line);
  border-radius: 8px;
  padding: 14px;
}

.audit-log .card.warn { background: light-dark(#fdf9f3, #2a2317); border-color: var(--al-warn-line); }

.audit-log .card .n {
  display: block;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.audit-log .card .l { color: var(--al-muted); font-size: 12px; }
.audit-log .two-col { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }

.audit-log dl.payload {
  display: grid;
  font-size: 13px;
  gap: 3px 12px;
  grid-template-columns: minmax(90px, 160px) 1fr;
  margin: 6px 0 4px;
}

.audit-log dl.payload dt { color: var(--al-muted); }
.audit-log dl.payload dd { margin: 0; overflow-wrap: anywhere; }

.audit-log .redaction-note {
  border-left: 2px solid var(--al-warn-line);
  color: var(--al-warn);
  font-size: 12px;
  margin: 6px 0;
  max-width: 78ch;
  padding-left: 8px;
}

.audit-log .record-list { font-size: 13px; margin: 6px 0 0; padding-left: 18px; }
.audit-log .record-list li { margin-bottom: 3px; }

.audit-log .pagination {
  align-items: center;
  display: flex;
  gap: .75rem;
  margin: 1rem 0;
}

.audit-log .export { margin: 1rem 0; }
.audit-log .export .hint { margin-left: .5rem; }

.audit-log .timeline {
  border-left: 1px solid var(--al-line);
  list-style: none;
  margin: 0 0 8px;
  padding: 0 0 0 24px;
}

.audit-log .timeline > li { position: relative; }

.audit-log .timeline .activity {
  background: var(--al-panel);
  border: 1px solid var(--al-line);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 11px 14px 12px;
}

.audit-log .timeline .activity::before {
  background: var(--al-panel);
  border: 2px solid var(--al-line);
  border-radius: 50%;
  content: "";
  height: 9px;
  left: -29px;
  position: absolute;
  top: 14px;
  width: 9px;
}

.audit-log .timeline .activity.kind-narrative::before {
  background: var(--al-accent);
  border-color: var(--al-accent);
}

.audit-log .timeline .activity.redacted { background: light-dark(#fdfaf5, #2a2317); border-color: var(--al-warn-line); }

.audit-log .timeline .meta {
  align-items: center;
  color: var(--al-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px;
  margin-bottom: 6px;
}

.audit-log .timeline .meta time { font-variant-numeric: tabular-nums; }
.audit-log .timeline .meta .req { font-size: 11px; margin-left: auto; }

.audit-log .timeline .headline { font-size: 14.5px; line-height: 1.45; margin: 0 0 3px; }
.audit-log .timeline .headline .summary.derived { color: var(--al-muted); }
.audit-log .timeline .who { color: var(--al-muted); font-size: 12px; margin: 0; }

.audit-log .timeline .fields {
  align-items: baseline;
  border-top: 1px solid var(--al-line-soft);
  display: grid;
  font-size: 13px;
  gap: 3px 10px;
  grid-template-columns: minmax(84px, 150px) minmax(0, max-content) 16px minmax(0, 1fr);
  list-style: none;
  margin: 9px 0 0;
  padding: 8px 0 0;
}

.audit-log .timeline .fields li { display: contents; }

.audit-log .timeline .fields .fname {
  color: var(--al-muted);
  font-family: var(--al-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.audit-log .timeline .fields .old { color: var(--al-delete); overflow-wrap: anywhere; }
.audit-log .timeline .fields .new { color: var(--al-insert); overflow-wrap: anywhere; }
.audit-log .timeline .fields .arrow { color: var(--al-muted); text-align: center; }

.audit-log .timeline details { font-size: 13px; margin-top: 7px; }
.audit-log .timeline details + details { margin-top: 5px; }

.audit-log .timeline details > summary {
  align-items: center;
  border-radius: 5px;
  display: flex;
  gap: 6px;
  list-style: none;
  margin-left: -7px;
  padding: 3px 7px;
  user-select: none;
  width: fit-content;
}

.audit-log .timeline details > summary::-webkit-details-marker { display: none; }

.audit-log .timeline details > summary::before {
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--al-muted);
  border-top: 4px solid transparent;
  content: "";
  flex: none;
  height: 0;
  transition: transform .12s ease;
  width: 0;
}

.audit-log .timeline details[open] > summary::before { transform: rotate(90deg); }
.audit-log .timeline details > summary:hover { background: light-dark(#f4f4f0, #2b2d31); color: var(--al-ink); }
.audit-log .timeline details[open] > summary { color: var(--al-ink); }

.audit-log .timeline details > *:not(summary) {
  background: var(--al-well);
  border: 1px solid var(--al-line-soft);
  border-radius: 6px;
  margin: 5px 0 2px;
  padding: 8px 10px;
}

.audit-log .timeline details dl.payload {
  font-size: 12.5px;
  grid-template-columns: minmax(90px, 170px) 1fr;
}

.audit-log .timeline .record-list { list-style: none; margin: 5px 0 2px; padding-left: 0; }

.audit-log .timeline .record-list li {
  align-items: baseline;
  border-bottom: 1px solid light-dark(#f4f4f0, var(--al-line-soft));
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
}

.audit-log .timeline .record-list li:last-child { border-bottom: none; }
.audit-log .timeline .record-list .col-chip { font-size: 11.5px; }

.audit-log .timeline .record-list details.touched-fields {
  flex: 1 1 100%;
  margin: 2px 0 4px 18px;
  min-width: 0;
}

.audit-log .timeline .record-list details.touched-fields > summary { margin-left: 0; }
.audit-log .timeline .record-list .fields li { display: contents; }

.audit-log .timeline .redaction-note { font-size: 12.5px; margin: 8px 0 2px; }
.audit-log .timeline li.empty { color: var(--al-muted); font-style: italic; padding: 10px 0; }

@media (max-width: 780px) {
  .audit-log .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .audit-log .timeline .fields { gap: 1px; grid-template-columns: 1fr; }
  .audit-log .timeline .fields .arrow { display: none; }
  .audit-log .timeline .meta .req { margin-left: 0; }
}