/* ── Back of House (/staff/) ────────────────────────────────────────────────
   Loaded AFTER /assets/css/style.css, which brings the tokens, the three
   self-hosted fonts and the Looks (.wall-card and friends). Everything here is
   scoped under body.staff so it can never leak onto the public page, and so it
   out-ranks the public page's bare element rules where the two collide
   (header, nav, the ≤900px body padding for the events bar).

   Mobile-first on purpose — this is used one-handed on a phone at the counter:
   touch targets ≥52px, inputs 17px (iOS zooms into anything under 16px), and
   every form control styled by hand because the page is color-scheme: dark and
   unstyled controls would come out in the browser's dark defaults. Ink chrome
   (bars, login), cream work surfaces (the wall, sheets). */

body.staff {
  --bar-h: 56px;
  --tabs-h: 62px;
  --add-h: 60px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* The "it worked" green for small text. The old #3F7A46 was 4.38:1 on
     cream — under AA for 13.6px bold. This is 5.45:1 on cream, 5.04:1 on
     cream-warm, 5.89:1 on paper (and paper on it, as a label background). */
  --green-dark: #2F6B37;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--paper);
  /* style.css adds 80px at ≤900px for the public events bar. Not here. */
  padding-bottom: 0;
}
body.staff [hidden] { display: none !important; }

/* Focus: yellow on ink, ink on cream. Yellow on cream is ~1.3:1 — invisible. */
body.staff :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
body.staff .adm-main :focus-visible,
body.staff .adm-sheet :focus-visible,
body.staff .adm-confirm :focus-visible,
body.staff .adm-menu :focus-visible,
body.staff .adm-move :focus-visible { outline-color: var(--ink); }
/* + ADD PHOTOS floats over the cream wall but sits outside .adm-main, so it
   was left with the yellow ring: 1.35:1 on cream, on the page's main button. */
body.staff .adm-add:focus-visible { outline-color: var(--ink); }

.adm-noscript {
  margin: 3rem 1.2rem;
  font: 600 1.1rem/1.5 var(--body);
  color: var(--paper);
}

/* ── Logo, boot and login (ink) ─────────────────────────────────────────── */
.adm-logo {
  display: block;
  width: min(220px, 60vw);
  aspect-ratio: var(--logo-ratio);
  margin: 0 auto;
  background: var(--logo-bg) center / contain no-repeat;
}
.adm-boot {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem 1.2rem;
  text-align: center;
}
.adm-boot-text {
  font: 400 1.3rem/1.3 var(--marker);
  color: var(--yellow);
  rotate: -2deg;
  max-width: 28ch;
}

.adm-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(2rem + var(--safe-t)) 1.2rem calc(2rem + var(--safe-b));
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 196, 61, 0.14), transparent 38%),
    radial-gradient(circle at 85% 80%, rgba(229, 72, 157, 0.12), transparent 40%),
    var(--ink);
}
.adm-login-inner { width: 100%; max-width: 420px; text-align: center; }
.adm-login-h {
  margin-top: 1.2rem;
  font: 400 clamp(2.6rem, 12vw, 3.6rem)/0.95 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}
