/* Shared neutral controls; geographic markers keep their category colours. */
html body#opal-ui :is(button,summary,input,select,textarea):not(#map *){
 --control-accent:#fff;
 accent-color:var(--control-accent)!important;
 -webkit-tap-highlight-color:transparent;
}
html body#opal-ui :is(button,summary):not(#map *){
 border-color:#ffffff40!important;
 color:#f4f4f4!important;
}
html body#opal-ui button:not(#map *):is(:hover,:focus,:active,[aria-pressed=true],[aria-selected=true],[aria-expanded=true],.selected,.active,.playing){
 border-color:#fff!important;
 background-color:#252525!important;
 color:#fff!important;
}
html body#opal-ui :is(button,summary,input,select,textarea,a):not(#map *):focus-visible{
 outline:2px solid #fff!important;
 outline-offset:3px!important;
}
html body#opal-ui :is(input,select,textarea):not(#map *):focus{
 border-color:#fff!important;
}
html body#opal-ui .toggle input:checked:not(#map *){
 background:#fff!important;
}
html body#opal-ui .toggle input:checked:not(#map *):before{
 background:#202020!important;
}
html.light-ui body#opal-ui button:not(#map *){
 border-color:#fff!important;
 color:#111!important;
 box-shadow:0 0 0 1px #00000025;
}
html.light-ui body#opal-ui button:not(#map *):is(:hover,:focus,:active,[aria-pressed=true],[aria-selected=true],[aria-expanded=true],.selected,.active,.playing){
 border-color:#fff!important;
 background-color:#e8e8e8!important;
 color:#111!important;
 box-shadow:0 0 0 1px #0005;
}
html.light-ui body#opal-ui :is(button,summary,input,select,textarea,a):not(#map *):focus-visible{
 box-shadow:0 0 0 5px #0003;
}

/* Disclosure headings do not represent a selected mode. */
html body#opal-ui details>summary:not(#map *){background:transparent!important;box-shadow:none!important;}
html body#opal-ui summary:not(#map *):focus:not(:focus-visible){outline:none!important;}

