/* audesti — Embed builder + embedded widget.

   Shared by two documents that must look identical:
     templates/embedding.html     (owner's builder, inside the app shell)
     templates/embed_widget.html  (the iframe on a customer's site)
   Everything is scoped to `.ep` so the rest of the app — which has its own
   au-btn / au-card / au-input with the signature corner — is untouched.

   Theme follows `[data-theme]` on an ancestor: the app shell's toggle sets it
   on <html>, the widget sets it from the visitor's prefers-color-scheme.

   Tokens come from design/audesti-embed-design/tokens. Two light values were
   darkened to clear 4.5:1 where they sit on surface-2 / brand-soft:
   --ink-subtle #6b746d -> #626b64, --brand-ink #0b7f55 -> #08704c. */

/* Geist, self-hosted (static/fonts/README.md): no Google Fonts round trips
   before the first paint. Each script range is its own file, fetched only if
   the page has text in it. */
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/geist-1.7.2-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/geist-1.7.2-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-0301, U+0303, U+0309, U+0323, U+0400-045F, U+0460-052F, U+0490-0491, U+04B0-04B1, U+1C80-1C8A, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C4, U+2113, U+2116, U+2C60-2C7F, U+2DE0-2DFF, U+A640-A69F, U+A720-A7FF, U+FE2E-FE2F;
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/geist-mono-1.7.2-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/geist-mono-1.7.2-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-0301, U+0303, U+0309, U+0323, U+0400-045F, U+0460-052F, U+0490-0491, U+04B0-04B1, U+1C80-1C8A, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20C4, U+2113, U+2116, U+2C60-2C7F, U+2DE0-2DFF, U+A640-A69F, U+A720-A7FF, U+FE2E-FE2F;
}

.ep {
    --bg: #0b0d10;
    --surface-1: #12151a;
    --surface-2: #181c22;
    --surface-3: #20252c;
    --border: #232830;
    --border-strong: #343b46;
    --ink: #eef1ee;
    --ink-muted: #9aa39d;
    --ink-subtle: #7f8882;
    --brand: #2fd396;
    --brand-ink: #46dca4;
    --on-brand: #04140d;
    --brand-soft: rgba(47, 211, 150, 0.12);
    --brand-line: rgba(47, 211, 150, 0.35);
    --swatch-green: #1f9d6c;
    --swatch-teal: #0e8fa3;
    --swatch-violet: #7c3aed;
    --swatch-amber: #e09a12;
    --swatch-rose: #e11d48;
    --on-swatch: #ffffff;
    --danger: #f05252;
    --danger-soft: rgba(240, 82, 82, 0.12);
    --warning: #f2b23a;
    --stage: #0e1216;
    --glass-fill: rgba(255, 255, 255, 0.07);
    --glass-fill-strong: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.16);
    --glass-sheen: rgba(255, 255, 255, 0.22);
    --glass-ink: #f4f7f5;
    --glass-ink-muted: rgba(244, 247, 245, 0.72);
    --code-bg: #0a0c0f;
    --code-ink: #d6ded8;
    --code-tag: #7c8a82;
    --code-attr: #8fe3be;
    --code-str: #f5c66b;
    --code-line: rgba(255, 255, 255, 0.07);
    --code-chip: rgba(255, 255, 255, 0.06);
    --code-chip-strong: rgba(255, 255, 255, 0.1);
    --code-chip-line: rgba(255, 255, 255, 0.12);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 8px 28px rgba(47, 211, 150, 0.35);
    --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.18);
    --scrim: rgba(0, 0, 0, 0.55);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --blur-glass: 18px;
    --font-sans: "Geist", "Inter", system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
}

