/* Shared baseline for the login, demo website and widget shadow root. */
:root,:host{--ae-bg:#f1f5f9;--ae-surface:#ffffff;--ae-text:#0f172a;--ae-muted:#64748b;--ae-border:#e2e8f0;--ae-primary:#2563eb;--ae-primary-hover:#1d4ed8;--ae-navy:#092644;--ae-tint:#eff6ff;--ae-radius:10px;--ae-font:Inter,Arial,sans-serif;--bg:var(--ae-bg);--surface:var(--ae-surface);--white:var(--ae-surface);--text:var(--ae-text);--muted:var(--ae-muted);--border:var(--ae-border);--blue:var(--ae-primary);--navy:var(--ae-navy)}
button,input,select,textarea,.button{font-family:var(--ae-font)}
button,.button,input,select,textarea{border-radius:var(--ae-radius)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--ae-primary);outline-offset:3px}
.submit,.lab-header>button:not(.admin-logout),.lab-actions>button:not(.secondary),.button.primary{background:var(--ae-primary);color:var(--ae-surface);border-color:var(--ae-primary);font-weight:600}
.submit:hover,.lab-actions>button:not(.secondary):hover,.button.primary:hover{background:var(--ae-primary-hover)}
.admin-logout,button.secondary,.guide-list button{background:var(--ae-surface);color:var(--ae-navy);border:1px solid var(--ae-border);border-radius:var(--ae-radius)}
.tile,.select-row,.team-card{border-color:var(--ae-border);border-radius:var(--ae-radius);background:var(--ae-surface);color:var(--ae-text)}
.tile:hover,.team-card:hover{border-color:var(--ae-primary)}
.tile[aria-pressed=true],.select-row[data-active=true],.team-card.active{background:var(--ae-tint);border-color:var(--ae-primary)}
.team-options button,.team-options select,.team-options input:not([type=range]),.select-row select{background:var(--ae-bg);color:var(--ae-text);border:1px solid var(--ae-border);border-radius:var(--ae-radius);padding:10px 15px}
.team-options button[aria-pressed=true]{background:var(--ae-primary);color:var(--ae-surface);border-color:var(--ae-primary)}
.team-options button:hover,.reset:hover{border-color:var(--ae-primary)}
.top{background:var(--ae-navy);color:var(--ae-surface)}
.top .logo{background:transparent;border-radius:50%}
.launcher{background:var(--ae-primary);border:3px solid var(--ae-surface)}
.launcher:hover{background:var(--ae-primary-hover)}
.launcher .badge,.top .logo .badge{background:transparent;padding:5px;color:var(--ae-surface)}
.reset{background:var(--ae-surface);color:var(--ae-navy);border-radius:var(--ae-radius)}
.team-search input{background:var(--ae-bg);border-color:var(--ae-border);border-radius:var(--ae-radius)}
.count{background:var(--ae-tint);color:var(--ae-primary)}
.launcher .launcher-badge{padding:0;border-radius:50%;object-fit:cover}