.adm-login-scrawl {
  display: inline-block;
  margin: 0.4rem 0 1.6rem;
  font: 400 1.35rem/1.2 var(--marker);
  color: var(--yellow);
  rotate: -2deg;
}
.adm-login-closed {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 2px dashed rgba(250, 245, 234, 0.35);
  font-weight: 600;
  color: var(--paper);
}
.adm-login-form { text-align: left; }
.adm-login-back {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 1.4rem;
  color: var(--paper);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The login sits on ink, so its fields invert the cream-surface defaults. */
.adm-login .adm-label { color: var(--paper); }
.adm-login .adm-input { border-color: var(--paper); }
.adm-login .adm-form-err { background: var(--red-deep); color: var(--paper); border-color: var(--paper); }

/* ── Form bits (shared) ─────────────────────────────────────────────────── */
.adm-form { display: grid; gap: 1rem; }
.adm-field { display: grid; gap: 0.35rem; }
.adm-label,
.adm-group-label {
  font: 400 0.85rem/1.2 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.adm-label-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  min-height: 1.6rem;
}
.adm-input {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 600 17px/1.3 var(--body);
  appearance: none;
  -webkit-appearance: none;
}
.adm-input::placeholder { color: var(--grey); opacity: 1; }
.adm-input[aria-invalid="true"] { border-color: var(--red-deep); box-shadow: inset 0 0 0 1px var(--red-deep); }

.adm-pass { display: flex; }
.adm-pass .adm-input { flex: 1; min-width: 0; border-right: 0; }
.adm-pass-show {
  flex: 0 0 auto;
  min-width: 72px;
  min-height: 52px;
  padding: 0 0.9rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--yellow);
  font: 400 0.85rem/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.adm-login .adm-pass-show { border-color: var(--paper); }
/* A class, not [aria-pressed]: the button is an action label (Show / Hide), not a toggle. */
.adm-pass-show.is-on { background: var(--yellow); color: var(--ink); }

.adm-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  font-weight: 600;
  cursor: pointer;
}
.adm-check input {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.adm-check input:checked {
  border-color: var(--yellow);
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231A1410' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.adm-form-err {
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--ink);
  background: var(--red-deep);   /* paper on red-deep 6.7:1; paper on --red fails */
  color: var(--paper);
  font-weight: 700;
}
.adm-small { font-size: 0.92rem; color: var(--grey); font-weight: 600; }
.adm-count { font: 600 0.85rem/1 var(--body); color: var(--grey); margin-left: auto; }
.adm-count.is-low { color: var(--red-deep); }

/* "Saved ✓" / "Didn't save — tap to retry" beside a label. */
.adm-mark { font: 700 0.85rem/1 var(--body); color: var(--green-dark); }   /* on cream 5.45:1 */
.adm-mark[data-state="saving"] { color: var(--grey); }
.adm-mark-retry {
  min-height: 52px;
  padding: 0 0.6rem;
  border: 2px solid var(--red-deep);
  background: var(--paper);
  color: var(--red-deep);
  font: 700 0.85rem/1 var(--body);
  cursor: pointer;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 52px;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 400 1rem/1.1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.adm-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.adm-btn:disabled { cursor: default; opacity: 0.55; box-shadow: none; }
.adm-btn-yellow { background: var(--yellow); border-width: 3px; }
.adm-btn-big { width: 100%; min-height: 56px; font-size: 1.2rem; }
.adm-btn-ink { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--yellow); }
.adm-btn-danger { color: var(--red-deep); border-color: var(--red-deep); box-shadow: 4px 4px 0 var(--red-deep); }
.adm-btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.adm-btn-ghost:active:not(:disabled) { transform: none; box-shadow: none; }
/* On ink the ink shadow disappears, so the login's yellow button uses paper. */
.adm-login .adm-btn,
.adm-boot .adm-btn { border-color: var(--ink); box-shadow: 4px 4px 0 var(--paper); }
.adm-btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ── App frame ───────────────────────────────────────────────────────────── */
/* style.css makes every <header> sticky with a yellow rule — which is what we
   want — so this only sizes it and adds the notch inset for the home-screen
   app (status bar is black-translucent). */
body.staff .adm-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: calc(var(--bar-h) + var(--safe-t));
  padding: var(--safe-t) max(0.4rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  background: var(--ink);
  border-bottom: 2px solid var(--yellow);
  box-shadow: none;
}
.adm-bar-title {
  flex: 1;
  min-width: 0;
  font: 400 1.25rem/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-igpill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 52px;
  padding: 0 0.85rem;
  border: 2px solid rgba(250, 245, 234, 0.55);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: 400 0.8rem/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.adm-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grey);
  flex: 0 0 auto;
}
[data-status="live"] > .adm-dot { background: var(--green); }
[data-status="expiring"] > .adm-dot { background: var(--yellow); }
[data-status="stale"] > .adm-dot { background: var(--red); }
/* Off and not-hooked-up are a hollow ring, so state isn't carried by colour alone. */
[data-status="none"] > .adm-dot,
[data-status="off"] > .adm-dot { background: transparent; border: 2px solid var(--grey); }

