/* Only public demo documents opt into native transitions; links, history and data requests stay native. */
@view-transition { navigation: auto; }

.demo-shell { --demo-ease:cubic-bezier(.22,1,.36,1); --demo-shadow:0 6px 24px color-mix(in srgb,var(--text) 6%,transparent); }
.demo-shell .topbar { view-transition-name:demo-topbar; }
.demo-shell .demo-title { view-transition-name:demo-title; }
.demo-shell .demo-heading { min-block-size:92px; margin:0; gap:20px; }
.demo-shell .demo-heading h1 { font-size:30px; letter-spacing:-.6px; }
.demo-shell .demo-heading p.seller-muted { font-size:14px; margin:7px 0 0; }
.demo-shell :is(.seller-dashboard,.market-dashboard.demo-market) { gap:20px; }
.demo-shell .demo-navigation { gap:8px; }
.demo-shell .demo-navigation-hint { font-size:12px; font-weight:600; letter-spacing:.01em; }
.demo-shell .demo-section-tabs { flex-wrap:nowrap; padding:5px; gap:4px; border-radius:13px; }
.demo-shell .demo-section-tabs a { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:10px 16px; border-radius:9px; font-size:14px; font-weight:600; background:none; box-shadow:none; }
.demo-shell .demo-section-tabs a>* { position:relative; }
.demo-shell .demo-section-tabs a>.demo-tab-background { position:absolute; inset:0; border-radius:inherit; background:transparent; }
.demo-shell .demo-section-tabs a[aria-current=page]>.demo-tab-background { background:var(--surface); box-shadow:0 2px 7px color-mix(in srgb,var(--text) 10%,transparent); view-transition-name:demo-tab-background; }
.demo-shell .demo-section-tabs a:not([aria-current=page]):hover>.demo-tab-background { background:var(--hover); }
.demo-shell .demo-section-tabs small { font-size:11px; font-weight:400; color:var(--muted); }
.demo-shell .demo-section-tabs a[aria-current=page] small { color:var(--accent); }
.demo-shell .demo-data-notice { min-block-size:46px; border-radius:12px; font-size:13px; }
.demo-shell .demo-status-slot { min-block-size:20px; margin-block:-20px; }
.demo-shell .demo-status-slot :is(.seller-message,.market-status) { padding:0; margin:0; border:0; background:none; font-size:12px; line-height:20px; color:var(--muted); }
.demo-shell .demo-status-slot :is([data-error=true],.is-error) { color:var(--danger-text); }

/* Shared geometry keeps placeholders, loaded metrics and both themes consistent. */
.demo-shell :is(.seller-card,.market-card) { padding:20px; border-radius:14px; border-color:var(--border); }
.demo-shell .market-kpis { padding:0; border:0; border-radius:0; }
.demo-shell :is(.seller-kpi,.market-kpis dl>div) { min-block-size:140px; padding:18px; border-radius:12px; box-shadow:0 2px 5px color-mix(in srgb,var(--text) 2%,transparent); }
.demo-shell :is(.seller-kpi-label,.market-kpis dt) { font-size:13px; line-height:1.5; }
.demo-shell :is(.seller-kpi-value,.market-kpis dd,.market-kpis [data-metric=revenue]) { font-size:clamp(26px,2.2vw,30px); line-height:1.2; letter-spacing:-.6px; font-variant-numeric:tabular-nums; margin-block:9px 6px; }
.demo-shell :is(.seller-kpi-note,.seller-note,.market-note) { font-size:12px; line-height:1.55; }
.demo-shell :is(.seller-card,.market-card) h2 { font-size:18px; line-height:1.4; }
.demo-shell .demo-kpi-placeholder :is(span,strong,small) { display:block; background:var(--raised); border-radius:4px; }
.demo-shell .demo-kpi-placeholder span { width:65%; height:14px; margin-block:2px 15px; }
.demo-shell .demo-kpi-placeholder strong { width:72%; height:30px; margin-block:0 12px; }
.demo-shell .demo-kpi-placeholder small { width:86%; height:12px; }

