/* Shared documentation layouts. Keep all controls reachable on small screens. */
@media(max-width:639px){
 .component-detail #preview>div>div:first-child{flex-wrap:wrap}
 .component-detail #preview>div>div:first-child>div:last-child{flex-wrap:wrap}
 main .relative.w-full:has(>[role="tablist"]){min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:thin;scroll-padding-inline:4px}
 main .flex.w-full:has(>.relative.w-full>[role="tablist"]){min-width:0}
 main .relative.inline-flex.items-start.gap-0\.5{min-width:0;max-width:100%;flex-wrap:wrap}
 .component-detail #preview button.button-press-motion,.component-detail #preview a.button-press-motion{max-width:100%}
 .component-detail #preview form .flex.items-center.justify-between{flex-wrap:wrap;gap:8px}
 .component-detail .h-\[26px\].w-full.flex.items-center.justify-between{height:auto;min-height:26px;flex-wrap:wrap;gap:8px}
 main [role="group"]:has(input[autocomplete="one-time-code"]){min-width:0;max-width:100%}
 main [role="group"]:has(input[autocomplete="one-time-code"])>div{flex:1;min-width:0;max-width:48px}
 main input[autocomplete="one-time-code"]{width:100%;min-width:0}
}
/* Gallery samples stay legible inside their own card width. */
.landing-showcase-card:has(>a[href="/components/table"]) .w-\[520px\]{width:100%}
.landing-showcase-card:has(>a[href="/components/table"]) table{width:100%;table-layout:fixed}
.landing-showcase-card:has(>a[href="/components/table"]) th,.landing-showcase-card:has(>a[href="/components/table"]) td{padding:6px 8px;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:16px}
.landing-showcase-card:has(>a[href="/components/tabs"]) [role="tablist"]{width:100%;gap:0}
.landing-showcase-card:has(>a[href="/components/tabs"]) [role="tab"]{min-width:max-content;flex:none;gap:5px;padding-inline:6px}
.landing-showcase-card:has(>a[href="/components/tabs"]) [role="tab"]>span{font-size:12px;gap:4px}
.landing-showcase-card:has(>a[href="/components/pagination"]) nav{gap:2px}
.landing-showcase-card:has(>a[href="/components/pagination"]) button{min-width:24px;width:24px;padding-inline:0}

.landing-showcase-card:has(>a[href="/components/table"]) [aria-hidden="true"].pointer-events-none.absolute.inset-x-0.bottom-0{display:none}

.landing-showcase-card:has(>a[href="/components/web-search"]) .w-\[430px\]{width:calc(100% - 40px)}
.landing-showcase-card:has(>a[href="/components/web-search"]) .agent-progress-loading-text{white-space:normal;overflow-wrap:anywhere}
.landing-showcase-card:has(>a[href="/components/calendar"])>div:first-child,
.landing-showcase-card:has(>a[href="/components/date-picker"])>div:first-child{container-type:inline-size}
.landing-showcase-card:has(>a[href="/components/calendar"]) .w-\[660px\]{scale:calc((100cqw - 32px) / 660px)}
.landing-showcase-card:has(>a[href="/components/date-picker"]) .w-\[700px\]{scale:calc((100cqw - 32px) / 700px)}

/* Keep template promos clear of left navigation and its Settings control. */
@media(min-width:640px){aside[aria-label="Get this template with Xalen UI Pro"]{left:auto;right:12px}}

.dark img[src*="xalen_logo"]{filter:brightness(0) invert(1)}

/* The longer local wordmark must fit beside all mobile header controls. */
@media(max-width:639px){
 header.w-full:has(a[href="/"]>img[alt="Xalen UI"])>div{gap:8px}
 header.w-full:has(a[href="/"]>img[alt="Xalen UI"])>div>div:first-child{flex-shrink:0}
 header.w-full a[href="/"]:has(>img[alt="Xalen UI"]){gap:6px}
 header.w-full a[href="/"]>img[alt="Xalen UI"]{width:24px;height:24px}
 header.w-full a[href="/"]:has(>img[alt="Xalen UI"])>span{white-space:nowrap;font-size:14px}
 header.w-full:has(a[href="/"]>img[alt="Xalen UI"])>div>div:last-child{gap:4px}
}