@cawalch/porchlight 0.1.0

package/dist/porchlight.min.css

@@ -0,0 +1 @@
+@layer porchlight{@layer reset,tokens,themes,base,layout,components,utilities,enhancements,print;}@layer porchlight.reset{*,:before,:after{box-sizing:border-box}:where(html){color-scheme:light dark;text-size-adjust:100%}:where(body){min-block-size:100dvb;margin:0}:where(img,svg,video,canvas){block-size:auto;max-inline-size:100%;display:block}:where(button,input,select,textarea){font:inherit;color:inherit}:where(button,[role=button],input,select,textarea,summary){touch-action:manipulation}:where(table){border-collapse:separate;border-spacing:0}:where([hidden]){display:none!important}}@layer porchlight.tokens{@property --pl-motion-scale{syntax:"<number>";inherits:true;initial-value:1}@property --pl-radius-control{syntax:"<length>";inherits:true;initial-value:.5rem}@property --pl-focus-size{syntax:"<length>";inherits:true;initial-value:2px}:root{--pl-font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;--pl-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--pl-font-weight-normal:400;--pl-font-weight-medium:500;--pl-font-weight-semibold:600;--pl-font-weight-bold:700;--pl-font-weight-black:900;--pl-text-xs:clamp(.75rem, .72rem + .1vi, .8125rem);--pl-text-sm:clamp(.875rem, .84rem + .1vi, .9375rem);--pl-text-md:1rem;--pl-text-lg:clamp(1.125rem, 1.05rem + .25vi, 1.25rem);--pl-text-xl:clamp(1.25rem, 1.1rem + .55vi, 1.625rem);--pl-text-2xl:clamp(1.5rem, 1.2rem + 1vi, 2rem);--pl-text-3xl:clamp(1.875rem, 1.4rem + 1.6vi, 2.75rem);--pl-text-display:clamp(2.5rem, 1.8rem + 3vi, 4.5rem);--pl-leading-tight:1.15;--pl-leading-snug:1.3;--pl-leading-normal:1.5;--pl-leading-loose:1.7;--pl-space-0:0;--pl-space-1:.25rem;--pl-space-2:.5rem;--pl-space-3:.75rem;--pl-space-4:1rem;--pl-space-5:1.25rem;--pl-space-6:1.5rem;--pl-space-8:2rem;--pl-space-10:2.5rem;--pl-space-12:3rem;--pl-radius-xs:.25rem;--pl-radius-sm:.375rem;--pl-radius-md:.5rem;--pl-radius-lg:.75rem;--pl-radius-xl:1rem;--pl-radius-2xl:1.5rem;--pl-radius-3xl:2rem;--pl-radius-pill:999rem;--pl-duration-1:calc(.12s * var(--pl-motion-scale));--pl-duration-2:calc(.18s * var(--pl-motion-scale));--pl-duration-3:calc(.26s * var(--pl-motion-scale));--pl-duration-enter:calc(.22s * var(--pl-motion-scale));--pl-duration-exit:calc(.16s * var(--pl-motion-scale));--pl-ease-standard:cubic-bezier(.2, 0, 0, 1);--pl-ease-emphasized:cubic-bezier(.2, 0, 0, 1.2);--pl-ease-spring:cubic-bezier(.34, 1.56, .64, 1);--pl-ease-decelerate:cubic-bezier(0, 0, .2, 1);--pl-ease-accelerate:cubic-bezier(.4, 0, 1, 1);--pl-z-base:0;--pl-z-raised:10;--pl-z-sticky:100;--pl-z-overlay:1000;--pl-z-toast:1100;--pl-brand-1:oklch(97% .02 82);--pl-brand-2:oklch(89% .05 82);--pl-brand-3:oklch(80% .09 82);--pl-brand-4:oklch(70% .13 82);--pl-brand-5:oklch(63% .15 82);--pl-brand-6:oklch(56% .14 82);--pl-brand-7:oklch(48% .11 82);--pl-brand-8:oklch(39% .07 82);--pl-brand-9:oklch(29% .04 82);--pl-color-bg:light-dark(oklch(98% .005 60),oklch(14% .008 55));--pl-color-surface:light-dark(oklch(100% 0 0),oklch(18% .008 55));--pl-color-surface-2:light-dark(oklch(94% .008 60),oklch(22% .012 55));--pl-color-text:light-dark(oklch(20% .012 55),oklch(96% .008 60));--pl-color-text-muted:light-dark(oklch(46% .015 55),oklch(72% .012 55));--pl-color-border:light-dark(oklch(80% .015 55/.75),oklch(45% .012 55/.3));--pl-color-border-overlay:transparent;--pl-color-accent:light-dark(var(--pl-brand-7),var(--pl-brand-4));--pl-color-accent-text:light-dark(#fff,oklch(16% .01 55));--pl-color-accent-hover:color-mix(in oklab, var(--pl-color-accent), oklch(16% .01 55) 10%);--pl-color-danger:oklch(60% .22 25);--pl-color-danger-bg:light-dark(oklch(96% .04 25),oklch(22% .08 25));--pl-color-danger-text:light-dark(oklch(36% .18 25),oklch(90% .06 25));--pl-color-success:oklch(58% .18 150);--pl-color-success-bg:light-dark(oklch(96% .04 150),oklch(22% .08 150));--pl-color-success-text:light-dark(oklch(34% .15 150),oklch(82% .15 150));--pl-color-warning:oklch(62% .19 75);--pl-color-warning-bg:light-dark(oklch(96% .06 75),oklch(24% .09 75));--pl-color-warning-text:light-dark(oklch(40% .17 75),oklch(84% .15 75));--pl-opacity-disabled:.5;--pl-accent-bar-width:3px;--pl-color-scrim:oklch(0% 0 0/.55);--pl-control-block-size:2.5rem;--pl-control-padding-inline:var(--pl-space-4);--pl-control-gap:var(--pl-space-2);--pl-control-border-width:1px;--pl-control-radius:var(--pl-radius-control);--pl-focus-color:light-dark(oklch(52% .14 82),oklch(72% .13 82));--pl-focus-offset:2px;--pl-focus-size:2px;--pl-focus-glow-opacity:85%;--pl-backdrop-blur:12px;--pl-backdrop-saturate:160%;--pl-backdrop-blur-strong:20px;--pl-backdrop-saturate-strong:180%;--pl-backdrop-blur-scrim:4px;--pl-backdrop-saturate-scrim:80%;--pl-shadow-1:0 1px 2px oklch(0% 0 0/.08), 0 1px 4px oklch(30% .04 40/.06);--pl-shadow-2:0 4px 8px oklch(0% 0 0/.08), 0 8px 24px oklch(25% .06 40/.12), inset 0 1px 0 oklch(100% 0 0/.06);--pl-shadow-3:0 8px 16px oklch(0% 0 0/.1), 0 24px 64px oklch(20% .08 40/.18), inset 0 1px 0 oklch(100% 0 0/.08);--pl-shadow-glow:0 0 0 4px color-mix(in oklab, var(--pl-color-accent), transparent 72%)}}@layer porchlight.themes{:where([data-theme=light]){color-scheme:light}:where([data-theme=dark]){color-scheme:dark}:where([data-density=compact]){--pl-control-block-size:2rem;--pl-control-padding-inline:var(--pl-space-3);--pl-control-gap:var(--pl-space-1)}:where([data-density=comfortable]){--pl-control-block-size:2.5rem}:where([data-density=touch]){--pl-control-block-size:2.75rem;--pl-control-padding-inline:var(--pl-space-5)}@media (prefers-reduced-motion:reduce){:root{--pl-motion-scale:0;scroll-behavior:auto}*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}@media (forced-colors:active){:root{--pl-color-bg:Canvas;--pl-color-surface:Canvas;--pl-color-surface-2:Canvas;--pl-color-text:CanvasText;--pl-color-text-muted:CanvasText;--pl-color-border:ButtonBorder;--pl-color-accent:Highlight;--pl-color-accent-text:HighlightText;--pl-focus-color:Highlight;--pl-shadow-1:none;--pl-shadow-2:none;--pl-shadow-3:none}}}@layer porchlight.base{:where(html){font-family:var(--pl-font-sans);background:var(--pl-color-bg);color:var(--pl-color-text);accent-color:var(--pl-color-accent)}:where(body){font-size:var(--pl-text-md);line-height:var(--pl-leading-normal);background:var(--pl-color-bg);color:var(--pl-color-text);text-rendering:optimizelegibility}:where(a){color:var(--pl-color-accent);text-underline-offset:.18em;text-decoration-thickness:.08em}:where(a:hover){color:var(--pl-color-accent-hover)}:where(:focus-visible){outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset)}:where(h1,h2,h3,h4){line-height:var(--pl-leading-tight);text-wrap:balance;letter-spacing:-.02em;margin-block:0}:where(h1){font-weight:var(--pl-font-weight-black,900);letter-spacing:-.03em}:where(h2){font-weight:var(--pl-font-weight-bold,700);letter-spacing:-.025em}:where(p,ul,ol,dl,figure,blockquote){margin-block:0}:where(code,kbd,samp,pre){font-family:var(--pl-font-mono)}:where(){background:color-mix(in oklab, var(--pl-color-accent), transparent 60%)}}@layer porchlight.layout{:where(.l-stack){gap:var(--l-stack-gap,var(--pl-space-4));flex-direction:column;display:flex}:where(.l-cluster){align-items:var(--l-cluster-align,center);justify-content:var(--l-cluster-justify,flex-start);gap:var(--l-cluster-gap,var(--pl-space-3));flex-wrap:wrap;display:flex}:where(.l-grid){gap:var(--l-grid-gap,var(--pl-space-4));grid-template-columns:repeat(auto-fit, minmax(min(var(--l-grid-min,16rem), 100%), 1fr));display:grid}:where(.l-sidebar){gap:var(--l-sidebar-gap,var(--pl-space-4));grid-template-columns:minmax(0, var(--l-sidebar-size,16rem)) minmax(0, 1fr);display:grid}@media (width<48rem){:where(.l-sidebar){grid-template-columns:1fr}}@container (inline-size<48rem){:where(.l-sidebar){grid-template-columns:1fr}}:where(.l-page){inline-size:min(100% - 2 * var(--pl-space-4), var(--l-page-max,88rem));margin-inline:auto}:where(.l-scroll-area){scrollbar-gutter:stable;overscroll-behavior:contain;overflow:auto}:where(.l-app-shell){grid-template:"topbar topbar""sidebar main"minmax(0,1fr)/auto minmax(0,1fr);min-block-size:100dvb;display:grid}:where(.l-app-shell__topbar){z-index:var(--pl-z-sticky);grid-area:topbar;position:sticky;inset-block-start:0}:where(.l-app-shell__topbar[data-glass]){background:color-mix(in oklab, var(--pl-color-surface), transparent 18%);-webkit-backdrop-filter:blur(16px)saturate(180%);border-block-end:1px solid color-mix(in oklab, var(--pl-color-border), transparent 50%)}:where(.l-app-shell__sidebar){inline-size:var(--app-sidebar-size,16rem);overflow-inline:clip;transition:inline-size var(--pl-duration-2) var(--pl-ease-standard);grid-area:sidebar}:where(.l-app-shell__sidebar[data-sidebar=collapsed]){inline-size:var(--app-sidebar-collapsed,3.5rem)}:where(.l-app-shell__main){scrollbar-gutter:stable;overscroll-behavior:contain;grid-area:main;min-inline-size:0;overflow:auto;container-type:inline-size}@media (width<60rem){:where(.l-app-shell){grid-template:"topbar""main"minmax(0,1fr)/minmax(0,1fr)}:where(.l-app-shell__sidebar){display:none}}:where(.l-columns){--l-columns-width:16rem;columns:var(--l-columns-width) var(--l-columns-count,auto);column-gap:var(--l-columns-gap,var(--pl-space-4))}:where(.l-columns>*){break-inside:avoid;margin-block-end:var(--l-columns-gap,var(--pl-space-4))}:where(.l-container){inline-size:min(100% - 2 * var(--l-container-pad,var(--pl-space-4)), var(--l-container-max,80rem));margin-inline:auto}:where(.l-inset){inline-size:min(100%, var(--l-inset-max,48rem));margin-inline:auto}}@layer porchlight.components{@scope(.c-button){:scope{--c-button-bg:var(--pl-color-surface);--c-button-fg:var(--pl-color-text);--c-button-border:var(--pl-color-border);--c-button-highlight:transparent;justify-content:center;align-items:center;gap:var(--pl-control-gap);min-block-size:var(--pl-control-block-size);min-inline-size:var(--pl-control-block-size);padding-inline:var(--pl-control-padding-inline);border:var(--pl-control-border-width) solid var(--c-button-border);border-radius:var(--pl-control-radius);background:var(--c-button-bg);color:var(--c-button-fg);font-family:inherit;font-weight:var(--pl-font-weight-semibold);text-align:center;white-space:nowrap;cursor:default;user-select:none;box-shadow:inset 0 1px 0 var(--c-button-highlight);transition:background-color var(--pl-duration-1) var(--pl-ease-standard), border-color var(--pl-duration-1) var(--pl-ease-standard), color var(--pl-duration-1) var(--pl-ease-standard), transform var(--pl-duration-1) var(--pl-ease-spring), box-shadow var(--pl-duration-1) var(--pl-ease-standard);line-height:1;text-decoration:none;display:inline-flex}:scope[data-variant=primary]{--c-button-bg:var(--pl-color-accent);--c-button-fg:var(--pl-color-accent-text);--c-button-border:var(--pl-color-accent);--c-button-highlight:oklch(100% 0 0/.14)}:scope[data-variant=secondary]{--c-button-bg:var(--pl-color-surface-2)}:scope[data-variant=ghost]{--c-button-bg:transparent;--c-button-border:transparent}:scope:not([data-variant]){--c-button-border:color-mix(in oklab, var(--pl-color-border), transparent 20%)}:scope:is(:hover,[data-hover]):not(:disabled,[aria-disabled=true]){background-color:color-mix(in oklab, var(--c-button-bg), var(--pl-color-text) 12%);cursor:pointer}:scope[data-variant=ghost]:is(:hover,[data-hover]):not(:disabled,[aria-disabled=true]){background-color:color-mix(in oklab, var(--pl-color-accent), transparent 85%)}:scope:is(:active,[aria-pressed=true]):not(:disabled,[aria-disabled=true]){transform:scale(.97)}:scope[data-variant=primary]:focus-visible{box-shadow:var(--pl-shadow-glow), inset 0 1px 0 var(--c-button-highlight);outline:none}:scope:is([data-variant=ghost],[data-variant=secondary])[aria-pressed=true]{--c-button-bg:color-mix(in oklab, var(--pl-color-accent), transparent 82%);--c-button-fg:var(--pl-color-text)}:scope:is(:disabled,[aria-disabled=true]){opacity:var(--pl-opacity-disabled);cursor:not-allowed;box-shadow:none}@supports (text-box:trim-both cap alphabetic){:scope{text-box:trim-both cap alphabetic}}@media (forced-colors:active){:scope{border-color:buttonborder}:scope[data-variant=primary]{color:highlighttext;background:highlight;border-color:highlight}}}@scope(.c-field){:scope{--c-field-border:var(--pl-color-border);--c-field-bg:var(--pl-color-surface);--c-field-fg:var(--pl-color-text);gap:var(--pl-space-2);color:var(--c-field-fg);display:grid}.c-field__label{font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-semibold)}.c-field__control{appearance:none;inline-size:100%;min-block-size:var(--pl-control-block-size);padding-block:var(--pl-space-1);padding-inline:var(--pl-control-padding-inline);border:var(--pl-control-border-width) solid var(--c-field-border);border-radius:var(--pl-control-radius);background:var(--c-field-bg);color:var(--c-field-fg);transition:border-color var(--pl-duration-1) var(--pl-ease-standard), box-shadow var(--pl-duration-1) var(--pl-ease-standard)}select.c-field__control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--pl-space-3) center;background-size:1rem;padding-inline-end:var(--pl-space-8)}.c-field__control::placeholder{color:var(--pl-color-text-muted)}.c-field__hint{color:var(--pl-color-text-muted);font-size:var(--pl-text-sm)}}:where(.c-field) .c-field__control:focus-visible{border-color:var(--pl-focus-color);box-shadow:0 0 0 4px color-mix(in oklab, var(--pl-focus-color), transparent var(--pl-focus-glow-opacity));outline:none}:where(.c-field) .c-field__control:user-invalid{border-color:var(--pl-color-danger);box-shadow:0 0 0 4px color-mix(in oklab, var(--pl-color-danger), transparent var(--pl-focus-glow-opacity))}:where(.c-field):has(.c-field__control:user-invalid) .c-field__hint{color:var(--pl-color-danger-text)}:where(.c-field):has(.c-field__control:disabled){opacity:var(--pl-opacity-disabled)}:where(.c-field):has(.c-field__control:disabled) .c-field__control{cursor:not-allowed}@media (forced-colors:active){:where(.c-field) .c-field__control{border-color:buttonborder}}@scope(.c-card){:scope{--c-card-padding:var(--pl-space-5);--c-card-bg:var(--pl-color-surface);--c-card-border:var(--pl-color-border);--c-card-shadow:var(--pl-shadow-1);--c-card-radius:var(--pl-radius-2xl);gap:var(--pl-space-4);padding:var(--c-card-padding);border:1px solid var(--c-card-border);border-radius:var(--c-card-radius);background:var(--c-card-bg);box-shadow:var(--c-card-shadow);align-content:start;display:grid;container:c-card/inline-size}:scope[data-elevated]{--c-card-border:transparent;--c-card-shadow:var(--pl-shadow-2)}:scope[data-variant=accent]{--c-card-border:color-mix(in oklab, var(--pl-color-accent), transparent 70%);background:color-mix(in oklab, var(--pl-color-accent), var(--pl-color-surface) 94%);box-shadow:inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent), var(--pl-shadow-1)}:scope:has(.c-badge[data-variant=danger]),:scope:has([data-status=error]){--c-card-border:color-mix(in oklab, var(--pl-color-danger), transparent 55%);box-shadow:0 0 0 1px color-mix(in oklab, var(--pl-color-danger), transparent 72%), var(--pl-shadow-1)}:scope:has(.c-badge[data-variant=success]),:scope:has([data-status=success]){--c-card-border:color-mix(in oklab, var(--pl-color-success), transparent 55%);box-shadow:0 0 0 1px color-mix(in oklab, var(--pl-color-success), transparent 72%), var(--pl-shadow-1)}.c-card__header{justify-content:space-between;align-items:start;gap:var(--pl-space-3);display:flex}.c-card__title{font-size:var(--pl-text-lg);font-weight:var(--pl-font-weight-bold);line-height:var(--pl-leading-tight);text-wrap:balance;margin:0}.c-card__body{color:var(--pl-color-text-muted)}.c-card__footer{justify-content:flex-end;align-items:center;gap:var(--pl-space-2);border-block-start:1px solid color-mix(in oklab, var(--c-card-border), transparent 45%);padding-block-start:var(--pl-space-3);display:flex}@container c-card (inline-size<28rem){.c-card__header{flex-direction:column;align-items:stretch}}:scope[data-interactive],:scope[href]{cursor:pointer;color:inherit;transition:transform var(--pl-duration-exit) var(--pl-ease-accelerate), box-shadow var(--pl-duration-exit) var(--pl-ease-accelerate);text-decoration:none}:scope[data-interactive]:is(:hover,[data-hover]),:scope[href]:is(:hover,[data-hover]){transition:transform var(--pl-duration-enter) var(--pl-ease-decelerate), box-shadow var(--pl-duration-enter) var(--pl-ease-decelerate);box-shadow:var(--pl-shadow-2), 0 0 0 1px color-mix(in oklab, var(--pl-color-accent), transparent 88%);transform:translateY(-3px)}:scope[data-interactive]:focus-visible,:scope[href]:focus-visible{box-shadow:0 0 0 var(--pl-focus-size) var(--pl-focus-color), var(--pl-shadow-2);outline:none}}@media (forced-colors:active){:where(.c-card){border-color:buttonborder}}@scope(.c-badge){:scope{align-items:center;gap:var(--pl-space-1);min-block-size:var(--pl-space-6);padding-inline:var(--pl-space-2);border-radius:var(--pl-radius-pill);font-size:var(--pl-text-xs);font-weight:var(--pl-font-weight-semibold);text-wrap:nowrap;background:var(--pl-color-surface-2);color:var(--pl-color-text);line-height:1;display:inline-flex}:scope[data-tone=accent]{background:var(--pl-color-accent);color:var(--pl-color-accent-text)}:scope[data-tone=success]{background:var(--pl-color-success-bg);color:var(--pl-color-success-text)}:scope[data-tone=warning]{background:var(--pl-color-warning-bg);color:var(--pl-color-warning-text)}:scope[data-tone=danger]{background:var(--pl-color-danger-bg);color:var(--pl-color-danger-text)}.c-badge__dot{border-radius:var(--pl-radius-pill);opacity:.9;background:currentColor;block-size:.375rem;inline-size:.375rem}@media (forced-colors:active){:scope{border:1px solid buttonborder}}}@scope(.c-menu){:scope{--c-menu-anchor:--pl-menu-anchor;display:inline-block}.c-menu__trigger{anchor-name:var(--c-menu-anchor)}.c-menu__popover{padding:var(--pl-space-2);border:1px solid color-mix(in oklab, var(--pl-color-border), transparent 30%);border-radius:var(--pl-radius-xl);min-inline-size:12rem;-webkit-backdrop-filter:blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));color:var(--pl-color-text);box-shadow:var(--pl-shadow-3);opacity:0;transition:opacity var(--pl-duration-enter) var(--pl-ease-decelerate), transform var(--pl-duration-enter) var(--pl-ease-decelerate), overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete, display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;background:light-dark(oklch(100% 0 0/.96),oklch(17% .04 250/.94));margin:0;transform:translateY(-4px)}@supports (position-anchor:--x){.c-menu__popover{position-anchor:var(--c-menu-anchor);position-area:block-end span-inline-end;position-try-fallbacks:flip-block;margin-block-start:var(--pl-space-2);position:absolute;inset:auto}}.c-menu__popover:popover-open{opacity:1;transform:translateY(0)}@starting-style{.c-menu__popover:popover-open{opacity:0;transform:translateY(-4px)}}.c-menu__divider{margin-block:var(--pl-space-1);border:0;border-block-start:1px solid var(--pl-color-border)}}:where(.c-menu__popover)>:is(a,button){align-items:center;gap:var(--pl-space-2);min-block-size:2.25rem;inline-size:100%;padding-inline:var(--pl-space-3);border-radius:var(--pl-radius-sm);color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;border:0;text-decoration:none;display:flex}:where(.c-menu__popover)>:is(a,button):is(:hover,:focus-visible){background:var(--pl-color-surface-2)}:where(.c-menu__popover)>:is(a,button):focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:calc(var(--pl-focus-offset) * -1)}:where(.c-menu__popover)>:is(a,button)[data-tone=danger]{color:var(--pl-color-danger-text)}:where(.c-menu__popover)>:is(a,button)[data-tone=danger]:is(:hover,:focus-visible){background:var(--pl-color-danger-bg)}@media (forced-colors:active){:where(.c-menu__popover){border-color:buttonborder}:where(.c-menu__popover)>:is(a,button):focus-visible{outline-color:highlight}}@scope(.c-dialog){:scope{--c-dialog-size:42rem;inline-size:min(100% - 2rem, var(--c-dialog-size));border-radius:var(--pl-radius-2xl);max-block-size:min(100dvb - 2rem,80dvb);-webkit-backdrop-filter:blur(var(--pl-backdrop-blur-strong)) saturate(var(--pl-backdrop-saturate-strong));color:var(--pl-color-text);box-shadow:var(--pl-shadow-3);opacity:0;transition:opacity var(--pl-duration-enter) var(--pl-ease-decelerate), transform var(--pl-duration-enter) var(--pl-ease-decelerate), overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete, display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;background:light-dark(oklch(100% 0 0/.94),oklch(17% .04 250/.92));border:none;margin:auto;padding:0;overflow:auto;transform:scale(.97)translateY(10px)}:is(:scope:modal,:scope[open]){opacity:1;transform:scale(1)translateY(0)}@starting-style{:is(:scope:modal,:scope[open]){opacity:0;transform:scale(.97)translateY(10px)}}:scope::backdrop{background:var(--pl-color-scrim);backdrop-filter:blur(var(--pl-backdrop-blur-scrim)) saturate(var(--pl-backdrop-saturate-scrim))}.c-dialog__header{justify-content:space-between;align-items:center;gap:var(--pl-space-3);min-block-size:var(--pl-control-block-size);padding:var(--pl-space-5);border-block-end:1px solid color-mix(in oklab, var(--pl-color-border), transparent 40%);display:flex}.c-dialog__title{font-size:var(--pl-text-lg);font-weight:var(--pl-font-weight-bold);line-height:var(--pl-leading-tight);text-wrap:balance;margin:0}.c-dialog__close{inline-size:var(--pl-control-block-size);block-size:var(--pl-control-block-size);border-radius:var(--pl-radius-md);color:var(--pl-color-text-muted);font:inherit;cursor:pointer;transition:background-color var(--pl-duration-1) var(--pl-ease-standard), color var(--pl-duration-1) var(--pl-ease-standard);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.c-dialog__close:hover{background:var(--pl-color-surface-2);color:var(--pl-color-text)}.c-dialog__body{padding:var(--pl-space-5)}.c-dialog__footer{justify-content:flex-end;align-items:center;gap:var(--pl-space-3);padding:var(--pl-space-5);border-block-start:1px solid color-mix(in oklab, var(--pl-color-border), transparent 40%);display:flex}@media (forced-colors:active){:scope{border-color:buttonborder}}}@scope(.c-table-wrap){:scope{--c-table-cell-pad:var(--pl-space-3) var(--pl-space-4);--c-table-min:48rem;--c-table-row-min-block-size:3rem;--c-table-radius:var(--pl-radius-xl);border:1px solid color-mix(in oklab, var(--pl-color-border), transparent 20%);border-radius:var(--c-table-radius);background:var(--pl-color-surface);overflow:auto;container:c-table-wrap/inline-size}:scope[data-density=compact]{--c-table-cell-pad:var(--pl-space-1) var(--pl-space-3);--c-table-row-min-block-size:2.25rem}.c-table{inline-size:100%;min-inline-size:var(--c-table-min);border-collapse:separate;border-spacing:0}.c-table thead tr:first-child th:first-child{border-start-start-radius:calc(var(--c-table-radius) - 1px)}.c-table thead tr:first-child th:last-child{border-start-end-radius:calc(var(--c-table-radius) - 1px)}.c-table tbody tr:last-child td:first-child{border-end-start-radius:calc(var(--c-table-radius) - 1px)}.c-table tbody tr:last-child td:last-child{border-end-end-radius:calc(var(--c-table-radius) - 1px)}.c-table :where(th,td){padding:var(--c-table-cell-pad);border-block-end:1px solid var(--pl-color-border);text-align:start;vertical-align:middle;white-space:nowrap;min-block-size:var(--c-table-row-min-block-size)}.c-table :where(td){color:var(--pl-color-text)}.c-table :where(th){z-index:var(--pl-z-raised);background:var(--pl-color-surface-2);font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-semibold);color:var(--pl-color-text-muted);border-block-end:1px solid var(--pl-color-border);position:sticky;inset-block-start:0}@container c-table-wrap (inline-size<40rem){.c-table :where(th,td){padding-inline:var(--pl-space-2)}}.c-table :where([data-align=end]){text-align:end;font-variant-numeric:tabular-nums}.c-table :where([data-align=center]){text-align:center}.c-table th[data-sort]{cursor:pointer;user-select:none;&:hover{color:var(--pl-color-text)}}.c-table__sort-icon{color:var(--pl-color-text-muted);opacity:.4;transition:opacity var(--pl-duration-1) var(--pl-ease-standard), color var(--pl-duration-1) var(--pl-ease-standard);align-items:center;margin-inline-start:var(--pl-space-1);font-size:.7em;display:inline-flex}.c-table__sort-icon:before{content:"⇅"}.c-table th[data-sort=asc] .c-table__sort-icon{opacity:1;color:var(--pl-color-accent)}.c-table th[data-sort=asc] .c-table__sort-icon:before{content:"↑"}.c-table th[data-sort=desc] .c-table__sort-icon{opacity:1;color:var(--pl-color-accent)}.c-table th[data-sort=desc] .c-table__sort-icon:before{content:"↓"}.c-table th[data-sort=asc],.c-table th[data-sort=desc]{color:var(--pl-color-text)}.c-table .c-table__check{text-align:center;inline-size:2.5rem;min-inline-size:2.5rem}.c-table .c-table__check input[type=checkbox]{block-size:1rem;inline-size:1rem;accent-color:var(--pl-color-accent);cursor:pointer}.c-table .c-table__detail td{border-block-end:1px solid var(--pl-color-border);background:color-mix(in oklab, var(--pl-color-surface-2), var(--pl-color-text) 2%);box-shadow:inset var(--pl-accent-bar-width) 0 0 color-mix(in oklab, var(--pl-color-accent), transparent 70%);padding:0}.c-table__detail-inner{transition:grid-template-rows var(--pl-duration-3) var(--pl-ease-standard);grid-template-rows:0fr;display:grid;overflow:hidden}.c-table .c-table__detail[open] .c-table__detail-inner{grid-template-rows:1fr}.c-table__detail-content{padding:var(--pl-space-4);overflow:hidden}.c-table__expand{border-radius:var(--pl-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--pl-color-text-muted);cursor:pointer;transition:background-color var(--pl-duration-1) var(--pl-ease-standard);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.c-table__expand:hover{background:var(--pl-color-surface-2);color:var(--pl-color-text)}.c-table__expand:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset)}.c-table__expand svg{block-size:.875rem;inline-size:.875rem;transition:rotate var(--pl-duration-2) var(--pl-ease-standard)}.c-table__expand[aria-expanded=true] svg{rotate:180deg}.c-table .c-table__sticky-col{z-index:calc(var(--pl-z-raised) + 1);background:var(--pl-color-surface);position:sticky;inset-inline-start:0}.c-table th.c-table__sticky-col{z-index:calc(var(--pl-z-raised) + 2);background:var(--pl-color-surface-2)}.c-table .c-table__sticky-col:not(:last-child){box-shadow:4px 0 8px -2px oklch(0% 0 0/.1)}:where(.c-table) tbody tr:hover .c-table__sticky-col,:where(.c-table) tbody tr[aria-selected=true] .c-table__sticky-col{background:inherit}}:where(.c-table) tbody tr{transition:background-color var(--pl-duration-1) var(--pl-ease-standard)}:where(.c-table) tbody tr:hover{background:color-mix(in oklab, var(--pl-color-surface-2), var(--pl-color-text) 3.5%)}:where(.c-table) tbody tr[aria-selected=true]{background:color-mix(in oklab, var(--pl-color-accent), transparent 84%);box-shadow:inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent)}:where(.c-table) tbody tr:last-child td{border-block-end:none}:where(.c-table-wrap[data-zebra]) .c-table tbody tr:nth-child(2n){background:color-mix(in oklab, var(--pl-color-surface-2), transparent 50%)}:where(.c-table) tbody[data-loading] tr{pointer-events:none}@media (forced-colors:active){:where(.c-table) :where(th,td){border-block-end-color:canvastext}:where(.c-table__sticky-col){border-inline-end:1px solid canvastext}}@scope(.c-tabs){:scope{--c-tabs-gap:var(--pl-space-4);--c-tabs-indicator:3px;gap:var(--c-tabs-gap);display:grid}.c-tabs__list{gap:var(--pl-space-1);border-block-end:1px solid color-mix(in oklab, var(--pl-color-border), transparent 20%);scrollbar-width:none;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto;&::-webkit-scrollbar{display:none}}.c-tabs__tab{--c-tabs-tab-padding:var(--pl-space-3);appearance:none;align-items:center;gap:var(--pl-space-2);padding:var(--pl-space-2) var(--c-tabs-tab-padding);color:var(--pl-color-text-muted);font:inherit;font-weight:var(--pl-font-weight-medium);white-space:nowrap;cursor:pointer;box-shadow:inset 0 calc(var(--c-tabs-indicator) * -1) 0 0 transparent;transition:color var(--pl-duration-1) var(--pl-ease-standard), box-shadow var(--pl-duration-1) var(--pl-ease-standard);background:0 0;border:0;flex-shrink:0;display:inline-flex}.c-tabs__tab[aria-selected=true]{color:var(--pl-color-accent);font-weight:var(--pl-font-weight-semibold);box-shadow:inset 0 calc(var(--c-tabs-indicator) * -1) 0 0 var(--pl-color-accent)}.c-tabs__tab:disabled,.c-tabs__tab[aria-disabled=true]{color:var(--pl-color-text-muted);opacity:var(--pl-opacity-disabled)}.c-tabs__tab .c-tabs__count{padding-inline:var(--pl-space-2);border-radius:var(--pl-radius-pill);background:var(--pl-color-surface-2);color:var(--pl-color-text-muted);font-size:var(--pl-text-xs);font-weight:var(--pl-font-weight-semibold);line-height:var(--pl-leading-snug)}.c-tabs__tab[aria-selected=true] .c-tabs__count{background:color-mix(in oklab, var(--pl-color-accent), transparent 82%);color:var(--pl-color-accent)}.c-tabs__panel{animation:c-tabs-reveal var(--pl-duration-2) var(--pl-ease-standard)}}:where(.c-tabs__list) .c-tabs__tab:is(:hover,:focus-visible):not(:disabled,[aria-disabled=true]){background:var(--pl-color-surface-2);color:var(--pl-color-text)}:where(.c-tabs__list) .c-tabs__tab:hover:not(:disabled,[aria-disabled=true]){color:var(--pl-color-text)}:where(.c-tabs__list) .c-tabs__tab:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:calc(var(--pl-focus-offset) * -1)}@keyframes c-tabs-reveal{0%{opacity:0;transform:translateY(2px)}}@media (forced-colors:active){:where(.c-tabs__list){border-block-end-color:canvastext}:where(.c-tabs__tab)[aria-selected=true]{color:highlight;box-shadow:inset 0 calc(var(--c-tabs-indicator) * -1) 0 0 Highlight}:where(.c-tabs__tab):focus-visible{outline-color:highlight}}@scope(.c-toolbar){:scope{--c-toolbar-gap:var(--pl-space-3);--c-toolbar-pad:var(--pl-space-3);--c-toolbar-min:10rem;justify-content:space-between;align-items:center;gap:var(--c-toolbar-gap);padding:var(--c-toolbar-pad);border-block-end:1px solid color-mix(in oklab, var(--pl-color-border), transparent 20%);background:var(--pl-color-surface);flex-wrap:wrap;display:flex;container:c-toolbar/inline-size}.c-toolbar__group{align-items:center;gap:var(--pl-space-2);min-inline-size:var(--c-toolbar-min);flex-wrap:wrap;flex:auto;display:flex}.c-toolbar__group:last-child{flex:0 auto;justify-content:flex-end}.c-toolbar__divider{background:color-mix(in oklab, var(--pl-color-border), transparent 20%);flex-shrink:0;align-self:center;block-size:1.5rem;inline-size:1px}@container c-toolbar (inline-size<36rem){:scope{--c-toolbar-pad:var(--pl-space-2);--c-toolbar-gap:var(--pl-space-2)}}}@media (forced-colors:active){:where(.c-toolbar){border-block-end-color:canvastext}:where(.c-toolbar__divider){background:canvastext}}@scope(.c-pagination){:scope{--c-pagination-min:var(--pl-control-block-size);align-items:center;gap:var(--pl-space-1);display:flex}.c-pagination__page,.c-pagination__nav{appearance:none;justify-content:center;align-items:center;gap:var(--pl-space-1);min-block-size:var(--c-pagination-min);min-inline-size:var(--c-pagination-min);padding-inline:var(--pl-space-2);border-radius:var(--pl-radius-md);color:var(--pl-color-text-muted);font:inherit;font-weight:var(--pl-font-weight-medium);cursor:pointer;transition:background-color var(--pl-duration-1) var(--pl-ease-standard), color var(--pl-duration-1) var(--pl-ease-standard);background:0 0;border:1px solid #0000;display:inline-flex}.c-pagination__page[aria-current=page]{background:var(--pl-color-accent);color:var(--pl-color-accent-text);font-weight:var(--pl-font-weight-semibold)}:scope[data-size=sm]{--c-pagination-min:2rem}.c-pagination__page:disabled,.c-pagination__nav:disabled{opacity:var(--pl-opacity-disabled);cursor:not-allowed}.c-pagination__ellipsis{min-inline-size:var(--c-pagination-min);color:var(--pl-color-text-muted);user-select:none;justify-content:center;align-items:center;display:inline-flex}}:where(.c-pagination__page:not([aria-current=page])):is(:hover,:focus-visible){background:var(--pl-color-surface-2);color:var(--pl-color-text)}:where(.c-pagination__page):focus-visible,:where(.c-pagination__nav):focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:calc(var(--pl-focus-offset) * -1)}@media (forced-colors:active){:where(.c-pagination__page)[aria-current=page]{color:highlighttext;background:highlight}:where(.c-pagination__page):focus-visible,:where(.c-pagination__nav):focus-visible{outline-color:highlight}}@scope(.c-skeleton){:scope{--c-skeleton-w:100%;inline-size:var(--c-skeleton-w);block-size:var(--pl-text-md);border-radius:var(--pl-radius-sm);background:var(--pl-color-surface-2);animation:c-skeleton-pulse 1.8s var(--pl-ease-standard) infinite;display:block}:scope[data-shape=circle]{inline-size:var(--c-skeleton-w,2.5rem);block-size:var(--c-skeleton-w,2.5rem);border-radius:var(--pl-radius-pill)}:scope[data-shape=rect]{block-size:var(--c-skeleton-w,6rem);border-radius:var(--pl-radius-md);inline-size:100%}:scope[data-shape=text][data-line=sm]{block-size:var(--pl-text-sm)}}:where(.c-skeleton-group){gap:var(--pl-space-2);flex-direction:column;display:flex}@keyframes c-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@media (forced-colors:active){:where(.c-skeleton){opacity:.3;background:canvastext}}@scope(.c-empty){:scope{--c-empty-pad:var(--pl-space-8);--c-empty-tone:var(--pl-color-text-muted);justify-items:center;gap:var(--pl-space-3);padding:var(--c-empty-pad);text-align:center;color:var(--pl-color-text-muted);display:grid}.c-empty__media{inline-size:var(--c-empty-media-size,3rem);block-size:var(--c-empty-media-size,3rem);color:var(--c-empty-tone);opacity:.6;justify-content:center;align-items:center;display:flex}.c-empty__media svg,.c-empty__media img{block-size:100%;inline-size:100%}.c-empty__title{font-size:var(--pl-text-lg);font-weight:var(--pl-font-weight-semibold);color:var(--pl-color-text);text-wrap:balance;margin:0}.c-empty__description{max-inline-size:36ch;font-size:var(--pl-text-sm);text-wrap:pretty;margin:0}.c-empty__actions{justify-content:center;align-items:center;gap:var(--pl-space-2);flex-wrap:wrap;margin-block-start:var(--pl-space-2);display:flex}:scope[data-tone=danger]{--c-empty-tone:var(--pl-color-danger)}:scope[data-tone=success]{--c-empty-tone:var(--pl-color-success)}}@media (forced-colors:active){:where(.c-empty__media){color:canvastext}}@scope(.c-stat){:scope{--c-stat-gap:var(--pl-space-1);gap:var(--pl-space-2);flex-direction:column;display:flex}.c-stat__label{font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-semibold);color:var(--pl-color-text-muted);line-height:1}.c-stat__value{align-items:baseline;gap:var(--pl-space-2);font-size:clamp(1.75rem,1.5rem + 1vi,2.25rem);font-weight:var(--pl-font-weight-bold);line-height:var(--pl-leading-tight);color:var(--pl-color-text);font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:flex}.c-stat__unit{font-size:var(--pl-text-md);font-weight:var(--pl-font-weight-medium);color:var(--pl-color-text-muted)}.c-stat__trend{align-items:center;gap:var(--pl-space-1);font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--pl-color-text-muted);display:inline-flex}.c-stat__trend[data-direction=up]{color:var(--pl-color-success-text)}.c-stat__trend[data-direction=down]{color:var(--pl-color-danger-text)}.c-stat__trend:before{font-size:.7em;line-height:1;display:inline-block}.c-stat__trend[data-direction=up]:before{content:"▲"}.c-stat__trend[data-direction=down]:before{content:"▼"}.c-stat__trend[data-direction=flat]:before{content:"▶";transform:rotate(-90deg)}.c-stat__spark{margin-block-start:var(--pl-space-1)}}@media (forced-colors:active){:where(.c-stat__trend)[data-direction=up],:where(.c-stat__trend)[data-direction=down]{color:canvastext}}@scope(.c-alert){:scope{--c-alert-tone:var(--pl-color-accent);--c-alert-tone-bg:var(--pl-color-accent);--c-alert-pad:var(--pl-space-4);--c-alert-gap:var(--pl-space-3);gap:var(--c-alert-gap);padding:var(--c-alert-pad);border:1px solid var(--pl-color-border);border-inline-start:var(--pl-accent-bar-width) solid var(--c-alert-tone);border-radius:var(--pl-radius-xl);background:color-mix(in oklab, var(--c-alert-tone-bg), var(--pl-color-surface) 92%);color:var(--pl-color-text);grid-template-columns:auto 1fr;display:grid}.c-alert__icon{color:var(--c-alert-tone);flex-shrink:0;align-items:flex-start;display:flex}.c-alert__icon svg{block-size:1.25rem;inline-size:1.25rem}.c-alert__content{gap:var(--pl-space-1);flex-direction:column;min-inline-size:0;display:flex}.c-alert__title{font-weight:var(--pl-font-weight-semibold);font-size:var(--pl-text-sm);color:var(--pl-color-text)}.c-alert__body{font-size:var(--pl-text-sm);color:var(--pl-color-text-muted)}:scope[data-tone=success]{--c-alert-tone:var(--pl-color-success);--c-alert-tone-bg:var(--pl-color-success-bg)}:scope[data-tone=warning]{--c-alert-tone:var(--pl-color-warning);--c-alert-tone-bg:var(--pl-color-warning-bg)}:scope[data-tone=danger]{--c-alert-tone:var(--pl-color-danger);--c-alert-tone-bg:var(--pl-color-danger-bg)}.c-alert__close{position:absolute;inset-block-start:var(--pl-space-2);inset-inline-end:var(--pl-space-2)}}:where(.c-alert){position:relative}@media (forced-colors:active){:where(.c-alert){border-color:canvastext}}@scope(.c-progress){:scope{--c-progress-tone:var(--pl-color-accent);--c-progress-height:.375rem;block-size:var(--c-progress-height);border-radius:var(--pl-radius-pill);background:var(--pl-color-surface-2);position:relative;overflow:hidden}.c-progress__bar{border-radius:var(--pl-radius-pill);background:var(--c-progress-tone);block-size:100%;transition:inline-size var(--pl-duration-3) var(--pl-ease-standard)}:scope[data-tone=success]{--c-progress-tone:var(--pl-color-success)}:scope[data-tone=warning]{--c-progress-tone:var(--pl-color-warning)}:scope[data-tone=danger]{--c-progress-tone:var(--pl-color-danger)}:scope[data-indeterminate] .c-progress__bar{inline-size:40%;animation:c-progress-sweep 1.4s var(--pl-ease-standard) infinite;position:absolute;inset-block:0}}@keyframes c-progress-sweep{0%{inset-inline-start:-40%}to{inset-inline-start:100%}}@media (forced-colors:active){:where(.c-progress){background:canvastext}:where(.c-progress__bar){background:highlight}}@scope(.c-avatar){:scope{--c-avatar-size:2.5rem;inline-size:var(--c-avatar-size);block-size:var(--c-avatar-size);border-radius:var(--pl-radius-pill);background:var(--pl-color-accent);color:var(--pl-color-accent-text);font-size:calc(var(--c-avatar-size) * .4);font-weight:var(--pl-font-weight-semibold);user-select:none;flex-shrink:0;justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:hidden}:scope[data-size=sm]{--c-avatar-size:1.5rem;font-size:var(--pl-text-xs)}:scope[data-size=lg]{--c-avatar-size:3rem;font-size:var(--pl-text-lg)}.c-avatar__img{object-fit:cover;block-size:100%;inline-size:100%}}:where(.c-avatar-group){--c-avatar-group-size:2.5rem;align-items:center;display:inline-flex}:where(.c-avatar-group[data-size=sm]){--c-avatar-group-size:1.5rem}:where(.c-avatar-group[data-size=lg]){--c-avatar-group-size:3rem}:where(.c-avatar-group) .c-avatar{--c-avatar-size:var(--c-avatar-group-size);border:2px solid var(--pl-color-surface);margin-inline-start:calc(var(--c-avatar-group-size) * -.35)}:where(.c-avatar-group) .c-avatar:first-child{margin-inline-start:0}:where(.c-avatar-group__more){inline-size:var(--c-avatar-group-size,2.5rem);block-size:var(--c-avatar-group-size,2.5rem);border-radius:var(--pl-radius-pill);border:2px solid var(--pl-color-surface);background:var(--pl-color-surface-2);color:var(--pl-color-text-muted);font-size:calc(var(--c-avatar-group-size,2.5rem) * .4);font-weight:var(--pl-font-weight-semibold);justify-content:center;align-items:center;margin-inline-start:calc(var(--c-avatar-group-size,2.5rem) * -.35);display:inline-flex}:where(.c-avatar-group[data-size=sm]) .c-avatar-group__more{font-size:var(--pl-text-xs)}:where(.c-avatar-group[data-size=lg]) .c-avatar-group__more{font-size:var(--pl-text-lg)}@media (forced-colors:active){:where(.c-avatar){color:highlighttext;background:highlight}}@scope(.c-tooltip){:scope{--c-tooltip-anchor:--pl-tooltip-anchor;--c-tooltip-bg:var(--pl-color-text);--c-tooltip-text:var(--pl-color-bg);--c-tooltip-pad:var(--pl-space-2) var(--pl-space-3);--c-tooltip-radius:var(--pl-radius-lg);--c-tooltip-font-size:var(--pl-text-sm);--c-tooltip-max-inline:20rem;display:inline-flex;position:relative}.c-tooltip__trigger{anchor-name:var(--c-tooltip-anchor);display:inline-flex}.c-tooltip__body{opacity:0;pointer-events:none;padding:var(--c-tooltip-pad);border-radius:var(--c-tooltip-radius);background:var(--c-tooltip-bg);color:var(--c-tooltip-text);font-size:var(--c-tooltip-font-size);line-height:var(--pl-leading-tight);max-inline-size:var(--c-tooltip-max-inline);text-wrap:balance;box-shadow:var(--pl-shadow-2);z-index:var(--pl-z-overlay);transition:opacity var(--pl-duration-1) var(--pl-ease-standard), display var(--pl-duration-1) var(--pl-ease-standard) allow-discrete;display:none;position:absolute}@supports (position-anchor:--x){.c-tooltip__body{position-anchor:var(--c-tooltip-anchor);position-area:block-start span-inline-end;position-try-fallbacks:flip-block;margin-block-end:var(--pl-space-2)}}:scope:has(.c-tooltip__trigger:hover) .c-tooltip__body,:scope:has(.c-tooltip__trigger:focus-visible) .c-tooltip__body{opacity:1;display:block}@starting-style{:scope:has(.c-tooltip__trigger:hover) .c-tooltip__body,:scope:has(.c-tooltip__trigger:focus-visible) .c-tooltip__body{opacity:0}}}@supports not (position-anchor:--x){:where(.c-tooltip__body){display:none}}@media (forced-colors:active){:where(.c-tooltip__body){color:canvas;background:canvastext;border:1px solid canvastext}}@scope(.c-accordion){:scope{--c-accordion-border:var(--pl-color-border);--c-accordion-bg:var(--pl-color-surface);--c-accordion-radius:var(--pl-radius-xl);--c-accordion-header-pad:var(--pl-space-4);--c-accordion-content-pad:0 var(--pl-space-4) var(--pl-space-4);--c-accordion-gap:var(--pl-space-2);gap:var(--c-accordion-gap);flex-direction:column;display:flex}}@scope(.c-accordion__item){:scope{border:1px solid var(--c-accordion-border,var(--pl-color-border));border-radius:var(--c-accordion-radius,var(--pl-radius-lg));background:var(--c-accordion-bg,var(--pl-color-surface));overflow:hidden}.c-accordion__header{justify-content:space-between;align-items:center;gap:var(--pl-space-3);padding:var(--c-accordion-header-pad,var(--pl-space-4));font-weight:var(--pl-font-weight-semibold);cursor:pointer;user-select:none;list-style:none;display:flex;&::-webkit-details-marker{display:none}&::marker{content:""}}.c-accordion__header:hover{background:var(--pl-color-surface-2)}.c-accordion__header:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:calc(var(--pl-focus-offset) * -1)}.c-accordion__icon{block-size:1.25rem;inline-size:1.25rem;color:var(--pl-color-text-muted);transition:rotate var(--pl-duration-2) var(--pl-ease-standard);flex-shrink:0}:scope[open] .c-accordion__icon{rotate:180deg}.c-accordion__panel{transition:grid-template-rows var(--pl-duration-3) var(--pl-ease-standard);grid-template-rows:0fr;display:grid}:scope[open] .c-accordion__panel{grid-template-rows:1fr}.c-accordion__content{padding:var(--c-accordion-content-pad,0 var(--pl-space-4) var(--pl-space-4));color:var(--pl-color-text-muted);line-height:var(--pl-leading-normal);overflow:hidden}@supports (interpolate-size:allow-keywords){.c-accordion__panel{grid-template-rows:initial;block-size:0;transition:block-size var(--pl-duration-3) var(--pl-ease-standard);display:block;overflow:hidden}:scope[open] .c-accordion__panel{block-size:auto}@starting-style{:scope[open] .c-accordion__panel{block-size:0}}}}@media (forced-colors:active){:where(.c-accordion__item){border-color:buttonborder}:where(.c-accordion__header:focus-visible){outline-color:highlight}}@scope(.c-switch){:scope{--c-switch-track-w:2.75rem;--c-switch-track-h:1.5rem;--c-switch-thumb:calc(var(--c-switch-track-h) - .25rem);--c-switch-gap:var(--pl-space-2);--c-switch-on:var(--pl-color-accent);--c-switch-off:var(--pl-color-surface-2);align-items:center;gap:var(--c-switch-gap);cursor:pointer;user-select:none;display:inline-flex}:scope[disabled],:scope:has(.c-switch__input:disabled){opacity:var(--pl-opacity-disabled);cursor:not-allowed}.c-switch__input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.c-switch__track{inline-size:var(--c-switch-track-w);block-size:var(--c-switch-track-h);border-radius:var(--pl-radius-pill);background:var(--c-switch-off);transition:background-color var(--pl-duration-2) var(--pl-ease-standard);flex-shrink:0;align-items:center;display:inline-flex;position:relative}.c-switch__thumb{inline-size:var(--c-switch-thumb);block-size:var(--c-switch-thumb);background:var(--pl-color-surface);box-shadow:var(--pl-shadow-1);transition:inset-inline-start var(--pl-duration-2) var(--pl-ease-standard);border-radius:50%;position:absolute;inset-inline-start:.125rem}:scope:has(.c-switch__input:checked) .c-switch__track{background:var(--c-switch-on);border-color:#0000}:scope:has(.c-switch__input:checked) .c-switch__thumb{inset-inline-start:calc(var(--c-switch-track-w) - var(--c-switch-thumb) - .125rem)}:scope:has(.c-switch__input:focus-visible) .c-switch__track{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset)}:scope[data-size=sm]{--c-switch-track-w:2.25rem;--c-switch-track-h:1.25rem}:scope[data-size=lg]{--c-switch-track-w:3.25rem;--c-switch-track-h:1.75rem}.c-switch__label{font-size:var(--pl-text-sm);color:var(--pl-color-text)}}@media (forced-colors:active){:where(.c-switch__track){background:buttonface;border-color:buttontext}:where(.c-switch:has(.c-switch__input:checked) .c-switch__track){background:highlight}:where(.c-switch__thumb){background:buttontext}:where(.c-switch:has(.c-switch__input:checked) .c-switch__thumb){background:highlighttext}}@scope(.c-chip){:scope{--c-chip-bg:oklch(from var(--pl-color-accent) calc(l + .35) c h / 10%);--c-chip-text:var(--pl-color-accent);--c-chip-pad:var(--pl-space-1) var(--pl-space-2);--c-chip-gap:var(--pl-space-1);align-items:center;gap:var(--c-chip-gap);padding:var(--c-chip-pad);border-radius:var(--pl-radius-pill);background:var(--c-chip-bg);color:var(--c-chip-text);font-size:var(--pl-text-xs);font-weight:var(--pl-font-weight-medium);line-height:var(--pl-leading-snug);white-space:nowrap;display:inline-flex}@supports not (background:oklch(from red l c h)){:scope{--c-chip-bg:color-mix(in oklab, var(--pl-color-accent), transparent 88%)}}:scope[data-tone=success]{--c-chip-bg:oklch(from var(--pl-color-success) calc(l + .35) c h / 12%);--c-chip-text:var(--pl-color-success-text);@supports not (background:oklch(from red l c h)){--c-chip-bg:color-mix(in oklab, var(--pl-color-success), transparent 86%)}}:scope[data-tone=warning]{--c-chip-bg:oklch(from var(--pl-color-warning) calc(l + .35) c h / 14%);--c-chip-text:var(--pl-color-warning-text);@supports not (background:oklch(from red l c h)){--c-chip-bg:color-mix(in oklab, var(--pl-color-warning), transparent 84%)}}:scope[data-tone=danger]{--c-chip-bg:oklch(from var(--pl-color-danger) calc(l + .35) c h / 12%);--c-chip-text:var(--pl-color-danger-text);@supports not (background:oklch(from red l c h)){--c-chip-bg:color-mix(in oklab, var(--pl-color-danger), transparent 86%)}}:scope[data-size=sm]{--c-chip-pad:.125rem var(--pl-space-2);font-size:.6875rem}.c-chip__remove{block-size:1rem;inline-size:1rem;color:inherit;cursor:pointer;opacity:.7;transition:opacity var(--pl-duration-1) var(--pl-ease-standard);background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:.75rem;line-height:1;display:inline-flex}.c-chip__remove:hover:not(:disabled){opacity:1;background:oklch(from currentColor l c h / 12%)}.c-chip__remove:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:calc(var(--pl-focus-offset) / 2)}}:where(.c-chip-group){gap:var(--pl-space-2);flex-wrap:wrap;align-items:center;display:flex}@media (forced-colors:active){:where(.c-chip){border:1px solid buttonborder}}@scope(.c-drawer){:scope{--c-drawer-inline:min(24rem, 100vi);--c-drawer-block:100vb;--c-drawer-pad:var(--pl-space-4);--c-drawer-gap:var(--pl-space-3);inline-size:var(--c-drawer-inline);block-size:var(--c-drawer-block);-webkit-backdrop-filter:blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));box-shadow:var(--pl-shadow-3);opacity:0;transition:opacity var(--pl-duration-enter) var(--pl-ease-decelerate), transform var(--pl-duration-enter) var(--pl-ease-decelerate), overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete, display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;background:light-dark(oklch(100% 0 0/.96),oklch(17% .04 250/.94));border:0;margin:0;padding:0;inset-block:0;inset-inline:auto 0;transform:translate(100%)}:scope[data-side=start]{inset-inline:0 auto;transform:translate(-100%)}:scope:popover-open{opacity:1;transform:translate(0)}@starting-style{:scope:popover-open{opacity:0;transform:translate(100%)}:scope[data-side=start]:popover-open{transform:translate(-100%)}}:scope::backdrop{background:var(--pl-color-scrim);backdrop-filter:blur(var(--pl-backdrop-blur-scrim)) saturate(var(--pl-backdrop-saturate-scrim))}.c-drawer__header{justify-content:space-between;align-items:center;gap:var(--c-drawer-gap);padding:var(--c-drawer-pad);border-block-end:1px solid color-mix(in oklab, var(--pl-color-border), transparent 40%);display:flex}.c-drawer__title{font-size:var(--pl-text-lg);font-weight:var(--pl-font-weight-semibold)}.c-drawer__body{padding:var(--c-drawer-pad);overflow-y:auto}.c-drawer__footer{gap:var(--c-drawer-gap);padding:var(--c-drawer-pad);border-block-start:1px solid color-mix(in oklab, var(--pl-color-border), transparent 40%);display:flex}}@media (forced-colors:active){:where(.c-drawer){background:canvas;border-color:buttonborder}}:where(.c-toast-stack){z-index:var(--pl-z-toast);gap:var(--pl-space-2);inline-size:min(24rem, calc(100vi - 2 * var(--pl-space-4)));pointer-events:none;flex-direction:column;display:flex;position:fixed;inset-block-end:var(--pl-space-4);inset-inline-end:var(--pl-space-4)}@scope(.c-toast){:scope{--c-toast-tone:var(--pl-color-accent);--c-toast-pad:var(--pl-space-3) var(--pl-space-4);--c-toast-radius:var(--pl-radius-xl);--c-toast-gap:var(--pl-space-3);gap:var(--c-toast-gap);padding:var(--c-toast-pad);border:1px solid color-mix(in oklab, var(--pl-color-border), transparent 25%);border-inline-start:var(--pl-accent-bar-width) solid var(--c-toast-tone);border-radius:var(--c-toast-radius);-webkit-backdrop-filter:blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));box-shadow:var(--pl-shadow-3);pointer-events:auto;opacity:0;transition:opacity var(--pl-duration-enter) var(--pl-ease-decelerate), transform var(--pl-duration-enter) var(--pl-ease-decelerate);interpolate-size:allow-keywords;background:light-dark(oklch(100% 0 0/.96),oklch(17% .04 250/.94));grid-template-columns:auto 1fr auto;align-items:start;display:grid;transform:translate(100%)}:scope[data-visible]{opacity:1;transform:translate(0)}@starting-style{:scope[data-visible]{opacity:0;transform:translate(100%)}}:scope[data-tone=success]{--c-toast-tone:var(--pl-color-success)}:scope[data-tone=warning]{--c-toast-tone:var(--pl-color-warning)}:scope[data-tone=danger]{--c-toast-tone:var(--pl-color-danger)}.c-toast__icon{color:var(--c-toast-tone);flex-shrink:0;align-items:flex-start;display:flex}.c-toast__icon svg{block-size:1.25rem;inline-size:1.25rem}.c-toast__content{gap:var(--pl-space-1);flex-direction:column;min-inline-size:0;display:flex}.c-toast__title{font-weight:var(--pl-font-weight-semibold);font-size:var(--pl-text-sm)}.c-toast__body{font-size:var(--pl-text-sm);color:var(--pl-color-text-muted)}.c-toast__close{border-radius:var(--pl-radius-sm);block-size:1.5rem;inline-size:1.5rem;color:var(--pl-color-text-muted);cursor:pointer;transition:background-color var(--pl-duration-1) var(--pl-ease-standard);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.c-toast__close:hover{background:var(--pl-color-surface-2)}.c-toast__close:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset)}}@media (forced-colors:active){:where(.c-toast){background:canvas;border-color:buttonborder}:where(.c-toast__close:focus-visible){outline-color:highlight}}@supports (animation-timeline:scroll()){:where(.c-scroll-progress){--c-progress-tone:var(--pl-color-accent);z-index:var(--pl-z-sticky);block-size:4px;transform-origin:inline-start;background:var(--c-progress-tone);animation:linear c-scroll-progress-grow scroll(root);position:fixed;inset-block-start:0;inset-inline:0}:where(.c-scroll-progress[data-tone=success]){--c-progress-tone:var(--pl-color-success)}:where(.c-scroll-progress[data-tone=warning]){--c-progress-tone:var(--pl-color-warning)}:where(.c-scroll-progress[data-tone=danger]){--c-progress-tone:var(--pl-color-danger)}}@supports not (animation-timeline:scroll()){:where(.c-scroll-progress){display:none}}@media (forced-colors:active){:where(.c-scroll-progress){background:highlight}}@keyframes c-scroll-progress-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@supports (animation-timeline:view()){:where(.c-reveal){animation:linear both c-reveal-enter view();animation-range:entry cover 30%}:where(.c-reveal[data-delay="1"]){animation-range:entry 10% cover 35%}:where(.c-reveal[data-delay="2"]){animation-range:entry 20% cover 40%}:where(.c-reveal[data-delay="3"]){animation-range:entry 30% cover 45%}}@supports not (animation-timeline:view()){:where(.c-reveal){opacity:1;animation:none;transform:none}}@media (forced-colors:active){:where(.c-reveal){opacity:1;animation:none;transform:none}}@keyframes c-reveal-enter{0%{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:translateY(0)}}@scope(.c-breadcrumb){.c-breadcrumb__list{align-items:center;gap:var(--pl-space-1);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.c-breadcrumb__item{align-items:center;gap:var(--pl-space-1);display:inline-flex}.c-breadcrumb__item:not(:last-child):after{content:"/";color:var(--pl-color-text-muted);font-size:var(--pl-text-sm);opacity:.6;margin-inline-start:var(--pl-space-1)}.c-breadcrumb__link{color:var(--pl-color-text-muted);font-size:var(--pl-text-sm);transition:color var(--pl-duration-1) var(--pl-ease-standard);text-decoration:none}.c-breadcrumb__link:hover{color:var(--pl-color-accent);text-decoration:underline}.c-breadcrumb__link:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset);border-radius:var(--pl-radius-sm)}.c-breadcrumb__current{color:var(--pl-color-text);font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-medium)}.c-breadcrumb__item[data-truncate] :is(.c-breadcrumb__link,.c-breadcrumb__current){text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;max-inline-size:8rem;display:inline-block;overflow:hidden}}@supports (rule:1px solid CanvasText){:where(.c-breadcrumb__list){rule:0 auto var(--pl-color-border);rule-visibility-items:between}:where(.c-breadcrumb__item:not(:last-child)):after{content:none}}@media (forced-colors:active){:where(.c-breadcrumb__link){color:linktext}:where(.c-breadcrumb__current){color:canvastext}}@scope(.c-stepper){:scope{--c-stepper-marker-size:2rem;--c-stepper-gap:var(--pl-space-4);align-items:flex-start;gap:var(--c-stepper-gap);margin:0;padding:0;list-style:none;display:flex}.c-stepper__step{align-items:center;gap:var(--pl-space-2);text-align:center;flex-direction:column;flex:1;display:flex;position:relative;&:before{content:"";inset-block-start:calc(var(--c-stepper-marker-size) / 2);inset-inline:calc(50% + var(--c-stepper-marker-size) / 2 + var(--c-stepper-gap) / 2) calc(-50% + var(--c-stepper-marker-size) / 2 + var(--c-stepper-gap) / 2);background:var(--pl-color-border);block-size:2px;z-index:var(--pl-z-base);position:absolute}&:last-child:before{content:none}}.c-stepper__step[data-state=completed]:before{background:var(--pl-color-accent)}.c-stepper__marker{inline-size:var(--c-stepper-marker-size);block-size:var(--c-stepper-marker-size);border:2px solid var(--pl-color-border);background:var(--pl-color-surface);color:var(--pl-color-text-muted);font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-semibold);z-index:var(--pl-z-raised);transition:background-color var(--pl-duration-2) var(--pl-ease-standard), border-color var(--pl-duration-2) var(--pl-ease-standard), color var(--pl-duration-2) var(--pl-ease-standard), box-shadow var(--pl-duration-2) var(--pl-ease-standard);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.c-stepper__step[data-state=completed] .c-stepper__marker{border-color:var(--pl-color-accent);background:var(--pl-color-accent);color:var(--pl-color-accent-text)}.c-stepper__step[data-state=current] .c-stepper__marker{border-color:var(--pl-color-accent);color:var(--pl-color-accent);box-shadow:0 0 0 4px color-mix(in oklab, var(--pl-color-accent), transparent var(--pl-focus-glow-opacity))}.c-stepper__label{font-size:var(--pl-text-sm);color:var(--pl-color-text-muted);line-height:var(--pl-leading-snug)}.c-stepper__step[data-state=current] .c-stepper__label{color:var(--pl-color-text);font-weight:var(--pl-font-weight-semibold)}@container (width<=36rem){:scope{flex-direction:column;gap:0}.c-stepper__step{text-align:start;flex-direction:row;flex:none;align-items:center;padding-block-end:var(--pl-space-4);&:before{inset-block:var(--c-stepper-marker-size) 0;inset-inline:calc(var(--c-stepper-marker-size) / 2) auto;inline-size:2px}}}}:where(.c-stepper){container-type:inline-size}@media (forced-colors:active){:where(.c-stepper__marker){border-color:buttonborder}:where(.c-stepper__step[data-state=completed] .c-stepper__marker){color:highlighttext;background:highlight;border-color:highlight}:where(.c-stepper__step[data-state=current] .c-stepper__marker){border-color:highlight}}@scope(.c-timeline){:scope{--c-timeline-dot-size:.75rem;--c-timeline-line-color:var(--pl-color-border);--c-timeline-gap:var(--pl-space-4);padding-inline:var(--pl-space-1) 0;flex-direction:column;margin:0;list-style:none;display:flex}.c-timeline__item{grid-template-columns:var(--c-timeline-dot-size) 1fr;gap:var(--c-timeline-gap);padding-block-end:var(--pl-space-5);display:grid;position:relative}.c-timeline__item:not(:last-child):before{content:"";inset-block:var(--c-timeline-dot-size) 0;background:var(--c-timeline-line-color);inline-size:2px;position:absolute;inset-inline-start:calc(var(--c-timeline-dot-size) / 2);transform:translate(-50%)}.c-timeline__dot{inline-size:var(--c-timeline-dot-size);block-size:var(--c-timeline-dot-size);background:var(--pl-color-accent);border:2px solid var(--pl-color-surface);box-shadow:0 0 0 2px var(--pl-color-accent);z-index:var(--pl-z-raised);border-radius:50%;margin-block-start:.1875rem}.c-timeline__item[data-tone=success] .c-timeline__dot{background:var(--pl-color-success);box-shadow:0 0 0 2px var(--pl-color-success)}.c-timeline__item[data-tone=warning] .c-timeline__dot{background:var(--pl-color-warning);box-shadow:0 0 0 2px var(--pl-color-warning)}.c-timeline__item[data-tone=danger] .c-timeline__dot{background:var(--pl-color-danger);box-shadow:0 0 0 2px var(--pl-color-danger)}.c-timeline__content{min-inline-size:0}.c-timeline__header{justify-content:space-between;align-items:baseline;gap:var(--pl-space-2);margin-block-end:var(--pl-space-1);display:flex}.c-timeline__title{font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-semibold)}.c-timeline__time{font-size:var(--pl-text-xs);color:var(--pl-color-text-muted);white-space:nowrap}.c-timeline__body{font-size:var(--pl-text-sm);color:var(--pl-color-text-muted);line-height:var(--pl-leading-normal)}}@media (forced-colors:active){:where(.c-timeline__dot){background:highlight;box-shadow:0 0 0 2px highlight}:where(.c-timeline__item:not(:last-child)):before{background:buttonborder}}@scope(.c-textarea-auto){:scope{--c-textarea-max-block:24rem;inline-size:100%;padding:var(--pl-space-3);border:1px solid var(--pl-color-border);border-radius:var(--pl-radius-md);background:var(--pl-color-surface);color:var(--pl-color-text);font:inherit;font-size:var(--pl-text-sm);line-height:var(--pl-leading-normal);resize:vertical;transition:border-color var(--pl-duration-1) var(--pl-ease-standard), box-shadow var(--pl-duration-1) var(--pl-ease-standard)}:scope:focus-visible{border-color:var(--pl-focus-color);box-shadow:0 0 0 4px color-mix(in oklab, var(--pl-focus-color), transparent var(--pl-focus-glow-opacity));outline:none}:scope:user-invalid{border-color:var(--pl-color-danger);box-shadow:0 0 0 4px color-mix(in oklab, var(--pl-color-danger), transparent var(--pl-focus-glow-opacity))}:scope:disabled{opacity:var(--pl-opacity-disabled)}@supports (field-sizing:content){:scope{field-sizing:content;max-block-size:var(--c-textarea-max-block);overflow-y:auto}}}@media (forced-colors:active){:where(.c-textarea-auto){background:canvas;border-color:buttonborder}:where(.c-textarea-auto:focus-visible){outline-color:highlight}}@scope(.c-segmented){:scope{--c-segmented-pad:.125rem;--c-segmented-gap:var(--pl-space-1);--c-segmented-radius:var(--pl-radius-pill);gap:var(--c-segmented-gap);padding:var(--c-segmented-pad);border:1px solid var(--pl-color-border);border-radius:var(--c-segmented-radius);background:var(--pl-color-surface-2);display:inline-flex}.c-segmented__item{justify-content:center;align-items:center;display:inline-flex;position:relative}.c-segmented__item input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.c-segmented__item span{align-items:center;gap:var(--pl-space-1);padding:var(--pl-space-1) var(--pl-space-3);border-radius:var(--c-segmented-radius);color:var(--pl-color-text-muted);font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-medium);cursor:pointer;user-select:none;white-space:nowrap;transition:background-color var(--pl-duration-1) var(--pl-ease-standard), color var(--pl-duration-1) var(--pl-ease-standard);display:inline-flex}.c-segmented__item:has(input:checked) span{background:var(--pl-color-surface);color:var(--pl-color-accent);font-weight:var(--pl-font-weight-semibold);box-shadow:var(--pl-shadow-1)}.c-segmented__item:not(:has(input:checked),:has(input:disabled)) span:hover{color:var(--pl-color-text)}.c-segmented__item:has(input:focus-visible) span{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset)}.c-segmented__item:has(input:disabled) span{opacity:var(--pl-opacity-disabled);cursor:not-allowed}}@media (forced-colors:active){:where(.c-segmented){border-color:buttonborder}:where(.c-segmented__item:has(input:checked) span){color:highlighttext;background:highlight}}@scope(.c-tag-input){:scope{--c-tag-input-pad:var(--pl-space-2);--c-tag-input-gap:var(--pl-space-2);--c-tag-input-min-h:calc(var(--pl-control-block-size) - 2px);align-items:center;gap:var(--c-tag-input-gap);min-block-size:var(--c-tag-input-min-h);padding:var(--c-tag-input-pad);border:1px solid var(--pl-color-border);border-radius:var(--pl-radius-md);background:var(--pl-color-surface);cursor:text;transition:border-color var(--pl-duration-1) var(--pl-ease-standard), box-shadow var(--pl-duration-1) var(--pl-ease-standard);flex-wrap:wrap;display:flex}:scope:focus-within{border-color:var(--pl-focus-color);box-shadow:0 0 0 4px color-mix(in oklab, var(--pl-focus-color), transparent var(--pl-focus-glow-opacity));outline:none}.c-tag-input__field{min-inline-size:6rem;color:inherit;font:inherit;font-size:var(--pl-text-sm);background:0 0;border:0;outline:none;flex:1;padding:0}.c-tag-input__field::placeholder{color:var(--pl-color-text-muted)}@supports (field-sizing:content){.c-tag-input__field{field-sizing:content;min-inline-size:4rem}}}@media (forced-colors:active){:where(.c-tag-input){background:canvas;border-color:buttonborder}}@scope(.c-dropdown){:scope{--c-dropdown-anchor:--pl-dropdown-anchor;--c-dropdown-min-inline:12rem;--c-dropdown-max-block:20rem;display:inline-block;position:relative}.c-dropdown__trigger{align-items:center;gap:var(--pl-space-2);inline-size:100%;min-block-size:var(--pl-control-block-size);padding-inline:var(--pl-control-padding-inline);border:1px solid var(--pl-color-border);border-radius:var(--pl-control-radius);background:var(--pl-color-surface);color:var(--pl-color-text);font:inherit;font-size:var(--pl-text-sm);text-align:start;cursor:pointer;anchor-name:var(--c-dropdown-anchor);transition:border-color var(--pl-duration-1) var(--pl-ease-standard);display:inline-flex}.c-dropdown__trigger:hover{border-color:var(--pl-color-accent)}.c-dropdown__trigger:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset)}.c-dropdown__chevron{block-size:1rem;inline-size:1rem;color:var(--pl-color-text-muted);transition:rotate var(--pl-duration-2) var(--pl-ease-standard);flex-shrink:0;margin-inline-start:auto}.c-dropdown__trigger:has(~.c-dropdown__menu:popover-open) .c-dropdown__chevron{rotate:180deg}.c-dropdown__menu{padding:var(--pl-space-2);min-inline-size:var(--c-dropdown-min-inline);max-block-size:var(--c-dropdown-max-block);border:1px solid color-mix(in oklab, var(--pl-color-border), transparent 30%);border-radius:var(--pl-radius-xl);-webkit-backdrop-filter:blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));box-shadow:var(--pl-shadow-3);opacity:0;transition:opacity var(--pl-duration-enter) var(--pl-ease-decelerate), transform var(--pl-duration-enter) var(--pl-ease-decelerate), overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete, display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;background:light-dark(oklch(100% 0 0/.96),oklch(17% .04 250/.94));margin:0;overflow-y:auto;transform:translateY(-4px)}@supports (position-anchor:--x){.c-dropdown__menu{position-anchor:var(--c-dropdown-anchor);position-area:block-end span-inline-end;position-try-fallbacks:flip-block;margin-block-start:var(--pl-space-1);position:absolute;inset:auto}}.c-dropdown__menu:popover-open{opacity:1;transform:translateY(0)}@starting-style{.c-dropdown__menu:popover-open{opacity:0;transform:translateY(-4px)}}}:where(.c-dropdown__menu)>:is(a,button,[role=option]){align-items:center;gap:var(--pl-space-2);min-block-size:2.25rem;inline-size:100%;padding-inline:var(--pl-space-3);border-radius:var(--pl-radius-sm);color:inherit;font:inherit;font-size:var(--pl-text-sm);text-align:start;cursor:pointer;background:0 0;border:0;text-decoration:none;display:flex}:where(.c-dropdown__menu)>:is(a,button,[role=option]):is(:hover,:focus-visible){background:var(--pl-color-surface-2)}:where(.c-dropdown__menu)>:is(a,button,[role=option]):focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:calc(var(--pl-focus-offset) * -1)}:where(.c-dropdown__menu)>[aria-selected=true]{color:var(--pl-color-accent);font-weight:var(--pl-font-weight-semibold);background:color-mix(in oklab, var(--pl-color-accent), transparent 92%)}@media (forced-colors:active){:where(.c-dropdown__trigger),:where(.c-dropdown__menu){border-color:buttonborder}:where(.c-dropdown__menu)>:is(a,button):focus-visible{outline-color:highlight}}@scope(.c-file-upload){:scope{--c-upload-pad:var(--pl-space-6);--c-upload-gap:var(--pl-space-3);--c-upload-border:2px dashed var(--pl-color-border);--c-upload-radius:var(--pl-radius-lg);cursor:pointer;display:block}.c-file-upload__input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.c-file-upload__zone{justify-content:center;align-items:center;gap:var(--c-upload-gap);padding:var(--c-upload-pad);border:var(--c-upload-border);border-radius:var(--c-upload-radius);background:var(--pl-color-surface-2);text-align:center;transition:border-color var(--pl-duration-2) var(--pl-ease-standard), background-color var(--pl-duration-2) var(--pl-ease-standard);flex-direction:column;display:flex}:scope:hover .c-file-upload__zone,:scope[data-dragging] .c-file-upload__zone{border-color:var(--pl-color-accent);background:color-mix(in oklab, var(--pl-color-accent), transparent 92%)}:scope:has(input:focus-visible) .c-file-upload__zone{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset)}:scope:has(input:disabled){cursor:not-allowed;& .c-file-upload__zone{opacity:var(--pl-opacity-disabled)}}.c-file-upload__icon{block-size:2rem;inline-size:2rem;color:var(--pl-color-text-muted)}.c-file-upload__text{font-size:var(--pl-text-sm);color:var(--pl-color-text-muted)}.c-file-upload__text strong{color:var(--pl-color-text)}}@media (forced-colors:active){:where(.c-file-upload__zone){background:canvas;border-color:buttonborder}}@scope(.c-command){:scope{--c-command-inline:min(36rem, calc(100vi - 2 * var(--pl-space-4)));--c-command-max-block:28rem;inline-size:var(--c-command-inline);max-block-size:var(--c-command-max-block);border-radius:var(--pl-radius-2xl);-webkit-backdrop-filter:blur(var(--pl-backdrop-blur-strong)) saturate(var(--pl-backdrop-saturate-strong));box-shadow:var(--pl-shadow-3);opacity:0;transition:opacity var(--pl-duration-enter) var(--pl-ease-decelerate), transform var(--pl-duration-enter) var(--pl-ease-decelerate), overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete, display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;background:light-dark(oklch(100% 0 0/.94),oklch(17% .04 250/.92));border:none;margin:auto;padding:0;overflow:hidden;transform:scale(.97)translateY(-10px)}:scope:popover-open{opacity:1;transform:scale(1)translateY(0)}@starting-style{:scope:popover-open{opacity:0;transform:scale(.97)translateY(-10px)}}.c-command__search{inline-size:100%;padding:var(--pl-space-4);border:0;border-block-end:1px solid color-mix(in oklab, var(--pl-color-border), transparent 40%);color:var(--pl-color-text);font:inherit;font-size:var(--pl-text-md);background:0 0;outline:none}.c-command__search::placeholder{color:var(--pl-color-text-muted)}.c-command__body{max-block-size:calc(var(--c-command-max-block) - 4rem);padding:var(--pl-space-2);overflow-y:auto}.c-command__group+.c-command__group{margin-block-start:var(--pl-space-2)}.c-command__heading{margin-block:var(--pl-space-2) var(--pl-space-1);padding-inline:var(--pl-space-3);font-size:var(--pl-text-xs);font-weight:var(--pl-font-weight-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--pl-color-text-muted)}.c-command__item{align-items:center;gap:var(--pl-space-3);inline-size:100%;padding:var(--pl-space-2) var(--pl-space-3);border-radius:var(--pl-radius-sm);color:var(--pl-color-text);font:inherit;font-size:var(--pl-text-sm);text-align:start;cursor:pointer;background:0 0;border:0;display:flex}.c-command__item:hover,.c-command__item[data-selected]{background:var(--pl-color-surface-2)}.c-command__item[data-selected]{box-shadow:inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent);color:var(--pl-color-accent)}.c-command__item:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:calc(var(--pl-focus-offset) * -1)}.c-command__icon{block-size:1rem;inline-size:1rem;color:var(--pl-color-text-muted);flex-shrink:0}.c-command__shortcut{padding:.125rem var(--pl-space-1);border-radius:var(--pl-radius-sm);background:var(--pl-color-surface);border:1px solid var(--pl-color-border);font-size:var(--pl-text-xs);color:var(--pl-color-text-muted);font-family:var(--pl-font-mono);margin-inline-start:auto}.c-command__footer{gap:var(--pl-space-4);padding:var(--pl-space-2) var(--pl-space-4);border-block-start:1px solid color-mix(in oklab, var(--pl-color-border), transparent 40%);font-size:var(--pl-text-xs);color:var(--pl-color-text-muted);display:flex}}:where(.c-command)::backdrop{background:var(--pl-color-scrim);backdrop-filter:blur(var(--pl-backdrop-blur-scrim)) saturate(var(--pl-backdrop-saturate-scrim))}@media (forced-colors:active){:where(.c-command){background:canvas;border-color:buttonborder}:where(.c-command__item[data-selected]){color:highlight;box-shadow:inset 2px 0 highlight}}@scope(.c-nav){:scope{--c-nav-gap:var(--pl-space-1);--c-nav-pad:var(--pl-space-2);gap:var(--c-nav-gap);padding:var(--c-nav-pad);flex-direction:column;display:flex}.c-nav__item{align-items:center;gap:var(--pl-space-3);padding:var(--pl-space-2) var(--pl-space-3);border-radius:var(--pl-radius-md);color:var(--pl-color-text-muted);font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-medium);cursor:pointer;transition:background-color var(--pl-duration-1) var(--pl-ease-standard), color var(--pl-duration-1) var(--pl-ease-standard), box-shadow var(--pl-duration-1) var(--pl-ease-standard);text-decoration:none;display:flex}.c-nav__item:hover{background:var(--pl-color-surface-2);color:var(--pl-color-text)}.c-nav__item:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset)}.c-nav__item[aria-current=page],.c-nav__item[aria-current=true]{background:color-mix(in oklab, var(--pl-color-accent), transparent 90%);color:var(--pl-color-accent);font-weight:var(--pl-font-weight-semibold);border-radius:0 var(--pl-radius-md) var(--pl-radius-md) 0;box-shadow:inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent)}.c-nav__item--child{font-size:var(--pl-text-sm);padding-inline-start:calc(var(--pl-space-3) + 1.25rem + var(--pl-space-3))}.c-nav__icon{block-size:1.25rem;inline-size:1.25rem;color:inherit;flex-shrink:0}.c-nav__label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-inline-size:0;overflow:hidden}.c-nav__badge{margin-inline-start:auto}.c-nav__section{gap:var(--pl-space-1);flex-direction:column;display:flex}.c-nav__section-trigger{align-items:center;gap:var(--pl-space-3);padding:var(--pl-space-2) var(--pl-space-3);border-radius:var(--pl-radius-md);color:var(--pl-color-text-muted);font-size:var(--pl-text-sm);font-weight:var(--pl-font-weight-medium);cursor:pointer;user-select:none;transition:all var(--pl-duration-1) var(--pl-ease-standard);list-style:none;display:flex;&::-webkit-details-marker{display:none}&::marker{content:""}}.c-nav__section-trigger:hover{background:var(--pl-color-surface-2);color:var(--pl-color-text)}.c-nav__section-trigger:focus-visible{outline:var(--pl-focus-size) solid var(--pl-focus-color);outline-offset:var(--pl-focus-offset)}.c-nav__chevron{block-size:1rem;inline-size:1rem;color:var(--pl-color-text-muted);transition:rotate var(--pl-duration-2) var(--pl-ease-standard);flex-shrink:0;margin-inline-start:auto}.c-nav__section[open] .c-nav__chevron{rotate:90deg}:scope[data-variant=icons] .c-nav__label,:scope[data-variant=icons] .c-nav__chevron,:scope[data-variant=icons] .c-nav__badge{display:none}:scope[data-variant=icons] .c-nav__item,:scope[data-variant=icons] .c-nav__section-trigger{padding:var(--pl-space-2);justify-content:center}}@media (forced-colors:active){:where(.c-nav__item[aria-current=page]){color:highlighttext;background:highlight}:where(.c-nav__item:focus-visible){outline-color:highlight}}}@layer porchlight.utilities{:where(.u-visually-hidden){clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;block-size:1px!important;inline-size:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}:where(.u-visually-hidden:focus,.u-visually-hidden:active){clip-path:none!important;white-space:normal!important;block-size:auto!important;inline-size:auto!important;margin:0!important;position:static!important}:where(.u-truncate){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:where(.u-flow)>*+*{margin-block-start:var(--u-flow-space,var(--pl-space-4))}:where(.u-surface){background:var(--pl-color-surface);color:var(--pl-color-text);border:1px solid var(--pl-color-border);border-radius:var(--pl-radius-lg)}:where(.u-muted){color:var(--pl-color-text-muted)}:where(.u-full-bleed){inline-size:100vi;margin-inline:calc(50% - 50vi)}}@layer porchlight.enhancements{@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}@supports (container-type:scroll-state){.c-sticky-shell{container-type:scroll-state}.c-sticky-shell__bar{z-index:var(--pl-z-sticky);background:var(--pl-color-surface);transition:box-shadow var(--pl-duration-2) var(--pl-ease-standard), background-color var(--pl-duration-2) var(--pl-ease-standard);position:sticky;inset-block-start:0}@container scroll-state(stuck:top){.c-sticky-shell__bar{box-shadow:var(--pl-shadow-2);background:color-mix(in oklab, var(--pl-color-surface), transparent 18%);-webkit-backdrop-filter:blur(16px)saturate(180%);border-block-end:1px solid color-mix(in oklab, var(--pl-color-border), transparent 55%)}}}@supports (text-box:trim-both cap alphabetic){:where(.c-button,.c-badge,.c-dialog__close){text-box:trim-both cap alphabetic}}@supports (rule:1px solid CanvasText){:where(.l-grid[data-dividers=true]){rule:1px solid var(--pl-color-border);rule-visibility-items:between}}@supports (background:attr(data-color type(<color>))){.c-swatch{background:attr(data-color type(<color>), var(--pl-color-border))}}@supports (view-transition-name:root){@view-transition{navigation:auto}::view-transition-old(root){animation:var(--pl-duration-exit) var(--pl-ease-accelerate) both pl-fade-out}::view-transition-new(root){animation:var(--pl-duration-enter) var(--pl-ease-decelerate) both pl-fade-in}@keyframes pl-fade-out{to{opacity:0}}@keyframes pl-fade-in{0%{opacity:0}}}}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@cawalch/porchlight",
+  "version": "0.1.0",
+  "description": "A no-dependency, native-CSS framework for building accessible, themeable web applications.",
+  "license": "MIT",
+  "type": "module",
+  "homepage": "https://cawalch.github.io/porchlight",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cawalch/porchlight.git",
+    "directory": "packages/porchlight"
+  },
+  "bugs": {
+    "url": "https://github.com/cawalch/porchlight/issues"
+  },
+  "author": "cawalch",
+  "keywords": [
+    "css",
+    "css-framework",
+    "design-system",
+    "component-library",
+    "oklch",
+    "light-dark",
+    "css-layer",
+    "accessible",
+    "wcag",
+    "dark-mode",
+    "no-dependencies",
+    "native-css"
+  ],
+  "style": "dist/porchlight.css",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./porchlight.css",
+    "./porchlight.css": "./porchlight.css",
+    "./dist": "./dist/porchlight.css",
+    "./dist/porchlight.css": "./dist/porchlight.css",
+    "./dist/porchlight.min.css": "./dist/porchlight.min.css",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "porchlight.css",
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepublishOnly": "pnpm build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "lightningcss": "^1.32.0"
+  }
+}

