agentcss 0.0.0-stage → 0.11.3

package/dist/03-patterns/list/flip.js

@@ -0,0 +1,117 @@
+(function (global) {
+'use strict';
+
+function forceReflow(el) {
+
+return el.offsetHeight;
+}
+
+function idOf(el) {
+
+return el.getAttribute('data-flip-id');
+}
+
+function prefersReducedMotion() {
+return global.matchMedia
+&& global.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function flip(container, mutate, opts) {
+opts = opts || {};
+
+var DURATION = opts.duration || 260;
+var reduce = prefersReducedMotion();
+
+var first = {};
+var kids = container.children;
+var i, el, id, box;
+
+for (i = 0; i < kids.length; i++) {
+el = kids[i];
+id = idOf(el);
+if (id) { first[id] = el.getBoundingClientRect(); }
+}
+
+mutate();
+
+if (reduce) {
+
+for (i = 0; i < container.children.length; i++) {
+el = container.children[i];
+id = idOf(el);
+if (!id || first[id] !== undefined) { continue; }
+el.style.opacity = '0';
+el.style.transition = 'none';
+
+forceReflow(el);
+el.style.transition = 'opacity ' + DURATION + 'ms linear';
+el.style.opacity = '1';
+}
+return;
+}
+
+kids = container.children;
+for (i = 0; i < kids.length; i++) {
+el = kids[i];
+id = idOf(el);
+if (!id) { continue; }
+
+box = el.getBoundingClientRect();
+
+if (first[id] === undefined) {
+
+el.style.opacity = '0';
+el.style.transition = 'none';
+forceReflow(el);
+el.style.transition = 'opacity ' + DURATION + 'ms linear';
+el.style.opacity = '1';
+continue;
+}
+
+var dx = first[id].left - box.left;
+var dy = first[id].top - box.top;
+
+if (dx === 0 && dy === 0) { continue; }
+
+el.style.transition = 'none';
+el.style.transform = 'translate(' + dx + 'px, ' + dy + 'px)';
+
+forceReflow(el);
+el.style.transition = 'transform ' + DURATION + 'ms ease-out';
+el.style.transform = '';
+
+global.setTimeout(function (node) {
+return function () { node.style.transition = ''; };
+}(el), DURATION + 20);
+}
+}
+
+function removeWithAnimation(container, el, done) {
+var reduce = prefersReducedMotion();
+var DURATION = 260;
+
+if (reduce) {
+
+el.style.transition = 'opacity ' + DURATION + 'ms linear';
+el.style.opacity = '0';
+global.setTimeout(function () {
+if (el.parentNode) { el.parentNode.removeChild(el); }
+if (done) { done(); }
+}, DURATION);
+return;
+}
+
+el.style.transition = 'opacity ' + DURATION + 'ms ease-in';
+el.style.opacity = '0';
+
+el.style.transform = 'scale(0.97)';
+
+global.setTimeout(function () {
+if (el.parentNode) { el.parentNode.removeChild(el); }
+if (done) { done(); }
+}, DURATION);
+}
+
+global.FLIP = { flip: flip, remove: removeWithAnimation };
+
+})(window);

package/dist/03-patterns/list/list.css

@@ -0,0 +1 @@
+.list {list-style:none;margin:0;padding:0;border-top:1px solid var(--border-decor);}.list__item {display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) - 2px);border-inline-start:2px solid transparent;border-bottom:1px solid var(--border-decor);transition:background-color var(--dur-fast) var(--ease-out), border-inline-start-color var(--dur-fast) var(--ease-out);}@media (hover:hover) and (pointer:fine) {.list__item:hover {background:var(--surface-sunken);border-inline-start-color:var(--border-decor-str);}}.list__item:focus-within {background:var(--surface-sunken);border-inline-start-color:var(--accent);}.list__actions .btn:focus-visible {outline:2px solid var(--accent);outline-offset:1px;}.list__main {flex:1;min-width:0;}.list__title {display:block;font-size:var(--fs-sm);color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.list__meta {display:block;font-size:var(--fs-xs);color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.list__value {font-size:var(--fs-sm);white-space:nowrap;color:var(--text-secondary);}.list__value--up {color:var(--danger);}.list__value--down {color:var(--success);}.list__actions {display:flex;gap:var(--sp-2);flex:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out);}@media (hover:hover) and (pointer:fine) {.list__item:hover .list__actions, .list__item:focus-within .list__actions {opacity:1;}}@media (max-width:34rem) {.list__item {flex-wrap:wrap;row-gap:var(--sp-1);}.list__actions {width:100%;opacity:1;}}.list__note {font-size:var(--fs-xs);color:var(--text-tertiary);padding:var(--sp-2) var(--sp-4);}@media (prefers-reduced-motion:reduce) {.list__item, .list__actions {transition:none;}}

package/dist/03-patterns/nav/nav.css

@@ -0,0 +1 @@
+.skip {position:absolute;top:0;inset-inline-start:0;z-index:var(--z-toast);transform:translateY(-120%);background:var(--accent);color:var(--text-on-accent);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);text-decoration:none;transition:transform var(--dur-fast) var(--ease-out);}.skip:focus {transform:translateY(0);}.nav {position:sticky;top:0;z-index:var(--z-header);background:var(--paper);border-bottom:1px solid var(--border-decor);}.nav__inner {display:flex;align-items:center;gap:var(--sp-4);max-width:1040px;margin:0 auto;padding:0 var(--sp-5);min-height:56px;}.nav__brand {display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-2) 0;font-size:var(--fs-sm);font-weight:500;color:var(--text-primary);text-decoration:none;white-space:nowrap;}.nav__brand span {color:var(--text-tertiary);font-weight:400;}.nav__list {display:flex;align-items:center;gap:var(--sp-4);list-style:none;margin:0 0 0 auto;padding:0;}.nav__link {display:block;padding:var(--sp-2) 0;font-size:var(--fs-sm);color:var(--text-secondary);text-decoration:none;border-bottom:2px solid transparent;transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}@media (hover:hover) and (pointer:fine) {.nav__link:hover {color:var(--text-primary);}}.nav__link[aria-current="page"] {color:var(--accent);border-bottom-color:var(--accent);font-weight:500;}.nav__link:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}.nav__toggle {display:none;margin-inline-start:auto;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--border-decor);border-radius:var(--r-sm);cursor:pointer;color:var(--text-primary);}.nav__toggle:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}.nav__toggle i {display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);}.nav__toggle i::before, .nav__toggle i::after {content:"";position:absolute;inset-inline-start:0;width:18px;height:1.5px;background:currentColor;transition:transform var(--dur-base) var(--ease-out);}.nav__toggle i::before {top:-5.5px;}.nav__toggle i::after {top:5.5px;}.nav__toggle[aria-expanded="true"] i {transform:rotate(45deg);}.nav__toggle[aria-expanded="true"] i::before {transform:translateY(5.5px) rotate(-90deg);}.nav__toggle[aria-expanded="true"] i::after {opacity:0;}@media (max-width:48rem) {.nav__toggle {display:flex;}.nav__list {position:fixed;top:0;inset-inline-end:0;bottom:0;z-index:var(--z-overlay);width:min(280px, 82vw);margin:0;padding:var(--sp-7) var(--sp-5) var(--sp-5);flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-inline-start:1px solid var(--border-decor);box-shadow:var(--shadow-2);transform:translateX(100%);transition:transform var(--dur-base) var(--ease-out);overflow-y:auto;}.nav__list[data-state="open"] {transform:translateX(0);}.nav__link {padding:var(--sp-3) 0;border-bottom:1px solid var(--border-decor);border-bottom-width:1px;}.nav__link[aria-current="page"] {color:var(--accent);font-weight:500;}.nav__scrim {position:fixed;inset:0;z-index:var(--z-header);background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out);}.nav__scrim[data-state="open"] {opacity:1;pointer-events:auto;}}.toc {min-width:0;}@media (min-width:60rem) {.toc {position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);overflow-y:auto;}}.toc__title {font-size:var(--fs-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.1em;margin:0 0 var(--sp-3);font-weight:500;}.toc__list {list-style:none;margin:0;padding:0;}.toc__link {display:block;padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);color:var(--text-tertiary);text-decoration:none;font-size:var(--fs-xs);border-inline-start:2px solid var(--border-decor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}@media (hover:hover) and (pointer:fine) {.toc__link:hover {color:var(--text-primary);}}.toc__link:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}.toc__link[aria-current="true"] {color:var(--accent);border-inline-start-color:var(--accent);font-weight:500;}@media (prefers-reduced-motion:reduce) {.nav__list, .nav__toggle i, .nav__toggle i::before, .nav__scrim {transition:opacity var(--dur-fast) linear;transform:none;}.nav__toggle[aria-expanded="true"] i {transform:none;}.nav__toggle[aria-expanded="true"] i::before {transform:none;}}@media (prefers-reduced-motion:reduce) and (max-width:48rem) {.nav__list {transform:translateX(100%);}.nav__list[data-state="open"] {transform:translateX(0);}}