.demo-shell :is(button,.button,.demo-section-tabs a,.demo-exit-card,input,select,summary) { transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease,transform 160ms var(--demo-ease); }
.demo-shell :is(button,.button):not(:disabled):active { transform:translateY(1px); }
.demo-shell :is(a,button,input,select,summary):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.demo-shell :is(.seller-kpi,.market-kpis dl>div,.seller-card,.market-card,.demo-exit-card) { transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms var(--demo-ease); }
@media (hover:hover) and (pointer:fine) {
    .demo-shell :is(.seller-card,.market-card):not(.market-kpis):hover { border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); }
    .demo-shell :is(.seller-kpi,.market-kpis dl>div):hover { transform:translateY(-2px); border-color:var(--accent-border); box-shadow:var(--demo-shadow); }
    .demo-shell .demo-contact-action:hover { transform:translateY(-1px); box-shadow:0 5px 18px color-mix(in srgb,var(--action) 20%,transparent); }
}

.demo-contact { margin-block:28px 0; padding:28px; border:1px solid var(--accent-border); border-radius:16px; background:linear-gradient(115deg,var(--surface),var(--accent-bg)); display:flex; align-items:center; justify-content:space-between; gap:28px; }
.demo-contact>div { max-width:780px; }
.demo-contact .demo-contact-eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.04em; margin-bottom:8px; }
.demo-contact h2 { font-size:24px; line-height:1.35; letter-spacing:-.4px; }
.demo-contact p { font-size:14px; line-height:1.6; margin-top:9px; }
.demo-contact-action { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; min-height:56px; }
.demo-contact-action span { font-size:12px; font-weight:400; }
.demo-shell .demo-explanation { margin-top:10px; font-size:12px; color:var(--muted); }
.demo-shell .demo-explanation summary { cursor:pointer; width:fit-content; color:var(--accent); padding-block:4px; }
.demo-shell .demo-explanation p { max-width:100ch; }

::view-transition-group(*) { animation-duration:240ms; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-old(root) { animation:demo-page-out 140ms ease both; }
::view-transition-new(root) { animation:demo-page-in 220ms ease both; }
::view-transition-old(demo-topbar),::view-transition-new(demo-topbar),::view-transition-old(demo-title),::view-transition-new(demo-title),::view-transition-old(demo-tab-background),::view-transition-new(demo-tab-background) { animation:none; mix-blend-mode:normal; }
::view-transition-old(demo-topbar),::view-transition-old(demo-title),::view-transition-old(demo-tab-background) { opacity:0; }
@keyframes demo-page-out { to { opacity:0; } }
@keyframes demo-page-in { from { opacity:0; } to { opacity:1; } }

@media (max-width:900px) {
    .demo-shell .demo-heading { align-items:flex-start; flex-direction:column; gap:16px; }
    .demo-shell .demo-navigation { align-items:flex-start; width:100%; }
    .demo-contact { flex-direction:column; align-items:flex-start; }
}
@media (max-width:600px) {
    .demo-shell .demo-heading h1 { font-size:27px; }
    .demo-shell .demo-section-tabs { width:100%; gap:2px; padding:4px; }
    .demo-shell .demo-section-tabs a { flex:1; align-items:center; padding:10px 5px; font-size:12px; }
    .demo-shell .demo-section-tabs a>span:not(.demo-tab-background) { min-block-size:32px; display:flex; align-items:center; white-space:normal; text-align:center; line-height:1.35; }
    .demo-shell .demo-section-tabs small { min-block-size:28px; font-size:11px; white-space:normal; text-align:center; line-height:1.3; }
    .demo-shell .demo-data-notice { min-block-size:66px; }
    .demo-shell :is(.seller-card,.market-card) { padding:16px; }
    .demo-shell .market-kpis { padding:0; }
    .demo-shell :is(.seller-kpi,.market-kpis dl>div) { min-block-size:168px; padding:14px; }
    .demo-shell :is(.seller-kpi-value,.market-kpis dd,.market-kpis [data-metric=revenue]) { font-size:25px; }
    .demo-contact { padding:20px; gap:20px; }
    .demo-contact h2 { font-size:21px; }
    .demo-contact-action { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
    @view-transition { navigation:none; }
    .demo-shell *, .demo-shell *::before, .demo-shell *::after { transition:none!important; animation:none!important; }
}
@media (max-width:380px) {
    /* Reserve two subtitle lines on small phones so switching sections cannot move the navigation. */
    .demo-shell .demo-heading p.seller-muted { min-block-size:42px; }
}