/*
 * Public landing-page block styles.
 *
 * Lives under /public/assets/styles/landing.css so server-rendered Twig
 * pages link it directly. Anything universal (tokens, btn, type) comes
 * from the existing tokens/components stack — this sheet only adds the
 * `.lp-*` family used by Phase 7's nine block templates.
 *
 * All margin/padding uses logical properties so RTL "just flips."
 */

/* Block variant stylesheets — Phase B refactored block templates to
   BEM-style class names (`.lp-hero__bg`, `.lp-faq__item`, etc.). The
   per-block files below fill the gap. CSS @import rules MUST appear
   before any other rule in the stylesheet (browsers silently ignore
   imports placed later); the legacy single-dash rules later in this
   file still cascade after these because they're written below. */
@import url('blocks/_token-aliases.css');
@import url('blocks/hero.css');
@import url('blocks/logos.css');
@import url('blocks/faq-accordion.css');
@import url('blocks/tabs.css');
@import url('blocks/pricing.css');
@import url('blocks/forms.css');
@import url('blocks/gallery.css');
@import url('blocks/stats-timeline.css');
@import url('blocks/header-footer.css');
@import url('blocks/features-bento.css');
@import url('blocks/posts-search.css');
@import url('blocks/testimonials-team.css');
@import url('blocks/cta.css');

.lp {
    color: var(--text-primary);
    background: var(--bg-base);
}

/* Per-block wrapper emitted by the renderer. Holds the inline styles
 * + modifier classes derived from a block's BlockStyle (spacing,
 * background variant, alignment, hidden flag). */
.lp-block { display: block; }
.lp-block--bg-subtle  { background: var(--bg-elevated); }
.lp-block--bg-inverse { background: var(--text-primary); color: var(--bg-base); }
.lp-block--bg-brand   { background: var(--brand-500, #6B72F5); color: #fff; }
.lp-block--bg-inverse a, .lp-block--bg-brand a { color: inherit; }
.lp-block--w-full      .lp-container { max-inline-size: none; padding-inline: var(--s-6); }
.lp-block--w-container .lp-container { max-inline-size: var(--lp-max-w, 1120px); }
.lp-block--w-narrow    .lp-container { max-inline-size: 760px; }
/* Shadow presets — picked from the design tokens so a theme override
   (page or app) restyles them everywhere at once. */
.lp-block--shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.lp-block--shadow-md { box-shadow: 0 4px 8px rgba(0,0,0,0.08); }
.lp-block--shadow-lg { box-shadow: 0 12px 24px rgba(0,0,0,0.10); }
.lp-block--shadow-xl { box-shadow: 0 24px 48px rgba(0,0,0,0.14); }

/* Per-device visibility. Breakpoints align with the editor's device
   preview frames (mobile <640, tablet 640–1023, desktop ≥1024). */
@media (max-width: 639px) {
    .lp-block--hide-mobile { display: none !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .lp-block--hide-tablet { display: none !important; }
}
@media (min-width: 1024px) {
    .lp-block--hide-desktop { display: none !important; }
}

/* Scroll-triggered animations. landing-runtime.js adds `.is-visible`
   when the block enters the viewport; the keyframe variants below
   read CSS variables the runtime sets from `data-anim-*` attributes
   so duration / delay / easing are tunable without N classes. */
.lp-anim {
    --lp-anim-duration: 600ms;
    --lp-anim-delay: 0ms;
    --lp-anim-easing: ease-out;
    opacity: 0;
    transition: opacity var(--lp-anim-duration) var(--lp-anim-easing) var(--lp-anim-delay),
                transform var(--lp-anim-duration) var(--lp-anim-easing) var(--lp-anim-delay);
}
.lp-anim[data-anim="fade-up"]      { transform: translateY(24px); }
.lp-anim[data-anim="fade-in"]      { transform: none; }
.lp-anim[data-anim="slide-left"]   { transform: translateX(-32px); }
.lp-anim[data-anim="slide-right"]  { transform: translateX(32px); }
.lp-anim[data-anim="zoom"]         { transform: scale(0.96); }
.lp-anim.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .lp-anim { transition: opacity 0.01ms; transform: none; }
}

/* Hero variants */
.lp-hero--split { padding-block: var(--s-16) var(--s-12); }
.lp-hero--split .lp-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10);
    align-items: center;
}
.lp-hero--split .lp-h1 {
    /* Tighter than the centered variant — the column is half width so a
       100px headline overflows. Still big, just sane. */
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    text-align: start;
}
.lp-hero--split .lp-lead { margin-inline-start: 0; }
.lp-hero--split .lp-actions { justify-content: flex-start; }
.lp-hero--split .lp-trust { justify-content: flex-start; }
/* When the split variant uses the browser-dashboard mockup, neutralise
   the mockup's own auto-centering + giant top margin so it slots neatly
   into the right column instead of pushing 1080px wide. */
