/* Handheld controls use the same field/command/toolbar tokens as recording,
   the map and the studio. Headset geometry is kept in the separate block below. */
#aroundScreen .around-card{padding:clamp(16px,2.5vw,24px);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-soft)}
#aroundScreen .around-heading,#aroundScreen .around-list-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#aroundScreen .around-heading{margin-bottom:12px}
#aroundTitle{max-width:calc(100% - 54px);white-space:normal}
#aroundTitle::before{display:none!important}
#aroundScreen .around-intro{max-width:760px;color:var(--text-soft);margin:0 0 16px;font-size:var(--ui-field-font-size);line-height:1.6}
#aroundScreen .around-preferences{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:12px}
#aroundScreen .around-field{display:grid;grid-template-rows:minmax(32px,1fr) var(--ui-field-height);gap:8px;min-width:0;margin:0}
#aroundScreen .label-row{gap:8px;color:var(--ui-label-color);font:750 var(--ui-label-size)/1.35 var(--font)}
#aroundScreen .label-text{min-width:0}
#aroundScreen .around-field select{box-sizing:border-box;width:100%;min-width:0;height:var(--ui-field-height);min-height:var(--ui-field-height);padding:0 32px 0 14px;border:1px solid var(--line-strong);border-radius:var(--ui-field-radius);background-color:#fbfdfe;font:400 var(--ui-field-font-size)/1.4 var(--font);color:var(--text)}
#aroundScreen .around-field input[type=range]{width:100%;min-width:0;height:var(--ui-field-height);margin:0;padding:0;accent-color:var(--ui-action-info)}
#aroundScreen .hearing-distance-value{flex:0 0 auto;min-width:58px;font-size:var(--ui-button-label-size);font-variant-numeric:tabular-nums;white-space:nowrap}
#aroundScreen .around-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
#aroundScreen .around-actions{display:flex;flex-wrap:wrap;gap:8px}
#aroundScreen .around-button{height:var(--ui-command-height)!important;min-height:var(--ui-command-height)!important;width:var(--ui-command-width)!important;min-width:var(--ui-command-width)!important;max-width:var(--ui-command-width)!important;padding:0 12px!important;gap:7px!important;border-radius:var(--ui-command-radius)!important;background:var(--around-tone,var(--ui-action-info))!important;color:#fff!important;border:1px solid rgba(20,31,40,.08);box-shadow:var(--ui-control-shadow);font:var(--ui-button-label-weight) var(--ui-button-label-size)/var(--ui-button-label-line-height) var(--font)!important;white-space:normal!important}
#aroundScreen .around-button svg{width:var(--ui-command-icon-size)!important;height:var(--ui-command-icon-size)!important;flex:0 0 auto!important}
#aroundScreen .around-back{width:var(--ui-toolbar-action-size)!important;min-width:var(--ui-toolbar-action-size)!important;max-width:var(--ui-toolbar-action-size)!important;height:var(--ui-toolbar-action-size)!important;min-height:var(--ui-toolbar-action-size)!important;padding:0!important;border-radius:var(--ui-toolbar-action-radius)!important}
#aroundScreen .around-back svg{width:var(--ui-toolbar-action-icon-size,19px)!important;height:var(--ui-toolbar-action-icon-size,19px)!important}
#aroundScreen button:disabled{opacity:.4;cursor:default}
#aroundScreen .around-check{display:flex;align-items:center;gap:8px;min-height:var(--ui-command-height);margin:0;font:700 var(--ui-button-label-size)/1.4 var(--font);color:var(--text-soft)}
#aroundScreen .around-toolbar>.around-check{margin-left:auto}
#aroundScreen .around-check input{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--ui-action-info)}
#aroundScreen .around-stage{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-md);background:#132b30;height:clamp(280px,44vh,480px);color:#f4faf8}
#aroundCanvas{width:100%;height:100%;display:block}
#aroundStageHint{position:absolute;bottom:12px;left:12px;right:12px;max-width:560px;margin:0;padding:10px 12px;background:rgba(10,27,32,.82);border-radius:var(--radius-sm);font-size:var(--ui-button-label-size);line-height:1.5;pointer-events:none;color:#eff8f6}
#aroundScreen .around-feedback{padding:12px 0 16px}
#aroundScreen .around-status{font-size:var(--ui-button-label-size);font-weight:700;line-height:1.5;color:var(--text);margin:0}
#aroundScreen .around-capabilities,#aroundScreen .around-auto-refresh{font-size:var(--ui-micro-label-size);color:var(--text-soft);line-height:1.6;margin:6px 0 0}
#aroundScreen .around-list-heading{margin:0 0 12px}
#aroundScreen .around-list-heading h3{margin:0;font-size:var(--ui-label-size)}
#aroundScreen .around-count{font-size:var(--ui-micro-label-size);color:var(--text-soft);white-space:nowrap}
#aroundScreen .around-library{padding:16px 0;border-top:1px solid var(--line)}
#aroundScreen #aroundEmpty{margin:0;padding:16px;border:1px dashed var(--line-strong);border-radius:var(--radius-md);color:var(--text-soft)}
#aroundScreen .around-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:8px}
#aroundScreen .around-list button.btn-icon{display:flex!important;align-items:center;justify-content:space-between!important;gap:12px!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:72px!important;height:auto!important;text-align:left;white-space:normal!important;padding:12px!important;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--text);box-shadow:none}
#aroundScreen .around-list button.btn-icon>span{line-height:1.4!important;min-width:0}
#aroundScreen .around-list button[aria-pressed=true]{background:color-mix(in srgb,var(--ui-action-play) 9%,var(--surface));border-color:var(--ui-action-play);box-shadow:inset 3px 0 var(--ui-action-play)}
#aroundScreen .around-list strong{display:block;font-size:var(--ui-label-size);overflow-wrap:anywhere}
#aroundScreen .around-list small{display:block;font-weight:400;color:var(--text-soft);font-size:var(--ui-micro-label-size);margin-top:3px}
#aroundScreen .around-list .around-sound-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:var(--radius-sm);color:var(--ui-action-info);background:color-mix(in srgb,var(--ui-action-info) 9%,var(--surface))}
#aroundScreen .around-sound-icon svg{width:18px!important;height:18px!important}
#aroundScreen .around-sound-copy{flex:1}
#aroundScreen .around-list .around-distance{flex-shrink:0;font-size:var(--ui-button-label-size);font-variant-numeric:tabular-nums}
#aroundScreen .around-secondary{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:16px}
#aroundScreen .around-disclosure{min-width:0;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft)}
#aroundScreen .around-disclosure summary{display:flex;align-items:center;gap:8px;min-height:var(--ui-command-height);padding:0 12px;cursor:pointer;list-style:none;color:var(--text-soft);font:750 var(--ui-label-size)/1.35 var(--font)}
#aroundScreen .around-disclosure summary::-webkit-details-marker{display:none}
#aroundScreen .around-disclosure summary::after{content:"";flex:0 0 6px;width:6px;height:6px;margin-left:auto;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg)}
#aroundScreen .around-disclosure[open] summary::after{transform:rotate(225deg)}
#aroundScreen .around-disclosure-content{padding:0 16px 16px;color:var(--text-soft);font-size:var(--ui-button-label-size);line-height:1.65}
#aroundScreen .around-disclosure-content p{margin:12px 0 0}
#aroundScreen .around-adjustments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:8px 0}
#aroundScreen .around-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
#aroundScreen [hidden]{display:none!important}
#aroundScreen :is(button,input,select,summary):focus-visible{outline:2px solid var(--ui-focus-color);outline-offset:3px}
@media(max-width:600px){
 #aroundScreen .around-preferences{padding:12px;gap:12px}
 #aroundScreen .around-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 #aroundScreen .around-actions>.around-button{width:100%!important;min-width:0!important;max-width:none!important}
 #aroundScreen #aroundMask{grid-column:1/-1}
 #aroundScreen .around-toolbar>.around-check{margin-left:0}
 #aroundScreen .around-stage{height:40vh;min-height:260px}
 #aroundScreen .around-guide{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:400px){
 #aroundScreen .around-preferences,#aroundScreen .around-adjustments{grid-template-columns:minmax(0,1fr)}
}

