/* Brand Contrast Fixer — live before/after brand cards driven by
   engine suggestion pairs (spec 17). */

.pct-contrast-layout {
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
  grid-template-areas:
    "form preview"
    "result result";
  align-items: start;
}

.pct-contrast-layout .paletier-tool-form { grid-area: form; }
.pct-contrast-layout .pct-brand-preview { grid-area: preview; }
.pct-contrast-layout .paletier-tool-result {
  grid-area: result;
  min-height: 0;
}

.pct-brand-preview {
  padding: 16px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.pct-brand-figure { margin: 0; display: grid; gap: 6px; }

.pct-brand-figure figcaption {
  font: 700 11px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pct-muted);
}

.pct-brand-card {
  min-height: 170px;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--pct-preview-bg, #f6e9d7);
  color: var(--pct-preview-fg, #7a5a44);
  display: grid;
  align-content: center;
  gap: 10px;
  transition: background .35s ease, color .35s ease;
  min-width: 0;
}

.pct-brand-card b {
  font-family: 'Cormorant Garamond', 'Fraunces', Georgia, serif;
  font-size: 32px;
  line-height: 1;
}

.pct-brand-card p { max-width: 30ch; margin: 0; font-size: 13.5px; }

.pct-fake-button {
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 0 15px;
  background: var(--pct-preview-fg, #7a5a44);
  color: var(--pct-preview-bg, #f6e9d7);
  font-weight: 800;
  font-size: 13px;
  transition: background .35s ease, color .35s ease;
}

@media (max-width: 1024px) {
  .pct-contrast-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "form"
      "preview"
      "result";
  }
  .pct-brand-preview { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .pct-brand-preview { grid-template-columns: 1fr; }
  .pct-brand-card {
    min-height: 146px;
    padding: 16px;
  }
  .pct-brand-card b {
    font-size: 28px;
  }
}