/* Styles: assets/system/Carousel.css */
/* Reusable System carousel. Content remains in the original direct child cards. */
[data-system-carousel] { --carousel-gap: 18px; min-width: 0; }
/* Reserve whole-card geometry while deferred home collections approach the viewport. */
[data-carousel-defer] { container-type:inline-size; }
[data-carousel-defer]:not([data-carousel-ready]) [data-carousel-track] { width:100%; --pending-columns:1; }
[data-carousel-defer]:not([data-carousel-ready]) [data-carousel-item] { flex-basis:calc((100% - (var(--pending-columns) - 1) * var(--carousel-gap)) / var(--pending-columns)); }
@container(min-width:618px){[data-carousel-defer]:not([data-carousel-ready]):is([data-carousel-max="2"],[data-carousel-max="3"]) [data-carousel-track]{--pending-columns:2}}
@container(min-width:936px){[data-carousel-defer]:not([data-carousel-ready])[data-carousel-max="3"] [data-carousel-track]{--pending-columns:3}}
.carousel-stage { position:relative; min-width:0; }
.carousel-toolbar { display:flex; align-items:center; justify-content:center; gap:16px; margin-block-start:16px; }
.carousel-toolbar .button.icon-button { width:44px; min-height:44px; padding:10px; flex:0 0 44px; }
[data-carousel-prev] .icon { transform:rotate(180deg); }
@media(max-width:520px){.carousel-toolbar{gap:8px}}
[data-carousel-arrows="overlay"] > .carousel-stage > :is([data-carousel-prev],[data-carousel-next]) { position:absolute; z-index:3; top:50%; margin:0; translate:0 -50%; width:44px; height:44px; min-height:44px; padding:10px; border-radius:var(--radius); background:var(--surface); color:var(--text); box-shadow:var(--material-raised); }
[data-carousel-arrows="overlay"] > .carousel-stage > [data-carousel-prev] { inset-inline-start:-18px; }
[data-carousel-arrows="overlay"] > .carousel-stage > [data-carousel-next] { inset-inline-end:-18px; }
@media(max-width:600px){[data-carousel-arrows="overlay"] > .carousel-stage > [data-carousel-prev]{inset-inline-start:-10px}[data-carousel-arrows="overlay"] > .carousel-stage > [data-carousel-next]{inset-inline-end:-10px}}
[data-carousel-viewport] {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: none;
  scroll-padding-inline: 0;
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
[data-carousel-viewport]::-webkit-scrollbar { display: none; }
[data-carousel-ready] [data-carousel-viewport] { touch-action: pan-y pinch-zoom; }
[data-carousel-viewport]:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 5px; }
[data-carousel-track] {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  width: max-content;
  min-width: 0;
  box-sizing: content-box;
  gap: var(--carousel-gap, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-carousel-item] {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
[data-carousel-item][data-carousel-page-start] { scroll-snap-align: start; scroll-snap-stop: normal; }
[data-carousel-viewport][data-carousel-dragging] { cursor: grabbing; scroll-snap-type: none; user-select: none; }
[data-carousel-viewport][data-carousel-dragging] * { user-select: none; cursor: grabbing; }
[data-carousel-pages] { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:clamp(2px,1vw,6px); min-width:0; max-width:100%; }
[data-carousel-pages] .carousel-page {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 0;
  flex: 0 1 32px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}
[data-carousel-pages] .carousel-page::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--border, currentColor);
  border-radius: 50%;
  background: var(--surface, transparent);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
[data-carousel-pages] .carousel-page[aria-current="page"]::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
[data-carousel-pages] .carousel-page:hover::before { background: var(--hover, var(--accent-soft)); }
[data-carousel-pages] .carousel-page[aria-current="page"]:hover::before { background: var(--accent-hover, var(--accent)); }
[data-carousel-pages] .carousel-page:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 1px; }
.carousel-page-number { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-carousel-status] { color: var(--muted-text, inherit); font-size: 14px; font-variant-numeric: tabular-nums; }
[data-carousel-prev]:disabled, [data-carousel-next]:disabled { cursor: default; }
html[data-motion="paused"] [data-carousel-pages] .carousel-page::before { transition: none; }
@media (prefers-reduced-motion: reduce) { [data-carousel-pages] .carousel-page::before { transition: none; } }
@media (forced-colors: active) {
  [data-carousel-pages] .carousel-page::before { border-color: ButtonText; }
  [data-carousel-pages] .carousel-page[aria-current="page"]::before { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
}


/* Author-supplied arrows use data attributes; three paging presentations share semantics. */
[data-carousel-paging="bars"] .carousel-page{width:40px;min-width:0;flex-basis:40px;height:44px;padding:6px;border-radius:4px}
[data-carousel-paging="bars"] .carousel-page::before{width:100%;height:4px;border-radius:1px}
[data-carousel-paging="numbers"] .carousel-page{width:44px;min-width:0;flex-basis:44px;height:44px;padding-inline:3px;font:500 .875rem/1 var(--font-sans);border-radius:8px;border:1px solid var(--line);background:var(--surface)}
[data-carousel-paging="numbers"] .carousel-page::before{display:none}
[data-carousel-paging="numbers"] .carousel-page-number{position:static;width:auto;height:auto;clip-path:none;margin:0;overflow:visible}
[data-carousel-paging="numbers"] .carousel-page[aria-current="page"]{color:var(--selected-text);background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--accent)}