.adm-menu-wrap { position: relative; }
.adm-menu-btn {
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font: 700 1.8rem/1 var(--body);
  cursor: pointer;
}
.adm-menu-btn[aria-expanded="true"] { color: var(--yellow); }
.adm-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 230px;
  display: grid;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--yellow);
}
.adm-menu-item {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 1.1rem;
  border: 0;
  border-bottom: 2px dashed rgba(26, 20, 16, 0.2);
  background: transparent;
  color: var(--ink);
  font: 400 1rem/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.adm-menu-item:last-child { border-bottom: 0; }
.adm-menu-item:hover { background: var(--yellow); }

/* The public page hides every <nav> at ≤900px behind the burger. This one is
   the tab bar and must always show. */
body.staff nav.adm-tabs {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 45;
  padding: 0 env(safe-area-inset-right) var(--safe-b) env(safe-area-inset-left);
  background: var(--ink);
  border-top: 2px solid var(--yellow);
  border-bottom: 0;
}
.adm-tab {
  flex: 1;
  position: relative;
  min-height: var(--tabs-h);
  border: 0;
  background: transparent;
  color: rgba(250, 245, 234, 0.72);
  font: 400 1.05rem/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.adm-tab + .adm-tab { border-left: 1px dashed rgba(250, 245, 234, 0.2); }
.adm-tab[aria-current="page"] { color: var(--yellow); }
.adm-tab[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 8px;
  height: 4px;
  background: var(--yellow);
  transform: skewX(-12deg);
}
.adm-tab-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.2rem 0.4rem;
  background: var(--red-deep);
  color: var(--paper);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.adm-add {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabs-h) + var(--safe-b) + 12px);
  z-index: 44;
  width: min(480px, calc(100% - 32px));
  translate: -50% 0;
  min-height: var(--add-h);
  border: 3px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--paper);
  font: 400 1.35rem/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.adm-add:active { translate: calc(-50% + 2px) 2px; box-shadow: 3px 3px 0 var(--paper); }