[data-theme="light"] .ep,
.ep[data-theme="light"] {
    --bg: #f5f7f4;
    --surface-1: #ffffff;
    --surface-2: #f1f4f0;
    --surface-3: #e7ebe6;
    --border: #e1e5df;
    --border-strong: #c9cfc7;
    --ink: #0f1411;
    --ink-muted: #566059;
    --ink-subtle: #626b64;
    --brand: #14a874;
    --brand-ink: #08704c;
    --on-brand: #04140d;
    --brand-soft: rgba(20, 168, 116, 0.10);
    --brand-line: rgba(20, 168, 116, 0.35);
    --swatch-amber: #d68c06;
    --danger: #d92d2d;
    --danger-soft: rgba(217, 45, 45, 0.08);
    --warning: #b7790a;
    --stage: #e9eeea;
    --glass-fill: rgba(255, 255, 255, 0.58);
    --glass-fill-strong: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.9);
    --glass-ink: #0f1411;
    --glass-ink-muted: rgba(15, 20, 17, 0.68);
    --code-bg: #0f1411;
    --shadow-card: 0 1px 2px rgba(16, 24, 20, 0.04), 0 8px 24px rgba(16, 24, 20, 0.06);
    --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 50px rgba(16, 40, 28, 0.16);
    --shadow-glow: 0 8px 24px rgba(20, 168, 116, 0.30);
    --shadow-seg: 0 1px 2px rgba(16, 24, 20, 0.08);
    --scrim: rgba(15, 20, 17, 0.4);
}

/* ---- Base (beats Bootstrap + the app's global body type inside .ep) ---- */
.ep {
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: normal;
    -webkit-font-smoothing: antialiased;
}
.ep *, .ep *::before, .ep *::after { box-sizing: border-box; }
.ep h1, .ep h2, .ep h3, .ep h4, .ep p { margin: 0; color: inherit; }
.ep label { margin: 0; }
.ep button { font-family: inherit; }
.ep a { color: inherit; }
.ep [hidden] { display: none !important; }
.ep :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ep .ph { line-height: 1; }

/* Phosphor icon at the design's 16px size */
.au-icon { font-size: 16px; flex: none; line-height: 1; }
svg.au-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Eyebrow (restyled inside .ep) ---- */
.ep .au-eyebrow {
    margin: 0;
    font: 500 11px/16px var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-ink);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.ep .au-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

/* ---- Button (restyled inside .ep) ---- */
.ep .au-btn {
    appearance: none;
    height: auto;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--ink);
    font: 500 13px/18px var(--font-sans);
    letter-spacing: normal;
    padding: 9px 14px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition: background .15s, border-color .15s, transform .1s, filter .15s;
}
.ep .au-btn:hover { background: var(--surface-3); color: var(--ink); border-radius: var(--radius-md); }
.ep .au-btn:active { transform: translateY(1px); }
.ep .au-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ep .au-btn--primary {
    background: var(--brand);
    border-color: transparent;
    color: var(--on-brand);
    box-shadow: var(--shadow-glow);
    font-weight: 600;
}
.ep .au-btn--primary:hover { background: var(--brand); color: var(--on-brand); filter: brightness(1.06); }
.ep .au-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.ep .au-btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.ep .au-btn--lg { padding: 14px 20px; font-size: 15px; width: 100%; }
.ep .au-btn--icon { width: auto; height: auto; padding: 8px; border-radius: var(--radius-sm); }
.ep .au-btn--icon:hover { border-radius: var(--radius-sm); }
.ep .au-btn--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.ep .au-btn--danger:hover { background: var(--danger-soft); color: var(--danger); filter: brightness(1.15); }