package/dist/03-patterns/nav/nav.js

@@ -0,0 +1,322 @@
+(function () {
+'use strict';
+
+var flEmit = function (el, name, detail) {
+if (!el || !el.dispatchEvent) return null;
+var type = name.indexOf('fl-') === 0 ? name : 'fl-' + name;
+var ev = null;
+
+if (typeof window.CustomEvent === 'function') {
+try {
+ev = new window.CustomEvent(type, {
+detail: detail || null, bubbles: true, cancelable: false
+});
+} catch (e) { ev = null; }
+}
+if (!ev) {
+try {
+ev = document.createEvent('CustomEvent');
+ev.initCustomEvent(type, true, false, detail || null);
+} catch (e2) { return null; }
+}
+el.dispatchEvent(ev);
+return ev;
+};
+
+var flFocusReturn = function (opts) {
+var opt = opts || {};
+var saved = null;
+
+return {
+save: function () {
+var a = document.activeElement;
+saved = (a && a !== document.body && a.focus) ? a : null;
+return saved;
+},
+
+restore: function () {
+var target = saved;
+
+if (!target || !document.contains(target)) target = opt.fallback || null;
+if (!target) { saved = null; return false; }
+try {
+target.focus();
+} catch (e) {
+saved = null;
+return false;
+}
+var ok = document.activeElement === target;
+saved = null;
+return ok;
+},
+
+target: function () { return saved; },
+clear: function () { saved = null; },
+};
+};
+
+var flDismissable = function (opts) {
+var opt = opts || {};
+var escOn = opt.escOn || [];
+var inside = opt.inside || [];
+var when = opt.when || function () { return true; };
+var onDismiss = opt.onDismiss || function () {};
+
+var shared = window.__flDismiss || (window.__flDismiss = { stack: [], bound: false });
+
+function isInside(node) {
+if (!node) return false;
+for (var i = 0; i < inside.length; i++) {
+var el = inside[i];
+if (!el || !el.contains) continue;
+if (el === node || el.contains(node)) return true;
+}
+return false;
+}
+
+function onKey(e) {
+if (!when()) return;
+var k = e.key;
+if (k !== 'Escape' && k !== 'Esc' && e.keyCode !== 27) return;
+
+var closed = onDismiss(e, 'esc');
+if (closed === false) return;
+if (e.preventDefault) e.preventDefault();
+if (e.stopPropagation) e.stopPropagation();
+}
+
+function onDocClick(e) {
+var top = null;
+for (var i = shared.stack.length - 1; i >= 0; i--) {
+if (shared.stack[i].when()) { top = shared.stack[i]; break; }
+}
+if (!top || top.isInside(e.target)) return;
+top.onDismiss(e, 'outside');
+}
+
+var rec = { when: when, isInside: isInside, onDismiss: onDismiss };
+
+for (var j = 0; j < escOn.length; j++) {
+if (escOn[j]) escOn[j].addEventListener('keydown', onKey);
+}
+shared.stack.push(rec);
+if (!shared.bound) {
+shared.bound = true;
+document.addEventListener('click', onDocClick, true);
+}
+
+return {
+destroy: function () {
+for (var j = 0; j < escOn.length; j++) {
+if (escOn[j]) escOn[j].removeEventListener('keydown', onKey);
+}
+var k = shared.stack.indexOf(rec);
+if (k >= 0) shared.stack.splice(k, 1);
+},
+};
+};
+
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]),' +
+' select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+function isVisible(el) {
+return !!(el && el.offsetParent !== null);
+}
+
+function each(nodes, fn) {
+for (var i = 0; i < nodes.length; i++) fn(nodes[i], i);
+}
+
+function Nav(root, opts) {
+var self = this;
+this.root = root;
+this.opts = opts || {};
+this.labels = this.opts.labels || {};
+this.labelOpen = this.labels.open || '打开菜单';
+this.labelClose = this.labels.close || '关闭菜单';
+
+this.toggle = root.querySelector('[data-nav-toggle]') || root.querySelector('.nav__toggle');
+this.list = root.querySelector('[data-nav-list]') || root.querySelector('.nav__list');
+
+if (!this.toggle || !this.list) {
+
+if (window.console && console.warn) {
+console.warn('nav.js: 缺少 .nav__toggle 或 .nav__list，已跳过', root);
+}
+return;
+}
+
+this.scrim = root.querySelector('.nav__scrim');
+if (!this.scrim) {
+this.scrim = document.createElement('div');
+this.scrim.className = 'nav__scrim';
+root.appendChild(this.scrim);
+}
+
+this.scrim.setAttribute('aria-hidden', 'true');
+
+if (this.list.id && !this.toggle.getAttribute('aria-controls')) {
+this.toggle.setAttribute('aria-controls', this.list.id);
+}
+
+this.fr = flFocusReturn({ fallback: this.toggle });
+this.savedOverflow = null;
+this.inerted = [];
+
+this.onToggleClick = function () { self.isOpen() ? self.close() : self.open(); };
+this.onListClick = function (e) {
+var t = e.target;
+
+if (t && (t.tagName === 'A' || (t.parentNode && t.parentNode.tagName === 'A'))) {
+setTimeout(function () { self.close(); }, 0);
+}
+};
+this.onKeydown = function (e) { self._trap(e); };
+this.onResize = function () {
+
+if (self.isOpen() && !isVisible(self.toggle)) self.close();
+};
+
+this.toggle.addEventListener('click', this.onToggleClick);
+this.list.addEventListener('click', this.onListClick);
+window.addEventListener('resize', this.onResize);
+
+this.dismiss = flDismissable({
+escOn: [document],
+inside: [this.list, this.toggle],
+when: function () { return self.isOpen(); },
+onDismiss: function () { self.close(); },
+});
+
+if (this.toggle.getAttribute('aria-expanded') === 'true') this.close();
+else this.toggle.setAttribute('aria-expanded', 'false');
+}
+
+Nav.prototype.isOpen = function () {
+return this.toggle.getAttribute('aria-expanded') === 'true';
+};
+
+Nav.prototype._inertBackground = function (on) {
+var self = this;
+if (on) {
+if (this.inerted.length) return;
+each(document.body.children, function (n) {
+if (n === self.root || (n.contains && n.contains(self.root))) return;
+if (n.tagName === 'SCRIPT' || n.tagName === 'STYLE' || n.tagName === 'LINK') return;
+if (!n.setAttribute) return;
+var had = n.getAttribute('aria-hidden');
+n.setAttribute('data-nav-had-hidden', had === null ? '' : had);
+n.setAttribute('aria-hidden', 'true');
+n.inert = true;
+self.inerted.push(n);
+});
+} else {
+each(this.inerted, function (n) {
+var had = n.getAttribute('data-nav-had-hidden');
+if (had) n.setAttribute('aria-hidden', had);
+else n.removeAttribute('aria-hidden');
+n.removeAttribute('data-nav-had-hidden');
+n.inert = false;
+});
+this.inerted = [];
+}
+};
+
+Nav.prototype.open = function () {
+if (this.isOpen()) return;
+this.fr.save();
+this.scrim.setAttribute('data-state', 'open');
+this.list.setAttribute('data-state', 'open');
+this.toggle.setAttribute('aria-expanded', 'true');
+this.toggle.setAttribute('aria-label', this.labelClose);
+
+if (this.savedOverflow === null) {
+this.savedOverflow = document.body.style.overflow || '';
+}
+document.body.style.overflow = 'hidden';
+
+this._inertBackground(true);
+document.addEventListener('keydown', this.onKeydown, true);
+
+var f = this._focusables();
+(f[0] || this.list).focus();
+
+flEmit(this.root, 'fl-nav-open', { root: this.root });
+if (this.opts.onOpen) this.opts.onOpen();
+};
+
+Nav.prototype.close = function () {
+if (!this.isOpen()) return;
+this.list.removeAttribute('data-state');
+this.scrim.removeAttribute('data-state');
+this.toggle.setAttribute('aria-expanded', 'false');
+this.toggle.setAttribute('aria-label', this.labelOpen);
+
+if (this.savedOverflow !== null) {
+document.body.style.overflow = this.savedOverflow;
+this.savedOverflow = null;
+}
+this._inertBackground(false);
+document.removeEventListener('keydown', this.onKeydown, true);
+
+this.fr.restore();
+
+flEmit(this.root, 'fl-nav-close', { root: this.root });
+if (this.opts.onClose) this.opts.onClose();
+};
+
+Nav.prototype._focusables = function () {
+var out = [];
+each(this.list.querySelectorAll(FOCUSABLE), function (el) {
+
+if (isVisible(el)) out.push(el);
+});
+return out;
+};
+
+Nav.prototype._trap = function (e) {
+if (!this.isOpen()) return;
+var k = e.key;
+if (k !== 'Tab' && e.keyCode !== 9) return;
+var list = this._focusables();
+if (!list.length) { e.preventDefault(); this.list.focus(); return; }
+var first = list[0];
+var last = list[list.length - 1];
+var active = document.activeElement;
+if (e.shiftKey && (active === first || active === this.list)) {
+e.preventDefault();
+last.focus();
+} else if (!e.shiftKey && active === last) {
+e.preventDefault();
+first.focus();
+}
+};
+
+Nav.prototype.destroy = function () {
+if (!this.toggle || !this.list) return;
+this.close();
+this.toggle.removeEventListener('click', this.onToggleClick);
+this.list.removeEventListener('click', this.onListClick);
+window.removeEventListener('resize', this.onResize);
+if (this.dismiss) this.dismiss.destroy();
+};
+
+Nav.attach = function (root, opts) {
+root.navInstance = new Nav(root, opts);
+return root.navInstance;
+};
+
+window.Nav = Nav;
+
+function init() {
+each(document.querySelectorAll('[data-nav]'), function (el) {
+if (!el.navInstance) Nav.attach(el, {});
+});
+}
+
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', init);
+} else {
+init();
+}
+})();

