/*
 * Patterns for the two live demo pages (live-admin.html, live-landing.html) that the kit did not have yet:
 * KPI tile, panel, bar/line chart (plain SVG + CSS), activity feed, dropzone, bulk bar, notification popover, toast region (admin);
 * nav, hero with product shot, logo strip, feature grid, pricing, testimonial, FAQ, signup, cookie banner, footer (landing).
 * Plain CSS on --xo-* tokens, no @layer. Behaviour in js/live-demo.js is demo only; the real logic is the dev's job (see LIVE-DEMOS.md).
 */

/* ---------- admin ---------- */
.xo-view[hidden] { display: none; }
.xo-grid { display: grid; gap: 16px; }
.xo-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.xo-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.xo-grid--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 960px) { .xo-grid--wide { grid-template-columns: minmax(0, 1fr); } }

.xo-panel { background: var(--xo-color-surface); border: var(--xo-border-width, 1px) solid var(--xo-color-border); border-radius: calc(var(--xo-radius) + 4px); padding: 20px; min-width: 0; }
.xo-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.xo-panel__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--xo-color-text); }
.xo-panel__sub { margin: 2px 0 0; font-size: 13px; color: var(--xo-color-text-2); }

.xo-kpi { display: grid; gap: 6px; }
.xo-kpi__label { font-size: 13px; color: var(--xo-color-text-2); }
.xo-kpi__value { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--xo-color-text); font-variant-numeric: tabular-nums; }
.xo-kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--xo-color-success) 55%, var(--xo-color-text)); }
.xo-kpi__delta[data-trend="down"] { color: var(--xo-color-danger); }
.xo-kpi__delta .icon { --xo-icon: 14px; }
.xo-kpi__spark { width: 100%; height: 32px; margin-top: 4px; color: var(--xo-color-accent); }
.xo-kpi__spark path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* chart: a figure with an SVG, a legend and a data table fallback */


.xo-bulk { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 12px; background: var(--xo-color-accent-soft); border: 1px solid var(--xo-color-border); border-radius: var(--xo-radius); flex-wrap: wrap; }
.xo-bulk[hidden] { display: none; }
.xo-bulk strong { font-weight: 600; font-size: 14px; }



.xo-toasts { position: fixed; z-index: 60; inset-block-end: 16px; inset-inline-end: 16px; display: grid; gap: 8px; max-width: min(26rem, calc(100vw - 32px)); }
.xo-toasts .xo-toast { position: static; margin: 0; }

.xo-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
@media (max-width: 760px) { .xo-settings { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.xo-row-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--xo-color-border); }
.xo-row-setting:first-child { border-top: 0; }
.xo-row-setting p { margin: 2px 0 0; font-size: 13px; color: var(--xo-color-text-2); }
.xo-row-setting strong { font-size: 14px; font-weight: 600; }

/* ---------- landing ---------- */
.lp { background: var(--xo-color-bg); color: var(--xo-color-text); }
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp-wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.lp-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--xo-color-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--xo-color-border); }
.lp-nav .lp-wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.lp-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--xo-color-text); text-decoration: none; }
.lp-logo span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--xo-color-accent); color: #fff; font-size: 15px; }
.lp-links { display: flex; gap: 4px; margin: 0 0 0 8px; padding: 0; list-style: none; }
.lp-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--xo-radius); color: var(--xo-color-text-2); text-decoration: none; font-weight: 500; font-size: 15px; }
.lp-links a:hover { background: var(--xo-color-subtle); color: var(--xo-color-text); }
.lp-nav__end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.lp-burger { display: none; }
@media (max-width: 820px) { .lp-links, .lp-nav__end .lp-hide-sm { display: none; } .lp-burger { display: inline-flex; } }