/* ---- Toggle ---- */
.au-toggle {
    position: relative;
    width: 40px; height: 24px;
    flex: none;
    padding: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.au-toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: var(--radius-pill);
    background: var(--ink-muted);
    transition: transform .2s cubic-bezier(.3, .7, .3, 1.3), background .2s;
}
.au-toggle[aria-checked="true"] { background: var(--brand); border-color: transparent; }
.au-toggle[aria-checked="true"]::after { transform: translateX(16px); background: var(--on-brand); }
.au-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Field (label + input restyled inside .ep) ---- */
.au-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ep .au-label {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}
.ep .au-label small { font-weight: 400; color: var(--ink-subtle); font-size: 12px; }
.ep .au-input {
    width: 100%;
    height: auto;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    color: var(--ink);
    font: 400 14px/20px var(--font-sans);
    transition: border-color .15s, box-shadow .15s;
}
.ep .au-input::placeholder { color: var(--ink-subtle); }
.ep .au-input:focus { outline: none; background: var(--surface-2); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.ep .au-field-error { font-size: 12px; color: var(--danger); }

/* ---- Segmented ---- */
.au-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.au-seg button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font: 500 13px/18px var(--font-sans);
    padding: 7px 12px;
    border-radius: 9px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    cursor: pointer;
}
.au-seg button[aria-pressed="true"] { background: var(--surface-1); color: var(--ink); box-shadow: var(--shadow-seg), 0 0 0 1px var(--border); }

