/* codist wiki — shared back-home FAB
   monochrome on purpose: colour belongs to the subject pages, not the frame.
   include on every wiki subject page:
     <link rel="stylesheet" href="/assets/fab.css">
     <script src="/assets/fab.js"></script>
*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

.wiki-fab{
  position:fixed;left:24px;bottom:24px;z-index:9999;
  display:flex;align-items:center;gap:0;
  height:52px;width:52px;padding:0;border-radius:100px;
  background:rgba(10,12,14,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(240,238,233,.22);
  box-shadow:0 10px 32px -12px rgba(0,0,0,.6);
  color:#f0eee9;text-decoration:none;overflow:hidden;
  transition:width .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s,transform .25s ease;
}
.wiki-fab .fab-glyph{
  flex:0 0 50px;width:50px;display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;line-height:1;color:#f0eee9;
}
.wiki-fab .fab-label{
  flex:0 0 auto;white-space:nowrap;
  font-family:'Fraunces',serif;font-weight:500;font-size:.9rem;letter-spacing:.04em;color:#f0eee9;
  padding-right:22px;opacity:0;transition:opacity .25s ease;
}
.wiki-fab:hover,.wiki-fab:focus-visible{
  width:168px;
  border-color:rgba(240,238,233,.5);
  box-shadow:0 0 0 1px rgba(240,238,233,.15),0 14px 40px -12px rgba(0,0,0,.7);
  transform:translateY(-2px);
}
.wiki-fab:hover .fab-label,.wiki-fab:focus-visible .fab-label{opacity:1}
.wiki-fab:focus-visible{outline:2px solid #f0eee9;outline-offset:3px}

@media (max-width:520px){
  .wiki-fab{left:16px;bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .wiki-fab,.wiki-fab .fab-label{transition:none}
  .wiki-fab:hover,.wiki-fab:focus-visible{transform:none}
}