.lp-hero { padding: clamp(40px, 8vw, 96px) 0 clamp(32px, 6vw, 72px); }
.lp-hero .lp-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .lp-hero .lp-wrap { grid-template-columns: minmax(0, 1fr); } }
.lp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border: 1px solid var(--xo-color-border); border-radius: 999px; background: var(--xo-color-surface); font-size: 13px; color: var(--xo-color-text-2); text-decoration: none; }
.lp-pill b { padding: 2px 8px; border-radius: 999px; background: var(--xo-color-accent-soft); color: var(--xo-color-accent-strong); font-weight: 600; }
.lp h1 { margin: 20px 0 16px; font-size: clamp(36px, 5.5vw, 60px); line-height: 1.05; letter-spacing: -.025em; font-weight: 700; }
.lp h1 em { font-style: normal; color: var(--xo-color-accent-strong); }
.lp-lede { margin: 0 0 28px; max-width: 34em; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--xo-color-text-2); }
.lp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-note { margin: 14px 0 0; font-size: 13px; color: var(--xo-color-text-2); }

.lp-shot { background: var(--xo-color-surface); border: 1px solid var(--xo-color-border); border-radius: 16px; box-shadow: var(--xo-shadow-pop); overflow: hidden; }
.lp-shot__bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--xo-color-border); background: var(--xo-color-subtle); }
.lp-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--xo-color-control-border); }
.lp-shot__bar span { margin-left: 10px; font-size: 12px; color: var(--xo-color-text-2); }
.lp-shot__body { padding: 20px; display: grid; gap: 14px; }
.lp-shot__row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--xo-color-border); border-radius: var(--xo-radius); }
.lp-shot__row div { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.lp-shot__row span { display: block; font-size: 12px; font-weight: 400; color: var(--xo-color-text-2); }

.lp-logos { padding: 24px 0 8px; }
.lp-logos p { margin: 0 0 16px; text-align: center; font-size: 13px; color: var(--xo-color-text-2); }
.lp-logos ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 0; padding: 0; list-style: none; }
.lp-logos li { font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--xo-color-text-2); opacity: .85; }

.lp-sec { padding: clamp(48px, 8vw, 96px) 0; }
.lp-sec--alt { background: var(--xo-color-surface); border-block: 1px solid var(--xo-color-border); }
.lp-head { max-width: 40em; margin: 0 auto clamp(28px, 5vw, 48px); text-align: center; }
.lp-head h2 { margin: 12px 0 12px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.02em; }
.lp-head p { margin: 0; font-size: 17px; color: var(--xo-color-text-2); line-height: 1.55; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.lp-feature { padding: 24px; background: var(--xo-color-surface); border: 1px solid var(--xo-color-border); border-radius: 16px; }
.lp-sec--alt .lp-feature { background: var(--xo-color-bg); }
.lp-feature__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: var(--xo-color-accent-soft); color: var(--xo-color-accent-strong); }
.lp-feature h3 { margin: 0 0 8px; font-size: 18px; }
.lp-feature p { margin: 0; color: var(--xo-color-text-2); line-height: 1.55; font-size: 15px; }

.lp-bill { display: flex; justify-content: center; margin: 0 0 32px; }
.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; align-items: stretch; margin: 0; padding: 0; list-style: none; }
.lp-plan { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--xo-color-surface); border: 1px solid var(--xo-color-border); border-radius: 16px; }
.lp-plan[data-featured] { border: 2px solid var(--xo-color-accent); box-shadow: var(--xo-shadow-raised); }
.lp-plan h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.lp-price { display: flex; align-items: baseline; gap: 6px; font-size: 40px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lp-price small { font-size: 14px; font-weight: 400; color: var(--xo-color-text-2); letter-spacing: 0; }
.lp-plan p { margin: 0; color: var(--xo-color-text-2); font-size: 14px; }
.lp-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; flex: 1; }
.lp-plan li { display: flex; gap: 10px; align-items: flex-start; }
.lp-plan li .icon { color: var(--xo-color-accent-strong); margin-top: 2px; }

.lp-quote { margin: 0; padding: 28px; background: var(--xo-color-surface); border: 1px solid var(--xo-color-border); border-radius: 16px; display: grid; gap: 20px; }
.lp-quote blockquote { margin: 0; font-size: 18px; line-height: 1.55; }
.lp-quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--xo-color-text-2); }
.lp-quote figcaption b { display: block; color: var(--xo-color-text); }