.lp-hero--split .lp-mockup {
    margin: 0;
    max-inline-size: none;
}
@media (max-width: 768px) {
    .lp-hero--split .lp-hero-grid { grid-template-columns: 1fr; }
    .lp-hero--split .lp-h1 { text-align: center; }
    .lp-hero--split .lp-lead { margin-inline: auto; }
    .lp-hero--split .lp-actions { justify-content: center; }
    .lp-hero--split .lp-trust { justify-content: center; }
}
.lp-hero-image--side img {
    width: 100%; height: auto;
    border-radius: var(--r-md);
    box-shadow: 0 12px 24px rgba(0,0,0,0.10);
}
.lp-hero--minimal { padding-block: var(--s-12); }
.lp-hero--minimal .lp-h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

.lp-container {
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-inline: var(--s-6);
    padding-block: var(--s-12);
}

.lp-container--narrow {
    max-inline-size: 760px;
}

.lp-eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-xs);
    color: var(--brand-300, var(--text-tertiary));
    margin-block-end: var(--s-5);
}
[data-theme="light"] .lp-eyebrow { color: var(--brand-600); }

/* Eyebrow rendered as a brand-tinted pill (default style). */
.lp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-full, 999px);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--brand-300, #8D95FF);
    background: rgba(79, 70, 229, 0.12);
    border: 1px solid rgba(79, 70, 229, 0.30);
    margin-block-end: var(--s-7);
}
[data-theme="light"] .lp-hero-badge {
    color: var(--brand-700);
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.25);
}
.lp-hero-badge svg { color: var(--brand-400); }

.lp-h1 {
    font-size: clamp(44px, 6.5vw, 88px);
    letter-spacing: -0.03em;
    font-weight: 600;
    line-height: 0.98;
    text-wrap: balance;
    margin: 0 0 var(--s-5);
}

/* Brand-gradient run inside the heading. */
.lp-grad-text {
    background: linear-gradient(135deg, #A78BFA 0%, #6B72F5 60%, #06B6D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.lp-h2 {
    font-size: clamp(1.5rem, 2.5vw, 2.125rem);
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0 0 var(--s-4);
}

.lp-h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: 0 0 var(--s-2);
}

.lp-lead {
    color: var(--text-secondary);
    font-size: var(--fs-xl);
    line-height: 1.5;
    margin: var(--s-6) 0 0;
    max-inline-size: 640px;
    text-wrap: pretty;
}

/* Trust strip — small inline bullets under the hero CTAs. */
.lp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
    margin-block-start: var(--s-6);
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
}
.lp-hero--center .lp-trust { justify-content: center; }
.lp-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lp-trust-item svg { color: var(--success-fg, #34D399); }

/* Hero background — radial brand glow + faint grid. */
.lp-hero { position: relative; padding-block: var(--s-16) var(--s-12); overflow: hidden; }
.lp-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Decorative background grid pattern for the centered hero. Renamed
   from the original `.lp-hero-grid` because that name is also used by
   the split-image variant for its two-column LAYOUT container — the
   collision shoved the split-image content into an absolute-positioned
   overlay and broke the layout entirely. */
.lp-hero-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--border-subtle) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
    opacity: 0.4;
}
.lp-hero-glow::before {
    content: ""; position: absolute;
    inset-block-start: -20%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 900px;
    block-size: 900px;
    background: radial-gradient(circle, rgba(79,70,229,0.25), transparent 60%);
}
[data-theme="light"] .lp-hero-glow::before { background: radial-gradient(circle, rgba(79,70,229,0.12), transparent 60%); }

.lp-lead--sm {
    font-size: var(--fs-md);
    margin-block-end: var(--s-8);
}

.lp-actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.lp-hero--center {
    text-align: center;
}