/* ---- Accent picker ---- */
.au-swatches { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.au-swatch { width: 34px; height: 34px; border-radius: var(--radius-pill); border: 0; cursor: pointer; position: relative; padding: 0; transition: transform .15s; }
.au-swatch:hover { transform: scale(1.08); }
.au-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--ink); }
.au-swatch[aria-checked="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px; height: 6px;
    border: 2px solid var(--on-swatch);
    border-top: 0; border-right: 0;
    transform: translateY(-1px) rotate(-45deg);
}
.au-swatch-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.au-swatch-custom {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px dashed var(--border-strong);
    background: transparent;
    color: var(--ink-muted);
    border-radius: var(--radius-pill);
    padding: 5px 12px 5px 5px;
    font: 500 13px/18px var(--font-sans);
    cursor: pointer;
}
.au-swatch-custom.is-on { border-style: solid; border-color: var(--ink); color: var(--ink); }
.au-swatch-custom i { width: 24px; height: 24px; border-radius: var(--radius-pill); display: block; }
.au-swatch-custom input { position: absolute; opacity: 0; width: 0; height: 0; }
.au-swatch-custom:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- Option rows ---- */
.au-options { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); overflow: hidden; }
.au-opt { display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-4); }
.au-opt + .au-opt, .au-opt + .au-opt-extra, .au-opt-extra + .au-opt { border-top: 1px solid var(--border); }
.au-opt__ic { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-1); border: 1px solid var(--border); color: var(--ink-muted); }
.au-opt__t { flex: 1; min-width: 0; }
.au-opt__t b { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; }
.au-opt__t span { display: block; font-size: 12px; line-height: 17px; color: var(--ink-muted); margin-top: 2px; }
.au-opt__t a { color: var(--brand-ink); }
.au-opt-extra { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) 14px 60px; }
.ep-lang-note { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; line-height: 17px; color: var(--ink-muted); }
.ep-lang-note a { color: var(--brand-ink); }
.au-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--ink-muted);
    font: 500 12px/16px var(--font-sans);
    cursor: pointer;
}
.au-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.au-chip:has(input:checked) { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
.au-chip:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- Testimonial picker ---- */
.au-pick { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); padding: var(--space-1); max-height: 340px; overflow-y: auto; transition: opacity .2s; }
.au-pick.is-off { opacity: .5; pointer-events: none; }
.au-pick__row { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.au-pick__row + .au-pick__row { margin-top: 2px; }
.au-pick__row:hover { background: var(--surface-3); }
.au-pick__row[aria-checked="true"] { background: var(--brand-soft); border-color: var(--brand-line); }
.au-check { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; transition: all .15s; }
.au-pick__row[aria-checked="true"] .au-check { background: var(--brand); border-color: var(--brand); }
.au-pick__row[aria-checked="true"] .au-check::after { content: ""; width: 8px; height: 5px; border: 2px solid var(--on-brand); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.au-avatar { width: 34px; height: 34px; flex: none; border-radius: var(--radius-pill); display: grid; place-items: center; font-weight: 600; font-size: 13px; background: var(--surface-1); border: 1px solid var(--border); color: var(--ink); }
.au-pick__t { flex: 1; min-width: 0; }
.au-pick__t b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-pick__t span { display: block; font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-pick__empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--ink-subtle); font-size: 13px; }
.au-pick__empty a { color: var(--brand-ink); }
.au-pick .au-tag[data-score] { display: none; }
.au-pick.by-score .au-tag[data-score] { display: inline-flex; }
.au-pick.by-score .au-tag[data-time] { display: none; }

.au-tag { font: 500 11px/16px var(--font-mono); color: var(--ink-muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 8px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; background: transparent; }
.au-tag--brand { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }
button.au-tag { cursor: pointer; }
button.au-tag:disabled { cursor: wait; opacity: .6; }

/* ---- Card (restyled inside .ep: no signature corner here) ---- */
.ep .au-card { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.ep .au-card::before { display: none; }
.au-step { width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; font: 500 12px/1 var(--font-mono); background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line); }

/* ============ STAGE + GLASS CARD + CAROUSEL ============ */
.au-stage {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--stage);
    border-radius: var(--radius-xl);
    container-type: inline-size;
    --w-accent: var(--brand);
}
.au-stage__blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.au-stage__blobs i { position: absolute; border-radius: 50%; filter: blur(48px); opacity: .75; animation: au-float 14s ease-in-out infinite alternate; }
.au-stage__blobs i:nth-child(1) { width: 260px; height: 260px; left: -40px; top: -60px; background: var(--w-accent); }
.au-stage__blobs i:nth-child(2) { width: 220px; height: 220px; right: -30px; bottom: -70px; background: var(--w-accent); opacity: .45; animation-delay: -5s; }
.au-stage__blobs i:nth-child(3) { width: 160px; height: 160px; left: 45%; top: 35%; background: var(--swatch-amber); opacity: .28; animation-delay: -9s; }
.au-stage__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(var(--glass-border) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: .35;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
@keyframes au-float { to { transform: translate(30px, 20px) scale(1.08); } }

/* Carousel layout on the stage. Cards are stacked in one grid cell rather than
   absolutely positioned, so the stage grows with the tallest card (an
   expanded "Read more" included) and the iframe's auto-height follows. */
.au-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding: var(--space-8) var(--space-4) var(--space-5); min-height: 420px; justify-content: center; }
.au-track { position: relative; width: 100%; display: grid; justify-items: center; align-items: center; }
.au-track > .au-glass { grid-area: 1 / 1; }

.au-glass {
    position: relative;
    width: min(340px, calc(100% - 104px));
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(160%);
    backdrop-filter: blur(var(--blur-glass)) saturate(160%);
    color: var(--glass-ink);
    padding: var(--space-6);
    text-align: left;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s, filter .35s;
}
.au-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, var(--glass-sheen), transparent 40%); mix-blend-mode: overlay; }
.au-track > .au-glass { opacity: 0; transform: scale(.8); pointer-events: none; }
.au-track > .au-glass.is-cur { opacity: 1; transform: none; z-index: 2; pointer-events: auto; }
.au-track > .au-glass.is-prev,
.au-track > .au-glass.is-next { opacity: .3; filter: blur(1.5px) saturate(.7); }
.au-track > .au-glass.is-prev { transform: translateX(-74%) scale(.84); }
.au-track > .au-glass.is-next { transform: translateX(74%) scale(.84); }

