/*
 * Audits feature — BEM block: audits--*
 *
 * Buttons, textareas, and card shells are handled by Buttons::ButtonComponent,
 * Inputs::TextAreaComponent, and Cards::CardWithTitleComponent respectively.
 * This file contains only audit-specific layout helpers.
 *
 * CSS variables verified against app/assets/stylesheets/application.css :root.
 */

/* ── Inbox / Work-item wrapper ─────────────────────────────────────────── */

.audits--inbox,
.audits--work-item {
  padding: var(--rem-16);
}

/* ── Inbox / Work-item headings ────────────────────────────────────────── */

.audits--inbox-title,
.audits--work-item-title {
  font-size: var(--rem-20);
  font-variation-settings: 'wght' var(--text-semibold);
  margin-bottom: var(--rem-8);
}

.audits--inbox-meta {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  margin-bottom: var(--rem-16);
}

/* ── Empty state ───────────────────────────────────────────────────────── */

.audits--empty {
  font-size: var(--rem-14);
  color: var(--text-action-neutral-secondary);
}

/* ── Lens switcher (supervisor view) ──────────────────────────────────── */

/* ── Team overview grid ────────────────────────────────────────────────── */

.audits--team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--rem-12);
  margin-top: var(--rem-12);
}

/* ── Person card ───────────────────────────────────────────────────────── */

.audits--person-card {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
  padding: var(--rem-12);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}

.audits--person-card:hover {
  background: var(--surface-primary);
}

.audits--person-card[data-unassigned="true"] {
  border-style: dashed;
}

.audits--person-name {
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
}

.audits--person-count {
  font-size: var(--rem-12);
  color: var(--text-error);
  font-variation-settings: 'wght' var(--text-semibold);
}

/* ── Row (work-item list item) ─────────────────────────────────────────── */

.audits--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rem-12);
  padding: var(--rem-12);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--rem-8);
  text-decoration: none;
  color: inherit;
}

.audits--row:hover {
  background: var(--surface-primary);
}

.audits--row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.audits--row-title {
  font-variation-settings: 'wght' var(--text-medium);
}

.audits--row-meta {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
}

.audits--row-count {
  background: var(--surface-error);
  color: var(--text-error);
  border-radius: var(--radius-xs);
  padding: 2px var(--rem-8);
  font-size: var(--rem-12);
  font-variation-settings: 'wght' var(--text-semibold);
  white-space: nowrap;
}

/* ── Individual finding ────────────────────────────────────────────────── */

.audits--finding {
  display: flex;
  gap: var(--rem-12);
  padding: var(--rem-12) 0;
  border-bottom: 1px solid var(--border-primary);
}

.audits--finding:last-child {
  border-bottom: none;
}

.audits--finding[data-status="cleared"] {
  opacity: 0.7;
}

