/* Accessibility Lab only. V12 modal explorer override.
   Native dialog makes background content inert and keeps keyboard focus in the popup. */
.lab12-instruction{display:flex;align-items:center;gap:13px;margin:16px 0 24px;padding:14px 18px;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:1rem;line-height:1.55;max-width:100%}
.lab12-instruction strong{color:var(--text)}
.lab12-instruction-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;background:var(--accent);color:var(--accent-text);border-radius:10px;font-size:1.15rem;font-weight:900}
.lab12-topics{margin-bottom:0;gap:13px}
.lab12-topics>.lab5-topic{min-height:124px;position:relative;padding:18px 56px 18px 18px;border:1px solid var(--line);border-radius:16px;text-align:left;background:var(--surface);box-shadow:0 4px 13px rgba(20,27,40,.025);transform:none;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.lab12-topics>.lab5-topic[aria-pressed]{padding:18px 56px 18px 18px}
.lab12-topics>.lab5-topic:hover{border-color:var(--accent);background:var(--surface-alt);box-shadow:0 12px 25px rgba(20,27,40,.095);transform:translateY(-2px)}
.lab12-topics>.lab5-topic::after{content:'↗';position:absolute;right:17px;bottom:18px;display:grid;place-items:center;height:30px;width:30px;background:var(--surface-alt);border:1px solid var(--line);border-radius:9px;color:var(--accent);font-size:1.15rem;transition:background-color .2s ease,transform .2s ease}
.lab12-topics>.lab5-topic:hover::after{background:var(--accent);color:var(--accent-text);transform:translate(2px,-2px)}
.lab12-topics>.lab5-topic span{display:block;max-width:unset;font-size:1.06rem;line-height:1.42}
.lab12-topics>.lab5-topic small{display:block;font-size:.83rem;line-height:1.45;color:var(--muted)}
.lab12-dialog{box-sizing:border-box;margin:auto;padding:0;max-height:calc(100dvh - 36px);max-width:1120px;width:calc(100% - 48px);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 120px rgba(4,16,32,.25);overflow:hidden}
.lab12-dialog:not([open]){display:none}
.lab12-dialog::backdrop{background:rgba(9,16,27,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.lab12-dialog-content{box-sizing:border-box;max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:var(--surface)}
.lab12-dialog-header{position:sticky;top:0;z-index:5;display:flex;align-items:start;justify-content:space-between;gap:25px;padding:clamp(20px,3vw,30px);border-bottom:1px solid var(--line);background:var(--surface);box-shadow:0 7px 17px rgba(14,23,37,.04)}
.lab12-dialog-heading{min-width:0}
.lab12-dialog-heading h3{font-size:clamp(1.5rem,2.4vw,2.25rem);margin:7px 0 7px}
.lab12-dialog-heading p{font-size:1rem;line-height:1.58;color:var(--muted);max-width:720px;margin:0}
.lab12-close{position:sticky;top:0;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:104px;min-height:46px;padding:10px 16px;border:1px solid var(--border);border-radius:12px;color:var(--text);background:var(--surface);font-size:.93rem;font-weight:800;transition:background-color .2s ease,border-color .2s ease}
.lab12-close:hover{background:var(--surface-alt);border-color:var(--accent)}
.lab12-close span:last-child{font-size:1.05rem}
.lab12-dialog-body{padding:clamp(18px,3vw,30px)}
.lab12-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.lab12-comparison .lab11-state{min-width:0;background:var(--surface-alt);border-color:var(--line);border-radius:16px;padding:17px}
.lab12-comparison .lab11-state h4{font-size:1.2rem}
.lab12-comparison .lab11-preview{min-width:0;padding:10px;border-radius:12px}
.lab12-comparison .lab11-preview-visual{min-height:166px;min-width:0;overflow-wrap:anywhere;padding:14px}
.lab12-comparison .lab11-state-description{font-size:.97rem;line-height:1.67;color:var(--muted)}
.lab12-support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 19px}
.lab12-support .lab11-support-card{background:var(--surface);min-width:0}
.lab12-source-link{display:inline-flex;min-width:0;white-space:normal;align-items:center;gap:7px;margin:0;padding:10px 0;color:var(--link)}
:root[data-theme='contrast'] .lab12-dialog,:root[data-theme='contrast'] .lab12-topics>.lab5-topic,:root[data-theme='contrast'] .lab12-instruction{border:2px solid var(--border)}
@media (prefers-reduced-motion:no-preference){
 :root:not([data-motion='reduce']) .lab12-dialog[open]{animation:lab12-modal-enter .22s cubic-bezier(.19,1,.22,1) both}
 :root:not([data-motion='reduce']) .lab12-dialog[open]::backdrop{animation:lab12-backdrop-enter .22s ease both}
}
@keyframes lab12-modal-enter{from{opacity:0;transform:translateY(8px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes lab12-backdrop-enter{from{opacity:0}to{opacity:1}}
@media(max-width:790px){.lab12-comparison,.lab12-support{grid-template-columns:1fr}.lab12-dialog{width:calc(100% - 28px);max-height:calc(100dvh - 24px)}.lab12-dialog-content{max-height:calc(100dvh - 24px)}.lab12-dialog-header{gap:10px}}
@media(max-width:520px){.lab12-instruction{align-items:start;font-size:.95rem;padding:13px}.lab12-topics{grid-template-columns:1fr;gap:9px}.lab12-topics>.lab5-topic{min-height:95px;padding:13px 55px 13px 15px}.lab12-topics>.lab5-topic::after{right:13px;bottom:16px}.lab12-dialog{border-radius:15px;width:calc(100% - 16px);max-height:calc(100dvh - 12px)}.lab12-dialog-content{max-height:calc(100dvh - 12px)}.lab12-dialog-header{padding:16px 13px}.lab12-dialog-heading h3{font-size:1.35rem}.lab12-dialog-heading p{font-size:.92rem}.lab12-dialog-body{padding:13px}.lab12-close{min-width:46px;height:46px;padding:8px 10px}.lab12-close span:first-child{display:none}.lab12-comparison{gap:12px}.lab12-comparison .lab11-state{padding:11px}.lab12-comparison .lab11-preview{padding:7px}.lab12-comparison .lab11-preview-visual{padding:10px;min-height:130px}}
@media(prefers-reduced-motion:reduce){.lab12-dialog,.lab12-dialog::backdrop,.lab12-topics>.lab5-topic{animation:none!important;transition:none!important}}
:root[data-motion='reduce'] .lab12-dialog,:root[data-motion='reduce'] .lab12-dialog::backdrop,:root[data-motion='reduce'] .lab12-topics>.lab5-topic{animation:none!important;transition:none!important}


/* V13: make use of desktop width without shrinking content. The dialog stays within the viewport. */
@media(min-width:1100px){
 .lab12-dialog{width:calc(100vw - 48px);max-width:1520px;max-height:calc(100dvh - 24px)}
 .lab12-dialog-content{max-height:calc(100dvh - 24px);scrollbar-gutter:stable}
 .lab12-dialog-header{padding:14px clamp(22px,2.1vw,30px);gap:28px}
 .lab12-dialog-body{padding:12px clamp(22px,2.1vw,30px) 14px}
 .lab12-dialog-heading h3{font-size:clamp(1.65rem,1.85vw,2rem);margin:5px 0 5px}
 .lab12-dialog-heading p{max-width:90ch}
 .lab12-comparison{gap:20px}
 .lab12-comparison .lab11-state{padding:12px 16px;gap:9px}
 .lab12-comparison .lab11-preview-visual{min-height:130px;padding:13px 16px}
 .lab12-support{gap:18px;margin:10px 0 4px}
 .lab12-support .lab11-support-card{padding:14px 18px}
}