.au-glass__top { display: flex; align-items: center; gap: var(--space-3); }
.au-glass__who { flex: 1; min-width: 0; }
.au-glass__who b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-glass__meta { display: block; font-size: 12px; line-height: 16px; color: var(--glass-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* audesti logo in the corner (free plans; paid cards leave it out). */
/* The free-plan audesti mark: the bare logo, no tile behind it. */
.au-glass__brand { flex: none; align-self: flex-start; display: grid; place-items: center; }
.au-glass__brand img { display: block; width: 32px; height: 32px; }
/* Voice first, then the quote it was transcribed from. Spacing sits on the
   top of each block so whichever one is last leaves no gap under it. */
.au-glass__quote { margin: var(--space-4) 0 0; font-size: 15px; line-height: 23px; letter-spacing: -.005em; }
.au-glass__quote::before { content: "\201C"; display: block; font: 600 40px/24px Georgia, serif; color: var(--w-accent); margin-bottom: 4px; }
/* ---- Voice-first card: the guest's thank-you card, everywhere ----
   (embed widget, builder preview, All Testimonials, Dashboard, the /r/
   record page and the /s/ share page). The voice player runs edge to edge
   across the top (_embed_components.voice_player), then a centred body:
   the name, the role in mono caps, the quote in curly quotes. */
.au-glass--voice-first { padding: 0; overflow: hidden; overflow: clip; text-align: center; }
.au-glass__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.au-glass--voice-first .au-glass__top { justify-content: center; }
.au-glass--voice-first .au-glass__who b { font-size: 18px; line-height: 24px; letter-spacing: -.015em; white-space: normal; overflow-wrap: anywhere; }
.au-glass--voice-first .au-glass__meta { margin-top: 6px; font: 500 11px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; }
.au-glass--voice-first .au-glass__quote { margin-top: var(--space-4); font-size: 14px; line-height: 22px; }
.au-glass--voice-first .au-glass__quote::before { content: none; }
.au-glass--voice-first .au-glass__text::before { content: "\201C"; }
.au-glass--voice-first .au-glass__text::after { content: "\201D"; }
.au-glass--voice-first .au-glass__quote.empty .au-glass__text::before,
.au-glass--voice-first .au-glass__quote.empty .au-glass__text::after { content: none; }
.au-glass--voice-first .au-glass__foot { justify-content: center; }
.au-glass--voice-first .au-langs { justify-content: center; }
.au-glass--voice-first .au-translated { text-align: left; }
.au-glass__quote.is-clamped .au-glass__text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* The player: a short stage of its own, lit from below in the accent. */
.au-glass__player.au-voice {
    --au-voice-mode: dark;
    position: relative;
    display: block;
    height: 128px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0;
    background: radial-gradient(70% 110% at 50% 100%, color-mix(in srgb, var(--w-accent) 26%, transparent), transparent 72%);
}
[data-theme="light"] .au-glass__player.au-voice,
.ep[data-theme="light"] .au-glass__player.au-voice { --au-voice-mode: light; background: radial-gradient(70% 110% at 50% 100%, color-mix(in srgb, var(--w-accent) 16%, transparent), transparent 72%); }
.au-voice__wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.au-voice .au-time { position: absolute; top: 14px; left: 16px; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.au-voice .au-glass__brand { position: absolute; top: 9px; right: 10px; z-index: 1; }
.au-voice .au-glass__brand img { width: 30px; height: 30px; }
.au-voice .au-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--glass-sheen);
    background: var(--glass-fill-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5);
    transition: transform .2s, background .2s;
}
.au-voice .au-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.au-voice .au-play svg { width: 20px; height: 20px; fill: var(--glass-ink); }
.au-voice .au-play .i-play { margin-left: 3px; }
.au-voice__track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.au-voice__bar { display: block; height: 100%; width: 0; background: var(--w-accent); box-shadow: 0 0 8px var(--w-accent); }
.au-more { appearance: none; border: 0; background: none; padding: 0; margin-top: 4px; color: var(--glass-ink); font: 600 12px/16px var(--font-sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.au-langs { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-3) 0 0; }
.au-langs button { appearance: none; border: 1px solid var(--glass-border); background: var(--glass-fill); color: var(--glass-ink-muted); border-radius: var(--radius-pill); padding: 3px 9px; font: 500 11px/16px var(--font-mono); cursor: pointer; }
.au-langs button[aria-pressed="true"] { color: var(--glass-ink); border-color: var(--w-accent); }
.au-translated { margin: var(--space-3) 0 0; padding: 8px 10px; border-left: 2px solid var(--w-accent); border-radius: 6px; background: var(--glass-fill); font-size: 13px; line-height: 19px; color: var(--glass-ink-muted); }
/* --radius-md, not the card's --radius-xl: on a bar this short 24px reads as
   a pill, so the smaller corner is what makes its curve match the card's. */
.au-glass__player { margin-top: var(--space-5); display: flex; align-items: center; gap: var(--space-3); padding: 8px 12px 8px 8px; border-radius: var(--radius-md); background: var(--glass-fill-strong); border: 1px solid var(--glass-border); }
.au-play { width: 36px; height: 36px; flex: none; border-radius: var(--radius-pill); border: 0; background: var(--w-accent); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 6px 18px -4px var(--w-accent); }
.au-play svg { width: 14px; height: 14px; fill: var(--on-swatch); }
.au-play .i-play { margin-left: 2px; }
.au-play .i-pause, .au-play.is-playing .i-play { display: none; }
.au-play.is-playing .i-pause { display: block; }
.au-time { font: 500 11px/1 var(--font-mono); color: var(--glass-ink-muted); }
.au-glass__foot { display: flex; align-items: center; gap: 6px; margin-top: var(--space-4); font-size: 11px; line-height: 16px; color: var(--glass-ink-muted); }
.au-glass__foot svg { width: 14px; height: 14px; stroke: var(--w-accent); }

/* Card detail switches, set on the stage by the builder and by the widget */
.au-stage.no-role .au-glass__role,
.au-stage.no-company .au-glass__co,
.au-stage.no-role .au-glass__sep,
.au-stage.no-company .au-glass__sep,
.au-stage.no-badge .au-glass__foot,
.au-stage.no-langs .au-langs { display: none; }
.au-stage.no-role.no-company .au-glass__meta { display: none; }

.au-glass-btn { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-pill); border: 1px solid var(--glass-border); background: var(--glass-fill-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--glass-ink); display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.au-glass-btn:hover { transform: translateY(-50%) scale(1.08); }
.au-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.au-arrow.l { left: 14px; }
.au-arrow.r { right: 14px; }
.au-ctrls { display: flex; align-items: center; gap: var(--space-4); min-height: 20px; }
.au-dots { display: flex; gap: 6px; justify-content: center; }
.au-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--glass-ink-muted); opacity: .5; cursor: pointer; transition: all .25s; }
.au-dots button[aria-current="true"] { width: 20px; background: var(--w-accent); opacity: 1; }
.au-sample { font: 500 11px/16px var(--font-mono); color: var(--glass-ink-muted); background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); padding: 3px 10px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Owner's heading above the cards. */
.au-stage__title { max-width: 560px; text-align: center; font: 600 22px/28px var(--font-sans); letter-spacing: -.015em; color: var(--glass-ink); overflow-wrap: anywhere; }
/* "Powered by audesti" under the dots (free plans). */
.au-mark { display: inline-flex; align-items: center; gap: 5px; margin-top: calc(var(--space-2) * -1); font: 500 11px/16px var(--font-sans); color: var(--glass-ink-muted); text-decoration: none; }
.au-mark img { width: 14px; height: 14px; border-radius: 4px; display: block; }
.au-mark b { font-weight: 600; color: var(--glass-ink); }
.au-mark:hover b { text-decoration: underline; text-underline-offset: 2px; }
/* "See all N testimonials": a quiet link to the owner's record page, not a banner. */
.au-record { position: relative; z-index: 1; margin-top: calc(var(--space-2) * -1); font: 500 12px/16px var(--font-sans); color: var(--glass-ink-muted); text-decoration: none; }
.au-record:hover { color: var(--glass-ink); text-decoration: underline; text-underline-offset: 2px; }
.au-empty-note { color: var(--glass-ink-muted); font-size: 13px; text-align: center; padding: var(--space-6); }

