/* ============================================================
 * Find a photo — photo picker (skia-media-extras MP-01, frozen screen 3; error cards from frozen screen 7).
 * The overlay, frame, header and close button are AI Design's (ai-design-modal.css); only the picker's own
 * parts are here. Theme variables only (Rule 10).
 * ============================================================ */

.ai-design-modal.photo-picker-modal {
  max-width: 1080px;
  height: 85vh;
}

.photo-picker-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.photo-picker-sr {
  position: absolute;
  left: -9999px;
}

.photo-picker-search {
  display: flex;
  gap: var(--space-sm);
}

.photo-picker-input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-medium);
  background: var(--color-glass-subtle);
  color: var(--color-text-primary);
  font-size: var(--font-base);
}

.photo-picker-helper,
.photo-picker-note,
.photo-picker-credit {
  margin: 0;
  font-size: var(--font-xs);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.photo-picker-main {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: var(--space-lg);
}

.photo-picker-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-sm);
  align-content: start;
  overflow-y: auto;
}

.photo-picker-thumb {
  aspect-ratio: 1;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-medium);
  background: var(--color-glass-subtle);
  overflow: hidden;
  cursor: pointer;
}

.photo-picker-thumb.picked {
  border: 3px solid var(--color-primary);
}

.photo-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-picker-side {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.photo-picker-preview {
  position: relative;
  height: 168px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.photo-picker-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Brand tint preview — colours and strength set per picture by the picker */
.photo-picker-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--tint-top), var(--tint-bottom));
  opacity: var(--tint-alpha);
}

.photo-picker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.photo-picker-label {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.photo-picker-switch {
  width: 52px;
  height: 32px;
  border-radius: var(--radius-3xl);
  border: none;
  background: var(--color-border-strong);
  color: var(--color-white);
  font-size: var(--font-xs);
  cursor: pointer;
}

.photo-picker-switch.on {
  background: var(--color-success);
}

.photo-picker-strength {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.photo-picker-strength input {
  width: 100%;
}

.photo-picker-use {
  margin-top: auto;
}

/* Error cards (frozen screen 7) */
.photo-picker-card {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-sm) + var(--space-xs)); /* Find a photo's frozen errors: 12 (owner 2026-10-04: "Find a photo's") */
  min-height: 220px;
  box-sizing: border-box;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
}

.photo-picker-card-warn {
  background: color-mix(in srgb, var(--color-warning) 10%, transparent); /* frozen: amber at 0.1, its edge at 0.5 */
  border: 1px solid color-mix(in srgb, var(--color-warning) 50%, transparent);
}

.photo-picker-card-error {
  background: color-mix(in srgb, var(--color-error) 12%, transparent); /* frozen: red at 0.12, its edge at 0.6 */
  border: 1px solid color-mix(in srgb, var(--color-error) 60%, transparent);
}

.photo-picker-card-where {
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  letter-spacing: calc(var(--space-xs) / 4); /* frozen: 1px */
  color: var(--color-text-secondary);
}

.photo-picker-card-message {
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  line-height: 1.4;
  color: var(--color-text-primary);
}

.photo-picker-card-after {
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.photo-picker-card .btn {
  align-self: flex-start;
  height: 44px; /* frozen: a 44-high button, 16 at the sides, 8 corners, a white edge at 0.3, no shadow */
  padding: 0 var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-text-primary) 30%, transparent);
  background: transparent;
  color: var(--color-text-primary);
  font-weight: var(--font-normal);
  box-shadow: none;
}

/* ---- Version 2 (skia-media-extras MP-07, frozen v2 screen 3) ---- */
.photo-picker-titles {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.photo-picker-subtitle {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

.photo-picker-ideas-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.photo-picker-eyebrow {
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.photo-picker-ideas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.photo-picker-chip {
  min-height: 34px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-3xl);
  border: 1px solid var(--color-border-medium);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-sm);
  cursor: pointer;
}

.photo-picker-chip.picked {
  border: 2px solid var(--color-primary);
  background: var(--color-primary-light);
  font-weight: var(--font-semibold);
}

.photo-picker-results {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: auto;
}

.photo-picker-results .photo-picker-grid {
  flex: none;           /* frozen v2 screen 3: "More photos" sits directly under the photos */
  overflow: visible;
}

.photo-picker-more-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.photo-picker-preview {
  height: 300px;
}

.photo-picker-headline {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  right: var(--space-md);
  font-size: var(--font-xl);
  font-weight: var(--font-bold);
  color: var(--color-white);
}

.photo-picker-cost {
  font-size: var(--font-xs);
  color: var(--color-text-secondary);
  text-align: center;
}

/* ---- "Photos from" and the one-provider-down card (skia-editor-v3 MP-09, frozen v3 screens 4 and 11) ---- */
.photo-picker-provider {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-medium);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-size: var(--font-sm);
}

#photoPickerProvidersDown .photo-picker-card {
  margin-bottom: var(--space-md);
}

.photo-picker-card-actions {
  display: flex;
  gap: var(--space-sm);
}