.audits--finding-check {
  width: var(--rem-16);
  height: var(--rem-16);
  border-radius: var(--radius-xs);
  border: 2px solid var(--border-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.audits--finding-check[data-cleared="true"] {
  background: var(--surface-success);
  border-color: var(--surface-success);
}

.audits--finding-body {
  flex: 1;
}

.audits--finding-title {
  font-variation-settings: 'wght' var(--text-medium);
}

.audits--finding-explain {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  margin-top: 0.25rem;
}

.audits--finding-resolves {
  font-size: var(--rem-12);
  color: var(--text-information);
  margin-top: var(--rem-8);
}

/* Expected vs. found, per finding */
.audits--finding-diff {
  margin-top: var(--rem-8);
  display: flex;
  flex-direction: column;
  gap: var(--rem-4);
  font-size: var(--rem-12);
}

.audits--finding-expected,
.audits--finding-actual {
  color: var(--text-action-neutral-primary);
}

.audits--finding-diff-label {
  display: inline-block;
  min-width: 4.5rem;
  font-variation-settings: 'wght' var(--text-medium);
  color: var(--text-action-neutral-secondary);
  margin-right: var(--rem-6);
}

.audits--finding-tag {
  font-size: var(--rem-12);
  background: var(--surface-success);
  color: var(--text-success);
  padding: 1px var(--rem-8);
  border-radius: var(--radius-xs);
  margin-left: var(--rem-8);
}

.audits--finding-actions {
  display: flex;
  gap: var(--rem-8);
  margin-top: var(--rem-8);
  align-items: center;
}

.audits--finding-owner {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
}

/* Inline "this isn't right" dismissal with an optional reason */
.audits--finding-dismiss {
  display: inline-flex;
}

.audits--finding-dismiss-form {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
  align-items: flex-start;
  width: 100%;
}

/* The captured dismissal reason, shown when reviewing a cleared finding */
.audits--finding-reason {
  margin-top: var(--rem-8);
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
}

.audits--finding-reason-label {
  display: inline-block;
  min-width: 4.5rem;
  font-variation-settings: 'wght' var(--text-medium);
  margin-right: var(--rem-6);
}

/* ── Compact findings summary (slim alert, inline on a record page) ─────── */
/* A high-signal, low-footprint sibling of the page's banners — NOT a section
 * card. One line per failed check, with optional found/expected inline.       */

.audits--summary {
  background-color: white;
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--text-error);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neutral-xs);
  padding: 0.625rem 0.875rem;
  margin: 0 0 var(--rem-12);
}

.audits--summary-head {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
}

.audits--summary-title {
  font-size: var(--rem-13);
  font-variation-settings: 'wght' var(--text-semibold);
  color: var(--text-error);
}

.audits--summary-review {
  margin-left: auto;
  font-size: var(--rem-12);
  text-decoration: none;
  color: var(--text-action);
  flex-shrink: 0;
}

.audits--summary-review:hover {
  text-decoration: underline;
}

.audits--summary-list {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0;
}

.audits--summary-list > li + li {
  margin-top: 0.125rem;
}

.audits--summary-item {
  display: flex;
  align-items: baseline;
  gap: var(--rem-8);
  padding: 0;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  line-height: 1.35;
}

.audits--summary-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-error);
  flex-shrink: 0;
  transform: translateY(-1px);
}

.audits--summary-text {
  min-width: 0;
}

.audits--summary-name {
  font-size: var(--rem-13);
  color: var(--text-action-neutral-primary);
  font-variation-settings: 'wght' var(--text-medium);
}

.audits--summary-item:hover .audits--summary-name {
  text-decoration: underline;
}

.audits--summary-diff {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
}

.audits--summary-diff strong {
  color: var(--text-action-neutral-primary);
  font-variation-settings: 'wght' var(--text-medium);
}

/* ── Re-checking (audit in progress) ───────────────────────────────────── */
/* Reuses the summary card chrome but in a neutral key (no error-red rail).    */

.audits--rechecking {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  border-left-color: var(--border-subtle);
}

.audits--rechecking-text {
  font-size: var(--rem-13);
  color: var(--text-action-neutral-secondary);
}

.audits--spinner {
  width: var(--rem-14);
  height: var(--rem-14);
  border: 2px solid var(--border-primary);
  border-top-color: var(--text-action);
  border-radius: 50%;
  flex-shrink: 0;
  animation: audits--spin 0.7s linear infinite;
}

@keyframes audits--spin {
  to { transform: rotate(360deg); }
}

/* ── Status chip ───────────────────────────────────────────────────────── */

.audits--status-chip {
  display: inline-block;
  font-size: var(--rem-12);
  padding: 2px var(--rem-8);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  font-variation-settings: 'wght' var(--text-semibold);
}

.audits--status-chip[data-on="true"] {
  background: var(--surface-success);
  color: var(--text-success);
}