package/porchlight.css

@@ -0,0 +1,62 @@
+/*
+ * Porchlight: entry point
+ * ===========================================================================
+ * Import this single file to load the framework. Each module is self-wrapped
+ * in its `@layer porchlight.<name>` so order is explicit and files are usable
+ * standalone. A bundler (Astro/Vite + Lightning CSS, esbuild, Lightning CSS
+ * standalone) inlines these @imports into one distributable stylesheet.
+ *
+ * Consumers place the framework in the cascade before importing:
+ *
+ *   @layer porchlight, app;
+ *   @import "@cawalch/porchlight/porchlight.css";
+ *
+ * Do NOT add `layer(...)` to this import: modules self-layer.
+ */
+@import "src/00-layer-order.css";
+@import "src/01-reset.css";
+@import "src/02-tokens.css";
+@import "src/03-themes.css";
+@import "src/04-base.css";
+@import "src/05-layout.css";
+@import "src/06-components/button.css";
+@import "src/06-components/field.css";
+@import "src/06-components/card.css";
+@import "src/06-components/badge.css";
+@import "src/06-components/popover-menu.css";
+@import "src/06-components/dialog.css";
+@import "src/06-components/data-table.css";
+@import "src/06-components/tabs.css";
+@import "src/06-components/toolbar.css";
+@import "src/06-components/pagination.css";
+@import "src/06-components/skeleton.css";
+@import "src/06-components/empty-state.css";
+@import "src/06-components/stat.css";
+@import "src/06-components/alert.css";
+@import "src/06-components/progress.css";
+@import "src/06-components/avatar.css";
+@import "src/06-components/tooltip.css";
+@import "src/06-components/accordion.css";
+@import "src/06-components/switch.css";
+@import "src/06-components/chip.css";
+@import "src/06-components/drawer.css";
+@import "src/06-components/toast.css";
+@import "src/06-components/scroll-progress.css";
+@import "src/06-components/reveal.css";
+@import "src/06-components/breadcrumb.css";
+@import "src/06-components/stepper.css";
+@import "src/06-components/timeline.css";
+@import "src/06-components/textarea-auto.css";
+@import "src/06-components/segmented.css";
+@import "src/06-components/tag-input.css";
+@import "src/06-components/dropdown.css";
+@import "src/06-components/file-upload.css";
+@import "src/06-components/command-palette.css";
+@import "src/06-components/nav.css";
+@import "src/07-utilities.css";
+@import "src/08-enhancements.css";
+
+/* ---------------------------------------------------------------------------
+ * Phase 5 (enterprise components) in progress. These are post-1.0 candidates
+ * that shipped early as part of the dashboard integration proof.
+ * ------------------------------------------------------------------------- */