/* Binocular headset controls. */
#aroundScreen .around-stage.is-mask{position:fixed;inset:0;width:100vw;height:100dvh;z-index:12000;border-radius:0;background:#000}
#aroundScreen .is-mask #aroundStageHint{display:none}
#aroundHeadsetUi{position:absolute;inset:0;pointer-events:none}
#aroundScreen .around-eye{position:absolute;top:0;overflow:hidden;container-type:inline-size}
#aroundScreen .around-headset-panel{position:absolute;inset:0;transform-origin:0 0;background:rgba(247,250,251,.9);border-radius:20px;box-shadow:var(--shadow-soft)}
#aroundScreen .around-headset-control{position:absolute;box-sizing:border-box;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px!important;min-width:0!important;max-width:none!important;min-height:0!important;padding:3px!important;margin:0!important;border-radius:12px!important;white-space:normal!important;font:700 clamp(10px,3cqw,16px)/1.2 var(--font)!important;text-align:center;color:var(--text)!important;background:var(--surface-soft)!important;border:1px solid var(--line);box-shadow:none;overflow:hidden}
#aroundScreen button.around-headset-control{pointer-events:auto;color:#fff!important;background:var(--around-tone)!important;width:28.5%!important;height:14%!important}
#aroundScreen .around-headset-control svg{width:clamp(12px,3.8cqw,20px)!important;height:clamp(12px,3.8cqw,20px)!important;flex-shrink:0}
#aroundScreen .around-headset-control span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2!important;overflow-wrap:anywhere}
#aroundScreen .around-headset-control small{font-size:.85em}
#aroundScreen .around-headset-control.is-gazed{outline:3px solid var(--ui-label-icon-color,#bd8429);outline-offset:3px;filter:brightness(1.1)}
#aroundScreen .around-headset-status,#aroundScreen .around-headset-hint{position:absolute;z-index:2;left:7%;right:7%;text-align:center;margin:0;padding:6px 8px;border-radius:10px;background:#132b30e8;color:#fff;font:600 clamp(10px,2.8cqw,14px)/1.35 var(--font);pointer-events:none}
#aroundScreen .around-headset-status{top:3%;max-height:12%;overflow:hidden}
#aroundScreen .around-headset-hint{bottom:1%;font-size:clamp(9px,2.5cqw,12px);line-height:1.2;padding:4px 8px}
#aroundScreen .around-headset-reticle{position:absolute;z-index:3;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(var(--ui-label-icon-color,#bd8429) var(--gaze-progress,0deg),transparent 0);box-shadow:0 0 0 1px #132b30;pointer-events:none}
#aroundScreen .around-headset-reticle::after{content:"";position:absolute;inset:5px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #132b30;background:#132b3055}
#aroundScreen #aroundExitMask{position:absolute;top:max(4px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;opacity:0;pointer-events:none}
#aroundScreen #aroundExitMask:focus-visible{opacity:1;pointer-events:auto}

#introActivityPicker #introAroundBtn{background:var(--ui-action-info);color:#fff;border-color:var(--ui-action-info)}
#introActivityPicker{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){#introActivityPicker{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#aroundScreen *{scroll-behavior:auto}}
/* Per-eye text inherits through the common high-specificity button contract. */
#aroundScreen .around-eye{--ui-button-label-size:clamp(10px,2.9cqw,15px);--ui-button-label-line-height:1.2}
#soundRoutesApp #soundRoutesRoot #aroundScreen .around-headset-control>svg{width:clamp(12px,3.8cqw,20px)!important;height:clamp(12px,3.8cqw,20px)!important;flex:0 0 auto!important}