/* Brilliant Addresses - search field and language strip.

   The kit shipped its own colours: panel #101214, hover #181B1E - near black,
   built for the Library's dark grey site. On burgundy cloth (#401b16) those
   would reproduce exactly the failure already caught once: dark on dark at
   1.10:1. So the colours are rewritten, not aliased through var().

   One context only here: burgundy cloth. --ink is not used; it is for paper.

   Verified (WCAG, against panel #351511 and hover #4d211b):
     text    #e6d5b4 - 11.48 / 9.39
     section #c6ab7d -  7.52 / 6.15
     gold    #c9a35c -  7.01 / 5.73
   A third, dimmer tone is deliberately absent: on hover it fell to 3.28 and
   failed AA. */


:root{
  --ba-cloth:#401b16;
  --ba-panel:#351511;
  --ba-hover:#4d211b;
  --ba-rule:#5c2a22;
  --ba-text:#e6d5b4;
  --ba-mute:#c6ab7d;
  --ba-gold:#c9a35c;
}

/* --- Search field ------------------------------------------------ */

.lookup{position:relative;max-width:820px;margin:26px auto 0}
.lookup input{width:100%;box-sizing:border-box;background:var(--ba-panel);
 border:1px solid var(--ba-rule);color:var(--ba-text);
 font-family:Georgia,"Times New Roman",serif;font-size:19px;padding:20px 22px;
 border-radius:2px;outline:none;transition:border-color .18s,background .18s}
.lookup input:focus{border-color:var(--ba-gold);background:#2d1210}
.lookup input::placeholder{color:var(--ba-mute);opacity:.75}
.lookup .hint{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:10.5px;
 letter-spacing:.11em;text-transform:uppercase;color:var(--ba-mute);margin-top:8px}

.lkres{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--ba-panel);
 border:1px solid var(--ba-rule);border-top:none;max-height:62vh;overflow-y:auto;display:none}
.lkres.on{display:block}
.lkres a{display:grid;grid-template-columns:104px 1fr auto;gap:12px;padding:10px 15px;
 border-top:1px solid var(--ba-rule);text-decoration:none;align-items:baseline}
.lkres a:hover,.lkres a.sel{background:var(--ba-hover)}
.lkres .c{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:11px;
 letter-spacing:.06em;color:var(--ba-gold)}
.lkres .kd{display:block;font-size:8.5px;letter-spacing:.13em;color:var(--ba-mute);
 font-weight:400;margin-bottom:2px}
.lkres .n{font-family:Georgia,"Times New Roman",serif;font-size:16.5px;color:var(--ba-text)}
.lkres .n small{color:var(--ba-mute);font-size:12.5px;font-style:italic}
.lkres .p{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:10px;
 letter-spacing:.09em;text-transform:uppercase;color:var(--ba-mute);white-space:nowrap}
.lkres .none{padding:16px;color:var(--ba-mute);font-style:italic}

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

/* --- Language strip ---------------------------------------------- */

.lsw{display:flex;flex-wrap:wrap;gap:0;margin:11px 0 0;flex-basis:100%;justify-content:flex-start}
.lsw a{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:9px;letter-spacing:.1em;
 color:var(--ba-mute);text-decoration:none;border:1px solid var(--ba-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(--ba-gold);border-color:var(--ba-gold)}
.lsw a.on{color:var(--ba-gold);border-color:var(--ba-gold)}
/* Machine languages are set quieter than real editions: the difference is
   visible before you tap. */
.lsw a.mt{opacity:.72}
.lsw a.mt:hover{opacity:1}
@media(max-width:760px){
  .lsw{margin:9px 0 0}
  .lsw a{font-size:8.5px;padding:3px 5px;letter-spacing:.03em}
}