/* Narrow widget (phone, sidebar slot, or the builder's Mobile switch):
   just the focused card, wider, neighbours hidden. */
@container (max-width: 440px) {
    .au-glass { width: calc(100% - 54px); padding: var(--space-5); }
    .au-glass--voice-first { padding: 0; }
    .au-glass__body { padding: var(--space-4) var(--space-5) var(--space-5); }
    .au-track > .au-glass.is-prev,
    .au-track > .au-glass.is-next { opacity: 0; }
    .au-arrow.l { left: 6px; }
    .au-arrow.r { right: 6px; }
    .au-carousel { padding-left: var(--space-2); padding-right: var(--space-2); }
    .au-stage__title { font-size: 18px; line-height: 24px; padding: 0 var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
    .au-stage__blobs i { animation: none; }
    .au-glass { transition: opacity .2s; }
}

/* ============ CODE PANEL ============ */
.au-code { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; color: var(--code-ink); }
.au-code__bar { display: flex; align-items: center; gap: var(--space-3); padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--code-line); }
.au-code__tabs { display: flex; gap: 2px; flex: 1; min-width: 0; flex-wrap: wrap; }
.au-code__tabs button { appearance: none; background: transparent; border: 0; color: var(--code-tag); font: 500 12px/16px var(--font-mono); padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.au-code__tabs button[aria-pressed="true"] { background: var(--code-chip); color: var(--code-ink); }
.au-copy { appearance: none; flex: none; border: 1px solid var(--code-chip-line); background: var(--code-chip); color: var(--code-ink); font: 500 12px/16px var(--font-sans); padding: 7px 12px; border-radius: var(--radius-sm); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; transition: all .15s; }
.au-copy:hover { background: var(--code-chip-strong); }
.au-copy:disabled { opacity: .5; cursor: not-allowed; }
.au-copy.is-done { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.au-code pre { margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) 0; font: 400 12.5px/21px var(--font-mono); overflow: auto; counter-reset: ln; white-space: pre-wrap; word-break: break-all; color: var(--code-ink); background: transparent; border: 0; }
.au-code pre .l { display: block; padding-left: 44px; position: relative; }
.au-code pre .l::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 30px; text-align: right; color: var(--code-tag); opacity: .6; }
.au-code .t { color: var(--code-tag); }
.au-code .a { color: var(--code-attr); }
.au-code .s { color: var(--code-str); }
.au-code__note { padding: 0 16px 12px; font-size: 12px; color: var(--code-tag); }
.au-code__foot { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); padding: 10px 16px; border-top: 1px solid var(--code-line); font-size: 12px; color: var(--code-tag); }
.au-code__foot b { color: var(--code-ink); font-weight: 500; }

