/* Image geometry, not the intrinsic bitmap dimensions, determines card alignment. */
.un-pattern-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.un-pattern-picture{position:relative;flex:none;min-width:0;min-height:0;overflow:hidden;width:100%;aspect-ratio:1.05}
.un-pattern-picture img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain}
.un-pattern-caption{flex:1;min-height:96px;justify-content:flex-start;line-height:1.5}
.un-pattern-caption>span{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#homePatternGrid+.gov-culture-feature{margin-top:28px}
@media(max-width:500px){.un-pattern-picture img{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}.un-pattern-caption{min-height:86px}}

/* Input modality is independent from viewport width: large terminals keep desktop navigation. */
html[data-input-mode="touch"] .un-pattern-card:hover{transform:none;box-shadow:var(--shadow-sm)}
html[data-input-mode="touch"] .gov-culture-feature:hover img{transform:none}
html[data-input-mode="touch"] :is(button,[role="button"],.un-nav a,.un-menu a,.yz-tab,.creation-mode-tabs a,.wk-model){min-height:44px;touch-action:manipulation}
html[data-input-mode="touch"] :is(input,select,textarea){font-size:16px}
html[data-input-mode="touch"] .un-nav-actions>button{min-width:44px}
html[data-input-mode="touch"] #page-workshop .wk-panel-heading>button{width:44px;height:44px;min-width:44px;flex:none;border-radius:50%;display:grid;place-items:center;padding:0}
html[data-input-mode="touch"] #page-workshop .wk-tools button,
html[data-input-mode="touch"] #page-workshop .wk-layers button{width:44px;height:44px;min-width:44px}
html[data-input-mode="touch"] #page-workshop .wk-context-heading button{padding:8px 12px;min-height:44px}
html[data-input-mode="touch"] #page-workshop .wk-range{height:36px;touch-action:none}
html[data-input-mode="touch"] #page-workshop .wk-range::-webkit-slider-thumb{width:24px;height:24px}
html[data-input-mode="touch"] #page-workshop .wk-range::-moz-range-thumb{width:24px;height:24px}
html[data-input-mode="touch"] #page-workshop .wk-edit-actions{gap:4px;flex-wrap:wrap}
html[data-input-mode="touch"] #page-workshop .wk-edit-actions button{min-height:44px;padding:8px 10px}
html[data-input-mode="touch"] .wk-viewport canvas{cursor:auto!important}
html[data-input-mode="touch"] :is(.lora-picker__menu,.gov-materials-grid,.un-menu){overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html[data-input-mode="touch"] .wk-stage.has-scene{padding-bottom:230px}
@media(min-width:801px) and (max-height:900px){
 html[data-input-mode="touch"] #page-workshop .wk-layout>.wk-palette{position:sticky;top:100px;max-height:calc(100dvh - 120px);overflow-y:auto;align-self:start}
 html[data-input-mode="touch"] #page-workshop .wk-layout{grid-template-columns:170px minmax(0,1fr)}
 html[data-input-mode="touch"] #page-workshop .wk-stage.is-focused{overflow-y:auto;padding-top:100px;padding-bottom:280px}
 html[data-input-mode="touch"] #page-workshop .wk-stage.is-focused .wk-viewport{max-width:calc((100dvh - 380px) * 1.5);min-width:300px}
}
@media(min-width:801px){html[data-input-mode="touch"] #page-workshop .wk-layout>.wk-palette{position:sticky;top:100px;max-height:calc(100dvh - 120px);overflow-y:auto;align-self:start}}
@media(hover:none){.un-pattern-card:hover{transform:none}.gov-culture-feature:hover img{transform:none}}