@layer reset, base, components, modules, shell, identity, responsive, utilities;
@layer identity {
#accessRequestDialog { border: 1px solid var(--uol-border); border-radius: var(--uol-radius-lg); background: var(--uol-surface); color: var(--uol-ink); width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; }
#accessRequestDialog::backdrop { background: var(--uol-purple-80); opacity: .7; }
.access-request-card { padding: var(--uol-space-5); }
#requestAccessClose { float: right; }
#accessRequestDialog h2 { color: var(--uol-purple); }
#accessRequestForm { display: grid; gap: var(--uol-space-2); }
#accessRequestForm :is(input,select,textarea) { width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; font: inherit; border: 1px solid var(--uol-muted); border-radius: var(--uol-radius-sm); padding: var(--uol-space-2); color: var(--uol-ink); background: var(--uol-surface); }
#accessRequestDialog p { font-size: var(--uol-text-sm); line-height: 1.5; overflow-wrap: anywhere; }
#accessRequestDialog :focus-visible { outline: 3px solid var(--uol-purple); outline-offset: 3px; }
#requestAccessOpen { display: block; min-height: 44px; text-align: left; }
#accessRequestForm[hidden] { display: none; }

#accessReview :is(p,h3) { overflow-wrap: anywhere; }
#accessReview select { max-width: 100%; min-height: 44px; margin: var(--uol-space-2); }
}