/* Legal-compliance reports (web/compliance.js). Tokens only — light/dark come from tokens.css. */
.compliance-legal-banner { margin-bottom: var(--space-4); }
.compliance-legal-banner p strong { font-size: inherit; color: var(--text); }
.compliance-workspace > .compliance-tab[hidden] { display: none; }
.compliance-workspace .panel:first-child { margin-top: 0; }

.stat-card.tone-danger { --tone: var(--danger); --tone-subtle: var(--danger-subtle); }
.compliance-stats { margin-bottom: var(--space-4); }

.compliance-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.compliance-overview-grid > * { min-width: 0; }
.compliance-overview-grid .panel { margin-top: 0; }
.compliance-side { display: grid; gap: var(--space-4); }
.compliance-lead { margin: 3px 0 0; color: var(--text-muted); font-size: var(--text-sm); }

.compliance-scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-3); padding: var(--space-4); }
.compliance-scope-card { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-4); border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--surface-2); }
.compliance-scope-card.is-broken { border-color: var(--danger-border); box-shadow: inset 3px 0 0 var(--danger); }
.compliance-scope-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.compliance-scope-card > header > div { min-width: 0; }
.compliance-scope-card h3 { margin: 0; color: var(--text); font-size: var(--text-lg); line-height: 1.35; overflow-wrap: anywhere; }
.compliance-scope-card header small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-sm); }
.compliance-scope-card header .badge { flex: 0 0 auto; }
.compliance-metric h4 { margin: 0 0 6px; color: var(--text-2); font-size: var(--text-sm); font-weight: 600; }
.compliance-metric h4 small { color: var(--text-muted); font-weight: 400; }
.compliance-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.compliance-window { padding: 6px 10px; border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--surface); }
.compliance-window dt { color: var(--text-muted); font-size: var(--text-xs); }
.compliance-window dd { margin: 0; color: var(--text); font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.compliance-window.is-alert { border-color: var(--danger-border); background: var(--danger-subtle); }
.compliance-window.is-alert dt, .compliance-window.is-alert dd { color: var(--danger); }
.compliance-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.compliance-facts > div { padding: 6px 10px; border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--surface); }
.compliance-facts > div.is-notable { border-color: color-mix(in srgb, var(--violet) 30%, var(--divider)); background: var(--violet-subtle); }
.compliance-facts dt { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.4; }
.compliance-facts dd { margin: 0; color: var(--text); font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.compliance-facts > div.is-notable dt, .compliance-facts > div.is-notable dd { color: var(--violet); }
.compliance-inline-facts { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--divider); font-size: var(--text-sm); }
.compliance-inline-facts > div { display: flex; gap: 6px; }
.compliance-inline-facts dt { color: var(--text-muted); }
.compliance-inline-facts dd { margin: 0; color: var(--text); font-weight: 600; }
.compliance-integrity-note { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.6; overflow-wrap: anywhere; }

.compliance-kv { margin: 0; }
.compliance-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 10px 20px; border-top: 1px solid var(--divider); font-size: var(--text-sm); }
.compliance-kv > div:first-child { border-top: 0; }
.compliance-kv dt { color: var(--text-muted); }
.compliance-kv dd { min-width: 0; margin: 0; color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.compliance-kv dd.mono { font-size: var(--text-xs); font-weight: 500; }
.compliance-error-text { color: var(--danger) !important; font-weight: 500 !important; }

.compliance-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; padding: var(--space-4) 20px; border-bottom: 1px solid var(--divider); background: var(--surface-2); }
.compliance-filters .compact-field input, .compliance-filters .compact-field select { width: 100%; min-width: 0; }
.compliance-filter-actions { display: flex; align-items: flex-end; gap: var(--space-2); }
.compliance-filters > .form-error { grid-column: 1 / -1; }
.compliance-meta { padding: 10px 20px; color: var(--text-muted); font-size: var(--text-sm); }
#audit-preset-platform.is-on { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); }

