/* Beach Matters — register search and language bar.

   Ported from the Brilliant Addresses kit, which came from the Library kit.
   Colours are rewritten rather than aliased: that kit ran on burgundy cloth,
   this site runs on the Atlantic navy of the mark, and dark-on-dark is exactly
   the failure those notes warn about.

   Checked (WCAG, against panel #0C2A3B and hover #16405A):
     text   #E8DCC8 — 10.99 / 8.09
     mute   #9DB4C2 —  6.91 / 5.09
     gold   #D6A96E —  6.92 / 5.10

   The coral used elsewhere on the site is deliberately not used here: against
   the panel it reaches 4.49 and on hover falls to 3.31, which fails AA. Gold
   from the mark carries the accent instead, which also ties the panel to the
   logo. */

:root{
  --bm-panel:#0C2A3B;
  --bm-field:#08202E;
  --bm-hover:#16405A;
  --bm-rule:#20475F;
  --bm-text:#E8DCC8;
  --bm-mute:#9DB4C2;
  --bm-gold:#D6A96E;
}

/* ── Search field ─────────────────────────────────────────────────── */

.lookup{position:relative;max-width:720px;margin:0 auto}
.lookup input{
  width:100%;box-sizing:border-box;background:rgba(247,243,236,.94);
  border:1px solid rgba(12,42,59,.3);color:#16232B;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;padding:.92rem 1.05rem;border-radius:2px;outline:none;
  transition:border-color .18s;
}
.lookup input:focus{border-color:var(--bm-gold)}
.lookup input::placeholder{color:#6E7C84}
.lookup .hint{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--bm-mute);
  margin-top:8px;opacity:.85;
}
body.home .lookup .hint{color:#3E5A6B;opacity:.75}

/* On inner pages the field sits in a navy strip under the masthead. */
.searchbar{background:var(--bm-panel);padding:.75rem var(--pad)}
.searchbar .lookup{max-width:var(--max)}
.searchbar .lookup input{
  background:var(--bm-field);border-color:var(--bm-rule);color:var(--bm-text);
  font-size:15px;padding:.6rem .8rem;
}
.searchbar .lookup input::placeholder{color:var(--bm-mute);opacity:.8}
.searchbar .hint{display:none}

.lkres{
  position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--bm-panel);
  border:1px solid var(--bm-rule);max-height:62vh;overflow-y:auto;display:none;
  text-align:left;box-shadow:0 18px 40px rgba(8,32,46,.32);
}
.lkres.on{display:block}
.lkres a{
  display:grid;grid-template-columns:112px 1fr auto;gap:12px;padding:10px 15px;
  border-top:1px solid var(--bm-rule);text-decoration:none;align-items:baseline;
}
.lkres a:first-child{border-top:none}
.lkres a:hover,.lkres a.sel{background:var(--bm-hover)}
.lkres .c{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  letter-spacing:.05em;color:var(--bm-gold);
}
.lkres .kd{
  display:block;font-size:8.5px;letter-spacing:.13em;color:var(--bm-mute);
  font-weight:400;margin-bottom:2px;
}
.lkres .n{font-family:var(--display),Georgia,serif;font-size:16px;color:var(--bm-text)}
.lkres .n small{color:var(--bm-mute);font-size:12px;font-style:italic}
.lkres .p{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--bm-mute);white-space:nowrap;
}
.lkres .none{padding:16px;color:var(--bm-mute);font-style:italic}

@media(max-width:640px){
  .lookup input{font-size:16px}
  /* three columns do not fit a phone: the code goes, name and place stay */
  .lkres a{grid-template-columns:1fr auto;gap:8px}
  .lkres .c{display:none}
}

/* ── Language bar ─────────────────────────────────────────────────── */

.lsw{display:flex;flex-wrap:wrap;gap:0;margin:1.1rem 0 0}
.lsw a{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.1em;
  color:var(--bm-mute);text-decoration:none;border:1px solid var(--bm-rule);padding:3px 6px;
  line-height:1.3;transition:color .15s,border-color .15s;
}
.lsw a+a{border-left:none}
.lsw a:hover{color:var(--bm-gold);border-color:var(--bm-gold)}
.lsw a.on{color:var(--bm-gold);border-color:var(--bm-gold)}
/* Machine translations are set quieter than the edition: the difference is
   visible before the click, not after it. */
.lsw a.mt{opacity:.7}
.lsw a.mt:hover{opacity:1}
.lsw-note{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;
  letter-spacing:.06em;color:var(--bm-mute);opacity:.65;margin:.5rem 0 0;
  max-width:52ch;line-height:1.5;text-transform:none;
}
@media(max-width:760px){
  .lsw a{font-size:8.5px;padding:3px 5px;letter-spacing:.03em}
}

/* In the masthead the bar is a third row: it wraps to full width under the
   navigation rather than competing with it. Empty until the script fills it,
   so it takes no space if JavaScript never runs. */
.masthead .lsw{flex-basis:100%;margin:.55rem 0 0}
.masthead .lsw:empty{display:none}