package/dist/03-patterns/nav/toc.js

@@ -0,0 +1,76 @@
+(function (global) {
+'use strict';
+
+function raf(fn) {
+return (global.requestAnimationFrame || function (f) {
+return global.setTimeout(f, 16);
+})(fn);
+}
+
+function init(opts) {
+opts = opts || {};
+var linkSel = opts.links || '.toc a';
+var secSel = opts.sections || 'h2[id]';
+
+var linkEls = document.querySelectorAll(linkSel);
+var sections = document.querySelectorAll(secSel);
+if (!linkEls.length || !sections.length) { return function () {}; }
+
+var map = {};
+for (var i = 0; i < linkEls.length; i++) {
+var href = linkEls[i].getAttribute('href') || '';
+if (href.charAt(0) === '#') { map[href.slice(1)] = linkEls[i]; }
+}
+
+function mark(id) {
+for (var k in map) {
+if (Object.prototype.hasOwnProperty.call(map, k)) {
+map[k].removeAttribute('aria-current');
+}
+}
+if (map[id]) { map[id].setAttribute('aria-current', 'true'); }
+}
+
+function currentId() {
+var y = global.pageYOffset || document.documentElement.scrollTop || 0;
+
+var line = y + 100;
+var found = sections[0];
+for (var n = 0; n < sections.length; n++) {
+if (sections[n].offsetTop <= line) { found = sections[n]; } else { break; }
+}
+
+var doc = document.documentElement;
+if (global.innerHeight + y >= doc.scrollHeight - 2 && sections.length) {
+found = sections[sections.length - 1];
+}
+return found ? found.id : null;
+}
+
+var ticking = false;
+function update() {
+if (ticking) { return; }
+ticking = true;
+raf(function () {
+ticking = false;
+var id = currentId();
+if (id) { mark(id); }
+});
+}
+
+global.addEventListener('scroll', update, { passive: true });
+global.addEventListener('resize', update);
+
+global.addEventListener('hashchange', update);
+update();
+
+return function () {
+global.removeEventListener('scroll', update);
+global.removeEventListener('resize', update);
+global.removeEventListener('hashchange', update);
+};
+}
+
+global.Toc = { init: init };
+
+})(window);