.compliance-table { table-layout: fixed; }
.compliance-table td { overflow-wrap: anywhere; }
.compliance-table td small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
.compliance-table td .mono, .compliance-table td.mono { font-size: var(--text-sm); }
.compliance-table td.nowrap { white-space: nowrap; }
.compliance-table tr.is-failure td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.compliance-table .compliance-empty-row td { box-shadow: none; }
.compliance-table td > .compliance-error { margin: 0; text-align: left; }
.compliance-row-action { text-align: right; }
.compliance-row-action .text-action, .compliance-row-action .compact-button { white-space: nowrap; }
.compliance-table td.compliance-org { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compliance-row-action .row-actions { justify-content: flex-end; }
.compliance-account > span, .compliance-account > .compliance-link { display: block; overflow: hidden; text-overflow: ellipsis; }
.compliance-account small .badge { margin-top: 2px; }
.compliance-action { font-size: var(--text-sm); }
.compliance-table td small.mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compliance-link { max-width: 100%; padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 600; text-align: left; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.compliance-link:hover { text-decoration-style: solid; }
.compliance-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.compliance-reason > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.compliance-hash code { display: block; color: var(--text-2); font-size: 11px; line-height: 1.45; word-break: break-all; }
.compliance-table td.compliance-hash { display: table-cell; }
.compliance-table td.compliance-hash > code { display: inline-block; width: calc(100% - 34px); vertical-align: middle; }
.compliance-table td.compliance-hash > .icon-button { vertical-align: middle; margin-left: 4px; }
.compliance-more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--divider); }
.compliance-more:has(> [hidden]) { display: none; }

.traffic-table th:nth-child(1) { width: 164px; }
.traffic-table th:nth-child(2) { width: 22%; }
.traffic-table th:nth-child(4) { width: 150px; }
.traffic-table th:nth-child(5) { width: 130px; }
.traffic-table th:nth-child(6) { width: 110px; }
.traffic-table th:nth-child(7) { width: 118px; }
.audit-table th:nth-child(1) { width: 160px; }
.audit-table th:nth-child(2) { width: 18%; }
.audit-table th:nth-child(4) { width: 14%; }
.audit-table th:nth-child(5) { width: 100px; }
.audit-table th:nth-child(6) { width: 112px; }
.audit-table th:nth-child(7) { width: 92px; }
.audit-table th:nth-child(8) { width: 116px; }
.exports-table th:nth-child(1) { width: 132px; }
.exports-table th:nth-child(2) { width: 17%; }
.exports-table th:nth-child(4) { width: 96px; }
.exports-table th:nth-child(5) { width: 184px; }
.exports-table th:nth-child(6) { width: 136px; }
.exports-table th:nth-child(7) { width: 176px; }
.holds-table th:nth-child(1) { width: 20%; }
.holds-table th:nth-child(2) { width: 200px; }
.holds-table th:nth-child(4) { width: 150px; }
.holds-table th:nth-child(5) { width: 150px; }
.holds-table th:nth-child(6) { width: 160px; }

.compliance-export-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.compliance-export-grid > .panel { margin-top: 0; }
.compliance-export-grid + .panel { margin-top: var(--space-4); }
.compliance-export-form label > small.compliance-help, .compliance-help { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.compliance-inset { margin: var(--space-4) 20px; }
.compliance-howto ol { display: grid; gap: 10px; margin: 0; padding: var(--space-4) 20px 20px 40px; color: var(--text-2); font-size: var(--text-sm); line-height: 1.6; }
.compliance-howto code { padding: 0 4px; border-radius: 4px; background: var(--surface-3); font-size: var(--text-xs); }

.compliance-policies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-3); padding: var(--space-4) 20px 20px; }
.compliance-policy { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--surface-2); }
.compliance-policy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.compliance-policy h3 { margin: 0; color: var(--text); font-size: var(--text-lg); }
.compliance-policy-head small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-sm); }
.compliance-days { margin: 0; color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; }
.compliance-days strong { color: var(--text); font-size: var(--text-3xl); font-variant-numeric: tabular-nums; line-height: 1; }
.compliance-basis { margin: 0; color: var(--text-2); font-size: var(--text-sm); line-height: 1.6; }
.compliance-policy-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--divider); }
.compliance-policy-foot small { color: var(--text-muted); font-size: var(--text-xs); }
.compliance-policy-skeleton { height: 168px; border-radius: var(--radius-md); }
.compliance-hold-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.compliance-hold-tools .compact-field select { min-width: 140px; }