/* ---- Status dot ---- */
.au-dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-pill); background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.au-dot--live { animation: au-pulse 2s infinite; }
@keyframes au-pulse { 50% { box-shadow: 0 0 0 6px transparent; } }

/* ---- Widget card ---- */
.au-wcard { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.au-wcard__head { display: flex; align-items: center; gap: var(--space-3); }
.au-wcard__head b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-wcard__thumb { height: 96px; border-radius: var(--radius-md); position: relative; overflow: hidden; background: var(--stage); display: grid; place-items: center; }
.au-wcard__thumb::before { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; filter: blur(30px); background: var(--w-accent, var(--brand)); opacity: .6; left: -20px; top: -40px; }
.au-wcard__mini { position: relative; width: 62%; height: 56px; border-radius: 12px; background: var(--glass-fill); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.au-wcard__mini i { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--w-accent, var(--brand)); }
.au-wcard__mini span { flex: 1; display: grid; gap: 5px; }
.au-wcard__mini u { display: block; height: 5px; border-radius: 3px; background: var(--glass-ink-muted); opacity: .5; text-decoration: none; }
.au-wcard__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.au-snip { display: flex; align-items: center; gap: var(--space-2); background: var(--code-bg); border-radius: var(--radius-sm); padding: 6px 6px 6px 12px; font: 400 12px/16px var(--font-mono); color: var(--code-ink); }
.au-snip code { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--code-tag); font: inherit; background: none; padding: 0; }
.au-snip .au-copy { padding: 6px 8px; }