/* Admin mode — in-page authoring tool (development only).

   The footer button ships hidden and is only revealed by admin.js once the dev
   server answers /__status, so on static hosting nothing appears at all.

   Nothing here touches page layout: the per-image controls live in a fixed
   overlay layer positioned from getBoundingClientRect(), so turning admin mode
   on cannot reflow the design it is meant to edit. */

/* Must come first and stay: a `display` declaration in the rule below would
   otherwise beat the UA stylesheet's [hidden]{display:none}, and the button
   would show on a static host where admin.js never unhides it. */
.footer__admin[hidden]{display:none}

.footer__admin{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-top:clamp(1rem,2vw,1.5rem);
  padding:.45rem .95rem;
  font:inherit;font-size:var(--fs-sm,.875rem);font-weight:600;
  color:#fff;background:transparent;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.footer__admin:hover{border-color:var(--gold,#d3a04b);color:var(--gold,#d3a04b)}
.footer__admin:focus-visible{outline:2px solid var(--gold,#d3a04b);outline-offset:2px}
.footer__admin[aria-pressed="true"]{
  background:var(--gold,#d3a04b);border-color:var(--gold,#d3a04b);color:#231f20;
}
.footer__admin .footer__admin-dot{
  width:.5rem;height:.5rem;border-radius:50%;
  background:currentColor;opacity:.55;
}
.footer__admin[aria-pressed="true"] .footer__admin-dot{opacity:1}

/* the footer centres its legal row; keep the button in that flow */
.footer__adminbar{display:flex;justify-content:center}

/* ---------- overlay layer ---------- */
.adm-layer{
  position:fixed;inset:0;z-index:9998;
  pointer-events:none;              /* only the controls are clickable */
}
.adm-layer[hidden]{display:none}

.adm-pin{
  position:absolute;
  display:flex;gap:.35rem;align-items:center;
  pointer-events:auto;
}
.adm-pin button{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.35rem .6rem;
  font:600 .75rem/1 system-ui,sans-serif;
  color:#fff;background:rgba(35,31,32,.86);
  border:1px solid rgba(255,255,255,.25);border-radius:6px;
  cursor:pointer;backdrop-filter:blur(3px);
  transition:background .15s ease;
}
.adm-pin button:hover{background:var(--gold,#d3a04b);color:#231f20}
.adm-pin button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.adm-pin .adm-reset{background:rgba(174,94,99,.9)}

/* current file path — click to open it in a new tab */
.adm-path{
  display:inline-flex;align-items:center;max-width:min(46vw,340px);
  padding:.35rem .6rem;
  font:500 .72rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#fff;background:rgba(35,31,32,.86);
  border:1px solid rgba(255,255,255,.25);border-radius:6px;
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.adm-path:hover{background:var(--gold,#d3a04b);color:#231f20;text-decoration:underline}
.adm-path:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* highlight what is editable while admin mode is on */
.adm-outline{outline:2px dashed rgba(211,160,75,.9);outline-offset:-2px}

/* ---------- toast ---------- */
.adm-toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(1rem);
  z-index:9999;
  padding:.6rem 1.1rem;border-radius:8px;
  font:600 .85rem/1.3 system-ui,sans-serif;
  color:#fff;background:rgba(35,31,32,.94);
  opacity:0;transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;max-width:90vw;text-align:center;
}
.adm-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.adm-toast.is-err{background:rgba(174,94,99,.96)}

@media (prefers-reduced-motion:reduce){
  .footer__admin,.adm-pin button,.adm-toast{transition-duration:.001ms}
}