/* The note a tapped thing puts up (lab.js): its name, a line about it, More to
   open its page if it has one, and a way to put it away. The same dark glass
   as the ways to reach Elwin, and it sits just above them when they are showing. */

#note { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 30;
        box-sizing: border-box; width: min(340px, calc(100vw - 32px)); padding: 13px 52px 6px 18px;
        border-radius: 22px; color: #f3e7cf; font: 14px/1.4 -apple-system, system-ui, sans-serif;
        background: rgba(22, 15, 10, .68); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
        border: 1px solid rgba(217, 180, 106, .28); box-shadow: 0 10px 30px rgba(0,0,0,.35);
        opacity: 0; visibility: hidden; transform: translate(-50%, 14px);
        transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1.1), visibility 0s .3s; }
#note.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
body.links-up #note { bottom: calc(110px + env(safe-area-inset-bottom)); }

#note strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: .01em; }
#note p { margin: 3px 0 0; color: rgba(243, 231, 207, .84); }
#note small { display: block; margin-top: 5px; font-size: 12px; color: rgba(243, 231, 207, .62); }
#note small:empty { display: none; }
#note a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-left: -10px; padding: 0 10px;
          border-radius: 14px; color: #d9b46a; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; }
#note a[hidden] { display: none; }
#note.plain { padding-bottom: 15px; }                 /* a note with no More */
#note a:active, #note button:active { background: rgba(217, 180, 106, .18); }
#note svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
            stroke-linecap: round; stroke-linejoin: round; }
#note button { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0;
               border-radius: 18px; background: none; color: rgba(243, 231, 207, .7); cursor: pointer;
               display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
#note a:focus-visible, #note button:focus-visible { outline: 2px solid #d9b46a; outline-offset: -2px; }

/* While a note is up it has the floor: the scanning hint waits. */
body.note-up #hint { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  #note, #note.show { transform: translate(-50%, 0); transition: opacity .2s ease, visibility 0s; }
}