@layer components{.x-chip{align-items:center;gap:calc(var(--pad) * .55);max-width:100%;min-height:2em;padding:0 calc(var(--pad) * .8);border:1px solid var(--lines);border-radius:var(--round);color:color-mix(in oklch, var(--fg), transparent 45%);background:var(--surface-control);font:inherit;white-space:nowrap;transition:color var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, opacity var(--motion-fast) ease, transform var(--motion-fast) var(--ease-sticky);font-size:.75em;font-weight:750;display:inline-flex;transform:translateY(0)scale(1)}.x-chip[data-variant=entity]{color:var(--fg);background:var(--beta);box-shadow:0 0 0 1px color-mix(in oklch, var(--beta), transparent 50%);border-color:#0000}.x-chip[data-variant=tag]{border-color:color-mix(in oklch, var(--alpha), transparent 70%);color:var(--alpha);background:color-mix(in oklch, var(--alpha), transparent 90%)}.x-chip[data-size=md]{min-height:2.45em;padding:0 calc(var(--pad) * 1.05);font-size:.88em}.x-chip:is(button){cursor:pointer}.x-chip:is(button):is(:hover,:focus-visible){opacity:.9;transform:translateY(var(--motion-hover-y)) scale(1.015);outline:none}.x-chip:is(button):active{transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}.x-chip[data-active]{box-shadow:inset 0 0 0 1px color-mix(in oklch, currentColor, transparent 70%)}.x-chip>span{text-overflow:ellipsis;min-width:0;overflow:hidden}.x-chip svg{flex:none;width:1em;height:1em}.x-chip button{color:currentColor;cursor:pointer;opacity:.72;width:1.25em;height:1.25em;transition:background var(--motion-fast) ease, opacity var(--motion-fast) ease, transform var(--motion-fast) var(--ease-sticky);background:0 0;border:0;border-radius:999px;flex:none;place-items:center;padding:0;display:grid}.x-chip button:is(:hover,:focus-visible){opacity:1;background:color-mix(in oklch, currentColor, transparent 88%);outline:none;transform:scale(1.08)}.x-tabs{border-bottom:var(--lines-thickness) solid var(--lines);scrollbar-width:none;min-width:0;display:flex;overflow-x:auto}.x-tabs::-webkit-scrollbar{display:none}.x-tabs button{max-width:min(14em,48vw);min-height:3em;padding:0 calc(var(--pad) * 1.2);color:color-mix(in oklch, var(--fg), transparent 40%);font:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-sticky);background:0 0;border:0;border-bottom:2px solid #0000;flex:none;font-weight:750;overflow:hidden;transform:translateY(0)}.x-tabs button[data-active]{border-color:var(--alpha);color:var(--fg)}.x-tabs button:disabled{cursor:not-allowed;opacity:.45}.x-tabs button:not([data-active]):not(:disabled):is(:hover,:focus-visible){color:var(--fg);transform:translateY(var(--motion-hover-y));outline:none}.x-tabs button:not(:disabled):active{transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}.x-field{align-items:center;gap:calc(var(--pad) * .55);min-height:2.5em;padding:0 var(--pad);border:1px solid var(--lines);border-radius:var(--round);color:var(--fg);background:var(--surface-control);transition:background var(--motion-fast) ease, border-color var(--anim) ease, box-shadow var(--anim) ease, transform var(--motion-fast) var(--ease-sticky);font-size:.92em;display:flex;transform:translateY(0)}.x-field:focus-within{border-color:color-mix(in oklch, var(--alpha), transparent 42%);box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--alpha), transparent 78%);transform:translateY(var(--motion-hover-y))}.x-field[data-shape=soft]{border-radius:calc(var(--round) * 1.5)}.x-field input{min-width:0;color:var(--fg);font:inherit;background:0 0;border:0;outline:0;flex:auto;padding:0}.x-field input::placeholder{color:color-mix(in oklch, var(--fg), transparent 54%)}.x-field-slot{color:color-mix(in oklch, var(--fg), transparent 42%);flex:none;align-items:center;display:inline-flex}.x-field-slot svg{width:1.1em;height:1.1em}.x-toggle{border:1px solid var(--lines);background:var(--surface-control);cursor:pointer;width:2.55em;height:1.45em;transition:background var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-sticky);border-radius:999px;flex:none;align-items:center;padding:0;display:inline-flex;position:relative}.x-toggle[aria-checked=true]{border-color:color-mix(in oklch, var(--beta), transparent 20%);background:var(--beta)}.x-toggle span{background:var(--fg);width:1.05em;height:1.05em;transition:transform var(--motion-fast) var(--ease-sticky);border-radius:999px;position:absolute;left:.18em}.x-toggle[aria-checked=true] span{transform:translate(1.1em)}.x-toggle:is(:hover,:focus-visible){border-color:color-mix(in oklch, var(--alpha), transparent 48%);transform:translateY(var(--motion-hover-y));outline:none}.x-toggle:active{transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}.x-toggle:disabled{opacity:.5;cursor:not-allowed}.x-dropdown{--dropdown-surface:var(--surface-control);width:fit-content;max-width:100%;display:inline-flex;position:relative}.x-dropdown>button{justify-content:space-between;align-items:center;gap:calc(var(--pad) * .5);max-width:100%;min-height:2.5em;padding:0 calc(var(--pad) * .9) 0 calc(var(--pad) * 1.35);border:1px solid var(--lines-strong);border-radius:calc(var(--round) * 1.5);color:var(--fg);background:var(--dropdown-surface);font:inherit;cursor:pointer;transition:background var(--anim), border-color var(--anim), color var(--anim), transform var(--motion-fast) var(--ease-sticky);font-size:.84em;font-weight:500;display:inline-flex}.x-dropdown-chevron{width:1em;height:1em;transition:transform var(--anim)}.x-dropdown-label{align-items:center;gap:calc(var(--pad) * .5);min-width:0;display:inline-flex}.x-dropdown-leading{flex:none;align-items:center;display:inline-flex}.x-dropdown-leading svg{width:1em;height:1em}.x-dropdown-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.x-dropdown>button:is(:hover,:focus-visible),.x-dropdown>button[aria-expanded=true]{color:var(--fg);border-color:color-mix(in oklch, var(--fg), transparent 62%);background:var(--dropdown-surface);outline:none}.x-dropdown>button:is(:hover,:focus-visible){transform:translateY(var(--motion-hover-y))}.x-dropdown>button:active{transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}.x-dropdown>button[aria-expanded=true] .x-dropdown-chevron{transform:rotate(180deg)}.x-dropdown-menu{z-index:3;left:0;top:calc(100% + calc(var(--pad) * .5));width:max-content;min-width:100%;max-width:min(24em, calc(100vw - calc(var(--pad) * 4)));border:1px solid var(--lines-strong);border-radius:calc(var(--round) * 1.5);background:var(--dropdown-surface);transform-origin:0 0;animation:x-dropdown-menu-in var(--motion-fast) var(--ease-sticky) both;padding:0;font-size:.86em;display:grid;position:absolute;overflow:hidden;box-shadow:0 18px 40px #0009,inset 0 1px #fff1}.x-dropdown-menu button{justify-content:center;align-items:center;gap:calc(var(--pad) * .2);min-width:100%;min-height:2.55em;padding:0 calc(var(--pad) * 1.35);color:color-mix(in oklch, var(--fg), transparent 34%);font:inherit;text-align:left;cursor:pointer;transition:background var(--anim), color var(--anim), transform var(--motion-fast) var(--ease-sticky);background:0 0;border:0;border-radius:0;flex-direction:column;font-size:.95em;font-weight:500;display:flex}.x-dropdown-menu button span,.x-dropdown-menu button small{white-space:nowrap;width:100%}.x-dropdown-menu button[data-active]{color:var(--alpha);background:color-mix(in oklch, var(--alpha), transparent 88%)}.x-dropdown-menu button:is(:hover,:focus-visible){color:var(--fg);background:color-mix(in oklch, var(--fg), transparent 94%);outline:none;transform:translate(1px)}.x-dropdown-menu button[data-active]:is(:hover,:focus-visible){color:var(--alpha);background:color-mix(in oklch, var(--alpha), transparent 84%)}.x-dropdown-menu small{color:color-mix(in oklch, var(--fg), transparent 48%);font-size:.82em;line-height:1.25}@keyframes x-dropdown-menu-in{0%{opacity:0;transform:scale(.98)translateY(-.25em)}to{opacity:1;transform:scale(1)translateY(0)}}.x-empty-state{justify-items:center;gap:var(--pad);width:100%;padding:calc(var(--space) * 1.5) var(--space);color:color-mix(in oklch, var(--fg), transparent 18%);text-align:center;display:grid}.x-empty-state-icon{border:1px solid var(--lines);width:2.7em;height:2.7em;color:color-mix(in oklch, var(--fg), transparent 38%);background:var(--surface-control);border-radius:999px;place-items:center;display:grid}.x-empty-state-icon svg{width:1.25em;height:1.25em}.x-empty-state h3,.x-empty-state p{margin:0}.x-empty-state h3{color:var(--fg);font-size:.98em}.x-empty-state p{max-width:22em;color:color-mix(in oklch, var(--fg), transparent 42%);font-size:.86em;line-height:1.4}.x-empty-state-action{margin-top:calc(var(--pad) * .35);justify-content:center;display:flex}.x-collapsible-section{border-block:1px solid var(--lines);width:100%;color:color-mix(in oklch, var(--fg), transparent 18%);display:grid}.x-collapsible-section>button{justify-content:space-between;align-items:center;gap:var(--pad);width:100%;min-height:2.4em;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-sticky);background:0 0;border:0;padding:0;font-size:.9em;font-weight:800;display:flex}.x-collapsible-section>button:is(:hover,:focus-visible){color:var(--fg);transform:translateY(var(--motion-hover-y));outline:none}.x-collapsible-section svg{width:1em;height:1em;transition:transform var(--motion-fast) var(--ease-sticky);flex:none}.x-collapsible-section>button[aria-expanded=true] svg{transform:rotate(180deg)}.x-collapsible-section-content{gap:calc(var(--pad) * .75);padding:0 0 var(--pad);color:color-mix(in oklch, var(--fg), transparent 36%);font-size:.88em;line-height:1.45;display:grid}.x-collapsible-section-content p{margin:0}}