.compliance-dialog-body { display: grid; gap: var(--space-3); padding: var(--space-4) 20px 20px; }
.compliance-dialog-body .dialog-subheading { margin: var(--space-2) 0 0; }
.compliance-detail > div { grid-template-columns: 190px minmax(0, 1fr); }
.compliance-detail dt { color: var(--text-muted); font-size: var(--text-sm); }
.compliance-detail dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.compliance-detail dd.mono { font-size: var(--text-xs); }
.compliance-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-2); color: var(--text-2); font-size: var(--text-sm); }
.compliance-confirm .notice { margin: 0; }

@media (max-width: 1180px) {
  .compliance-overview-grid, .compliance-export-grid { grid-template-columns: minmax(0, 1fr); }
  .compliance-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}

/* Phones and narrow tablets: each record becomes a labelled card instead of a wide table. */
@media (max-width: 760px) {
  .compliance-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .compliance-filter-actions { grid-column: 1 / -1; }
  .compliance-filters .compact-field:has(select[name="organizationId"]), .compliance-filters .compact-field:has(input[name="account"]), .compliance-filters .compact-field:has(input[name="actorUserId"]) { grid-column: 1 / -1; }
  .compliance-filter-actions > * { flex: 1; min-height: 44px; }
  .compliance-meta { padding: 10px 12px; }
  .compliance-table-wrap { overflow: visible; background: none !important; }
  .compliance-table-wrap .compliance-table { min-width: 0; table-layout: auto; }
  .compliance-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compliance-table, .compliance-table tbody, .compliance-table tr, .compliance-table td { display: block; width: 100%; }
  .compliance-table tr { padding: 10px 12px; border-top: 1px solid var(--divider); }
  .compliance-table tbody tr:first-child { border-top: 0; }
  .compliance-table td { height: auto; padding: 3px 0; border: 0; background: none; box-shadow: none !important; }
  .compliance-table td[data-label] { position: relative; min-height: 24px; padding-left: 112px; }
  .compliance-table td[data-label]::before { position: absolute; top: 4px; left: 0; width: 104px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; content: attr(data-label); font-family: var(--font-ui); letter-spacing: 0; }
  .compliance-table td.nowrap { white-space: normal; }
  .compliance-table tr.is-failure { box-shadow: inset 3px 0 0 var(--danger); }
  .compliance-table td.compliance-hash { display: flex; align-items: flex-start; gap: 6px; }
  .compliance-table td.compliance-hash > code { flex: 1 1 auto; width: auto; min-width: 0; }
  .compliance-row-action { padding-top: 6px !important; text-align: left; }
  .compliance-row-action .row-actions { justify-content: flex-start; }
  .compliance-row-action .text-action, .compliance-row-action .compact-button { min-height: 40px; }
  .compliance-scope-grid { padding: 12px; }
  .compliance-policies { padding: 12px; }
  .compliance-kv > div { padding: 10px 12px; }
  .compliance-detail > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .compliance-hold-tools { width: 100%; }
  .compliance-hold-tools > * { flex: 1; }
  .compliance-hold-tools .primary-button { min-height: 44px; }
}
.compliance-tab > .panel + .panel { margin-top: var(--space-4); }