/*
 * Files-audit view — Dropbox auto-classify audit log (admin-only).
 *
 * Spec: .claude/specs/files-domain-redesign/ FR-02 / FR-04 / FR-05.
 * Extracted from inline <style> block at pwa/views/files-audit.js:70-96.
 * Two hex/rgba literals in the original (header underline, load-more
 * button background) replaced with color-mix(... var(--color-on-surface)
 * <pct>%, transparent).
 */

.fa-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.fa-header {
  padding: 12px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  flex-shrink: 0;
}

.fa-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
}

.fa-back {
  background: none;
  border: none;
  color: var(--link);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 8px 4px 0;
}

.fa-title {
  font-size: 18px;
  font-weight: 800;
  flex: 1;
}

.fa-since {
  font-size: 12px;
  color: var(--hint);
}

.fa-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 80px;
}

.fa-row {
  background: var(--card);
  border-radius: var(--radius-snug);
  padding: 10px 12px;
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
}

.fa-row-header { flex-wrap: wrap; }

.fa-time {
  font-size: 11px;
  color: var(--hint);
  white-space: nowrap;
  font-family: ui-monospace, monospace;
}

.fa-doc-pill-slot {
  margin-left: auto;
  flex-shrink: 0;
}

.fa-paths {
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-tight);
  word-break: break-all;
}

.fa-arrow { color: var(--hint); }

.fa-summary {
  font-size: 11.5px;
  color: var(--hint);
  line-height: 1.35;
  word-break: break-word;
}

.fa-link-meta {
  font-size: 11px;
  color: var(--color-success);
}

.fa-actions {
  display: flex;
  gap: var(--space-tight);
  margin-top: var(--space-hairline);
}

.fa-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--radius-tight);
  border: none;
  cursor: pointer;
  line-height: 1.2;
}

.fa-btn-undo {
  background: color-mix(in srgb, var(--color-error) 18%, transparent);
  color: var(--color-error);
}

.fa-btn-accept {
  background: color-mix(in srgb, var(--color-success) 18%, transparent);
  color: var(--color-success);
}

.fa-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.fa-load-more {
  display: block;
  margin: 14px auto 0;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--color-on-surface) 5%, transparent);
  color: var(--text);
  border: none;
  border-radius: var(--radius-default);
  cursor: pointer;
  font-size: 13px;
}