/* Geometry variants preserve the rectangular 44px hit area and unclipped focus ring. */
[data-system-carousel][data-carousel-arrow-shape="round"] :is([data-carousel-prev],[data-carousel-next]) { border-radius:50%; }
[data-system-carousel][data-carousel-arrow-shape="bracket"] :is([data-carousel-prev],[data-carousel-next]) { border-radius:6px; border-inline-width:3px; background:var(--surface-raised,var(--surface)); }
[data-system-carousel][data-carousel-arrow-shape="cut"] :is([data-carousel-prev],[data-carousel-next]) { border-radius:16px 4px 16px 4px; background:var(--accent-soft); color:var(--selected-text); }
[data-carousel-card-shape="chamfer"] [data-carousel-item].content-card { border-radius:28px 8px 28px 8px; }
[data-carousel-card-shape="arch"] [data-carousel-item].content-card { border-radius:28px 28px 10px 10px; }
[data-carousel-card-shape="rail"] [data-carousel-item].content-card { border-radius:8px; border-inline-start:3px solid var(--border); }


/* Styles: assets/utilities.css */
/* Compact, shared utility shell. */
.utility-hero{padding:28px 0 24px}.utility-heading{display:flex;align-items:center;gap:14px}.utility-hero h1{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.045em;line-height:1.15;margin:0}.utility-hero p{font-size:.9rem;line-height:1.65;color:var(--muted-text);margin:12px 0 0;max-width:none}
.utility-logo{display:block;flex:0 0 48px;width:48px;height:48px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#f5f7fb;border:1px solid var(--border)}.utility-logo :where(img,.image-render){width:100%;height:100%;object-fit:contain;aspect-ratio:1}
.utility-section{padding-bottom:56px}.utility-section>.landing-wrap{position:relative;z-index:3}.utility-workbench{position:relative;min-height:300px;padding:clamp(16px,2.2vw,28px);border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 4px 24px #00000005;color:var(--text)}
.utility-placeholder{min-height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px}.utility-spinner{width:40px;height:40px;fill:none;stroke:var(--border);stroke-width:3}.utility-spinner path{stroke:var(--accent);stroke-linecap:round;transform-origin:center;animation:utility-spin .9s linear infinite}
.utility-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.utility-directory-card{display:flex;flex-direction:column;gap:16px;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.utility-directory-card h2{margin:0;font-size:1.25rem}.utility-directory-card p{margin:0;color:var(--muted-text);line-height:1.7;flex:1}.utility-directory-card .button{align-self:flex-start}
@keyframes utility-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.utility-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.utility-hero{padding:22px 0 20px}.utility-hero p{font-size:.85rem}.utility-logo{width:40px;height:40px;flex-basis:40px;border-radius:10px}.utility-workbench{padding:16px;border-radius:12px}.utility-directory{grid-template-columns:1fr}.system-shell-page:has(.utility-page) .brand-product{font-size:.7em;margin-left:4px}}
@media(prefers-reduced-motion:reduce){.utility-spinner path{animation:none}}
.utility-directory-image{display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0c1b2d}.utility-directory-image :where(img,.image-render){width:100%;height:100%;object-fit:cover}
@media(max-width:600px){
 .utility-page .utility-hero{padding:18px 0 16px}.utility-page .utility-section{padding-bottom:24px}
 .utility-page .utility-section>.landing-wrap,.utility-page .utility-hero>.landing-wrap{width:calc(100% - 24px);padding-inline:0}
 .utility-workbench{min-width:0;padding:12px}.utility-workbench :where(input,textarea,select){font-size:16px}
 .utility-workbench :where(.control-frame,.control-group){min-width:0;max-width:100%}
 .utility-workbench :where(button.button){min-height:40px}
 .utility-workbench :where(pre){max-width:100%;overflow:auto}
 .utility-page .utility-directory-card{padding:18px}
}

/* Keep the centered SVG visible until async application state and mounts finish. */
.utility-workbench[data-mounted=loading]{position:relative;height:clamp(300px,48vh,420px);min-height:300px;overflow:hidden}
.utility-workbench[data-mounted=loading]>:not([data-utility-loading]){visibility:hidden}
.utility-workbench>.utility-boot-mask{position:absolute;inset:0;min-height:0;z-index:2;background:var(--background)}

/* SSR launch state: visible before JavaScript, released as soon as loading starts. */
.utility-page:has(.utility-start){min-height:100vh;min-height:100dvh}
.utility-page .utility-workbench:has(.utility-start){min-height:0;padding:0;border:0;background:transparent;box-shadow:none}
.utility-page .utility-placeholder:has(>.utility-start){position:fixed;inset:0;z-index:4;min-height:0;padding:24px;pointer-events:none}
.utility-page .utility-start.button{pointer-events:auto;min-width:200px;min-height:68px;padding:18px 32px;gap:14px;border-radius:999px;font-size:1.125rem;font-weight:700;line-height:1.4;box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 10%,transparent),0 14px 36px color-mix(in srgb,var(--accent) 25%,transparent)}
.utility-start>svg{flex:none;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.utility-page .utility-start.button:focus-visible{outline:3px solid var(--focus);outline-offset:14px}
@media(max-height:600px){.utility-page:has(.utility-start) .utility-hero{padding-block:16px}.utility-page:has(.utility-start) .utility-hero p{display:none}}
@media(forced-colors:active){.utility-page .utility-start.button{border:2px solid ButtonText}}