/**
 * Pre-publish audit tab.
 *
 * Mobile P21 — extracted from a `style.textContent` template literal in
 * `ui/pre-publish-audit-tab.js`. It lived there for lazy-loading, not by design, and CSS in a JS
 * string is invisible to every css-tree gate in this repo: the token rules, the
 * dead-fallback ledger and the breakpoint band all sweep `builder/styles/`.
 * That is how a `z-index: 9999` survived here.
 *
 * Loaded by index.html because publish readiness uses these shared finding
 * styles before the Ship panel itself is necessarily mounted.
 */

.pb-audit { display:flex; flex-direction:column; min-height:100%; color:var(--pb-text); }
.pb-audit-toolbar { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--pb-border); }
.pb-audit-toolbar .pb-btn { flex:0 0 auto; }
.pb-audit-time { margin-left:auto; color:var(--pb-text-dim); font-size:12px; white-space:nowrap; }
.pb-audit-stale { padding:8px 12px; color:#92400e; background:rgba(245,158,11,.12); border-bottom:1px solid rgba(245,158,11,.25); font-size:12px; }
.pb-audit-body { overflow:auto; padding:8px 0 16px; }
.pb-audit-group { border-bottom:1px solid var(--pb-border); }
.pb-audit-group-header { width:100%; display:flex; align-items:center; gap:8px; padding:8px 12px; border:0; background:transparent; color:inherit; cursor:pointer; text-align:left; font:600 12px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; text-transform:uppercase; }
.pb-audit-group-header:hover { background:var(--pb-surface-hover); }
.pb-audit-group-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.pb-audit-group-dot--blocking { background:#dc2626; }
.pb-audit-group-dot--warning { background:#d97706; }
.pb-audit-group-dot--cleanup { background:#2563eb; }
.pb-audit-group-count { margin-left:auto; color:var(--pb-text-dim); }
.pb-audit-group[aria-expanded="false"] .pb-audit-group-body { display:none; }
/* minmax(0,1fr) lets the column shrink below its content's min-content size
   (Grid items otherwise default to min-content, which lets long unbreakable
   strings — URLs, sentinels — push the whole row wider than the container,
   causing horizontal scroll). The 1fr column's child also gets a wrapper
   with min-width:0 via the .pb-audit-row-body class so flex/grid descendants
   inherit the shrink-below-content behavior. */
.pb-audit-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:9px 12px 10px 28px; border-top:1px solid rgba(0,0,0,.04); }
.pb-audit-row:hover { background:var(--pb-surface-hover); }
.pb-audit-row-body { min-width:0; }
.pb-audit-row-title { font-size:12px; font-weight:600; color:var(--pb-text-bright); line-height:1.35; overflow-wrap:anywhere; }
.pb-audit-row-detail { margin-top:2px; color:var(--pb-text-dim); font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.pb-audit-row-snippet { margin-top:4px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--pb-text-dim); font:11px/1.4 ui-monospace,Menlo,monospace; }
.pb-audit-row-snippet mark { background:rgba(255,214,0,.45); border-radius:2px; padding:0 1px; color:var(--pb-text-bright); }
.pb-audit-fix { align-self:start; padding:4px 8px; border-radius:4px; border:1px solid var(--pb-border); background:var(--pb-surface); color:var(--pb-text); font:600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor:pointer; }
.pb-audit-fix:hover { background:var(--pb-surface-hover); }
.pb-audit-empty { padding:28px 18px; text-align:center; color:var(--pb-text-dim); }
.pb-audit-empty-icon { width:28px; height:28px; margin:0 auto 8px; border-radius:50%; background:rgba(22,163,74,.12); color:#15803d; display:flex; align-items:center; justify-content:center; font-weight:800; }
.pb-audit-empty-title { color:var(--pb-text-bright); font-weight:700; margin-bottom:4px; }
.pb-audit-confirm-list { margin:8px 0 0; padding-left:20px; color:var(--pb-text); }
.pb-audit-confirm-list li { margin:4px 0; }

/* v1.1 cluster — adjacent same-groupKey findings roll into one collapsible
   parent row inside a severity section. */
.pb-audit-cluster { border-top:1px solid rgba(0,0,0,.04); }
.pb-audit-cluster-header {
  width:100%; display:flex; align-items:center; gap:8px;
  padding:8px 12px 8px 20px;
  border:0; background:transparent; color:inherit;
  cursor:pointer; text-align:left;
  font:600 12px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.pb-audit-cluster-header:hover { background:var(--pb-surface-hover); }
.pb-audit-cluster-chev {
  display:inline-block; width:10px; flex:0 0 auto; transition: transform 0.12s ease;
  color:var(--pb-text-dim);
}
.pb-audit-cluster[aria-expanded="true"] .pb-audit-cluster-chev { transform: rotate(90deg); }
.pb-audit-cluster[aria-expanded="false"] .pb-audit-cluster-body { display:none; }
.pb-audit-cluster-label { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; color:var(--pb-text-bright); }
.pb-audit-cluster-count { flex:0 0 auto; color:var(--pb-text-dim); font-weight:500; }
/* Children inside a cluster get extra left-inset to read as nested */
.pb-audit-cluster-body .pb-audit-row { padding-left:36px; }

/* v1.2 — cluster header row hosts the toggle button plus the optional
   Fix-all button as siblings (so the Fix-all click target doesn't overlap
   with the cluster toggle). */
.pb-audit-cluster-header-row { display:flex; align-items:stretch; width:100%; }
.pb-audit-cluster-header-row .pb-audit-cluster-header { flex:1 1 auto; }
.pb-audit-cluster-fix-all {
  flex:0 0 auto;
  margin:4px 8px 4px 0;
  padding:4px 10px;
  border-radius:4px;
  border:1px solid var(--pb-border);
  background:var(--pb-surface);
  color:var(--pb-text);
  font:600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  cursor:pointer;
}
.pb-audit-cluster-fix-all:hover { background:var(--pb-surface-hover); }

/* ── Ship panel (P6) ─────────────────────────────────────────────────────── */

.pb-ship {
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-3);
  padding: var(--pb-space-3);
  min-height: 0;
}

/* One sentence, not a chip cluster. */
.pb-ship-headline {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--pb-text);
  text-wrap: balance;
}

.pb-ship-export-summary {
  padding: var(--pb-space-2);
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface-2);
  color: var(--pb-text-dim);
  font-size: 0.75rem;
  line-height: 1.35;
}

.pb-ship-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pb-space-1);
}
.pb-ship-filter[aria-checked='true'] {
  background: var(--pb-surface-hover);
  color: var(--pb-accent);
}

