/* Rough rectangular controls echo the printed logo. Keep the texture on
   pseudo-elements so labels, focus rings and rectangular hit areas stay clear. */
:where(.intro-next,#enterBtn,.intro-language-option,.guide-actions button,.topbar .toggle button,#findCoralBtn,#about .about-social,#about .closeX){isolation:isolate}
:where(.intro-next,#enterBtn,.intro-language-option,.guide-actions button,.topbar .toggle button,#findCoralBtn,#about .about-social,#about .closeX)::before,
:where(.intro-next,#enterBtn,.intro-language-option,.guide-actions button,.topbar .toggle button,#findCoralBtn,#about .about-social,#about .closeX)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
:where(.intro-next,#enterBtn,.intro-language-option,.guide-actions button,.topbar .toggle button,#findCoralBtn,#about .about-social,#about .closeX)::before{
  background:var(--control-fill,transparent);
  clip-path:polygon(1px 2px,14% 1px,28% 2px,40% 1px,54% 2px,66% 1px,80% 2px,
    calc(100% - 2px) 1px,calc(100% - 1px) 27%,calc(100% - 2px) 53%,
    calc(100% - 1px) 75%,calc(100% - 2px) calc(100% - 1px),86% calc(100% - 2px),
    72% calc(100% - 1px),58% calc(100% - 2px),44% calc(100% - 1px),
    30% calc(100% - 2px),16% calc(100% - 1px),2px calc(100% - 2px),
    1px 75%,2px 52%,1px 27%);
}
:where(.intro-next,#enterBtn,.intro-language-option,.guide-actions button,.topbar .toggle button,#findCoralBtn,#about .about-social,#about .closeX)::after{
  background:var(--control-edge,currentColor);
  -webkit-mask:url('../assets/ui/rough-frame.svg') center/100% 100% no-repeat;
  mask:url('../assets/ui/rough-frame.svg') center/100% 100% no-repeat;
}
.intro-next:hover:not(:disabled){--control-fill:var(--ink-soft)}
@media(forced-colors:active){
  :where(.intro-next,#enterBtn,.intro-language-option,.guide-actions button,.topbar .toggle button,#findCoralBtn,#about .about-social,#about .closeX){border:1px solid ButtonText!important}
  .topbar .toggle button.on{outline:2px solid Highlight;outline-offset:2px}
}

/* The search belongs to the language/info controls, not to a second toolbar,
   and is outlined like them. */
#findCoralBtn{position:relative;width:44px;height:44px;touch-action:manipulation;--control-edge:var(--ink-soft)}
#findCoralBtn:hover{--control-edge:var(--ink)}
#findCoralBtn svg{
  display:block;width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}

.visitor-dialog {
  color:#1a1e1f;background:#f4f2ee;border:1px solid #d3d8d4;border-radius:4px;
  padding:0;margin:auto;width:min(780px,calc(100vw - 40px));
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  box-shadow:0 22px 90px #0005;font-family:var(--text);overflow:auto;
  overscroll-behavior:contain;--ink:#1a1e1f;--accent:#1f6f74;
}
.visitor-dialog::backdrop{background:#081a22b8;backdrop-filter:blur(6px)}
/* Both reading surfaces share a frosted, softly lit glass finish. The tint
   adapts to the reef so that the text stays readable in light and dark water. */
#touchGuide,#inspect{
  --glass-ink:#142c31;--glass-soft:#334c50;--glass-muted:#415c60;
  --glass-base:rgba(235,245,241,.78);--glass-fallback:#e8f1ed;
  --glass-edge:rgba(255,255,255,.66);--glass-rule:rgba(23,59,65,.2);
  --glass-glint:rgba(255,255,255,.38);--glass-accent:#205d61;
  --ink:var(--glass-ink);--ink-soft:var(--glass-soft);--ink-faint:var(--glass-muted);
  --line:var(--glass-rule);--line-soft:var(--glass-rule);--accent:var(--glass-accent);
  color:var(--glass-ink);text-align:left;
  background:linear-gradient(135deg,var(--glass-glint),transparent 48%),var(--glass-base);
  border:1px solid var(--glass-edge);border-radius:22px;
  -webkit-backdrop-filter:blur(24px) saturate(125%);
  backdrop-filter:blur(24px) saturate(125%);
  box-shadow:inset 0 1px 0 var(--glass-glint),inset 0 -1px 0 #fff1,0 20px 64px #00151d2e;
}
body.on-dark #touchGuide,body.on-dark #inspect{
  --glass-ink:#f3f9f7;--glass-soft:#dbe9e5;--glass-muted:#dbe9e5;
  --glass-base:rgba(14,33,42,.78);--glass-fallback:#18313c;
  --glass-edge:rgba(222,247,242,.3);--glass-rule:rgba(218,243,239,.2);
  --glass-glint:rgba(224,250,244,.12);--glass-accent:#b8e5db;
}
#touchGuide{width:min(720px,calc(100vw - 48px));text-align:left}
/* Only the card blurs the water; the reef around it stays visible. */
#touchGuide::backdrop{background:#061a2226;backdrop-filter:none;-webkit-backdrop-filter:none}
#touchGuide :focus-visible{outline-color:var(--glass-accent)}
.visitor-dialog h2{font-family:var(--display);font-size:clamp(23px,3vw,30px);font-weight:400;line-height:1.2}
.visitor-dialog p{font-size:15px;line-height:1.6}
.visitor-dialog button,.visitor-dialog select,.visitor-dialog input{min-height:48px;font:inherit;touch-action:manipulation}
.visitor-dialog :focus-visible{outline:3px solid #1f6f74;outline-offset:3px}
.visitor-dialog [hidden]{display:none!important}
.visitor-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.visitor-close{width:48px;flex:none;font-size:27px!important;border:1px solid #bdc5c1;border-radius:50%}
.search-controls{position:sticky;top:0;z-index:1;padding:28px 28px 16px;background:#f4f2ee;border-bottom:1px solid #cdd3cf}
.search-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.search-fields label{display:block;font-size:13px;font-weight:650;margin-bottom:6px}
.search-fields input,.search-fields select{
  width:100%;min-width:0;max-width:100%;padding:11px 12px;color:#1a1e1f;background:#fff;
  border:1px solid #aab6af;border-radius:4px;font-size:16px;
}
.search-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;min-height:48px}
.search-summary p{font-size:13px}
.search-summary button{padding:8px;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.coral-results{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding:8px 28px 24px}
.coral-result{
  display:flex;align-items:center;text-align:left;gap:14px;width:100%;padding:14px 4px;
  border-bottom:1px solid #d5d9d5;border-radius:3px;
}
.coral-result:hover{background:#e5eae4}
.coral-result img{width:68px;height:82px;object-fit:contain;flex:none}
.coral-result>span{min-width:0;overflow-wrap:anywhere}
.coral-result strong{display:block;font-size:16px;line-height:1.35;font-weight:600}
.result-number{display:block;margin-bottom:5px;font-family:var(--display);font-size:11px;letter-spacing:.04em;color:#46635c}
.result-author{display:block;font-size:13px;line-height:1.4;margin-top:4px;color:#455a51}
#coralSearchEmpty{padding:24px 28px 40px}
.guide-content{padding:36px}
.gesture-list{display:grid;grid-template-columns:1fr;gap:22px;list-style:none;padding:0;margin:28px 0}
.gesture-list li{min-width:0}
.gesture-list h3{margin-bottom:5px;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.25}
.gesture-list p{color:var(--glass-soft)}
.guide-view-key{display:grid;gap:16px;margin-top:16px}
.guide-view-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center}
.guide-coral-icon{display:block;width:40px;height:48px;color:var(--glass-ink)}
.guide-coral-icon .coral-shape{fill:currentColor;stroke:none}
.guide-coral-icon .coral-outline{fill:none;stroke:currentColor;stroke-width:.8}
.guide-view-row h4{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.3;margin:0 0 4px}
.guide-view-row p{margin:0}
.guide-note{margin:12px 0 0;color:var(--glass-soft);font-size:13px!important}
.guide-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:26px}
.guide-back{position:relative;margin-right:auto;padding:12px 18px;border-radius:0;color:var(--glass-ink);--control-edge:var(--glass-soft)}
.visitor-primary{display:block;background:#1e514c;color:#fff;border-radius:4px;padding:12px 22px;margin-top:24px;font-weight:600!important}
.visitor-primary:hover{background:#153e39}
#touchGuide .visitor-primary{
  position:relative;margin:0;min-width:140px;border:0;border-radius:0;
  font-family:var(--display);font-size:13px;font-weight:400!important;
  --control-fill:var(--glass-ink);--control-edge:var(--glass-ink);
  background:none;color:var(--glass-fallback);
}
#touchGuide .visitor-primary:hover{background:none;--control-fill:var(--glass-accent);--control-edge:var(--glass-accent)}
#touchGuide .guide-back{font-family:var(--display);font-size:13px}
#touchGuide .guide-back:hover{--control-edge:var(--glass-ink)}
#idleWarning{width:min(450px,calc(100vw - 40px));padding:30px}
#idleWarning p{margin-top:14px}
#idleWarning .visitor-primary{width:100%}
#idleCountdown{font-variant-numeric:tabular-nums}

@media(max-width:900px){
  #findCoralBtn{display:none}
  /* The search shares the last column with the languages instead of opening
     a fourth one, so the views above run the full width and the menu button
     stays where it was. */
  body.menu-open #findCoralBtn{display:flex;grid-column:3;grid-row:4;justify-self:end}
  body.menu-open #langSwitch{grid-column:1 / -1;margin-right:60px}
  .visitor-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
  #touchGuide{width:calc(100vw - 24px)}
  .search-controls{padding:20px 18px 10px}
  .search-fields{grid-template-columns:1fr;gap:10px}
  .visitor-header{margin-bottom:14px}
  .coral-results{grid-template-columns:1fr;padding:4px 18px 20px}
  .coral-result img{width:64px;height:74px}
  .guide-content{padding:26px}
  #coralSearchEmpty{padding:20px}
}
@media(max-width:650px){
  .guide-content{padding:26px 22px}
  .gesture-list{grid-template-columns:1fr;gap:18px;margin:24px 0}
  .gesture-list p{font-size:14px}
  #touchGuide .visitor-primary{min-width:0;padding-inline:18px}
  #touchGuide,#inspect{border-radius:18px}
}
@media(max-height:520px){
  .search-controls{position:static}
}
@media(pointer:coarse){
  #findCoralBtn{width:48px;height:48px}
}
body.exhibition #findCoralBtn{width:48px;height:48px}
body.exhibition .mcentre .enter{min-height:48px;padding:14px 22px;font-size:14px}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #touchGuide,#inspect{background:var(--glass-fallback)}
}
@media(prefers-reduced-transparency:reduce){
  #touchGuide,#inspect{background:var(--glass-fallback);backdrop-filter:none;-webkit-backdrop-filter:none}
}