/* ═══════════════════════════════════════════════════════
   Embed widgets — loaded only by app/views/layouts/embed.html.erb,
   never by the main app. Hand-written, not run through the
   Tailwind compiler, so a badge on a stranger's page never ships
   the whole app's utility bundle - see brain/rails/project-setup.html
   for why splitting Tailwind's own output isn't the way to do this.

   The tokens below are the subset of app/assets/tailwind/
   application.css's @theme these components actually use, copied
   by hand - keep in sync if that palette changes.
   ═══════════════════════════════════════════════════════ */
:root {
  --color-paper-50: #FAF6EC;
  --color-paper-200: #E3DAC3;
  --color-ink-700: #2C313A;
  --color-ink-900: #14171C;
  --color-brass-300: #E0AF64;
  --color-brass-500: #C0902F;
  --color-brass-600: #8C671F;
  --color-ledger-300: #6BC2A5;
  --color-ledger-400: #35876A;
  --color-ledger-600: #1F5D4C;
  --color-ledger-700: #184A3D;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Charter, "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

html, body {
  background: transparent;
  margin: 0;
  padding: 4px;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink-900);
}

/* ── Score badge — embeds/scores/show.html.erb ──
   Rendered inside a business's own iframe on someone else's page,
   so its skin is a fixed light/dark choice rather than something
   that reacts to the host page's theme - the host's CSS never
   reaches in here (see Embeds::ScoresController). */
.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 20px -12px rgb(0 0 0 / .25);
}
.score-badge--light {
  background: var(--color-paper-50);
  border: 1px solid var(--color-paper-200);
  color: var(--color-ink-900);
}
.score-badge--dark {
  background: var(--color-ink-900);
  border: 1px solid var(--color-ink-700);
  color: var(--color-paper-50);
}
.score-badge__seal {
  width: 2rem;
  height: 2rem;
  flex: none;
  color: var(--color-brass-500);
}
.score-badge__figure {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score-badge__meta {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.score-badge__stars {
  color: var(--color-brass-500);
  letter-spacing: .05em;
}
.score-badge--dark .score-badge__stars {
  color: var(--color-brass-300);
}
.score-badge__count {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .03em;
  opacity: .65;
}
.score-badge__mark {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .55;
}
.score-badge__mark b {
  font-weight: 600;
  opacity: 1;
  color: var(--color-brass-500);
}
.score-badge--dark .score-badge__mark b {
  color: var(--color-brass-300);
}

/* ── Testimonial embed — embeds/testimonials/show.html.erb ──
   One review a business chose to feature, addressed by its own
   public_id (see Review#public_id) - same fixed-skin reasoning
   as the score badge just above. */
.testimonial {
  display: block;
  max-width: 24rem;
  border-radius: .75rem;
  padding: 1.5rem 1.6rem 1.35rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 20px -12px rgb(0 0 0 / .25);
}
.testimonial--light {
  background: var(--color-paper-50);
  border: 1px solid var(--color-paper-200);
  color: var(--color-ink-900);
}
.testimonial--dark {
  background: var(--color-ink-900);
  border: 1px solid var(--color-ink-700);
  color: var(--color-paper-50);
}
.testimonial__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}
.testimonial__stars {
  color: var(--color-brass-600);
  letter-spacing: .05em;
}
.testimonial--dark .testimonial__stars {
  color: var(--color-brass-300);
}
.testimonial__pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--color-ledger-600) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-ledger-600) 25%, transparent);
  color: var(--color-ledger-700);
}
.testimonial--dark .testimonial__pill {
  background: color-mix(in srgb, var(--color-ledger-400) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-ledger-400) 35%, transparent);
  color: var(--color-ledger-300);
}
.testimonial__pill-icon {
  width: .65rem;
  height: .65rem;
}
.testimonial__body {
  margin: 0 0 1.1rem;
  font-size: .98rem;
  line-height: 1.55;
}
.testimonial__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--color-paper-200);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .03em;
}
.testimonial--dark .testimonial__foot {
  border-top-color: var(--color-ink-700);
}
.testimonial__date {
  opacity: .6;
}
.testimonial__link {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
  color: inherit;
}
.testimonial__link b {
  font-weight: 600;
  opacity: 1;
  color: var(--color-brass-600);
}
.testimonial--dark .testimonial__link b {
  color: var(--color-brass-300);
}