/**
 * Spec 26 Slice 3 v4 — Lighting preview card styles (2026-08-12 Chris)
 *
 * v3 tried to style chips with inline `style="..."` attributes. That renders
 * as plain text inside the /computer/a iframe (the parent's global button
 * reset wins over inline styles in some render contexts). v4 moves all chip
 * styling into real class selectors so specificity is unambiguous.
 *
 * Everything is scoped under [data-qb-spec26-lighting] so nothing in this
 * file can leak into other cards.
 */

/* ─── Card layout ──────────────────────────────────────────────────────── */

[data-qb-spec26-lighting] .qb-spec26-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

[data-qb-spec26-lighting] .qb-spec26-usage {
  font-size: 13px;
  color: var(--text-muted);
}

[data-qb-spec26-lighting] .qb-spec26-intro {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

/* ─── Numbered step headings ───────────────────────────────────────────── */

[data-qb-spec26-lighting] .qb-spec26-step-row {
  margin-bottom: var(--space-4);
}

[data-qb-spec26-lighting] .qb-spec26-step-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text);
}

[data-qb-spec26-lighting] .qb-spec26-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-1, #1a3556);
  color: var(--on-accent-1, #ffffff);
  font-size: 12px;
  font-weight: 700;
  margin-right: var(--space-2);
  flex: none;
}

[data-qb-spec26-lighting] .qb-spec26-step-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: var(--space-2);
  font-weight: 400;
}

/* ─── Source photo slot ────────────────────────────────────────────────── */

[data-qb-spec26-lighting] .qb-spec26-source-empty {
  padding: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  background: var(--surface-2, #f9f8f5);
  font-size: 14px;
  color: var(--text-muted);
}

[data-qb-spec26-lighting] .qb-spec26-source-filled {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2, #f9f8f5);
}

[data-qb-spec26-lighting] .qb-spec26-source-filled img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex: none;
}

/* ─── Chip row ─────────────────────────────────────────────────────────── */

[data-qb-spec26-lighting] .qb-spec26-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ─── Chips (the actual buttons) ───────────────────────────────────────── */

/* Reset the parent's `button { background:none; border:none; }` and paint
 * pill buttons. Use box-shadow for the border in the selected state so the
 * outer size doesn't jump when toggling. */
[data-qb-spec26-lighting] .qb-spec26-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border, #d4d1ca);
  background: var(--surface-1, #ffffff);
  color: var(--text, #28251d);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}

[data-qb-spec26-lighting] .qb-spec26-chip:hover:not([disabled]) {
  border-color: var(--accent-1, #1a3556);
  background: var(--surface-2, #f5f4ef);
}

[data-qb-spec26-lighting] .qb-spec26-chip.is-selected,
[data-qb-spec26-lighting] .qb-spec26-chip[aria-checked="true"] {
  background: var(--accent-1, #1a3556);
  border-color: var(--accent-1, #1a3556);
  color: var(--on-accent-1, #ffffff);
}

[data-qb-spec26-lighting] .qb-spec26-chip[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

[data-qb-spec26-lighting] .qb-spec26-chip .qb-spec26-chip-meta {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.75;
  font-weight: 400;
}

/* Verified fixtures wear a small pill AFTER the label. A ✓ before the label
 * was reading as "already selected" — which was wrong. The pill sits inside
 * the chip and clearly means "Haven has locked in prompt tuning for this
 * fixture," not "you picked this one." */
[data-qb-spec26-lighting] .qb-spec26-chip .qb-spec26-verified-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(67, 122, 34, 0.14);
  color: var(--success, #437a22);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}

[data-qb-spec26-lighting] .qb-spec26-chip.is-selected .qb-spec26-verified-badge,
[data-qb-spec26-lighting] .qb-spec26-chip[aria-checked="true"] .qb-spec26-verified-badge {
  /* When selected, the chip is dark. Flip the badge to a light-on-dark pill
   * so it stays readable and clearly still a badge, not a checkmark. */
  background: rgba(255, 255, 255, 0.22);
  color: var(--on-accent-1, #ffffff);
}

/* ─── Generate row ─────────────────────────────────────────────────────── */

/* v2 (2026-08-13 Chris — "generate night preview is the WHOLE SHOW"):
 * Promote the Generate action from a plain button row into a hero Step 4
 * with an accented card + oversized primary button. Old .qb-spec26-generate-row
 * rules kept below for cached-HTML fallback. */

[data-qb-spec26-lighting] .qb-spec26-generate-step {
  background: linear-gradient(135deg,
    rgba(1, 105, 111, 0.06) 0%,
    rgba(1, 105, 111, 0.02) 100%);
  border: 1px solid rgba(1, 105, 111, 0.18);
  border-radius: 10px;
  padding: var(--space-4);
  margin-top: var(--space-3);
}

[data-qb-spec26-lighting] .qb-spec26-generate-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 22px;
  min-height: 60px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.15;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--accent-1, #01696F);
  color: var(--on-accent-1, #ffffff);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(1, 105, 111, 0.22),
              0 1px 3px rgba(1, 105, 111, 0.14);
  transition: transform 120ms ease, box-shadow 120ms ease,
              background 120ms ease, opacity 120ms ease;
  width: 100%;
  max-width: 520px;
  margin-top: var(--space-3);
}

[data-qb-spec26-lighting] .qb-spec26-generate-btn:hover:not(:disabled) {
  background: var(--accent-1-hover, #0C4E54);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(1, 105, 111, 0.28),
              0 2px 4px rgba(1, 105, 111, 0.18);
}

[data-qb-spec26-lighting] .qb-spec26-generate-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(1, 105, 111, 0.22);
}

[data-qb-spec26-lighting] .qb-spec26-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

[data-qb-spec26-lighting] .qb-spec26-generate-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

[data-qb-spec26-lighting] .qb-spec26-generate-label {
  flex: 1;
  text-align: left;
}

[data-qb-spec26-lighting] .qb-spec26-generate-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  flex-shrink: 0;
}

[data-qb-spec26-lighting] .qb-spec26-status {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: var(--space-2);
  display: block;
}

/* Legacy fallback for cached-HTML clients still shipping .qb-spec26-generate-row. */
[data-qb-spec26-lighting] .qb-spec26-generate-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

/* ─── Gallery ──────────────────────────────────────────────────────────── */

[data-qb-spec26-lighting] .qb-spec26-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

[data-qb-spec26-lighting] .qb-spec26-thumb {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
}

[data-qb-spec26-lighting] .qb-spec26-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

[data-qb-spec26-lighting] .qb-spec26-thumb-body {
  padding: var(--space-2) var(--space-3);
}

[data-qb-spec26-lighting] .qb-spec26-thumb-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

[data-qb-spec26-lighting] .qb-spec26-thumb-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ─── Load / error state ───────────────────────────────────────────────── */

[data-qb-spec26-lighting] .qb-spec26-loading {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  background: var(--surface-2, #f9f8f5);
  border-radius: var(--radius-md);
}

[data-qb-spec26-lighting] .qb-spec26-error {
  padding: var(--space-4);
  text-align: center;
  background: var(--surface-2, #f9f8f5);
  border-radius: var(--radius-md);
}

[data-qb-spec26-lighting] .qb-spec26-error-msg {
  font-size: 14px;
  color: var(--text);
  margin-bottom: var(--space-3);
}