/* Full-height settings presentation. Existing controls and events are unchanged. */
.panel{inset:15px 0;bottom:15px;right:0;left:0;margin:0 auto;width:min(1200px,calc(100vw - 40px));max-width:calc(100vw - 40px);height:calc(100dvh - 30px);max-height:calc(100dvh - 30px);border-radius:20px;border:1px solid var(--ae-border);box-shadow:0 20px 60px #09264430,0 0 0 100vmax #09264440;animation:none;container-type:inline-size}
.launcher[aria-expanded=true]{visibility:hidden}
.panel .top{padding:25px 30px;gap:20px;min-height:105px}
.panel .top .logo{width:55px;height:55px}
.panel .top h2{font-size:30px;line-height:1.2;margin:0 0 5px}
.panel .top p{display:block;font-size:14px}
.panel .close{width:45px;height:45px;border-radius:10px;font-size:28px}
.panel .intro{padding:20px 30px 15px;font-size:17px;gap:15px}
.panel .total,.panel .count{font-size:14px}
.panel .count{padding:5px 15px}
.panel .team-search{padding:0 30px 15px;position:relative}
.panel .team-search:before{content:'';position:absolute;left:48px;top:16px;width:12px;height:12px;border:2px solid #64748b;border-radius:50%;pointer-events:none}
.panel .team-search:after{content:'';position:absolute;left:61px;top:29px;width:7px;height:2px;transform:rotate(45deg);background:#64748b;pointer-events:none}
.panel .team-search input{width:100%;min-height:50px;padding:12px 15px 12px 45px;font-size:14px;border-radius:12px}
.panel .body{padding:0 30px 20px;scrollbar-width:thin;flex:1;min-height:0}
.panel .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.panel .tile{display:grid;grid-template-columns:45px minmax(0,1fr) 40px;align-items:center;align-content:center;gap:12px;padding:15px;min-height:85px;border-radius:12px;background:white}
.panel .tile .icon{display:grid;place-items:center;background:#eff6ff;border:1px solid #e5edff;border-radius:10px;width:45px;height:45px;margin:0;grid-row:1;grid-column:1}
.panel .tile .icon svg{width:25px;height:25px}
.panel .tile strong{grid-row:1;grid-column:2;font-size:14px;line-height:1.4;padding:0;font-weight:600}
.panel .tile small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.panel .tile:after,.panel .tile[aria-pressed=true]:after{content:'';position:static;grid-row:1;grid-column:3;width:40px;height:24px;border:1px solid #c5cdd8;border-radius:20px;background:radial-gradient(circle at 11px 11px,#fff 0 8px,transparent 9px),#d1d7e0;display:block;box-shadow:inset 0 1px 2px #09264410}
.panel .tile[aria-pressed=true]{border-color:#bfdbfe;background:white}
.panel .tile[aria-pressed=true]:after{border-color:#2563eb;background:radial-gradient(circle at 27px 11px,#fff 0 8px,transparent 9px),#2563eb}
.panel .tile[data-setting=captions]{grid-column:auto;min-height:85px;grid-template-columns:45px minmax(0,1fr) 40px}
.panel .tile[data-setting=captions] .icon{grid-row:1;grid-column:1}
.panel .select-row{min-height:85px;padding:12px 15px;border-radius:12px;display:grid;grid-template-columns:1fr;gap:8px;background:white}
.panel .select-row label{display:flex;align-items:center;gap:10px;font-size:14px}
.panel .select-row .icon{margin:0;height:25px}
.panel .select-row select{margin:0;min-height:35px;padding:5px 10px;font-size:12px;background:#f8fafc}
.panel .team-card{border-radius:12px;background:white;min-height:85px}
.panel .team-card>summary{min-height:85px;flex-direction:row;align-items:center;padding:15px;gap:12px;font-size:14px;padding-right:35px}
.panel .team-card>summary .team-icon{display:grid;place-items:center;width:45px;height:45px;flex-shrink:0;background:#eff6ff;border:1px solid #e5edff;border-radius:10px;font-size:23px}
.panel .team-card>summary small{display:none}
.panel .team-card>summary:after{top:calc(50% - 14px);right:15px}
.panel .team-card[open]>summary:after{top:20px}
.panel .team-card[open]>summary{min-height:70px}
.panel .motion-title{padding:15px;font-size:14px}
.panel .footer{padding:15px 30px;background:#f8fafc}
.panel .footer-actions{align-items:center;gap:20px}
.panel .status{font-size:13px;line-height:1.5;max-height:40px}
.panel .reset{min-height:45px;padding:10px 20px;font-size:13px}
.panel .footnote{display:block;font-size:10px;margin:8px 0 0}
@media(max-width:900px){.panel .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel .top{padding:20px;min-height:90px}.panel .intro{padding:15px 20px;font-size:15px}.panel .body{padding:0 20px 15px}.panel .team-search{padding:0 20px 15px}.panel .team-search:before{left:38px}.panel .team-search:after{left:51px}.panel .footer{padding:12px 20px}.panel .top h2{font-size:26px}}
@media(max-width:540px){.panel{inset:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.panel .top{padding:15px;gap:10px;min-height:80px}.panel .top .logo{width:40px;height:40px}.panel .top h2{font-size:22px}.panel .top p{font-size:11px}.panel .close{width:35px;height:35px}.panel .intro{padding:15px;font-size:14px;gap:5px}.panel .intro-summary{gap:5px}.panel .total,.panel .count{font-size:11px}.panel .count{padding:4px 8px}.panel .team-search{padding:0 15px 12px}.panel .team-search:before{left:33px}.panel .team-search:after{left:46px}.panel .body{padding:0 15px 15px}.panel .grid{gap:8px}.panel .tile{grid-template-columns:30px minmax(0,1fr);gap:8px;padding:10px;min-height:100px}.panel .tile .icon{width:30px;height:35px}.panel .tile strong{font-size:12px}.panel .tile:after,.panel .tile[aria-pressed=true]:after{grid-row:2;grid-column:2}.panel .tile[data-setting=captions]{grid-template-columns:30px minmax(0,1fr);min-height:100px}.panel .team-card>summary{padding:10px 25px 10px 10px;gap:8px;font-size:12px;min-height:100px}.panel .team-card>summary .team-icon{width:30px;height:35px;font-size:20px}.panel .team-card>summary:after{right:8px}.panel .select-row label{font-size:12px}.panel .footer{padding:12px 15px}.panel .status{font-size:11px}.panel .reset{min-width:120px;padding:8px 10px;font-size:11px}}
/* Right-docked full-height panel. */
.panel{inset:15px 15px 15px auto;left:auto;right:15px;margin:0;width:min(420px,calc(100vw - 30px));max-width:min(420px,calc(100vw - 30px))}
.panel .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel .top{padding:20px;gap:15px;min-height:95px}.panel .top h2{font-size:26px}.panel .top .logo{width:45px;height:45px}.panel .top p{font-size:12px}
.panel .intro{padding:15px 20px;font-size:15px}.panel .team-search{padding:0 20px 15px}.panel .team-search:before{left:38px}.panel .team-search:after{left:51px}.panel .body{padding:0 20px 15px}.panel .footer{padding:15px 20px}
.panel .tile{grid-template-columns:40px minmax(0,1fr) 36px;gap:10px;padding:12px}.panel .tile .icon{width:40px;height:40px}.panel .tile strong{font-size:13px}.panel .tile[data-setting=captions]{grid-template-columns:40px minmax(0,1fr) 36px}.panel .tile:after,.panel .tile[aria-pressed=true]:after{width:36px;height:22px;background:radial-gradient(circle at 10px 10px,#fff 0 7px,transparent 8px),#d1d7e0}.panel .tile[aria-pressed=true]:after{background:radial-gradient(circle at 24px 10px,#fff 0 7px,transparent 8px),#2563eb}
@media(max-width:540px){.panel{inset:0 0 0 auto;left:auto;right:0;width:100vw;max-width:100vw;margin:0}.panel .top{padding:15px;min-height:80px;gap:10px}.panel .top h2{font-size:22px}.panel .top p{font-size:11px}.panel .intro{padding:15px;font-size:14px}.panel .team-search{padding:0 15px 12px}.panel .team-search:before{left:33px}.panel .team-search:after{left:46px}.panel .body{padding:0 15px 15px}.panel .footer{padding:12px 15px}.panel .tile,.panel .tile[data-setting=captions]{grid-template-columns:30px minmax(0,1fr)}.panel .tile .icon{width:30px;height:35px}.panel .tile strong{font-size:12px}}
/* Shared dropdown design for every accessibility setting. */
.panel .team-options select,.panel .select-row select{appearance:none;box-sizing:border-box;min-height:45px;min-width:0;max-width:100%;border:1px solid var(--ae-border);border-radius:10px;padding:10px 40px 10px 15px;background-color:var(--ae-bg);color:var(--ae-text);font:400 14px/1.5 var(--ae-font);cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232563eb' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.panel .team-options select:hover,.panel .select-row select:hover{border-color:var(--ae-primary);background-color:var(--ae-tint)}
.panel .team-options select:focus-visible,.panel .select-row select:focus-visible{outline:3px solid var(--ae-primary);outline-offset:3px;border-color:var(--ae-primary)}
.panel select:disabled{opacity:.5;cursor:not-allowed}
.panel select option{background:var(--ae-surface);color:var(--ae-text);font:inherit;padding:10px 15px}
.panel select option:checked{background:var(--ae-tint);color:var(--ae-primary)}
@supports(appearance:base-select){
 .panel .team-options select,.panel .select-row select,.panel select::picker(select){appearance:base-select}
 .panel .team-options select,.panel .select-row select{background-image:none;padding-right:15px}
 .panel select::picker-icon{color:var(--ae-primary);margin-left:15px}
 .panel select::picker(select){border:1px solid var(--ae-border);border-radius:10px;padding:5px;background:var(--ae-surface);color:var(--ae-text);box-shadow:0 10px 25px rgba(9,38,68,.15);max-height:min(350px,50vh);overflow:auto}
 .panel select option{border-radius:5px;min-height:40px;gap:10px}
 .panel select option:hover,.panel select option:focus{background:var(--ae-tint);color:var(--ae-primary)}
 .panel select option:checked{background:var(--ae-primary);color:var(--ae-surface)}
}
@media(forced-colors:active){.panel .team-options select,.panel .select-row select{appearance:auto;background-image:none;border-color:ButtonText}.panel select option:checked{background:Highlight;color:HighlightText}}

/* Header dragging moves the fixed-size panel without resizing it. */
.panel{resize:none;min-width:0;min-height:0;overflow:hidden}
.panel .top{cursor:grab;touch-action:none;user-select:none}
.panel .top:active{cursor:grabbing}
.panel .top button{cursor:pointer;touch-action:auto}
.panel .top:focus-visible{outline:3px solid var(--ae-primary);outline-offset:-3px}
/* Phone sheets leave the host page visible; short viewports retain usable controls. */
@media(max-width:540px){
  .panel{--ae-mobile-sheet-height:min(max(60dvh,calc(500px + env(safe-area-inset-bottom,0px))),calc(100dvh - 72px));inset:auto 0 0;left:0;right:0;margin:0;width:100%;max-width:100%;height:var(--ae-mobile-sheet-height);max-height:var(--ae-mobile-sheet-height);border-radius:18px 18px 0 0;box-shadow:0 -8px 32px #09264426}
  .panel .top,.panel .top:active{cursor:default;touch-action:auto}
}