/* ==========================================================================
   Prompt Quality Score (F7) — chip + inline detail panel in the prompt editor
   Tokens only; dark mode inherits via design tokens; reduced motion respected.
   ========================================================================== */

/* --- Score chip (sits beside the body token badge) ----------------------- */

.pq-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  margin: 0 0 var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  padding: 1px var(--space-2, 0.5rem);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms) ease,
    background-color var(--transition-fast, 150ms) ease;
}

/* Author display values override the UA [hidden] rule — restore it. */
.pq-chip[hidden],
.pq-panel[hidden] {
  display: none;
}

.pq-chip:hover {
  border-color: var(--brand-500);
}

.pq-chip:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

.pq-chip-label {
  color: var(--text-tertiary);
}

.pq-chip-score {
  font-weight: var(--font-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.pq-chip--high {
  border-color: color-mix(in srgb, var(--success-500) 45%, var(--border-primary));
  background: color-mix(in srgb, var(--success-500) 10%, var(--bg-secondary));
}

.pq-chip--high .pq-chip-score {
  color: color-mix(in srgb, var(--success-500) 70%, var(--text-primary));
}

.pq-chip--mid {
  border-color: color-mix(in srgb, var(--warning-500) 45%, var(--border-primary));
  background: color-mix(in srgb, var(--warning-500) 10%, var(--bg-secondary));
}

.pq-chip--mid .pq-chip-score {
  color: color-mix(in srgb, var(--warning-500) 55%, var(--text-primary));
}

.pq-chip--low {
  border-color: color-mix(in srgb, var(--danger-500) 45%, var(--border-primary));
  background: color-mix(in srgb, var(--danger-500) 10%, var(--bg-secondary));
}

.pq-chip--low .pq-chip-score {
  color: color-mix(in srgb, var(--danger-500) 70%, var(--text-primary));
}

/* --- Detail panel (inline, under the body field) ------------------------- */

.pq-panel {
  margin-top: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg, 0.5rem);
  display: grid;
  gap: var(--space-3, 0.75rem);
}

.pq-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  padding-bottom: var(--space-2, 0.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 70%, transparent);
}

.pq-panel-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--text-primary);
}

.pq-panel-total {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.pq-empty {
  margin: 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- Per-dimension rows --------------------------------------------------- */

.pq-dim {
  display: grid;
  gap: var(--space-1, 0.25rem);
}

.pq-dim-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
}

.pq-dim-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  color: var(--text-primary);
}

.pq-dim-score {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.pq-meter {
  height: 4px;
  border-radius: var(--radius-full, 9999px);
  background: color-mix(in srgb, var(--text-primary) 10%, transparent);
  overflow: hidden;
}

.pq-meter-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 200ms ease;
}

.pq-meter-fill--high {
  background: color-mix(in srgb, var(--success-500) 80%, var(--text-primary));
}

.pq-meter-fill--mid {
  background: color-mix(in srgb, var(--warning-500) 85%, var(--text-primary));
}

.pq-meter-fill--low {
  background: color-mix(in srgb, var(--danger-500) 80%, var(--text-primary));
}

/* --- Findings -------------------------------------------------------------- */

.pq-findings {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.pq-finding {
  position: relative;
  padding-left: var(--space-4, 1rem);
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.5;
  color: var(--text-secondary);
}

.pq-finding::before {
  content: '';
  position: absolute;
  left: var(--space-1, 0.25rem);
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full, 9999px);
  background: var(--text-tertiary);
}

.pq-finding--good::before {
  background: var(--success-500);
}

.pq-finding--info::before {
  background: var(--brand-500);
}

.pq-finding--warning::before {
  background: var(--warning-500);
}

/* --- One-tap fixes ---------------------------------------------------------- */

.pq-fixes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
  margin-top: 2px;
}

.pq-fix-btn {
  appearance: none;
  padding: 2px var(--space-2, 0.5rem);
  background: var(--surface-primary, var(--bg-primary));
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md, 0.375rem);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-medium, 500);
  color: var(--brand-600, var(--brand-500));
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms) ease,
    background-color var(--transition-fast, 150ms) ease;
}

.pq-fix-btn:hover {
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface-primary, var(--bg-primary)));
}

.pq-fix-btn:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* --- Dark mode -------------------------------------------------------------- */

:root[data-theme="dark"] .pq-panel {
  background: var(--surface-secondary, var(--bg-secondary));
}

:root[data-theme="dark"] .pq-fix-btn {
  color: var(--brand-400, var(--brand-500));
}

/* --- Reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pq-chip,
  .pq-fix-btn,
  .pq-meter-fill {
    transition: none;
  }
}