.lp-hero--center .lp-lead,
.lp-hero--center .lp-actions {
    margin-inline: auto;
    justify-content: center;
}

.lp-hero-image {
    margin-block-start: var(--s-10);
}

.lp-hero-image img {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.4);
}

/* Decorative browser-frame mockup. Pure HTML — no JS. */
.lp-mockup {
    margin: var(--s-12) auto 0;
    max-inline-size: 1080px;
    padding: var(--s-5);
    border-radius: var(--r-2xl, 20px);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(79, 70, 229, 0.05));
    border: 1px solid var(--border-default);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 16px 32px rgba(79, 70, 229, 0.15);
    position: relative;
    text-align: start;
}
[data-theme="light"] .lp-mockup {
    box-shadow: 0 40px 80px rgba(15, 19, 32, 0.12), 0 16px 32px rgba(79, 70, 229, 0.10);
}
.lp-mockup-frame {
    background: var(--bg-raised, #10131B);
    border: 1px solid var(--border-default);
    border-radius: var(--r-xl, 14px);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
}
.lp-mockup-bar {
    block-size: 32px;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-inline: var(--s-4);
    border-block-end: 1px solid var(--border-subtle);
    background: var(--bg-inset, #0D0F16);
    flex-shrink: 0;
}
.lp-mockup-dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--border-strong, #2D3547);
}
.lp-mockup-url {
    margin-inline-start: var(--s-4);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
}
.lp-mockup-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--s-5);
    padding: var(--s-6);
    flex: 1;
    min-block-size: 0;
}
.lp-mockup-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.lp-mockup-nav {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 6px 10px;
    border-radius: var(--r-sm, 5px);
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    line-height: 1.2;
}
.lp-mockup-nav--active {
    color: var(--text-primary);
    background: var(--bg-active, #232A3B);
}
.lp-mockup-main {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    min-inline-size: 0;
}
.lp-mockup-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
}
.lp-mockup-stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md, 7px);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}
.lp-mockup-stat-label {
    font-size: 10px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lp-mockup-stat-value {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-block-start: 3px;
}
.lp-mockup-stat-delta {
    font-size: 10px;
}
.lp-mockup-stat-delta--up   { color: var(--success-fg, #34D399); }
.lp-mockup-stat-delta--down { color: var(--danger-fg, #F87171); }
.lp-mockup-chart {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md, 7px);
    padding: var(--s-4);
    min-block-size: 160px;
}
.lp-mockup-chart svg { display: block; }

@media (max-width: 720px) {
    .lp-mockup-body { grid-template-columns: 1fr; }
    .lp-mockup-sidebar { display: none; }
    .lp-mockup-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lp-grid {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 720px) {
    .lp-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lp-feature {
    background: var(--bg-raised, var(--bg-elevated));
    padding: var(--s-8);
    border-radius: var(--r-xl, 14px);
    border: 1px solid var(--border-subtle);
    transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.lp-feature:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.lp-feature .lp-h3 {
    font-size: var(--fs-xl);
    font-weight: 600;
    margin: 0 0 var(--s-3);
}
.lp-feature p {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.lp-feature-icon {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--r-md, 7px);
    background: linear-gradient(135deg, var(--brand-500, #4F46E5), var(--violet-600, #7C3AED));
    color: #fff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--s-5);
}

.lp-pricing-grid {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 720px) {
    .lp-pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

.lp-plan {
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg, 12px);
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.lp-plan--featured {
    border-color: var(--brand-500, #3b82f6);
    box-shadow: 0 0 0 1px var(--brand-500, #3b82f6);
}

.lp-plan-name { font-size: var(--fs-sm); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.lp-plan-price { font-size: var(--fs-3xl); font-weight: 600; }
.lp-plan-period { font-size: var(--fs-sm); color: var(--text-tertiary); margin-inline-start: 4px; }
.lp-plan-desc { color: var(--text-secondary); font-size: var(--fs-sm); }
.lp-plan-features { padding: 0; margin: 0 0 var(--s-3); list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text-secondary); }
.lp-plan-features li::before { content: '✓'; color: var(--brand-500, #3b82f6); margin-inline-end: 8px; }

.lp-logos { padding-block: var(--s-10); border-block: 1px solid var(--border-subtle); }
.lp-logos-caption { text-align: center; color: var(--text-tertiary); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; margin-block-end: var(--s-7); }
.lp-logos-row { display: flex; flex-wrap: wrap; gap: var(--s-10); align-items: center; justify-content: space-around; opacity: 0.6; color: var(--text-secondary); }
.lp-logo img { block-size: 28px; max-inline-size: 140px; opacity: 0.7; transition: opacity .15s; }
.lp-logo:hover img { opacity: 1; }
.lp-logo--text { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: inherit; }

.lp-quotes { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lp-quote { margin: 0; padding: var(--s-6); background: var(--bg-elevated); border-radius: var(--radius-md, 10px); border: 1px solid var(--border-subtle); }
.lp-quote blockquote { margin: 0 0 var(--s-4); font-size: var(--fs-lg); line-height: 1.5; color: var(--text-primary); }
.lp-quote-author { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.lp-quote-avatar { inline-size: 36px; block-size: 36px; border-radius: 50%; }
.lp-quote-name { font-weight: 500; }
.lp-quote-role { color: var(--text-tertiary); font-size: var(--fs-xs); }

.lp-faq-list { display: flex; flex-direction: column; gap: var(--s-3); }
.lp-faq-item { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 10px); padding: var(--s-4) var(--s-5); }
.lp-faq-item summary { cursor: pointer; font-weight: 500; }
.lp-faq-item[open] summary { margin-block-end: var(--s-3); }
.lp-faq-item p { color: var(--text-secondary); margin: 0; }

.lp-cta { background: var(--bg-elevated); }
.lp-cta--primary { background: linear-gradient(135deg, var(--brand-700, #1d4ed8), var(--brand-500, #3b82f6)); color: white; }
.lp-cta--primary .lp-h2, .lp-cta--primary .lp-lead { color: white; }
.lp-cta--primary .lp-container--narrow { text-align: center; }
.lp-cta--subtle .lp-container--narrow { text-align: center; }

.lp-prose {
    line-height: 1.7;
    color: var(--text-secondary);
}
.lp-prose h2, .lp-prose h3, .lp-prose h4 { color: var(--text-primary); margin-block: var(--s-6) var(--s-3); }
.lp-prose a { color: var(--brand-500, #3b82f6); text-decoration: underline; }
.lp-prose ul, .lp-prose ol { padding-inline-start: var(--s-6); }
.lp-prose blockquote { border-inline-start: 3px solid var(--border-subtle); padding-inline-start: var(--s-4); color: var(--text-secondary); }
.lp-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-elevated); padding: 2px 5px; border-radius: 4px; }
.lp-prose pre { background: var(--bg-elevated); padding: var(--s-4); border-radius: var(--radius-md, 10px); overflow-x: auto; }

.lp-embed-frame { position: relative; padding-block-end: 56.25%; border-radius: var(--radius-md, 10px); overflow: hidden; background: #000; }
.lp-embed-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.lp-embed-caption { margin-block-start: var(--s-3); text-align: center; color: var(--text-tertiary); font-size: var(--fs-sm); }
/* Editor-only empty state — matches the 16:9 frame so the block has a
   visible footprint before the author has pasted a URL. Dashed border
   + muted swatch echo other "needs configuring" placeholders in the
   editor. */
.lp-embed-frame--empty { background: var(--bg-subtle, #0a0a0a); border: 1.5px dashed var(--border-default, #2a2a2a); cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.lp-embed-frame--empty:hover, .lp-embed-frame--empty:focus-visible { border-color: var(--brand-500, #6B72F5); background: var(--bg-elevated, #111); outline: none; }
.lp-embed-frame--empty:hover .lp-embed-empty-title, .lp-embed-frame--empty:focus-visible .lp-embed-empty-title { color: var(--brand-300, #a5a8ff); }
.lp-embed-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-secondary, #888); padding: var(--s-4); text-align: center; }
.lp-embed-empty svg { color: var(--text-tertiary, #666); }
.lp-embed-empty-title { font-weight: 600; color: var(--text-primary, #eee); font-size: var(--fs-md); }
.lp-embed-empty-hint { font-size: var(--fs-sm); line-height: 1.5; max-inline-size: 36ch; }

/* ── Operator-uploaded brand logos ─────────────────────────────
   Set via Settings → Appearance. The renderer emits both light
   and dark variants when present; we toggle which one is shown
   based on the current theme. Dark theme is the public default;
   the light variant only appears when the page or visitor opts
   into [data-theme="light"]. */
.lp-brand-logo { display: inline-block; vertical-align: middle; max-block-size: 40px; }
.lp-brand-logo-dark { display: none; }
[data-theme="light"] .lp-brand-logo-light { display: none; }
[data-theme="light"] .lp-brand-logo-dark { display: inline-block; }



/* ── Public-side account dropdown ───────────────────────────────
   Used by partials/public-account.twig in landing-nav + blog navs
   when a customer session is active. Uses native <details> for
   keyboard accessibility + JS-free toggling. Mirrors the SPA's
   user-pop visual language (avatar pill trigger, popover panel)
   but is fully self-contained so it doesn't depend on the SPA
   shell's class graph. */
.public-account-pop {
    position: relative;
    display: inline-flex;
}
.public-account-pop > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.public-account-pop > summary::-webkit-details-marker { display: none; }
.public-account-pop > summary::marker { content: ''; }

.public-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-elevated, var(--bg-raised));
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    max-width: 220px;
    transition: border-color var(--dur-fast, 120ms), background var(--dur-fast, 120ms);
}
.public-account-pop[open] .public-account-trigger,
.public-account-trigger:hover {
    border-color: var(--brand-400, #6B72F5);
    background: var(--bg-raised);
}
.public-account-trigger:focus-visible {
    outline: 2px solid var(--brand-400, #6B72F5);
    outline-offset: 2px;
}
.public-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}
.public-account-chev {
    color: var(--text-tertiary);
    transition: transform var(--dur-fast, 120ms);
    flex-shrink: 0;
}
.public-account-pop[open] .public-account-chev { transform: rotate(180deg); }

.public-account-menu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    inline-size: 260px;
    padding: 4px;
    background: var(--bg-elevated, var(--bg-raised));
    border: 1px solid var(--border-default);
    border-radius: var(--r-md, 10px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.32));
    z-index: 50;
    /* Tiny entrance transition — purely cosmetic. Native <details>
       doesn't fire transitionend semantics so nothing depends on it. */
    animation: public-account-pop-in 120ms ease-out;
}
@keyframes public-account-pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.public-account-hd {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-3) var(--s-4);
    border-block-end: 1px solid var(--border-subtle);
    margin-block-end: 4px;
}
.public-account-hd .avatar {
    width: 36px;
    height: 36px;
    font-size: var(--fs-sm);
    flex-shrink: 0;
}
.public-account-id {
    min-width: 0;
    flex: 1;
}
.public-account-name-lg {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold, 600);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.public-account-email {
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-account-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 8px 12px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    text-decoration: none;
    border-radius: var(--r-sm, 6px);
    transition: background var(--dur-fast, 120ms), color var(--dur-fast, 120ms);
}
.public-account-item:hover,
.public-account-item:focus-visible {
    background: var(--bg-active, rgba(255,255,255,0.04));
    color: var(--text-primary);
    outline: none;
}
.public-account-item svg { color: var(--text-tertiary); flex-shrink: 0; }
.public-account-item:hover svg,
.public-account-item:focus-visible svg { color: var(--text-primary); }

.public-account-item-button {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
}
.public-account-logout-form { margin: 0; }

.public-account-sep {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 8px;
}

@media (max-width: 540px) {
    .public-account-name { display: none; }
    .public-account-trigger { padding: 4px; }
    .public-account-menu { inline-size: 240px; }
}

/* ---------------------------------------------------------------- *
 * Editable-pages plan — block-system CSS overrides.
 *
 * When public surfaces (blog, marketplace) render through the
 * landing block system, each block is wrapped in `.lp-block` and
 * sections previously assumed to be the page's sole body wrapper
 * now stack as siblings. Two `min-height: 100vh` shells stacked
 * vertically push the second block below the viewport — the editor
 * iframe especially. Drop the viewport-height floor when shells
 * are nested inside the block wrapper so the natural content
 * height drives layout instead.
 * ---------------------------------------------------------------- */
.lp-block .public-shell { min-height: 0; }
.lp-block .mp-container { min-height: 0; }

/* ---------------------------------------------------------------- *
 * Editor: marketplace product detail's tab sections normally ship
 * with `hidden` so only the active tab renders publicly. The block
 * partials drop `hidden` in edit_mode (Twig conditional), but if
 * an old draft was saved before that change, the attribute may
 * still sit in stored published_blocks. Force-show every tab
 * section inside the editor canvas as a fail-safe so authors can
 * always see + edit every section regardless of draft history.
 * Production-side `mp-detail-section[hidden] { display: none; }`
 * stays untouched.
 * ---------------------------------------------------------------- */
/* Tab nav stays clickable in the canvas — the companion handles
   the click and toggles the matching <section hidden>, mirroring
   production tab navigation. The default `body.ed-locked a {
   pointer-events: none }` rule otherwise blocks the click. */
body.ed-locked .mp-detail-tab { pointer-events: auto; cursor: pointer; }

/* ---------------------------------------------------------------- *
 * Custom dropdown — server-form-friendly equivalent of the SPA's
 * React `<Dropdown>` UI primitive. Styled to match
 * `frontend/src/ui/Form.tsx` Dropdown so server-rendered marketplace /
 * blog / catalogue pages don't surface OS-default `<select>` popups
 * mid-flow.
 *
 * Uses the same `.input` token surface (border, bg, hover, focus
 * ring) as text inputs so it slots into existing toolbar layouts
 * without per-context overrides.
 * ---------------------------------------------------------------- */
.mash-dropdown {
    position: relative;
    display: inline-block;
    font-family: inherit;
}
.mash-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Default size matches `.input` (32px / 14px font) so the trigger
       can sit next to a text input or button on the same row without
       a height mismatch. Use `.mash-dropdown--sm` / `--lg` modifiers
       on the wrapper to pick a different size — they map 1:1 to the
       `.btn-sm` / `.input-lg` heights so toolbars stay aligned. */
    height: 32px;
    padding: 0 var(--s-5, 12px);
    background: var(--bg-inset, #11141b);
    border: 1px solid var(--border-default, #2f3445);
    border-radius: var(--r-md, 8px);
    color: var(--text-primary, #e8ebf2);
    font-size: var(--fs-md, 0.875rem);
    font-family: inherit;
    cursor: pointer;
    text-align: start;
    transition: border-color 0.12s, background 0.12s;
}
/* Size variants — heights match the corresponding .btn / .input
   tokens so a toolbar of [input, dropdown, button] aligns. */
.mash-dropdown--sm .mash-dropdown-trigger { height: 28px; padding: 0 var(--s-4, 8px); font-size: var(--fs-sm, 0.8125rem); }
.mash-dropdown--lg .mash-dropdown-trigger { height: 38px; padding: 0 var(--s-6, 16px); font-size: var(--fs-base, 0.9375rem); }
.mash-dropdown--xs .mash-dropdown-trigger { height: 24px; padding: 0 var(--s-4, 8px); font-size: var(--fs-sm, 0.8125rem); border-radius: var(--r-sm, 4px); }
.mash-dropdown-trigger:hover {
    border-color: var(--border-default, #2f3445);
}
.mash-dropdown-trigger:focus-visible {
    outline: none;
    border-color: var(--brand-500, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500, #6366f1) 25%, transparent);
}
.mash-dropdown.is-open .mash-dropdown-trigger {
    border-color: var(--brand-500, #6366f1);
}
.mash-dropdown-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mash-dropdown-caret {
    flex-shrink: 0;
    color: var(--text-tertiary, #6b7184);
    transition: transform 0.15s;
}
.mash-dropdown.is-open .mash-dropdown-caret { transform: rotate(180deg); }

.mash-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 100;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bg-elevated, #161a23);
    border: 1px solid var(--border-subtle, #232838);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    max-height: 280px;
    overflow-y: auto;
}
.mash-dropdown-menu[hidden] { display: none; }
.mash-dropdown-menu li {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary, #e8ebf2);
    font-size: 0.9rem;
    transition: background 0.08s;
    user-select: none;
}
.mash-dropdown-menu li:hover,
.mash-dropdown-menu li.is-highlighted,
.mash-dropdown-menu li:focus {
    background: color-mix(in srgb, var(--brand-500, #6366f1) 14%, transparent);
    outline: none;
}
.mash-dropdown-menu li[aria-selected="true"] {
    color: var(--brand-300, var(--brand-400, #818cf8));
    font-weight: 500;
}