package/dist/03-patterns/overlay/overlay.css

@@ -0,0 +1 @@
+.toast-region {position:fixed;inset-inline-end:var(--sp-5);bottom:var(--sp-5);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-2);max-width:min(380px, calc(100vw - var(--sp-5) * 2));pointer-events:none;}.toast {pointer-events:auto;display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--border-decor);border-radius:var(--r-sm);box-shadow:var(--shadow-2);font-size:var(--fs-sm);line-height:var(--lh-base);color:var(--text-primary);animation:toast-in var(--dur-base) var(--ease-out);}.toast--success {background:var(--success-bg);}.toast--error {background:var(--danger-bg);}.toast--warning {background:var(--warning-bg);}.toast__body {flex:1;min-width:0;}.toast__title {font-weight:500;margin:0 0 2px;}.toast__desc {margin:0;color:var(--text-secondary);font-size:var(--fs-xs);line-height:1.5;}.toast__close {flex:none;min-width:44px;min-height:44px;;margin:-4px -4px 0 0;display:grid;place-items:center;border:none;border-radius:var(--r-sm);background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:16px;line-height:1;transition:background-color var(--dur-fast) var(--ease-out);}@media (hover:hover) and (pointer:fine) {.toast__close:hover {background:var(--surface-sunken);color:var(--text-primary);}}.toast__close:focus-visible {outline:2px solid var(--accent);outline-offset:1px;}.toast[data-state="leaving"] {animation:toast-out var(--dur-fast) var(--ease-in-out) forwards;}@keyframes toast-in {from {opacity:0;transform:translateX(var(--lift-lg));}to {opacity:1;transform:translateX(0);}}@keyframes toast-out {to {opacity:0;transform:translateX(var(--lift-lg));}}.toast__timer {position:absolute;inset-inline-start:0;bottom:0;height:2px;background:currentColor;opacity:0.25;border-radius:0 0 0 var(--r-sm);animation:toast-timer linear forwards;}@keyframes toast-timer {from {width:100%;}to {width:0%;}}.dialog-backdrop {position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--sp-5);background:var(--scrim);animation:backdrop-in var(--dur-base) var(--ease-out);}.dialog {position:relative;width:100%;max-width:460px;max-height:calc(100vh - var(--sp-7));overflow-y:auto;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:var(--sp-6);animation:dialog-in var(--dur-base) var(--ease-out);}@keyframes dialog-in {from {opacity:0;transform:translateY(var(--lift-lg)) scale(0.98);}to {opacity:1;transform:translateY(0) scale(1);}}@keyframes backdrop-in {from {opacity:0;}to {opacity:1;}}.dialog__title {margin:0 0 var(--sp-2);font-size:var(--fs-lg);font-weight:500;line-height:var(--lh-tight);color:var(--text-primary);}.dialog__desc {margin:0 0 var(--sp-5);font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-base);}.dialog__actions {display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-3);flex-wrap:wrap;}body[data-scroll-locked] {overflow:hidden;}@media (max-width:480px) {.dialog-backdrop {place-items:end center;padding:0;}.dialog {width:100vw;max-width:100vw;box-sizing:border-box;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));}.dialog__actions .btn {flex:1;}}@media (prefers-reduced-motion:reduce) {.toast, .toast[data-state="leaving"], .dialog, .dialog-backdrop {animation:none;}.toast__timer {animation:none;width:100%;}}