/* Audit history (AuditDesktop, AuditPhone).  At 1024px and up the filters sit in one row with Export CSV at the
   right, and the feed is one card with the day headings inside it.  Below that only the search and the chips show,
   and each day is its own card with its heading above it. */

@media (min-width: 1024px) { .audit-phone-only { display: none !important; } }
@media (max-width: 1023px) { .audit-desktop-only { display: none !important; } }

.audit { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }

/* Search, the selects and Export CSV. */
.audit-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12); min-width: 0; }
.audit-search { flex: 1 1 240px; max-width: 380px; }
.audit-search .search-field-box { height: 44px; }
.audit-selects { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-12); }
.audit-selects .select { width: auto; max-width: 220px; height: 44px; font-size: 14px; }
.audit-export { margin-left: auto; }
@media (max-width: 1023px) {
  .audit { gap: var(--space-12); }
  .audit-search { flex: 1 1 100%; max-width: none; }
  .audit-search .search-field-box { height: 46px; }
  .audit-selects, .audit-gap, .audit-export { display: none; }
  .audit-chips .chips {
    flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none;
  }
}

/* The feed: one card on desktop, a card per day on phones. */
.audit-feed { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.audit-older { display: contents; }
.audit-day { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.audit-day-title {
  margin: 0; padding: 0 2px; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--walnut-700);
}
.audit-rows {
  list-style: none; margin: 0; padding: 0; background: var(--surface-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); overflow: hidden;
}

/* Rows. */
.audit-row { display: flex; gap: 12px; padding: 13px 14px; border-top: 1px solid var(--border-row); }
.audit-rows > .audit-row:first-child { border-top: 0; }
.audit-time { font-size: 13px; color: var(--text-muted); padding-top: 7px; white-space: nowrap; }
.audit-glyph {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; background: var(--paper-100); color: var(--walnut-700);
}
.audit-glyph-note { background: var(--navy-50); color: var(--navy-900); }
.audit-glyph-need, .audit-glyph-confidential { background: var(--ruby-50); color: var(--ruby-800); }
.audit-glyph-checked { background: var(--green-50); color: var(--green-800); }
.audit-glyph-reopened { background: var(--walnut-100); color: var(--walnut-900); }
.audit-glyph-interview { background: var(--navy-50); color: var(--navy-700); }
.audit-glyph-import { background: var(--gold-50); color: var(--gold-900); }
.audit-glyph-user { background: var(--paper-200); color: var(--walnut-900); }
.audit-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-grow: 1; }
.audit-sentence { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-900); overflow-wrap: anywhere; }
.audit-sentence strong.audit-target { color: var(--navy-700); }
.audit-target { font-weight: 700; text-decoration: none; }
.audit-pill { margin-left: 6px; vertical-align: 2px; }
.audit-detail { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.audit-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-muted);
}
.audit-org {
  font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-tag); white-space: nowrap;
  background: var(--paper-200); color: var(--walnut-900);
}
.audit-org-eq { background: var(--navy-50); color: var(--navy-900); }
.audit-org-rs { background: var(--ruby-50); color: var(--ruby-800); }
.audit-org-users { background: var(--paper-100); color: var(--walnut-700); }
.audit-chevron { color: var(--paper-700); padding-top: 6px; }

/* An import's changes, opened from its detail line on desktop. */
.audit-import { position: relative; z-index: 1; }
.audit-import-summary { cursor: pointer; }
.audit-import[open] {
  margin-top: 6px; padding: 12px 14px; border-radius: 10px; background: var(--paper-40);
  border: 1px solid var(--walnut-300);
}
.audit-import[open] .audit-import-summary { color: var(--walnut-900); }
.audit-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: 8px;
  font-size: 13px;
}
.audit-tile {
  display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--surface-card);
  border: 1px solid var(--border-row); min-width: 0; overflow-wrap: anywhere;
}
.audit-tile span { color: var(--text-muted); }
.audit-tile a { font-weight: 700; text-decoration: none; }

/* The footer and Load older. */
.audit-foot {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-12); padding: 0 8px;
  font-size: 12px; line-height: 1.5; color: var(--text-muted); text-align: center;
}
.audit-older-link { height: 36px; font-size: 13px; }

@media (min-width: 1024px) {
  .audit-feed {
    gap: 0; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: var(--radius-card);
    overflow: hidden;
  }
  .audit-day { gap: 0; }
  .audit-day-title { padding: 12px 22px; background: var(--paper-25); border-top: 1px solid var(--border-row); }
  .audit-feed > .audit-day:first-child .audit-day-title { border-top: 0; }
  .audit-rows { border: 0; border-radius: 0; }
  .audit-row {
    display: grid; grid-template-columns: 76px 36px minmax(0, 1fr) 80px 24px; gap: 14px; align-items: start;
    padding: 14px 22px; border-top: 1px solid var(--border-row);
  }
  .audit-rows > .audit-row:first-child { border-top: 1px solid var(--border-row); }
  .audit-glyph { width: 36px; height: 36px; font-size: 13px; }
  .audit-main { padding-top: 2px; }
  .audit-sentence { font-size: 15px; }
  .audit-org { justify-self: end; margin-top: 7px; padding: 3px 8px; }
  .audit-foot {
    flex-direction: row; justify-content: space-between; gap: var(--space-16); padding: 12px 22px;
    font-size: 13px; text-align: left; background: var(--paper-25); border-top: 1px solid var(--border-row);
  }
  .audit-older-link { border: 1.5px solid var(--walnut-900); color: var(--walnut-900); }
}

/* The hidden attribute wins over the display rules above. */
:is(.audit, .audit-tools, .audit-selects, .audit-feed, .audit-day, .audit-row, .audit-glyph, .audit-main, .audit-meta,
  .audit-tiles, .audit-tile, .audit-foot)[hidden] { display: none; }