/* Light controls need a contrasting track; white remains the button accent. */
html.light-ui body#opal-ui .toggle input:not(#map *){
 background:#b9bdc2!important;
 box-shadow:none!important;
}
html.light-ui body#opal-ui .toggle input:checked:not(#map *){
 background:#424242!important;
}
html.light-ui body#opal-ui .toggle input:not(#map *):before{
 background:#fff!important;
}
html body#opal-ui #layersPanel .layer-group,
html body#opal-ui #layersPanel .layer-group>summary{
 border:0!important;
 box-shadow:none!important;
 background:transparent!important;
}
html.light-ui body#opal-ui #layersPanel .layer-group>summary svg{
 color:#555!important;
}
html.light-ui body#opal-ui .layer-label svg,
html.light-ui body#opal-ui :is(.panel,.hud-panel) .toggle svg{
 stroke:#626262!important;
 color:#626262!important;
}
html.light-ui body#opal-ui summary:not(#map *){
 color:#111!important;
}
/* Keep the map vignette behind open panels. */
html body#opal-ui :is(.panel,.hud-panel,.country-info:not(.landmark-info)){z-index:6;}
html body#opal-ui summary:not(#map *)::after{color:currentColor!important;}
/* Text inside a mission row shares the row's surface in every state. */
html.light-ui body#opal-ui .launch-mission-row :is(span,strong,small,time){
 background:transparent!important;
 box-shadow:none!important;
}
/* Country navigation uses plain rows rather than individual outlined buttons. */
html body#opal-ui #countriesList button{
 border:0!important;
 box-shadow:none!important;
 background:transparent!important;
}
html body#opal-ui #countriesList button:is(:hover,:focus-visible,:active){
 background:#ffffff12!important;
}
html.light-ui body#opal-ui #countriesList button:is(:hover,:focus-visible,:active){
 background:#ededed!important;
}
/* Popup actions are UI controls, even though their container sits inside the map. */
html.light-ui body#opal-ui #map .mapboxgl-popup-content button{
 background:#fff!important;
 color:#111!important;
 border-color:#c9c9c9!important;
}
html.light-ui body#opal-ui #map .mapboxgl-popup-content button:is(:hover,:active){
 background:#ededed!important;
 border-color:#fff!important;
}
html body#opal-ui #map .mapboxgl-popup-content button:focus-visible{
 outline:2px solid #fff!important;
 outline-offset:3px;
 box-shadow:0 0 0 5px #0003;
}
/* Sliders need an explicit thumb: a white native accent disappears on light panels. */
html body#opal-ui input[type=range]:not(#map *){
 appearance:none;
 -webkit-appearance:none;
 height:20px;
 padding:0!important;
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 cursor:pointer;
}
html body#opal-ui input[type=range]:not(#map *)::-webkit-slider-runnable-track{
 height:4px;background:#777;border-radius:4px;
}
html body#opal-ui input[type=range]:not(#map *)::-webkit-slider-thumb{
 appearance:none;-webkit-appearance:none;
 width:14px;height:14px;margin-top:-5px;
 border-radius:50%;border:2px solid #333;background:#fff;
}
html body#opal-ui input[type=range]:not(#map *)::-moz-range-track{
 height:4px;background:#777;border-radius:4px;
}
html body#opal-ui input[type=range]:not(#map *)::-moz-range-thumb{
 width:12px;height:12px;border-radius:50%;border:2px solid #333;background:#fff;
}
html.light-ui body#opal-ui input[type=range]:not(#map *)::-webkit-slider-thumb{
 background:#333;border-color:#fff;
}
html.light-ui body#opal-ui input[type=range]:not(#map *)::-moz-range-thumb{
 background:#333;border-color:#fff;
}
html body#opal-ui button.close:not(#map *){
 display:grid;place-items:center;
 border:0!important;box-shadow:none!important;background:transparent!important;
 line-height:1;padding:0;
}
html body#opal-ui button.close:not(#map *) svg{
 width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
}
/* Photo buttons must keep their image beneath the neutral button chrome. */
html body#opal-ui button.visitor-photo-thumb{
 background-image:url('assets/visitor-contact-sheet.png')!important;
 background-size:400% 200%!important;
 background-repeat:no-repeat!important;
 background-position:var(--visitor-photo-position,0% 100%)!important;
}
/* Search results are list rows, without the shared button-card outline. */
html body#opal-ui .global-search-results button{
 border:0!important;
 box-shadow:none!important;
 background:transparent!important;
}
html body#opal-ui .global-search-results button:is(:hover,:focus-visible,:active){
 background:#ffffff12!important;
}
html.light-ui body#opal-ui .global-search-results button:is(:hover,:focus-visible,:active){
 background:#ededed!important;
}
html body#opal-ui input[type=search]::-webkit-search-cancel-button{
 -webkit-appearance:none;
 width:14px;height:14px;cursor:pointer;
 background:center/14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eeeeee' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
}
html.light-ui body#opal-ui input[type=search]::-webkit-search-cancel-button{
 filter:brightness(.15);
}
/* Keep review photographs independent of theme button background resets. */
html body#opal-ui button.visitor-photo-thumb{
 position:relative;overflow:hidden;padding:0!important;
}
html body#opal-ui button.visitor-photo-thumb>img{
 position:absolute;top:-100%;width:400%;height:200%;
 max-width:none;max-height:none;object-fit:fill;pointer-events:none;
}
/* Close controls stay plain on hover in both themes. */
html body#opal-ui button.close:not(#map *):is(:hover,:focus,:active),
html.light-ui body#opal-ui button.close:not(#map *):is(:hover,:focus,:active),
html body#opal-ui #map button.mapboxgl-popup-close-button:is(:hover,:focus,:active),
html.light-ui body#opal-ui #map button.mapboxgl-popup-close-button:is(:hover,:focus,:active){
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
}
.landmark-broadcast{margin:24px 0;padding:16px 0;border-top:1px solid #8884;border-bottom:1px solid #8884}
.landmark-broadcast h3{margin:0 0 8px;font-size:15px}
.landmark-broadcast p{font-size:13px;line-height:1.6}
.landmark-broadcast audio{display:block;width:100%;height:42px;margin:16px 0;color-scheme:dark}
html.light-ui .landmark-broadcast audio{color-scheme:light}
.landmark-broadcast a{display:inline-block;color:inherit;text-underline-offset:4px;font-size:13px}
.paradise-player,.thessarapolis-tour{position:fixed;z-index:16;background:#101112f5;color:#eee;border:1px solid #ffffff40;border-radius:18px;padding:18px;box-shadow:0 8px 30px #0003;box-sizing:border-box;font-family:inherit}
.paradise-player{left:82px;bottom:40px;width:340px;max-width:calc(100vw - 160px)}
.paradise-player .close,.thessarapolis-tour .close{position:absolute;right:10px;top:9px;width:28px;height:28px;font-size:22px}
html body#opal-ui .paradise-title{background:transparent!important;border:0!important;box-shadow:none!important;padding:0 25px 0 0;font-size:15px;font-weight:650;text-align:left}
.paradise-player small{display:block;font-size:11px;opacity:.75;margin:6px 0 12px}
.paradise-controls,.paradise-panel-actions,.city-tour-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.paradise-controls{flex-wrap:nowrap;margin-bottom:10px}
.paradise-controls button,.city-tour-controls button,.paradise-player>button:not(.close):not(.paradise-title),.paradise-panel-actions button{padding:8px 11px;border:1px solid #ffffff40;border-radius:20px;background:transparent;color:inherit;font:inherit;font-size:12px}
.paradise-controls input{min-width:55px;width:100%;flex:1}
.paradise-panel-actions{margin:14px 0}
.thessarapolis-tour{left:82px;top:110px;width:330px;max-width:calc(100vw - 160px)}
.thessarapolis-tour small{font-size:12px;opacity:.7}
.thessarapolis-tour h2{font-size:21px;line-height:1.3;margin:12px 10px 12px 0}
.thessarapolis-tour p{font-size:13px;line-height:1.65;margin:0 0 16px}
html.light-ui .paradise-player,html.light-ui .thessarapolis-tour{background:#fff;color:#111;border-color:#0002}
@media(max-width:700px){.paradise-player{left:66px;bottom:38px;max-width:calc(100vw - 132px);padding:13px}.thessarapolis-tour{left:66px;top:90px;max-width:calc(100vw - 132px);padding:14px}.thessarapolis-tour h2{font-size:17px}.thessarapolis-tour p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.paradise-controls{gap:5px}.paradise-controls button{padding:7px 8px}}
@media(max-height:650px){.thessarapolis-tour p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.thessarapolis-tour{top:85px}.paradise-player{bottom:30px}}
/* New floating controls use the same readable surface in each theme. */
html body#opal-ui :is(.paradise-player,.thessarapolis-tour) button:not(.close):not(.paradise-title){background:#151515!important;color:#eee!important}
html.light-ui body#opal-ui :is(.paradise-player,.thessarapolis-tour) button:not(.close):not(.paradise-title){background:#fff!important;color:#111!important}
html.light-ui body#opal-ui :is(.paradise-player,.thessarapolis-tour) button:not(.close):not(.paradise-title):is(:hover,:active,[aria-pressed=true]){background:#e8e8e8!important}
/* Local places follow the landmark badge system at a quieter size. */
.poi-popup-heading{display:flex;align-items:center;gap:10px;margin:4px 18px 10px 0}
.poi-popup-badge{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--poi-color)}
.poi-popup-badge svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html body#opal-ui #map .poi-popup-heading .poi-popup-title{color:var(--poi-color)!important;font-size:16px;font-weight:650;line-height:1.35}
html body#opal-ui #map .poi-popup-badge svg{color:#fff!important;stroke:#fff!important}
.opal-place-popup .place-meta{font-size:12px;opacity:.75;line-height:1.5;margin:8px 0}
.opal-place-popup .place-card p{font-size:13px;line-height:1.6}