/* ============================================================
   Lock badge — the white disc with a padlock in it.

   From Figma "Handover 2" (node 35055:908): a white circle with a
   filled Material Symbols `lock` glyph, centred, on a soft drop
   shadow. The badge is 48px with a 24px glyph — the glyph is exactly
   half the badge, which is how it scales.

     <span class="lock">
       <svg class="lock__glyph" …><path …></svg>
       <span class="lock__sr">Password protected</span>
     </span>

   TWO PLACES USE IT, so the badge itself carries no placement:
     · `.lock--cover` pins it into a cover's top-right corner and
       reveals it on hover — scripts/projects.js emits this for any
       record with `locked: true`.
     · the password dialog (styles/passgate.css) uses the bare
       `.lock`, in flow and always visible.
   Keeping placement in the modifier is what lets both share one
   definition of the circle instead of redrawing it.
   ============================================================ */

.lock {
  --lock-size: 48px;                  /* Figma badge */

  display: grid;
  place-items: center;
  width: var(--lock-size);
  height: var(--lock-size);
  border-radius: var(--radius-round);

  /* DELIBERATELY NOT var(--surface). The badge sits on the COVER, not on the
     page: covers are artwork on a pale accent and stay light in both themes,
     so this must not follow the dark theme's inversion of the raw scale
     (styles/color.css). --surface resolves to --white, which IS #000 under
     `data-theme="dark"` — on work.html that turned the badge into a black
     disc on a light cover. Pinned to the design's white instead.
     The glyph can stay on a token: --muted maps to --black-50, the scale's
     pivot, which is #808080 in BOTH themes. */
  background: #ffffff;
  color: var(--muted);                /* the glyph, via currentColor */

  /* drop-shadow (not box-shadow) so it hugs the circle, matching Figma's
     0 4px 2px rgba(0,0,0,.15). */
  filter: drop-shadow(0 4px 2px rgb(0 0 0 / 0.15));
}

/* Half the badge — 24px glyph in a 48px circle, per Figma. */
.lock__glyph {
  display: block;
  width: 50%;
  height: 50%;
  fill: currentColor;
}

/* The state must reach screen readers too; the badge itself is graphical.
   On a cover this text joins the link's accessible name. */
.lock__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- On a cover -------------------------------------------------
   REVEALS ON HOVER of the surrounding card — and on keyboard focus, so
   it isn't mouse-only. Where hover doesn't exist (touch) it is always
   visible: a pointer-only affordance would simply never appear on a
   phone.

   NOT INTERACTIVE. The whole card is a single <a>; a nested button
   would be invalid HTML and would fight the link for the click. The
   badge is `pointer-events: none` so it can never swallow a tap — the
   password dialog opens from the card's own click (scripts/passgate.js).
   ---------------------------------------------------------------- */
.lock--cover {
  --lock-inset: 16px;                 /* from the cover's top-right */

  position: absolute;
  top: var(--lock-inset);
  right: var(--lock-inset);
  z-index: 1;                         /* over the cover image */

  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}

/* Reveal with the card. Descendant selectors on the link keep this file
   independent of which surface it sits in (gallery, carousel, …). */
a:hover .lock--cover,
a:focus-visible .lock--cover { opacity: 1; }

/* No hover to reveal it on — show it outright rather than never. */
@media (hover: none) {
  .lock--cover { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lock--cover { transition: none; }
}

/* Gallery covers are roughly half the carousel's width, so the 48px badge
   would overpower them — step down to the design's smaller variant. */
.gallery__frame .lock--cover {
  --lock-size: 32px;
  --lock-inset: 12px;
}