.pb-ship-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pb-ship-footer {
  display: flex;
  justify-content: flex-end;
}

/* ── Findings list ───────────────────────────────────────────────────────── */

.pb-finding-list {
  display: flex;
  flex-direction: column;
  gap: var(--pb-space-1);
}

.pb-finding {
  display: flex;
  align-items: flex-start;
  gap: var(--pb-space-2);
  padding: var(--pb-space-2);
  border-radius: var(--pb-radius-sm);
  border-left: 3px solid transparent;
  /* Row exit: height + opacity, with the counter above springing separately.
     The motion says the row's departure caused the count to change. */
  transition:
    background-color 120ms ease-out,
    opacity 180ms ease-out;
}
.pb-finding:hover,
.pb-finding:focus-visible {
  background: var(--pb-surface-hover);
}
.pb-finding--blocking { border-left-color: var(--pb-danger); }
.pb-finding--warning  { border-left-color: var(--pb-warning); }
.pb-finding--cleanup  { border-left-color: var(--pb-text-dim); }

.pb-finding-body { flex: 1 1 auto; min-width: 0; }
.pb-finding-title { font-size: 0.85rem; line-height: 1.35; }
.pb-finding-where,
.pb-finding-accepted {
  display: block;
  font-size: 0.72rem;
  color: var(--pb-text-dim);
  margin-top: 0.15rem;
}

/* Author flex layout otherwise overrides the browser's default [hidden] rule. */
.pb-finding[hidden] { display: none; }

.pb-finding-cluster {
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  overflow: hidden;
}
.pb-finding-cluster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pb-space-2);
  padding: var(--pb-space-2);
  background: var(--pb-surface-2);
}
.pb-finding-cluster-label { font-size: 0.8rem; font-weight: 600; }

.pb-finding-empty {
  padding: var(--pb-space-4);
  text-align: center;
  font-size: 0.85rem;
  color: var(--pb-text-dim);
}

/* Publish sheet: one compact readiness line, with the exact blocking group
   available in place. The primary action stays enabled and names the count. */
.pb-publish-readiness {
  display: grid;
  gap: var(--pb-space-2);
  margin-top: var(--pb-space-3);
  padding: var(--pb-space-3);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-md);
}

.pb-publish-readiness-status {
  font-size: 0.88rem;
  font-weight: 600;
}

.pb-publish-readiness-toggle {
  justify-self: start;
}

.pb-publish-readiness-findings {
  max-height: min(34dvh, 18rem);
  overflow-y: auto;
}

.pb-finding-list--compact .pb-finding {
  padding-block: var(--pb-space-1);
}

/* Ship indicator: a dot, never a number. No pulse — a linter that pulses at
   you is an anxiety generator. */
.pb-ptz-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.pb-ptz-dot--blocking { background: var(--pb-danger); }
.pb-ptz-dot--warning  { background: var(--pb-warning); }

@media (prefers-reduced-motion: reduce) {
  .pb-finding { transition: none; }
}