.audits--status-chip[data-on="false"] {
  background: var(--surface-primary);
  color: var(--text-action-neutral-secondary);
  border: 1px solid var(--border-primary);
}

/* ── Section label ─────────────────────────────────────────────────────── */

/* ── Activity list ─────────────────────────────────────────────────────── */

.audits--activity {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
}

.audits--run-debug {
  border-top: 1px solid var(--border-primary);
  padding: var(--rem-8) 0;
}

.audits--run-debug:first-child {
  border-top: none;
}

.audits--run-debug > summary {
  cursor: pointer;
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
}

.audits--run-debug-body {
  margin-top: var(--rem-8);
}

.audits--run-debug-label {
  font-size: var(--rem-12);
  font-weight: 600;
  color: var(--text-action-neutral-secondary);
  margin: var(--rem-12) 0 var(--rem-4);
}

/* ── Reassign block ────────────────────────────────────────────────────── */

.audits--reassign {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
  flex-wrap: wrap;
  margin: var(--rem-12) 0;
  padding: var(--rem-8) var(--rem-12);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xs);
  background: var(--surface-primary);
}

.audits--reassign-owner {
  font-size: var(--rem-14);
  color: var(--text-action-neutral-secondary);
  margin-right: var(--rem-8);
}

.audits--reassign-form {
  display: flex;
  align-items: center;
  gap: var(--rem-8);
}

/* ── Inbox cleared footer ──────────────────────────────────────────────── */

.audits--inbox-cleared {
  font-size: var(--rem-12);
  color: var(--text-success);
  margin-top: var(--rem-12);
  padding: var(--rem-8) var(--rem-12);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xs);
  background: var(--surface-success);
}

/* ── Manage page ───────────────────────────────────────────────────────── */

.audits--manage {
  padding: var(--rem-16);
  max-width: 640px;
}

/* ── Editor (authoring show) ───────────────────────────────────────────── */

/* Action bar: compact row of small buttons */
/* Section dividers — plain <section> elements, no card chrome */
/* Guide collapsible */
.audits--guide-details > summary {
  cursor: pointer;
  font-size: var(--rem-14);
  color: var(--text-action-neutral-secondary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--rem-6);
}

.audits--guide-details > summary::-webkit-details-marker {
  display: none;
}

.audits--guide-details > summary::before {
  content: "▶";
  font-size: var(--rem-10);
  transition: transform 0.15s;
}

.audits--guide-details[open] > summary::before {
  transform: rotate(90deg);
}

.audits--guide-body {
  margin-top: var(--rem-12);
}

/* ── What this audit can see (debug scope) ─────────────────────────────────── */

.audits--scope-details {
  margin: 0 0 var(--rem-16);
}

.audits--scope-details > summary {
  cursor: pointer;
  font-size: var(--rem-14);
  color: var(--text-action-neutral-secondary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--rem-6);
}

.audits--scope-details > summary::-webkit-details-marker {
  display: none;
}

.audits--scope-details > summary::before {
  content: "▶";
  font-size: var(--rem-10);
  transition: transform 0.15s;
}

.audits--scope-details[open] > summary::before {
  transform: rotate(90deg);
}

.audits--scope-body {
  margin-top: var(--rem-12);
}

.audits--scope-example {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  margin: 0 0 var(--rem-8);
}

.audits--scope-pre {
  margin: 0;
  padding: var(--rem-12);
  background: var(--surface-background);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--rem-12);
  line-height: 1.5;
  color: var(--text-action-neutral-primary);
  overflow-x: auto;
  white-space: pre;
}

/* Danger footer */
/* ── Check rows ────────────────────────────────────────────────────────── */

.audits--check-row {
  padding: var(--rem-16) 0;
  border-bottom: 1px solid var(--border-primary);
}

.audits--check-row:last-child {
  border-bottom: none;
}

/* Read sub-tree: index · body (assertion + optional condition chip) · actions */
.audits--check-read {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--rem-12);
  align-items: start;
}