.lp-faq { max-width: 760px; margin-inline: auto; }
.lp-faq details { border-bottom: 1px solid var(--xo-color-border); }
.lp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; border-radius: var(--xo-radius); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:focus-visible { outline: var(--xo-focus); outline-offset: 2px; }
.lp-faq summary .icon { transition: rotate .2s; color: var(--xo-color-text-2); }
.lp-faq details[open] summary .icon { rotate: 180deg; }
.lp-faq details p { margin: 0 0 18px; color: var(--xo-color-text-2); line-height: 1.6; }

.lp-cta { margin: 0 auto; padding: clamp(32px, 6vw, 56px); border-radius: 24px; background: var(--xo-color-primary); color: var(--xo-color-primary-text); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: center; }
@media (max-width: 820px) { .lp-cta { grid-template-columns: minmax(0, 1fr); } }
.lp-cta h2 { margin: 0 0 8px; font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.02em; }
.lp-cta p { margin: 0; opacity: .9; line-height: 1.55; }
.lp-signup { display: grid; gap: 10px; }
.lp-signup .xo-input-wrap input { background: #fff; color: #14212b; border-color: transparent; }
.lp-signup .button.primary { background: var(--xo-color-surface); color: var(--xo-color-text); border-color: transparent; }
.lp-signup .hint, .lp-signup .error { color: inherit; font-size: 13px; margin: 0; }
.lp-signup .error { color: #FFD9D9; display: flex; gap: 6px; align-items: center; }
.lp-signup .error[hidden] { display: none; }
.lp-signup [role="status"] { font-size: 14px; min-height: 1.4em; }

.lp-foot { padding: 48px 0 32px; border-top: 1px solid var(--xo-color-border); }
.lp-foot__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 760px) { .lp-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-foot__cols > :first-child { grid-column: 1 / -1; } }
.lp-foot h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--xo-color-text-2); text-transform: uppercase; letter-spacing: .06em; }
.lp-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.lp-foot a { display: inline-flex; min-height: 32px; align-items: center; color: var(--xo-color-text); text-decoration: none; font-size: 15px; }
.lp-foot a:hover { color: var(--xo-color-accent-strong); text-decoration: underline; }
.lp-foot p { margin: 12px 0 0; color: var(--xo-color-text-2); font-size: 14px; max-width: 28em; }
.lp-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--xo-color-border); font-size: 13px; color: var(--xo-color-text-2); }


.lp-drawer-links { list-style: none; margin: 0; padding: 0 12px; display: grid; gap: 2px; }
.lp-drawer-links a { display: flex; min-height: 44px; align-items: center; padding: 0 12px; border-radius: var(--xo-radius); color: var(--xo-color-text); text-decoration: none; font-weight: 500; }
.lp-drawer-links a:hover { background: var(--xo-color-subtle); }

table.std th button { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: inherit; color: inherit; border-radius: 4px; }
table.std th button:focus-visible { outline: var(--xo-focus); outline-offset: 3px; }
table.std th[aria-sort="ascending"] button::after, table.std th[aria-sort="descending"] button::after { content: ""; width: 14px; height: 14px; background: currentcolor; mask: var(--ic-arrow-up) center / contain no-repeat; -webkit-mask: var(--ic-arrow-up) center / contain no-repeat; }
table.std th[aria-sort="descending"] button::after { mask-image: var(--ic-arrow-down); -webkit-mask-image: var(--ic-arrow-down); }
.state { display: grid; justify-items: center; gap: 4px; padding: 32px 16px; text-align: center; }
.state h3 { margin: 0; font-size: 16px; } .state p { margin: 0; color: var(--xo-color-text-2); }

.xo-skip { position: absolute; z-index: 100; left: 8px; top: -60px; padding: 10px 16px; border-radius: var(--xo-radius); background: var(--xo-color-primary); color: var(--xo-color-primary-text); font-weight: 600; text-decoration: none; }
.xo-skip:focus { top: 8px; outline: var(--xo-focus); outline-offset: 2px; }

.xo-content > section[data-view] { padding: 0; display: flex; flex-direction: column; gap: 20px; }
.xo-content > section[data-view][hidden] { display: none; }
.xo-content > section[data-view] .xo-grid + .xo-grid { margin-top: 0; }
.lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lp-grid { grid-template-columns: minmax(0, 1fr); } }
.lp-bill .xo-seg__badge { width: auto; height: auto; min-width: 16px; padding: 2px 6px; border-radius: 999px; font-size: 11px; }