/* Ads product demo: "ask for ads, get variation and quality". Everything is scoped under .adsdemo.
   The default (no class from JS) is the composed static frame: the ask typed, three variants, each with a quality tick, and
   variant 2 approved. This frame is used for no JS, for reduced motion and while paused. ads-demo.js adds .is-live (which shows
   the pause pill) and drives transform and opacity only. Layout is driven by the component's own width (container query),
   not the viewport: three columns at about 560px, a stack of row cards at 30rem or less (about 340px). */
.adsdemo {
  /* ---- token sheet: role tokens (the site's tokens when present, Ledger fallbacks), then the fictional bakery ---- */
  --ad-paper: var(--c-background, #F5F4EF);
  --ad-surface: var(--c-surface, #FDFDFB);
  --ad-ink: var(--c-text, #16181D);
  --ad-line: var(--c-border, #DAD7CE);
  --ad-control: var(--c-control-border, #83888F);
  --ad-accent: var(--c-primary, #1F3FB4);
  --ad-on-accent: var(--c-primary-text, #FFFFFF);
  --ad-focus: var(--c-focus, #1F3FB4);
  --ad-font: var(--font-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --ad-mono: var(--font-mono, ui-monospace, "SF Mono", Consolas, monospace);
  --ad-shadow: color-mix(in srgb, var(--ad-ink) 22%, transparent);
  --bk-cream: #FBF1DE; --bk-wheat: #E8C687; --bk-crust: #9A5427; --bk-cocoa: #3A2417;
  --bk-berry: #B23F4B; --bk-berry-deep: #7E2531; --bk-leaf: #6F8455;
  --bk-serif: Georgia, "Times New Roman", serif;
  container: adsdemo / inline-size;
  display: grid; gap: 10px; min-width: 0;
  color: var(--ad-ink); font-family: var(--ad-font);
}
.adsdemo *, .adsdemo *::before, .adsdemo *::after { box-sizing: border-box; }
.adsdemo svg { display: block; }
.adsdemo :focus-visible { outline: 2px solid var(--ad-focus); outline-offset: 3px; }

/* ---- the frame and the request bar ---- */
.adsdemo .ad-art { position: relative; display: grid; gap: 14px; padding: 14px; border: 1px solid var(--ad-line); border-radius: 18px; background: var(--ad-surface); }
.adsdemo .ad-ask { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 10px; border: 1px solid var(--ad-control); border-radius: 14px; background: var(--ad-paper); }
.adsdemo .ad-ask-flash { position: absolute; inset: -1px; border: 2px solid var(--ad-accent); border-radius: inherit; opacity: 0; pointer-events: none; }
.adsdemo .ad-ask-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ad-accent); }
.adsdemo .ad-ask-mark svg { width: 14px; height: 14px; fill: var(--ad-on-accent); }
.adsdemo .ad-ask-line { position: relative; flex: 1; min-width: 0; margin: 0; font-size: clamp(.875rem, 3cqi, 1rem); font-weight: 500; line-height: 1.35; }
.adsdemo .ad-w { display: inline-block; white-space: nowrap; }        /* word spans written by ads-demo.js */
.adsdemo .ad-caret { position: absolute; left: 0; top: 0; width: 2px; height: 1.25em; opacity: 0; pointer-events: none; }
.adsdemo .ad-caret i { display: block; width: 100%; height: 100%; border-radius: 1px; background: var(--ad-accent); }
.adsdemo .ad-send { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ad-accent); }
.adsdemo .ad-send svg { width: 16px; height: 16px; fill: none; stroke: var(--ad-on-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the three variants: one bakery brand, three tones ---- */
.adsdemo .ad-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.adsdemo .ad-card { position: relative; z-index: var(--z-raised); display: flex; flex-direction: column; min-width: 0; border-radius: 12px; background: var(--bk-cream); box-shadow: 0 0 0 1px var(--ad-line), 0 8px 18px -12px var(--ad-shadow); }
.adsdemo .ad-card--2 { z-index: var(--z-dropdown); }
.adsdemo .ad-panel { position: relative; aspect-ratio: 3 / 2; border-radius: 12px 12px 0 0; background: var(--bk-wheat); }
.adsdemo .ad-ill { position: absolute; inset: 6%; width: 88%; height: 88%; }
.adsdemo .ad-body { display: flex; flex: 1; flex-direction: column; gap: 7px; padding: 9px 10px 11px; }
.adsdemo .ad-brand { display: flex; align-items: center; gap: 6px; }
.adsdemo .ad-logo { flex: none; width: 16px; height: 16px; }
.adsdemo .ad-logo circle { fill: var(--bk-crust); }
.adsdemo .ad-logo path { fill: none; stroke: var(--bk-cream); stroke-width: 1.6; stroke-linecap: round; }
.adsdemo .ad-bar { width: 44%; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--bk-crust) 45%, transparent); }
.adsdemo .ad-head { margin: 0; color: var(--bk-cocoa); font: 700 clamp(.875rem, 2.8cqi, 1.05rem)/1.2 var(--bk-serif); overflow-wrap: anywhere; text-wrap: balance; }
.adsdemo .ad-cta { width: 40%; height: 14px; margin-top: auto; border-radius: 999px; background: var(--bk-crust); }

.adsdemo .ad-card--2 .ad-panel { background: var(--bk-cocoa); }
.adsdemo .ad-card--2 .ad-body { border-radius: 0 0 12px 12px; background: var(--bk-cocoa); }
.adsdemo .ad-card--2 .ad-head { color: var(--bk-cream); }
.adsdemo .ad-card--2 .ad-logo circle { fill: var(--bk-wheat); }
.adsdemo .ad-card--2 .ad-logo path { stroke: var(--bk-cocoa); }
.adsdemo .ad-card--2 .ad-bar { background: color-mix(in srgb, var(--bk-wheat) 55%, transparent); }
.adsdemo .ad-card--2 .ad-cta { background: var(--bk-wheat); }
.adsdemo .ad-card--3 .ad-panel { background: var(--bk-berry); }
.adsdemo .ad-card--3 .ad-head { color: var(--bk-berry-deep); }
.adsdemo .ad-card--3 .ad-cta { background: var(--bk-berry); }

/* bakery illustrations (shapes only) */
.adsdemo .bk-sun { fill: var(--bk-cream); }
.adsdemo .bk-board { fill: var(--bk-cocoa); }
.adsdemo .bk-crust { fill: var(--bk-crust); }
.adsdemo .bk-score { fill: none; stroke: var(--bk-wheat); stroke-width: 3.2; stroke-linecap: round; }
.adsdemo .bk-steam { fill: none; stroke: color-mix(in srgb, var(--bk-cream) 55%, transparent); stroke-width: 2; stroke-linecap: round; }
.adsdemo .bk-plate { fill: var(--bk-cream); }
.adsdemo .bk-flake { fill: var(--bk-wheat); stroke: var(--bk-crust); stroke-width: 1.4; }
.adsdemo .bk-fold { fill: none; stroke: var(--bk-crust); stroke-width: 1.4; stroke-linecap: round; }
.adsdemo .bk-tart { fill: var(--bk-wheat); }
.adsdemo .bk-tart-side { fill: var(--bk-crust); }
.adsdemo .bk-berry { fill: var(--bk-berry-deep); }
.adsdemo .bk-leafy { fill: var(--bk-leaf); }

/* ---- quality ticks, the approval ring and the stamp ---- */
.adsdemo .ad-tick { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ad-accent); box-shadow: 0 0 0 2px var(--ad-surface); }
.adsdemo .ad-tick svg { width: 13px; height: 13px; fill: none; stroke: var(--ad-on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.adsdemo .ad-ring { position: absolute; inset: -5px; z-index: var(--z-below); border: 2px solid var(--ad-accent); border-radius: 16px; pointer-events: none; }
.adsdemo .ad-stamp { position: absolute; right: 8px; bottom: 8px; z-index: var(--z-raised); padding: 5px 8px; border: 2px solid var(--ad-accent); border-radius: 6px; background: var(--ad-surface); color: var(--ad-accent); font: 700 .68rem/1 var(--ad-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 14px -8px var(--ad-shadow); transform: rotate(-7deg); }

/* ---- the pause pill (WCAG 2.2.2): space is kept so nothing shifts when JS shows it ---- */
.adsdemo .ad-pill { justify-self: end; visibility: hidden; min-height: 40px; padding: 0 16px; border: 1px solid var(--ad-control); border-radius: 999px; background: var(--ad-surface); color: var(--ad-ink); font: 500 .8125rem/1 var(--ad-mono); letter-spacing: .03em; cursor: pointer; }
.adsdemo .ad-pill:hover { border-color: var(--ad-ink); }
.adsdemo.is-live .ad-pill { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .adsdemo .ad-pill { display: none; } }   /* never live: no control, no reserved row */

@media (prefers-reduced-motion: no-preference) {
  .adsdemo.is-live:not(.is-paused) .ad-caret i { animation: ad-blink 1s steps(2, jump-none) infinite; }
}
@keyframes ad-blink { from { opacity: 1; } to { opacity: 0; } }

/* ---- narrow (rotator slide, phone): row cards, stacked ---- */
@container adsdemo (max-width: 30rem) {
  .adsdemo .ad-art { gap: 10px; padding: 11px; border-radius: 16px; }
  .adsdemo .ad-cards { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .adsdemo .ad-card { flex-direction: row; min-height: 86px; }
  .adsdemo .ad-panel { flex: 0 0 34%; aspect-ratio: auto; border-radius: 12px 0 0 12px; }
  .adsdemo .ad-card--2 .ad-body { border-radius: 0 12px 12px 0; }
  .adsdemo .ad-body { gap: 6px; padding: 9px 12px 10px; }
  .adsdemo .ad-head { font-size: .95rem; }
  .adsdemo .ad-cta { width: 34%; height: 11px; }
  .adsdemo .ad-tick { top: 6px; right: 6px; width: 20px; height: 20px; }
  .adsdemo .ad-stamp { top: 5px; right: 8px; bottom: auto; padding: 3px 6px; font-size: .62rem; }       /* beside the brand row, clear of the headline */
}