.audits--check-index {
  padding-top: 2px;
}

.audits--check-body {
  min-width: 0;
}

/* The assertion is the headline of the row */
.audits--check-text {
  margin: 0;
  font-variation-settings: 'wght' var(--text-medium);
}

/* The condition reads as a quiet "Only when …" tag beneath the assertion */
.audits--check-cond {
  margin-top: var(--rem-8);
}

.audits--check-row-actions {
  display: flex;
  gap: var(--rem-6);
  flex: 0 0 auto;
}

/* Edit sub-tree: textarea + Save/Cancel stacked vertically */
.audits--check-edit {
  flex: 1;
}

.audits--check-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--rem-8);
}

.audits--check-edit-form textarea {
  width: 100%;
  min-width: 0;
}

.audits--check-edit-actions {
  display: flex;
  gap: var(--rem-8);
  justify-content: flex-end;
}

/* ── Add check form ────────────────────────────────────────────────────── */

.audits--add-check {
  margin-top: var(--rem-16);
  padding-top: var(--rem-12);
  border-top: 1px solid var(--border-primary);
}

/* Inner form: condition + assertion fields inline, button at the end */
.audits--add-check-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--rem-12);
  align-items: end;
}

.audits--add-check-form textarea {
  width: 100%;
  min-width: 0;
}

/* ── Guide candidates ──────────────────────────────────────────────────── */

.audits--guide-candidate {
  display: flex;
  align-items: flex-start;
  gap: var(--rem-8);
  padding: var(--rem-8) 0;
  border-bottom: 1px solid var(--border-primary);
  font-size: var(--rem-14);
  cursor: pointer;
}

.audits--guide-candidate:last-of-type {
  border-bottom: none;
}

.audits--guide-found {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  margin-bottom: var(--rem-8);
}

.audits--guide-empty {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
}

/* ── Dry-run results ───────────────────────────────────────────────────── */

.audits--dryrun {
  margin-top: var(--rem-16);
  padding: var(--rem-12);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}

.audits--dryrun-summary {
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
  margin-bottom: var(--rem-12);
}

.audits--dryrun-row {
  display: flex;
  flex-direction: column;
  gap: var(--rem-6);
  padding: var(--rem-12) 0;
  border-bottom: 1px solid var(--border-primary);
  font-size: var(--rem-14);
}

.audits--dryrun-row:last-of-type {
  border-bottom: none;
}

.audits--dryrun-rowhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rem-8);
}

.audits--dryrun-label {
  font-variation-settings: 'wght' var(--text-medium);
}

.audits--dryrun-owner {
  flex: 1;
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
}

.audits--dryrun-owner strong {
  color: var(--text-action-neutral-primary);
  font-variation-settings: 'wght' var(--text-medium);
}

.audits--dryrun-verdict {
  font-size: var(--rem-12);
  padding: 1px var(--rem-8);
  border-radius: var(--radius-xs);
  background: var(--surface-error);
  color: var(--text-error);
  white-space: nowrap;
}

.audits--dryrun-ok {
  background: var(--surface-success);
  color: var(--text-success);
}

.audits--dryrun-failures {
  width: 100%;
  margin: 0.25rem 0 0 var(--rem-16);
  padding: 0;
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  list-style: disc;
}

.audits--dryrun-diff {
  display: flex;
  flex-direction: column;
  gap: var(--rem-2);
  margin-top: var(--rem-4);
  color: var(--text-action-neutral-primary);
}

.audits--dryrun-diff strong {
  display: inline-block;
  min-width: 4rem;
  color: var(--text-action-neutral-secondary);
  font-variation-settings: 'wght' var(--text-medium);
}

.audits--dryrun-note {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  margin-top: var(--rem-12);
  font-style: italic;
}

.audits--dryrun-context > summary {
  cursor: pointer;
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  margin-top: var(--rem-4);
}