package/src/00-layer-order.css

@@ -0,0 +1,22 @@
+/*
+ * Porchlight  -  layer order
+ * ---------------------------------------------------------------------------
+ * All framework CSS lives inside one top-level layer, `porchlight`. A host
+ * application positions the whole framework in the cascade with a single line:
+ *
+ *   @layer porchlight, app;   <- app overrides Porchlight
+ *   @layer app, porchlight;   <- Porchlight overrides app
+ *
+ * Inside `porchlight`, sub-layers declare a deterministic order. Later layers
+ * win over earlier ones, so components beat base, utilities beat components,
+ * and nothing needs !important.
+ *
+ * PLAN.md's flat `overrides` layer is intentionally dropped: with the
+ * top-level wrap, host overrides live in their own layers outside `porchlight`
+ * (or unlayered, which always wins over layered styles)  -  an internal
+ * overrides layer would be redundant.
+ */
+@layer porchlight {
+  @layer reset, tokens, themes, base, layout, components, utilities,
+    enhancements, print;
+}

package/src/01-reset.css

@@ -0,0 +1,53 @@
+/*
+ * Porchlight  -  reset
+ * ---------------------------------------------------------------------------
+ * Minimal browser normalization. No normalize.css, no opinionated defaults  - 
+ * those belong in the `base` layer. `:where()` keeps specificity at zero so
+ * every rule here is trivially overridable.
+ *
+ * Logical properties throughout (block/inline/start/end) for RTL/LTR parity.
+ * `!important` appears only on `[hidden]`, an accessibility-critical guarantee
+ * that nothing can accidentally un-hide hidden content.
+ */
+@layer porchlight.reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :where(html) {
+    color-scheme: light dark;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+
+  :where(body) {
+    margin: 0;
+    min-block-size: 100dvb;
+  }
+
+  :where(img, svg, video, canvas) {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  :where(button, input, select, textarea) {
+    font: inherit;
+    color: inherit;
+  }
+
+  :where(button, [role="button"], input, select, textarea, summary) {
+    touch-action: manipulation;
+  }
+
+  :where(table) {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  :where([hidden]) {
+    display: none !important;
+  }
+}

package/src/02-tokens.css

@@ -0,0 +1,254 @@
+/*
+ * Porchlight  -  primitive tokens
+ * ===========================================================================
+ * Raw design scales only: fonts, type, leading, spacing, radius, motion,
+ * z-index, brand palette, control sizing, focus geometry, and shadows.
+ *
+ * These are NOT semantic. Semantic foreground/background pairs (bg / surface /
+ * text / border / accent / danger / success / warning) and the theme, density,
+ * reduced-motion, and forced-colors machinery all use light-dark() and land in
+ * the next PR (03-themes.css). Primitives never encode a light/dark decision.
+ *
+ * Registered custom properties (@property) get a type and initial value so they
+ * animate cleanly and inherit predictably. Everything else is a plain custom
+ * property on :root. All values use rem/em/logical units (no px for text or
+ * spacing); OKLCH for color.
+ *
+ * Token prefix: --pl-* (global framework). Component-local tokens are --c-*.
+ */
+@layer porchlight.tokens {
+  @property --pl-motion-scale {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+
+  @property --pl-radius-control {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 0.5rem;
+  }
+
+  @property --pl-focus-size {
+    syntax: "<length>";
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  :root {
+    /* Fonts */
+    --pl-font-sans:
+      system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
+      Cantarell, "Noto Sans", sans-serif;
+    --pl-font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      monospace;
+
+    /* Variable font weight axis hooks  -  app opts in by loading a variable font
+       (e.g. "Inter Variable"). Hard-coded fallbacks are browser defaults. */
+    --pl-font-weight-normal: 400;
+    --pl-font-weight-medium: 500;
+    --pl-font-weight-semibold: 600;
+    --pl-font-weight-bold: 700;
+    --pl-font-weight-black: 900;
+
+    /* Type */
+    --pl-text-xs: clamp(0.75rem, 0.72rem + 0.1vi, 0.8125rem);
+    --pl-text-sm: clamp(0.875rem, 0.84rem + 0.1vi, 0.9375rem);
+    --pl-text-md: 1rem;
+    --pl-text-lg: clamp(1.125rem, 1.05rem + 0.25vi, 1.25rem);
+    --pl-text-xl: clamp(1.25rem, 1.1rem + 0.55vi, 1.625rem);
+    --pl-text-2xl: clamp(1.5rem, 1.2rem + 1vi, 2rem);
+    --pl-text-3xl: clamp(1.875rem, 1.4rem + 1.6vi, 2.75rem);
+    --pl-text-display: clamp(2.5rem, 1.8rem + 3vi, 4.5rem);
+
+    /* Leading */
+    --pl-leading-tight: 1.15;
+    --pl-leading-snug: 1.3;
+    --pl-leading-normal: 1.5;
+    --pl-leading-loose: 1.7;
+
+    /* Spacing */
+    --pl-space-0: 0;
+    --pl-space-1: 0.25rem;
+    --pl-space-2: 0.5rem;
+    --pl-space-3: 0.75rem;
+    --pl-space-4: 1rem;
+    --pl-space-5: 1.25rem;
+    --pl-space-6: 1.5rem;
+    --pl-space-8: 2rem;
+    --pl-space-10: 2.5rem;
+    --pl-space-12: 3rem;
+
+    /* Radius */
+    --pl-radius-xs: 0.25rem;
+    --pl-radius-sm: 0.375rem;
+    --pl-radius-md: 0.5rem;
+    --pl-radius-lg: 0.75rem;
+    --pl-radius-xl: 1rem;
+    --pl-radius-2xl: 1.5rem;
+    --pl-radius-3xl: 2rem;
+    --pl-radius-pill: 999rem;
+
+    /* Motion */
+    --pl-duration-1: calc(120ms * var(--pl-motion-scale));
+    --pl-duration-2: calc(180ms * var(--pl-motion-scale));
+    --pl-duration-3: calc(260ms * var(--pl-motion-scale));
+
+    /* Asymmetric enter/exit: entries feel considered; exits feel snappy. */
+    --pl-duration-enter: calc(220ms * var(--pl-motion-scale));
+    --pl-duration-exit: calc(160ms * var(--pl-motion-scale));
+    --pl-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --pl-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
+    --pl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* subtle overshoot */
+    --pl-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);       /* enter: fast → slow */
+    --pl-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);       /* exit: slow → fast */
+
+    /* Z-index */
+    --pl-z-base: 0;
+    --pl-z-raised: 10;
+    --pl-z-sticky: 100;
+    --pl-z-overlay: 1000;
+    --pl-z-toast: 1100;
+
+    /* Brand  -  raw OKLCH ramp at hue 82 (porchlight amber-gold); scale 1
+       (lightest) → 9 (darkest). Chroma peaks at 0.15 in the mid-steps
+       (brand-5/6) where amber is most vivid on P3 displays; tapers at the
+       extremes to avoid neon yellow at the top and muddy brown at the bottom.
+       The warm hue embodies the name: a porchlight glowing at dusk. */
+    --pl-brand-1: oklch(97% 0.02 82deg);
+    --pl-brand-2: oklch(89% 0.05 82deg);
+    --pl-brand-3: oklch(80% 0.09 82deg);
+    --pl-brand-4: oklch(70% 0.13 82deg);
+    --pl-brand-5: oklch(63% 0.15 82deg);
+    --pl-brand-6: oklch(56% 0.14 82deg);
+    --pl-brand-7: oklch(48% 0.11 82deg);
+    --pl-brand-8: oklch(39% 0.07 82deg);
+    --pl-brand-9: oklch(29% 0.04 82deg);
+
+    /* Semantic colors  -  light/dark via light-dark(), driven by color-scheme.
+       Forced-colors overrides live in 03-themes. Foreground/background are
+       defined as pairs so contrast is intentional, not accidental.
+
+       Dark mode surfaces carry a faint warm chroma (0.008–0.012 at hue 55°)
+       so the dark theme reads as warm charcoal — like a room lit by a
+       porchlight — not cold blue-gray. */
+    --pl-color-bg: light-dark(oklch(98% 0.005 60deg), oklch(14% 0.008 55deg));
+    --pl-color-surface: light-dark(oklch(100% 0 0deg), oklch(18% 0.008 55deg));
+    --pl-color-surface-2: light-dark(
+      oklch(94% 0.008 60deg),
+      oklch(22% 0.012 55deg)
+    );
+    --pl-color-text: light-dark(oklch(20% 0.012 55deg), oklch(96% 0.008 60deg));
+    --pl-color-text-muted: light-dark(
+      oklch(46% 0.015 55deg),
+      oklch(72% 0.012 55deg)
+    );
+
+    /* Border: reduced opacity so it reads as a hint, not a cage.
+       Overlay contexts (dialogs, drawers) use --pl-color-border-overlay
+       which resolves to transparent — shadow + backdrop do the job there. */
+    --pl-color-border: light-dark(
+      oklch(80% 0.015 55deg / 75%),
+      oklch(45% 0.012 55deg / 30%)
+    );
+    --pl-color-border-overlay: transparent;
+    --pl-color-accent: light-dark(var(--pl-brand-7), var(--pl-brand-4));
+    --pl-color-accent-text: light-dark(white, oklch(16% 0.01 55deg));
+    --pl-color-accent-hover: color-mix(
+      in oklab,
+      var(--pl-color-accent),
+      oklch(16% 0.01 55deg) 10%
+    );
+    --pl-color-danger: oklch(60% 0.22 25deg);
+    --pl-color-danger-bg: light-dark(
+      oklch(96% 0.04 25deg),
+      oklch(22% 0.08 25deg)
+    );
+    --pl-color-danger-text: light-dark(
+      oklch(36% 0.18 25deg),
+      oklch(90% 0.06 25deg)
+    );
+    --pl-color-success: oklch(58% 0.18 150deg);
+    --pl-color-success-bg: light-dark(
+      oklch(96% 0.04 150deg),
+      oklch(22% 0.08 150deg)
+    );
+    --pl-color-success-text: light-dark(
+      oklch(34% 0.15 150deg),
+      oklch(82% 0.15 150deg)
+    );
+    --pl-color-warning: oklch(62% 0.19 75deg);
+    --pl-color-warning-bg: light-dark(
+      oklch(96% 0.06 75deg),
+      oklch(24% 0.09 75deg)
+    );
+    --pl-color-warning-text: light-dark(
+      oklch(40% 0.17 75deg),
+      oklch(84% 0.15 75deg)
+    );
+
+    /* Disabled state — uniform dimming for all disabled controls. */
+    --pl-opacity-disabled: 0.5;
+
+    /* Accent bar — the left/inline-start indicator for active/selected states. */
+    --pl-accent-bar-width: 3px;
+
+    /* Overlay scrim — the modal/dialog backdrop tint. */
+    --pl-color-scrim: oklch(0% 0 0deg / 55%);
+
+    /* Controls */
+    --pl-control-block-size: 2.5rem;
+    --pl-control-padding-inline: var(--pl-space-4);
+    --pl-control-gap: var(--pl-space-2);
+    --pl-control-border-width: 1px;
+    --pl-control-radius: var(--pl-radius-control);
+
+    /* Focus — aligned with the warm brand hue for a cohesive ring. */
+    --pl-focus-color: light-dark(
+      oklch(52% 0.14 82deg),
+      oklch(72% 0.13 82deg)
+    );
+    --pl-focus-offset: 2px;
+    --pl-focus-size: 2px;
+
+    /* Focus glow: a translucent ring in the focus color, used by fields and
+       steppers. The opacity is tokenized so all glow rings share the same
+       visual weight regardless of component. */
+    --pl-focus-glow-opacity: 85%;
+
+    /* Backdrop blur tiers for overlay surfaces. Two semantic tiers: a strong
+       blur for centered modals (dialog, command palette) and a medium blur
+       for side-anchored panels (drawer, popover). Mobile variants use the
+       same tier (the -mobile tokens are applied under container queries). */
+    --pl-backdrop-blur: 12px;
+    --pl-backdrop-saturate: 160%;
+    --pl-backdrop-blur-strong: 20px;
+    --pl-backdrop-saturate-strong: 180%;
+
+    /* Scrim (::backdrop): weaker blur for the native top-layer backdrop behind
+       frosted panels — avoids double-blur with the panel's own backdrop-filter. */
+    --pl-backdrop-blur-scrim: 4px;
+    --pl-backdrop-saturate-scrim: 80%;
+
+    /* Shadows  -  multi-layer with a faint warm-hue cast for spatial depth.
+       The inset top-highlight on shadow-2/3 gives elevated surfaces the
+       "lifted from the page" quality common in Linear, Vercel, Notion.
+       Hue 40° in the shadow tint reads as warm ambient light. */
+    --pl-shadow-1:
+      0 1px 2px oklch(0% 0 0deg / 8%),
+      0 1px 4px oklch(30% 0.04 40deg / 6%);
+    --pl-shadow-2:
+      0 4px 8px oklch(0% 0 0deg / 8%),
+      0 8px 24px oklch(25% 0.06 40deg / 12%),
+      inset 0 1px 0 oklch(100% 0 0deg / 6%);
+    --pl-shadow-3:
+      0 8px 16px oklch(0% 0 0deg / 10%),
+      0 24px 64px oklch(20% 0.08 40deg / 18%),
+      inset 0 1px 0 oklch(100% 0 0deg / 8%);
+
+    /* Glow: accent-hued ring for focused/active primary controls. */
+    --pl-shadow-glow:
+      0 0 0 4px color-mix(in oklab, var(--pl-color-accent), transparent 72%);
+  }
+}