/* ── Cream work surface ──────────────────────────────────────────────────── */
.adm-main {
  color-scheme: light;
  min-height: calc(100dvh - var(--bar-h) - var(--safe-t));
  padding: 1.2rem 1rem calc(var(--tabs-h) + var(--add-h) + var(--safe-b) + 3rem);
  background:
    radial-gradient(circle at 1px 1px, rgba(26, 20, 16, 0.05) 1px, transparent 0) 0 0 / 18px 18px,
    var(--cream);
  color: var(--ink);
}
.adm-panel { max-width: 1100px; margin: 0 auto; }
.adm-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin: 0.4rem 0 1.1rem;
  font: 400 2rem/1 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.adm-h-meta {
  font: 400 0.95rem/1.2 var(--display);
  letter-spacing: 0.12em;
  color: var(--grey);
}
.adm-h3 {
  margin: 2rem 0 0.8rem;
  font: 400 1.15rem/1.1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.adm-drafts {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  margin-bottom: 1.1rem;
  padding: 0.6rem 1rem 0.6rem 1.1rem;
  border: 2px solid var(--ink);
  border-left: 10px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font: 400 1rem/1.2 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.adm-a2hs {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  rotate: -0.6deg;
}
.adm-a2hs-text { font-weight: 600; line-height: 1.5; }
.adm-share-ico {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  fill: none;
  stroke: #0A84FF;   /* the iOS share-sheet blue, so it matches what he's looking for */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── The wall grid ───────────────────────────────────────────────────────── */
.adm-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.1rem;
  padding: 0.8rem 6px 0;
}
.adm-item { position: relative; min-width: 0; }
/* .wall-card is its own size container, so the Looks need nothing from us.
   This one is for the TAKEN DOWN / MOVING stickers laid over it. */
.adm-tile { position: relative; container-type: inline-size; }
/* One real button per tile, laid over the card rather than wrapped round it,
   so the card's own markup (which may carry a button of its own) never ends up
   nested inside ours. */
.adm-tile-btn {
  position: absolute;
  inset: -4px;
  z-index: 8;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.adm-tile-card { pointer-events: none; }
.adm-item.is-hidden .adm-tile-card { filter: grayscale(1); opacity: 0.6; }
.adm-stamp-over {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 42%;
  translate: -50% -50%;
  rotate: -8deg;
  padding: 0.35rem 0.6rem;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper);
  font: 400 clamp(0.7rem, 8cqw, 1.1rem)/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.adm-item.is-moving .adm-tile { outline: 4px solid var(--yellow); outline-offset: 6px; }
.adm-item.is-moving .adm-tile-card { filter: drop-shadow(8px 10px 0 var(--ink)); translate: -3px -4px; }
.adm-moving-tag { background: var(--yellow); color: var(--ink); border-color: var(--ink); top: 12%; rotate: 4deg; }
/* Every drop target gets the faint dashed ring — except the focused one, which
   keeps the 3px ink focus ring. At (0,5,0) this used to beat the focus rules,
   so a keyboard user couldn't see which tile Enter would drop in front of. */
.adm-grid.is-moving .adm-item:not(.is-moving) .adm-tile-btn:not(:focus-visible) { outline: 2px dashed rgba(26, 20, 16, 0.35); outline-offset: 2px; }

.adm-tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.95rem;
  font: 400 0.8rem/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.adm-chip-mini {
  padding: 0.3rem 0.45rem;
  background: var(--ink);
  color: var(--paper);
}
.adm-chip-mini.is-top { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); padding: 0.2rem 0.4rem; }
.adm-chip-mini.is-stamp { background: var(--paper); color: var(--red-deep); border: 2px solid var(--red-deep); padding: 0.2rem 0.4rem; }
.adm-hearts { margin-left: auto; font-size: 0.95rem; }

/* Fallback if wall-card.js failed to load: a plain 4:5 photo, still usable. */
.adm-plain { aspect-ratio: 4 / 5; background: var(--ink-soft); border: 2px solid var(--ink); overflow: hidden; }
.adm-plain img { width: 100%; height: 100%; object-fit: cover; }

.adm-empty { margin: 2rem auto 0; max-width: 32ch; text-align: center; }
.adm-empty-text { font: 400 1.35rem/1.35 var(--marker); color: var(--ink); rotate: -1.5deg; }
.adm-empty-arrow {
  display: block;
  margin-top: 0.8rem;
  font: 400 3rem/1 var(--marker);
  color: var(--red-deep);
  rotate: -8deg;
}

/* ── Move banner ─────────────────────────────────────────────────────────── */
.adm-move {
  position: sticky;
  top: calc(var(--bar-h) + var(--safe-t));
  z-index: 39;
  color-scheme: light;
  padding: 0.8rem 1rem 1rem;
  background: var(--yellow);
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
}
.adm-move-text { font-weight: 700; margin-bottom: 0.7rem; }
.adm-move-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.adm-move-btns .adm-btn { min-height: 52px; padding: 0.5rem 0.8rem; font-size: 0.9rem; }

/* ── Chips (tags, where, stamp, crop) ────────────────────────────────────── */
.adm-group { margin-top: 1.3rem; border: 0; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.5rem; }
.adm-chip {
  min-height: 52px;
  padding: 0.5rem 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font: 400 0.9rem/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.adm-chip.g-scene { color: var(--red-deep); }
.adm-chip.g-where { background: #E3F6F9; }
/* Pressed carries a ✓ (added by staff.js), so state isn't colour alone. */
.adm-chip[aria-pressed="true"] { background: var(--yellow); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
@media (forced-colors: active) {
  .adm-chip[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}

/* ── Switches ────────────────────────────────────────────────────────────── */
.adm-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  margin-top: 1.2rem;
  padding: 0.5rem 0;
  border-top: 2px dashed rgba(26, 20, 16, 0.2);
  border-bottom: 2px dashed rgba(26, 20, 16, 0.2);
}
.adm-switch-label { font-weight: 700; cursor: pointer; }
/* Knob drawn with gradients rather than ::before — pseudo-elements on inputs
   are not something every engine promises. */
.adm-switch {
  flex: 0 0 auto;
  width: 64px;
  height: 36px;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background:
    radial-gradient(circle at 16px 50%, var(--paper) 0 11px, var(--ink) 11.5px 12.5px, transparent 13px),
    var(--grey);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-position 0.15s;
}
.adm-switch:checked {
  background:
    radial-gradient(circle at calc(100% - 16px) 50%, var(--paper) 0 11px, var(--ink) 11.5px 12.5px, transparent 13px),
    var(--green);
}
.adm-switch:disabled { opacity: 0.5; cursor: default; }
/* Round focus ring hugging the pill. */
body.staff .adm-switch:focus-visible { outline-offset: 3px; }

/* ── Sheets ──────────────────────────────────────────────────────────────── */
/* Full-screen on phones. Positioned with top/left + explicit size, not
   inset:0 + margin:auto, which iOS Safari collapses to zero height on a
   <dialog> (same workaround as .bb-modal). display only when [open], or a
   closed dialog would show. */
.adm-sheet {
  position: fixed;
  top: 0;
  left: 0;
  /* The UA gives a modal dialog inset-block: 0 (so bottom: 0 too). With an
     auto height that would stretch the centred desktop sheet down to the
     bottom of the screen; with these, height comes from content or the
     explicit value below. */
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color-scheme: light;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
}
.adm-sheet[open] { display: flex; flex-direction: column; }
.adm-sheet::backdrop { background: rgba(26, 20, 16, 0.78); }
.adm-sheet-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: calc(var(--bar-h) + var(--safe-t));
  padding: var(--safe-t) 0.4rem 0 1rem;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--yellow);
}
.adm-sheet-h {
  flex: 1;
  min-width: 0;
  font: 400 1.3rem/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.adm-sheet-h-ink { color: var(--ink); font-size: 1.8rem; margin-bottom: 0.6rem; }
.adm-sheet-close {
  min-width: 72px;
  min-height: 52px;
  padding: 0 0.9rem;
  border: 0;
  background: transparent;
  color: var(--yellow);
  font: 400 1rem/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
body.staff .adm-sheet-bar :focus-visible { outline-color: var(--yellow); }
.adm-sheet-body {
  flex: 1 1 auto;
  min-height: 0;   /* or a flex child refuses to shrink, and the sheet clips instead of scrolling */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.2rem 1rem calc(2rem + var(--safe-b));
}
.adm-sheet-foot {
  flex: 0 0 auto;
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem 1rem calc(0.6rem + var(--safe-b));
  background: var(--cream-warm);
  border-top: 2px solid var(--ink);
}
.adm-sheet-foot-row { display: flex; justify-content: space-between; flex-wrap: wrap; }
.adm-sheet-small .adm-sheet-body { padding-top: calc(2rem + var(--safe-t)); }
.adm-relogin-lead { font-weight: 600; margin-bottom: 1.2rem; }

.adm-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 1.4rem 1.2rem 1.3rem;
  border: 3px solid var(--ink);
  color-scheme: light;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--red-deep);
}
.adm-confirm::backdrop { background: rgba(26, 20, 16, 0.78); }
.adm-confirm-text { font: 400 1.5rem/1.15 var(--display); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1.2rem; }

/* ── Tray ────────────────────────────────────────────────────────────────── */
.adm-tray-rules {
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 2px dashed rgba(26, 20, 16, 0.35);
  font-weight: 700;
}
.adm-rules { margin-top: 0.4rem; font-weight: 600; }
.adm-rules summary,
.adm-adv-sum,
.adm-more-sum {
  display: flex;
  align-items: center;
  min-height: 48px;
  font: 400 0.95rem/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.adm-rules summary::-webkit-details-marker,
.adm-adv-sum::-webkit-details-marker,
.adm-more-sum::-webkit-details-marker { display: none; }
.adm-rules summary::after,
.adm-adv-sum::after,
.adm-more-sum::after { content: ' ▸'; content: ' ▸' / ''; white-space: pre; }   /* the <details> state is already announced */
.adm-rules[open] summary::after,
.adm-adv[open] .adm-adv-sum::after,
.adm-more[open] .adm-more-sum::after { content: ' ▾'; content: ' ▾' / ''; }
.adm-rules ul { padding-left: 1.2rem; display: grid; gap: 0.3rem; }

.adm-batch { margin-top: 1.4rem; }
.adm-batch-h { font: 400 1.05rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }

.adm-tray-list { list-style: none; display: grid; gap: 1.4rem; margin-top: 1.6rem; }
.adm-tray-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.9rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.adm-tray-card.is-failed { border-color: var(--red-deep); box-shadow: 4px 4px 0 var(--red-deep); }
.adm-tray-thumb {
  position: relative;
  align-self: start;
  width: 112px;
  padding: 10px 8px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.adm-tray-thumb:disabled { cursor: default; }
.adm-tray-thumb .wall-card,
.adm-tray-thumb .adm-plain { pointer-events: none; }
.adm-thumb-wait {
  display: block;
  aspect-ratio: 4 / 5;
  border: 2px dashed rgba(26, 20, 16, 0.35);
  background: repeating-linear-gradient(-45deg, var(--cream) 0 10px, var(--cream-warm) 10px 20px);
}
.adm-tray-main { display: grid; gap: 0.55rem; align-content: start; min-width: 0; }
.adm-up-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.adm-up-text { font: 700 0.92rem/1.25 var(--body); }
.adm-up-text.is-ok { color: var(--green-dark); }
.adm-up-text.is-err { color: var(--red-deep); }
.adm-progress {
  width: 100%;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--cream-warm);
  appearance: none;
  -webkit-appearance: none;
}
.adm-progress::-webkit-progress-bar { background: var(--cream-warm); }
.adm-progress::-webkit-progress-value { background: var(--yellow); }
.adm-progress::-moz-progress-bar { background: var(--yellow); }
.adm-tip { font: 400 0.95rem/1.3 var(--marker); color: var(--grey); rotate: -1deg; }
.adm-card-row { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; }
.adm-linkbtn {
  min-height: 52px;
  padding: 0 0.3rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 0.95rem/1 var(--body);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.adm-linkbtn.is-danger { color: var(--red-deep); }

.adm-warn {
  display: grid;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  background: #FFF3CF;
  border: 2px solid var(--ink);
  border-left: 8px solid var(--yellow-dim);
  font-weight: 700;
}
.adm-warn .adm-btn-row .adm-btn { min-height: 52px; font-size: 0.85rem; padding: 0.4rem 0.8rem; }

/* ── Edit sheet ──────────────────────────────────────────────────────────── */
.adm-edit-preview {
  width: min(78vw, 340px);
  margin: 0.8rem auto 1.6rem;
  padding: 12px 10px 18px;
}
.adm-edit-preview .wall-card { pointer-events: none; }
.adm-state {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.35rem 0.6rem;
  background: var(--ink);
  color: var(--paper);
  font: 400 0.85rem/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.adm-state[data-state="live"] { background: var(--green-dark); }
.adm-state[data-state="draft"] { background: var(--yellow); color: var(--ink); }
.adm-lookrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.adm-note { margin-top: 0.45rem; font-size: 0.92rem; font-weight: 600; color: var(--grey); }
.adm-more { margin-top: 1.4rem; border-top: 2px dashed rgba(26, 20, 16, 0.25); padding-top: 0.4rem; }
.adm-hearts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 1.2rem; font-weight: 700; }
.adm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--ink);
}
.adm-actions .adm-btn { width: 100%; font-size: 0.95rem; padding: 0.5rem 0.6rem; }
.adm-actions .adm-full { grid-column: 1 / -1; }
.adm-actions .adm-note { align-self: center; margin: 0; }

/* ── Look picker ─────────────────────────────────────────────────────────── */
.adm-look-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem 0.7rem;
}
.adm-look-cell {
  position: relative;
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  align-content: start;
  min-height: 52px;
  padding: 10px 6px 8px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.adm-look-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.adm-look-swatch { width: 100%; pointer-events: none; }
.adm-look-name {
  font: 400 0.78rem/1.1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.adm-look-cell:has(.adm-look-radio:checked) { border-color: var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
/* The tick is for sighted users; the radio already says "checked". */
.adm-look-cell:has(.adm-look-radio:checked) .adm-look-name::before { content: '✓ '; content: '✓ ' / ''; }
.adm-look-cell:has(.adm-look-radio:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.adm-look-surprise-face {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 3px dashed var(--ink);
  font: 400 2.6rem/1 var(--marker);
  color: var(--red-deep);
}
.adm-look-blurb { margin: 1.2rem 0 0; font: 400 1.1rem/1.3 var(--marker); color: var(--ink); rotate: -1deg; }

/* ── Bin ─────────────────────────────────────────────────────────────────── */
.adm-bin-list { list-style: none; display: grid; gap: 1rem; }
.adm-bin-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.8rem;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.adm-bin-row img,
.adm-thumb-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--ink); background: var(--ink-soft); }
.adm-bin-cap { font-weight: 700; overflow-wrap: anywhere; }
.adm-bin-when { font-size: 0.92rem; color: var(--grey); font-weight: 600; margin: 0.2rem 0 0.6rem; }
.adm-bin-row .adm-btn-row { gap: 0.6rem; }
.adm-bin-row .adm-btn { min-height: 52px; font-size: 0.85rem; padding: 0.4rem 0.7rem; }

/* ── Love tab ────────────────────────────────────────────────────────────── */
.adm-seg { display: flex; border: 2px solid var(--ink); background: var(--paper); margin-bottom: 1.4rem; padding: 0; min-width: 0; }
.adm-seg-opt { flex: 1; position: relative; }
.adm-seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adm-seg-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 0.4rem;
  font: 400 0.9rem/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.adm-seg-opt + .adm-seg-opt span { border-left: 2px solid var(--ink); }
.adm-seg-opt input:checked + span { background: var(--ink); color: var(--yellow); }
.adm-seg-opt input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }

.adm-love-card {
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  rotate: -0.8deg;
}
.adm-love-big { font: 400 1.5rem/1.15 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.adm-love-head { margin-top: 0.5rem; font: 400 1.25rem/1.25 var(--marker); }
.adm-top { list-style: none; display: grid; gap: 0.7rem; margin-top: 1.8rem; }
.adm-top-btn {
  display: grid;
  grid-template-columns: 2.4rem 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 64px;
  padding: 0.5rem 0.7rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.adm-top-first .adm-top-btn { grid-template-columns: 2.4rem 110px minmax(0, 1fr) auto; box-shadow: 5px 5px 0 var(--ink); }
.adm-top-rank { font: 400 1.4rem/1 var(--display); }
/* The middle column must be allowed to shrink (grid items default to
   min-width:auto), and the caption must be a block, or the ellipsis never
   applies and a long caption runs under the ♥ count. */
.adm-top-mid { min-width: 0; }
.adm-top-cap { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-top-bar { display: block; height: 8px; margin-top: 0.4rem; width: var(--w, 0%); background: var(--red-deep); }
.adm-top-n { font: 400 1.05rem/1 var(--display); letter-spacing: 0.06em; }
.adm-quiet { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.adm-quiet-btn { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.adm-quiet-note { margin-top: 0.8rem; font: 400 1.15rem/1.2 var(--marker); color: var(--grey); rotate: -1deg; }
.adm-quiet-h small { font-family: var(--body); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--grey); }

/* ── Insta tab ───────────────────────────────────────────────────────────── */
.adm-igcard {
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-left-width: 10px;
  box-shadow: 5px 5px 0 var(--ink);
}
.adm-igcard[data-status="live"] { border-left-color: var(--green); }
.adm-igcard[data-status="expiring"] { border-left-color: var(--yellow-dim); }
.adm-igcard[data-status="stale"] { border-left-color: var(--red); }
.adm-igcard[data-status="none"],
.adm-igcard[data-status="off"] { border-left-color: var(--grey); }
.adm-igcard-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font: 400 0.9rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.adm-igcard-text { font-weight: 600; line-height: 1.5; }
.adm-igcard .adm-btn-row { margin-top: 1rem; }
.adm-igshow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; }
.adm-igshow img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); background: var(--ink-soft); }
.adm-igshow-note { grid-column: 1 / -1; font: 400 1.1rem/1.3 var(--marker); color: var(--grey); }
.adm-iglist { list-style: none; display: grid; gap: 0.8rem; }
.adm-igpost {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.7rem;
  background: var(--paper);
  border: 2px solid var(--ink);
}
.adm-igpost img,
.adm-igpost .adm-igpost-blank { width: 72px; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); background: var(--ink-soft); }
/* No picture (held back, or hidden and its files deleted): say which, so an
   empty box doesn't read as a broken image. Paper on ink-soft 14.6:1. */
.adm-igpost .adm-igpost-blank { display: grid; place-items: center; padding: 4px; }
.adm-igpost-blank-text {
  font: 400 0.72rem/1.1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper);
}
.adm-igpost-cap { font-weight: 700; overflow-wrap: anywhere; }
.adm-igpost-meta { font-size: 0.9rem; color: var(--grey); font-weight: 600; }
.adm-held { margin-top: 0.4rem; padding: 0.4rem 0.55rem; background: #FFF3CF; border-left: 5px solid var(--yellow-dim); font-size: 0.9rem; font-weight: 700; }
.adm-igpost .adm-switch-row { margin-top: 0.4rem; border: 0; min-height: 52px; padding: 0; }
.adm-adv { margin-top: 2.2rem; border-top: 2px dashed rgba(26, 20, 16, 0.25); }
.adm-adv-body { display: grid; gap: 1rem; padding-top: 0.6rem; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
/* staff.js moves this container into whichever <dialog> is on top, because a
   modal dialog sits in the top layer and would otherwise hide it. */
.adm-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabs-h) + var(--add-h) + var(--safe-b) + 28px);
  z-index: 70;
  width: min(480px, calc(100% - 24px));
  translate: -50% 0;
  display: grid;
  gap: 0.5rem;
  pointer-events: none;
}
dialog .adm-toasts { bottom: calc(var(--safe-b) + 96px); }
#traySheet .adm-toasts { bottom: calc(var(--safe-b) + 170px); }   /* clear the Put 'em up footer */
/* Undo is the safety net that replaces "are you sure", so its buttons get the
   full 52px: they fill the toast's height (stretch, no vertical padding)
   rather than making every toast taller. The text keeps its own padding. */
.adm-toast {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  min-height: 56px;   /* 52px buttons inside the 2px border */
  padding: 0 0 0 1rem;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: 4px 4px 0 var(--yellow);
  font-weight: 700;
  pointer-events: auto;
  animation: admToastIn 0.18s ease-out;
}
.adm-toast.is-err { background: var(--red-deep); box-shadow: 4px 4px 0 var(--ink); }
.adm-toast-text { flex: 1; min-width: 0; align-self: center; padding: 0.55rem 0; }
.adm-toast-act,
.adm-toast-x {
  flex: 0 0 auto;
  display: inline-flex;   /* the See it link too, so its text centres */
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  padding: 0 0.7rem;
  border: 0;
  background: transparent;
  color: var(--yellow);
  font: 400 0.95rem/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.adm-toast.is-err .adm-toast-act { color: var(--paper); }
/* A rule between Undo and ✕: two separate targets at a glance, now they touch. */
.adm-toast-x { text-decoration: none; color: var(--paper); font-size: 1.2rem; border-left: 2px solid rgba(250, 245, 234, 0.25); }
body.staff .adm-toast :focus-visible { outline-color: var(--yellow); }
@keyframes admToastIn {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

/* ── Wider screens (the owner's laptop, or Stephen's) ────────────────────── */
@media (min-width: 901px) {
  .adm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem 1.6rem; }
  .adm-main { padding-left: 1.6rem; padding-right: 1.6rem; }
  .adm-quiet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* A 560px sheet rather than full-screen. Centred with translate, as above. */
  .adm-sheet {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    height: auto;
    max-height: 92vh;
    max-height: 92dvh;
    border: 3px solid var(--ink);
    box-shadow: 12px 12px 0 var(--yellow);
  }
  .adm-sheet-small { width: 460px; }
  .adm-sheet-bar { min-height: var(--bar-h); padding-top: 0; }
  .adm-sheet-small .adm-sheet-body { padding-top: 2rem; }
  dialog .adm-toasts { bottom: 90px; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
/* style.css already flattens every transition and animation; the toast
   entrance is the only one that moves anything, so drop it outright. Static
   tilts stay — a tilt isn't motion. */
@media (prefers-reduced-motion: reduce) {
  .adm-toast { animation: none; }
}