.audits--dryrun-context > pre {
  margin-top: var(--rem-8);
}

/* ── Inbox header (title + manage link) ────────────────────────────────── */

.audits--inbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rem-12);
  margin-bottom: var(--rem-16);
}

/* ── Empty state (constrained, not full-width card) ────────────────────── */

.audits--empty-state {
  max-width: 480px;
  padding: var(--rem-16);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  margin: var(--rem-16) 0;
}

/* ── Inbox content (non-team view body) ────────────────────────────────── */

.audits--inbox-content {
  margin-top: 2.5rem;
  clear: both;
}

.audits--inbox-content .audits--page-intro {
  margin-top: 0;
  margin-bottom: var(--rem-12);
}

/* ── Secondary nav ─────────────────────────────────────────────────────── */

/* ── Page-level typography ─────────────────────────────────────────────── */

.audits--page-title {
  font-size: var(--rem-20);
  font-variation-settings: 'wght' var(--text-semibold);
  margin-bottom: var(--rem-8);
}

.audits--page-intro {
  font-size: var(--rem-14);
  color: var(--text-action-neutral-secondary);
  margin-bottom: var(--rem-16);
  max-width: 540px;
}

/* ── Manage header ─────────────────────────────────────────────────────── */

.audits--manage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rem-16);
  margin-bottom: var(--rem-20);
}

.audits--manage-header > div {
  flex: 1 1 0;
  min-width: 0;
}

.audits--manage-header > .buttons--button {
  flex: 0 0 auto;
}

/* ── Manage list ───────────────────────────────────────────────────────── */

.audits--manage-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.audits--manage-row-desc {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  margin-top: 2px;
  margin-bottom: var(--rem-8);
}

.audits--manage-row-meta {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  margin-top: 2px;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */

.audits--breadcrumb {
  display: inline-block;
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  text-decoration: none;
  margin-bottom: var(--rem-12);
}

.audits--breadcrumb:hover {
  color: var(--text-action);
}

/* ── Section intro ─────────────────────────────────────────────────────── */

.audits--section-intro {
  font-size: var(--rem-12);
  color: var(--text-action-neutral-secondary);
  margin-bottom: var(--rem-12);
}

/* ── Checks list ───────────────────────────────────────────────────────── */

.audits--checks-list {
  /* container for check rows — turbo_stream target */
}

.audits--checks-empty {
  font-size: var(--rem-14);
  color: var(--text-action-neutral-secondary);
  margin-bottom: var(--rem-12);
}

/* ── Danger row ────────────────────────────────────────────────────────── */

/* ── Form page ─────────────────────────────────────────────────────────── */

.audits--form-row label {
  font-size: var(--rem-14);
  font-variation-settings: 'wght' var(--text-medium);
}


/* ── About-card "In scope" bullet list ─────────────────────────────────── */

.audits--scope-list {
  margin: 0;
  padding-left: var(--rem-16);
  list-style: disc;
}

.audits--scope-list li {
  margin-bottom: 0.25rem;
}

.audits--scope-list li:last-child {
  margin-bottom: 0;
}

/* Audit show: full-width checks; "About" is a slim strip under the title, not a rail. */
.audits--about-desc {
  color: var(--text-action-neutral-secondary);
  margin: 0 0 var(--rem-8);
  max-width: 70ch;
}

.audits--about-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rem-8) var(--rem-16);
  color: var(--text-action-neutral-secondary);
  font-size: var(--rem-13);
  margin: 0 0 var(--rem-16);
}

.audits--about-strip strong {
  color: var(--text-action-neutral-primary);
  font-variation-settings: 'wght' var(--text-medium);
}

.audits--about-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-primary);
}

.audits--tryit {
  display: inline-flex;
  align-items: center;
  gap: var(--rem-6);
}

.audits--tryit-lead {
  color: var(--text-action-neutral-secondary);
  white-space: nowrap;
}