/* ==========================================================================
   The footer lock: the staff entrance.
   A small padlock in the logo's polished chrome, sitting quietly under the
   copyright line. The markup is in index.html's footer:
     <a class="staff-lock" href="staff/" aria-label="Staff sign-in">…<svg>…</svg></a>
   Behind it, /staff/ is guarded on the server (notes/vision.md, "Staff area").

   · At rest: a chrome padlock (filled body, punched keyhole, stroked shackle)
     at 72% strength, discreet against every finish's black footer. Its darkest
     stop still clears 3:1 on the page.
   · Hover and keyboard focus: the chrome comes up to full, a faint emerald
     pool gathers behind it, and one light glint runs across the metal, left to
     right, once. Reduced motion keeps the brightening and drops the glint.
   · Keyboard focus also gets an emerald ring. The tap target is 44 × 44px; the
     icon's left edge lines up with the footer's column of text above it.
   · Out of the flow (2026-10-10, notes/review-staff-ui.md P1): the footer grid
     lines its two columns up along the bottom, so a lock in the flow made the
     right column taller and pulled the brand mark 38px down. It hangs instead
     in the footer's 3rem bottom padding (4 + 44 = 48px), just under the
     copyright line.
   · The chrome is painted by masked layers (a gradient can't fill the inline
     SVG's stroke without editing the markup). Without mask support, or in
     forced colours, the inline SVG is shown instead, in currentColor.
   Additive only: nothing else in the footer moves.
   ========================================================================== */

.staff-lock {
  --lock-size: 16px;
  --lock-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/><path fill='black' fill-rule='evenodd' d='M7 11h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2zM12 13.55a1.6 1.6 0 0 0-.7 3.04V18.6h1.4v-2.01A1.6 1.6 0 0 0 12 13.55z'/></svg>");

  /* Out of the flow, under the copyright line. The icon (16px, centred) starts 14px into the
     target: pulled back 14px so the metal lines up with the text above. */
  position: absolute;
  left: -14px;
  top: calc(100% + 4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  color: #9c9c9c;              /* the fallback icon: the chrome scale's darkest small-text stop */
  text-decoration: none;
  vertical-align: middle;
  background: radial-gradient(closest-side, rgba(26, 163, 92, 0.2), rgba(26, 163, 92, 0) 100%) center / 0% 0% no-repeat;
  transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.staff-lock svg {
  display: block;
  width: var(--lock-size);
  height: var(--lock-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.staff-lock:hover,
.staff-lock:focus-visible {
  color: #f0f0f0;
  background-size: 100% 100%;
}

/* Keyboard focus: an emerald ring inside the target, round like the pool. */
.staff-lock:focus { outline: none; }
.staff-lock:focus-visible {
  outline: 2px solid var(--emerald-bright, #1aa35c);
  outline-offset: -9px;   /* a 26px ring: close to the 16px lock, still clearly visible */
}

/* The lock's column holds it in place (the lock is positioned against it). */
.footer__lines { position: relative; }

/* ---------- The chrome: two masked layers in the padlock's shape ---------- */

@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .staff-lock svg { opacity: 0; }

  .staff-lock::before,
  .staff-lock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--lock-size);
    height: var(--lock-size);
    margin: calc(var(--lock-size) / -2) 0 0 calc(var(--lock-size) / -2);
    pointer-events: none;
    -webkit-mask: var(--lock-mask) center / 100% 100% no-repeat;
            mask: var(--lock-mask) center / 100% 100% no-repeat;
  }

  /* The metal: the logo glass's chrome, bright at the shackle's crown, a dark band across the
     body, and a bright bevel at its foot. */
  .staff-lock::before {
    background: linear-gradient(180deg, #f4f4f4 0%, #d6d6d6 30%, #8c8c8c 56%, #a6a6a6 74%, #e2e2e2 94%);
    opacity: 0.72;
    transition: opacity 0.3s ease;
  }

  /* The glint: a narrow band of light (with a breath of emerald at its trailing edge), parked
     off to the left of the metal until hover or focus sends it across once. */
  .staff-lock::after {
    background: linear-gradient(112deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.95) 49%,
      rgba(196, 246, 220, 0.7) 53%,
      rgba(255, 255, 255, 0) 62%) 100% 0 / 300% 100% no-repeat;
    opacity: 0;
  }

  .staff-lock:hover::before,
  .staff-lock:focus-visible::before { opacity: 1; }

  .staff-lock:hover::after,
  .staff-lock:focus-visible::after {
    animation: staff-lock-glint 0.85s cubic-bezier(0.35, 0.1, 0.25, 1) 0.05s both;
  }
}

@keyframes staff-lock-glint {
  0%   { opacity: 1; background-position: 100% 0; }
  85%  { opacity: 1; }
  100% { opacity: 0; background-position: 0% 0; }
}

/* A press on a phone: the same brightening, held while the finger is down. */
.staff-lock:active { color: #f0f0f0; background-size: 100% 100%; }
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .staff-lock:active::before { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .staff-lock { transition: none; }
  .staff-lock::before { transition: none; }
  .staff-lock:hover::after,
  .staff-lock:focus-visible::after { animation: none; }
}

/* Forced colours paint no backgrounds: show the inline SVG in the system link colour. */
@media (forced-colors: active) {
  .staff-lock { color: LinkText; background: none; }
  .staff-lock svg { opacity: 1; }
  .staff-lock::before,
  .staff-lock::after { display: none; }
}

@media print {
  .staff-lock { display: none; }
}