/* ==========================================================================
   ADMIN — CMS prototype shell
   Deliberately plainer than the public site: this is a workspace, not a
   stage. Same tokens, quieter motion, information-dense layout.
   ========================================================================== */

.admin-body { background: var(--paper); color: var(--ink); }

/* ---- Login gate ---- */
.admin-login {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--space-m);
}
.admin-login__card { width: min(400px, 100%); }
.admin-login__mark { display: flex; align-items: center; gap: 0.55em; font-size: var(--step-2); margin-bottom: var(--space-m); }
.admin-login__mark .sig { --sig-h: 1.6em; --sig-rope: 18; }
.admin-sidebar__brand .sig { --sig-h: 2.1em; --sig-rope: 26; }
.admin-login__role { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-on-light); }
.admin-login__sub { color: var(--gray-on-light); font-size: var(--step--1); margin-bottom: var(--space-l); }
.admin-login form { display: flex; flex-direction: column; gap: var(--space-m); }
.admin-login__hint { font-size: 0.75rem; color: var(--gray-on-light); background: var(--paper-dim); padding: var(--space-s); border-left: 2px solid var(--gold); }

/* ---- Shell ---- */
.admin-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100svh; }
.admin-shell[hidden] { display: none; }

.admin-sidebar {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100svh;
}
.admin-sidebar__brand { font-size: var(--step-1); line-height: 1; padding: var(--space-s) var(--space-xs) var(--space-m); }
/* Every screen stays within reach: the list scrolls inside the sidebar, and
   fades at the foot while there's more below. */
.admin-nav {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; overflow-y: auto;
  padding-bottom: 32px; scrollbar-width: thin; scrollbar-color: var(--ink-line) transparent;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.admin-nav button {
  display: flex; align-items: center; gap: var(--space-xs);
  text-align: left;
  padding: 0.7rem var(--space-xs);
  font-size: var(--step--1);
  color: var(--gray-on-dark);
  border-radius: 3px;
  transition: background var(--dur-s), color var(--dur-s);
}
.admin-nav button:hover { color: var(--paper); background: var(--ink-soft); }
.admin-nav button[aria-current="true"] { color: var(--paper); background: var(--red); }
.admin-nav__group-label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-on-dark); padding: var(--space-s) var(--space-xs) 4px; }
.admin-sidebar__foot { border-top: 1px solid var(--ink-line); padding-top: var(--space-s); margin-top: var(--space-s); font-size: var(--step--1); }
.admin-sidebar__foot button { color: var(--gray-on-dark); }
.admin-sidebar__foot button:hover { color: var(--paper); }

.admin-main { padding: var(--space-l) var(--space-xl); overflow-x: hidden; }
.admin-panel[hidden] { display: none; }
.admin-panel__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-l); flex-wrap: wrap; gap: var(--space-s); }
.admin-panel__title { font-family: var(--font-display); font-size: var(--step-3); }
.admin-panel__sub { color: var(--gray-on-light); font-size: var(--step--1); margin-top: var(--space-2xs); }

/* ---- Stat cards ---- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-m); margin-bottom: var(--space-l); }
.stat-card { background: var(--paper-dim); padding: var(--space-m); border-left: 2px solid var(--red); }
.stat-card__label { font-size: var(--step--1); color: var(--gray-on-light); }
.stat-card__value { font-family: var(--font-display); font-size: var(--step-3); margin-top: var(--space-2xs); }
.stat-card__delta { font-size: 0.75rem; color: var(--gray-on-light); margin-top: var(--space-2xs); }
.stat-card__delta[data-trend="up"] { color: #1f7a3d; }
.stat-card__delta[data-trend="down"] { color: var(--red); }

/* ---- Chart containers ---- */
.chart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-m); margin-bottom: var(--space-l); }
.chart-card { background: var(--paper-dim); padding: var(--space-m); }
.chart-card__title { font-size: var(--step--1); font-weight: 700; margin-bottom: var(--space-s); }
.chart-card svg { width: 100%; height: auto; overflow: visible; }
.chart-list { display: flex; flex-direction: column; gap: var(--space-s); }
.chart-list__row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-s); align-items: center; font-size: var(--step--1); }
.chart-list__bar { grid-column: 1 / -1; height: 4px; background: var(--paper-line); position: relative; }
.chart-list__bar span { position: absolute; inset: 0 auto 0 0; background: var(--red); }

/* ---- Tables ---- */
.admin-table-wrap { background: var(--paper-dim); overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.admin-table th {
  text-align: left; font-weight: 700; padding: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--paper-line); color: var(--gray-on-light); white-space: nowrap;
}
.admin-table td { padding: var(--space-s) var(--space-m); border-bottom: 1px solid var(--paper-line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: color-mix(in srgb, var(--ink) 3%, transparent); }

.status-pill { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.status-pill--pending { background: color-mix(in srgb, var(--gold) 20%, transparent); color: #8a6a2f; }
.status-pill--checked { background: color-mix(in srgb, #1f7a3d 18%, transparent); color: #1f7a3d; }
.status-pill--received { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }

.icon-btn { padding: 0.3rem 0.6rem; font-size: var(--step--1); font-weight: 600; color: var(--red); }
.icon-btn:hover { text-decoration: underline; }

/* ---- Admin panel-and-form layout ---- */
.admin-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-l); align-items: start; }
.admin-card { background: var(--paper-dim); padding: var(--space-m); }
.admin-card__title { font-size: var(--step--1); font-weight: 700; margin-bottom: var(--space-m); }
.admin-card .field { margin-bottom: var(--space-s); }
.admin-card .field input,
.admin-card .field select,
.admin-card .field textarea { background: var(--paper); border-color: var(--paper-line); color: var(--ink); }

.detail-panel { background: var(--paper-dim); padding: var(--space-m); position: sticky; top: var(--space-m); }
.detail-panel__empty { color: var(--gray-on-light); font-size: var(--step--1); }
.detail-panel dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-on-light); margin-top: var(--space-s); }
.detail-panel dd { font-size: var(--step--1); margin: 2px 0 0; }

/* ---- Check-in tool ---- */
.checkin-panel { max-width: 640px; }
.checkin-input-row { display: flex; gap: var(--space-s); }
.checkin-input-row input { flex: 1; }
.checkin-result { margin-top: var(--space-l); padding: var(--space-m); background: var(--paper-dim); display: none; }
.checkin-result[data-visible="true"] { display: block; }
.checkin-result[data-outcome="success"] { border-left: 3px solid #1f7a3d; }
.checkin-result[data-outcome="error"] { border-left: 3px solid var(--red); }
.checkin-result[data-outcome="warn"] { border-left: 3px solid var(--gold); }

@media (max-width: 1100px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; flex-direction: row; overflow-x: auto; }
  .admin-nav { flex-direction: row; }
  .admin-nav__group-label { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-main { padding: var(--space-m); }
}

/* ---- Filter pills inside the light admin shell ----
   pages.css styles these for the dark public site; the admin panel is a
   paper surface, so the resting colours need inverting. */
.admin-panel__head .filter-pill { border-color: var(--paper-line); color: var(--gray-on-light); }
.admin-panel__head .filter-pill:hover { border-color: var(--red); color: var(--ink); }
.admin-panel__head .filter-pill[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--paper); }

/* Enquiry detail definition list */
.detail-panel dl { display: grid; grid-template-columns: 1fr; gap: var(--space-2xs); }
.detail-panel dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-on-light); }
.detail-panel dd { margin: 0 0 var(--space-xs); font-size: var(--step--1); word-break: break-word; }

/* ==========================================================================
   Sign-in, the shell's new parts, and the website screens
   (admin-core.js, admin-site.js, admin-team.js)
   ========================================================================== */
.admin-login[hidden],
.admin-auth[hidden] { display: none; }
.admin-login .admin-auth { display: flex; flex-direction: column; gap: var(--space-m); }
.admin-auth__note { font-size: var(--step--1); }
.admin-auth__note:empty { display: none; }
.admin-auth__note[data-kind="error"] { padding: var(--space-xs) var(--space-s); border-left: 2px solid var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--red); }
.admin-auth__note[data-kind="ok"] { padding: var(--space-xs) var(--space-s); border-left: 2px solid #1f7a3d; background: color-mix(in srgb, #1f7a3d 10%, transparent); color: #1f5f34; }
.admin-auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs); font-size: var(--step--1); }
.admin-auth__links button { padding: 0; color: var(--red); font-weight: 600; }
.admin-auth__links button:hover { text-decoration: underline; }

.admin-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs);
  padding: 0.46rem var(--space-xs);
  border-radius: 3px;
  font-size: var(--step--1);
  color: var(--gray-on-dark);
  transition: background var(--dur-s), color var(--dur-s);
}
.admin-nav a:hover { color: var(--paper); background: var(--ink-soft); }
.admin-nav a[aria-current="true"] { color: var(--paper); background: var(--red); }
.admin-nav__badge { min-width: 1.35rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 0.68rem; font-weight: 800; text-align: center; }
.admin-nav__badge[hidden] { display: none; }
.admin-me { display: grid; gap: 2px; margin-bottom: var(--space-s); }
.admin-me strong { color: var(--paper); }
.admin-me span { font-size: 0.72rem; color: var(--gray-on-dark); word-break: break-all; }
.admin-sidebar__link { display: block; padding: 0.2rem 0; color: var(--gray-on-dark); }
.admin-sidebar__link:hover { color: var(--paper); }
.admin-mode-banner { margin-bottom: var(--space-l); padding: var(--space-xs) var(--space-s); border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--paper)); font-size: var(--step--1); }
.admin-mode-banner[hidden] { display: none; }

/* ---- Toasts and dialogs ---- */
.admin-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: grid; justify-items: end; gap: 8px; pointer-events: none; }
.admin-toast {
  max-width: min(440px, calc(100vw - 40px));
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step--1);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
}
.admin-toast.is-in { opacity: 1; transform: none; }
.admin-toast.is-error { border-left-color: var(--red-bright); }
.admin-toast.is-success { border-left-color: #3c9d5d; }

.admin-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: var(--space-m);
  border: 0;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
}
.admin-dialog::backdrop { background: rgba(10, 9, 8, 0.5); }
.admin-dialog__title { margin-bottom: var(--space-s); font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.1; }
.admin-dialog__body { display: grid; gap: var(--space-s); font-size: var(--step--1); }
.admin-dialog__list { padding-left: 1.2rem; list-style: disc; }
.admin-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-m); }
.admin-dialog .btn { padding: 0.75rem 1.2rem; font-size: var(--step--1); }
.admin-body .btn-ghost { color: var(--ink); }
.admin-body .btn.is-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.admin-body .btn[disabled] { opacity: 0.45; cursor: default; transform: none; }

/* ---- Inputs ---- */
.admin-input,
.admin-select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
}
.admin-select { width: auto; padding: 0.45rem 0.6rem; }
textarea.admin-input { resize: vertical; line-height: 1.5; }
.admin-input:focus,
.admin-select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.admin-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: var(--step--1); } /* never wider than its box, however long a dropdown's choices */
.admin-field > span { font-weight: 700; }
.admin-field small { color: var(--gray-on-light); font-size: 0.75rem; }
.admin-empty { padding: var(--space-m); background: var(--paper-dim); color: var(--gray-on-light); font-size: var(--step--1); }

/* ---- Pages and Header/menus/footer ---- */
.pages-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-l); align-items: start; }
.pages-list { position: sticky; top: var(--space-m); display: grid; gap: 2px; }
.pages-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: 0.55rem 0.75rem; border-radius: 3px; font-size: var(--step--1); }
.pages-list a:hover { background: var(--paper-dim); }
.pages-list a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.pages-list__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

.pe-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  margin-bottom: var(--space-m);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--paper-line);
  background: var(--paper);
}
.pe-search { flex: 1 1 220px; width: auto; }
.pe-format { display: flex; gap: 6px; }
.pe-status { font-size: var(--step--1); color: var(--gray-on-light); }
.pe-status.is-unsaved { color: #8a6a2f; font-weight: 700; }
.pe-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-left: auto; }
.pe-toolbar .btn { padding: 0.7rem 1.1rem; font-size: var(--step--1); }

.pe-card { margin-bottom: var(--space-m); padding: var(--space-m); background: var(--paper-dim); }
.pe-card[hidden] { display: none; }
.pe-card__title { margin-bottom: var(--space-s); font-size: var(--step--1); font-weight: 800; }
.pe-card__note { margin-top: calc(var(--space-s) * -0.5); margin-bottom: var(--space-s); font-size: 0.78rem; color: var(--gray-on-light); }
.pe-card--note { border-left: 3px solid var(--gold); font-size: var(--step--1); }
.pe-card--held { border-left: 3px solid var(--red); }
.pe-held__text { font-size: var(--step--1); color: var(--gray-on-light); }

.pe-row { display: grid; gap: 6px; padding: var(--space-s) 0; border-top: 1px solid var(--paper-line); }
.pe-card__title + .pe-row,
.pe-card__note + .pe-row { border-top: 0; }
.pe-row[hidden] { display: none; }
.pe-row__head { display: flex; align-items: center; gap: var(--space-xs); font-size: 0.72rem; }
.pe-kind { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-on-light); }
.pe-chip { padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--paper-line); font-size: 0.68rem; font-weight: 700; }
.pe-chip:empty { display: none; }
.pe-chip.is-you { background: var(--ink); color: var(--paper); }
.pe-row[data-state="changed"] .pe-chip { background: color-mix(in srgb, var(--gold) 28%, transparent); color: #6f521f; }
.pe-row[data-state="live"] .pe-chip { background: color-mix(in srgb, #1f7a3d 14%, transparent); color: #1f7a3d; }
.pe-reset { margin-left: auto; color: var(--red); font-size: 0.75rem; font-weight: 600; }
.pe-reset:hover { text-decoration: underline; }
.pe-reset[hidden] { display: none; }

.pe-rich {
  min-height: 2.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font-size: var(--step--1);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.pe-rich:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.pe-rich em { font-style: italic; color: var(--red); }
.pe-row[data-state="changed"] .pe-rich { border-color: color-mix(in srgb, var(--gold) 75%, var(--paper-line)); }
.pe-href { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }
.pe-href-field > span { font-size: 0.72rem; color: var(--gray-on-light); }

.pe-image { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-s); align-items: start; }
.pe-thumb { width: 128px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; background: var(--paper-line); }
.pe-image__side { display: grid; gap: 8px; }
.pe-image__status { font-size: 0.75rem; color: var(--gray-on-light); }
.pe-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pe-small-btn {
  display: inline-flex; align-items: center;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.pe-small-btn:hover { border-color: var(--ink); }
.pe-small-btn.is-danger { color: var(--red); }
.pe-small-btn.is-em { font-family: var(--font-display); font-size: 0.95rem; font-style: italic; font-weight: 400; color: var(--red); }
.pe-small-btn.is-b { font-weight: 800; }
.pe-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: 0.55rem 0; border-top: 1px solid var(--paper-line); font-size: var(--step--1); cursor: pointer; }
.pe-toggle input { width: 18px; height: 18px; accent-color: var(--red); }

/* ---- Publish & history ---- */
.pub-list { display: grid; gap: 1px; background: var(--paper-line); }
.pub-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-s); align-items: center; padding: var(--space-s) var(--space-m); background: var(--paper); }
.pub-item__title { font-weight: 700; font-size: var(--step--1); }
.pub-item__meta { font-size: 0.75rem; color: var(--gray-on-light); }
.pub-item__note { margin-top: 2px; font-size: 0.8rem; font-style: italic; }
.pub-item__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pub-go { display: flex; justify-content: flex-end; margin-top: var(--space-m); }

/* ---- Media library ---- */
.media-drop {
  display: grid; justify-items: center; gap: var(--space-xs);
  margin-bottom: var(--space-m);
  padding: var(--space-l) var(--space-m);
  border: 2px dashed var(--paper-line);
  background: var(--paper-dim);
  text-align: center;
}
.media-drop.is-over { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--paper-dim)); }
.media-drop__title { font-weight: 700; }
.media-drop small { font-size: 0.75rem; color: var(--gray-on-light); }
.media-progress { display: grid; gap: 4px; margin-bottom: var(--space-s); font-size: var(--step--1); }
.media-progress .is-error { color: var(--red); }
.media-usage { margin-bottom: var(--space-s); font-size: 0.78rem; color: var(--gray-on-light); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-s); }
.media-card { display: grid; align-content: start; background: var(--paper-dim); }
.media-card__thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-line); }
.media-card__file { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--paper-line); color: var(--gray-on-light); font-weight: 800; }
.media-card__body { display: grid; gap: 4px; padding: var(--space-xs); font-size: 0.75rem; }
.media-card__name { font-weight: 700; word-break: break-all; }
.media-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ---- People & roles, Activity ---- */
.people-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); margin-bottom: var(--space-l); }
.people-role { padding: var(--space-s); border-top: 2px solid var(--gold); background: var(--paper-dim); font-size: var(--step--1); }
.people-role strong { display: block; margin-bottom: 4px; }
.people-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.people-form { display: grid; gap: var(--space-s); }
.people-how { margin-top: var(--space-s); }
.activity-filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-m); }
.people-layout { display: grid; gap: var(--space-l); }
.people-table td { white-space: nowrap; }
.people-table td:nth-child(2) { white-space: normal; word-break: break-all; }
.people-added small { display: block; font-size: 0.72rem; color: var(--gray-on-light); }
.people-add { max-width: 760px; }
.people-add .people-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.people-add .people-form .admin-auth__note,
.people-add .people-form .btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 680px) {
  .people-add .people-form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Content screens (admin-content.js)
   ========================================================================== */
.ce-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-l); align-items: start; }
.ce-master { position: sticky; top: var(--space-m); display: grid; gap: var(--space-s); }
.ce-master__top { display: grid; gap: var(--space-xs); }
.ce-add { justify-content: center; padding: 0.7rem 1rem; font-size: var(--step--1); }
.ce-items { display: grid; gap: 2px; max-height: calc(100vh - 230px); overflow-y: auto; }
.ce-itembtn { display: grid; gap: 2px; width: 100%; padding: 0.6rem 0.75rem; border-radius: 3px; text-align: left; }
.ce-itembtn:hover { background: var(--paper-dim); }
.ce-itembtn[aria-current="true"] { background: var(--ink); color: var(--paper); }
.ce-itembtn__label { overflow: hidden; font-size: var(--step--1); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ce-itembtn__meta { font-size: 0.72rem; color: var(--gray-on-light); }
.ce-itembtn[aria-current="true"] .ce-itembtn__meta { color: var(--gray-on-dark); }
.ce-detail,
.ce-form { display: grid; gap: var(--space-s); margin: 0; }
.ce-detail__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); padding-bottom: var(--space-s); border-bottom: 1px solid var(--paper-line); }
.ce-detail__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.1; }
.ce-field__label { font-weight: 700; }
.ce-short { max-width: 8rem; }
.admin-input.is-invalid { border-color: var(--red); }
.ce-check { padding: 0.2rem 0; border-top: 0; }
.ce-check small { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 400; color: var(--gray-on-light); }
.ce-rich { display: grid; gap: 6px; }
.ce-group { display: grid; gap: var(--space-s); min-width: 0; margin: 0; padding: var(--space-s) var(--space-m) var(--space-m); border: 1px solid var(--paper-line); border-radius: 3px; background: color-mix(in srgb, var(--paper) 55%, transparent); }
.ce-group > legend { padding: 0 6px; font-size: var(--step--1); font-weight: 800; }
.ce-list { display: grid; gap: var(--space-s); }
.ce-item { display: grid; gap: var(--space-s); padding: var(--space-s); border: 1px solid var(--paper-line); border-radius: 3px; background: var(--paper); }
.ce-item__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.ce-item__label { overflow: hidden; font-size: var(--step--1); text-overflow: ellipsis; }
.ce-list__add { justify-self: start; }
.ce-chip-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: 0.45rem 0.6rem; border: 1px solid var(--paper-line); border-radius: 3px; background: var(--paper); font-size: var(--step--1); }
.ce-file { display: grid; place-items: center; width: 128px; aspect-ratio: 4 / 3; padding: 6px; border-radius: 3px; background: var(--paper-line); font-size: 0.72rem; font-weight: 700; text-align: center; word-break: break-all; }
.ce-file[hidden],
.pe-thumb[hidden] { display: none; }
.ce-videos__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin-bottom: var(--space-m); }
.ce-videos__top .pe-card__note { margin: 0; }
.ce-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-s); }
.ce-video { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-s); margin: 0; }
.ce-video.is-hidden .ce-video__media { opacity: 0.35; }
.ce-video__thumb { width: 140px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: var(--paper-line); }
.ce-video__body { display: grid; gap: 8px; min-width: 0; }
.ce-video__title { font-size: var(--step--1); font-weight: 700; }
.ce-video .pe-toggle { padding: 0.3rem 0; }

/* ==========================================================================
   Inbox (admin-inbox.js)
   ========================================================================== */
.inbox-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-m); }
.inbox-search { flex: 1 1 220px; width: auto; }
.inbox-count { font-size: var(--step--1); color: var(--gray-on-light); }
.inbox-layout { grid-template-columns: minmax(0, 1fr) 340px; }
.inbox-layout .admin-table th,
.inbox-layout .admin-table td { padding: var(--space-xs) var(--space-s); }
.inbox-bar .admin-select { max-width: 100%; }
.inbox-side { display: grid; align-content: start; gap: var(--space-m); min-width: 0; }
.inbox-side .admin-select,
.detail-panel .admin-select { width: 100%; max-width: 100%; }
.inbox-side .detail-panel { position: static; }
.inbox-actions { margin: var(--space-s) 0; }
.inbox-actions .btn { padding: 0.65rem 1rem; font-size: var(--step--1); }
.inbox-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-s); margin-bottom: var(--space-m); }
.inbox-summary .stat-card__value { font-size: var(--step-2); }
.inbox-stars { display: flex; gap: 2px; }
.inbox-stars button { padding: 0 2px; font-size: 1.4rem; line-height: 1; color: var(--paper-line); }
.inbox-stars button.is-on { color: var(--gold); }
.inbox-files { display: grid; gap: 6px; padding: 0; list-style: none; }
.inbox-add { display: grid; gap: var(--space-s); }
.admin-table.is-clickable tbody tr { cursor: pointer; }
.admin-table tr.is-current td { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.detail-panel .admin-field { margin-bottom: var(--space-s); }
.status-pill--new { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.status-pill--replied,
.status-pill--shortlisted,
.status-pill--invited { background: color-mix(in srgb, var(--gold) 22%, transparent); color: #7a5a22; }
.status-pill--confirmed,
.status-pill--selected,
.status-pill--registered { background: color-mix(in srgb, #1f7a3d 16%, transparent); color: #1f7a3d; }
.status-pill--declined,
.status-pill--not-selected,
.status-pill--cancelled,
.status-pill--archived { background: var(--paper-line); color: var(--gray-on-light); }

/* ---- Dashboard: what needs attention ---- */
.attention__title { margin-bottom: var(--space-s); font-size: var(--step--1); font-weight: 800; }
.attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: var(--space-s); margin-bottom: var(--space-l); }
.attention-card { display: block; padding: var(--space-m); border-left: 2px solid var(--gold); background: var(--paper-dim); transition: background var(--dur-s); }
.attention-card:hover { background: color-mix(in srgb, var(--gold) 14%, var(--paper-dim)); }
.attention-card .stat-card__value { font-size: var(--step-2); white-space: nowrap; }

/* ---- Check-in ---- */
.checkin-form { margin-bottom: var(--space-m); }
.checkin-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--step-1); letter-spacing: 0.06em; text-transform: uppercase; }
.checkin-input-row .btn { white-space: nowrap; }
.checkin-video { width: 100%; max-width: 480px; aspect-ratio: 4 / 3; margin-bottom: var(--space-m); border-radius: 4px; background: var(--ink); object-fit: cover; }
.checkin-video[hidden] { display: none; }
.checkin-result__main { font-size: var(--step-1); font-weight: 700; }
.checkin-recent { display: grid; gap: 4px; padding: 0; list-style: none; font-size: var(--step--1); color: var(--gray-on-light); }
.checkin-recent__title { margin-top: var(--space-l); }

@media (max-width: 1100px) {
  .ce-layout,
  .inbox-layout { grid-template-columns: 1fr; }
  .ce-master { position: static; }
  .ce-items { max-height: 260px; }
}
@media (max-width: 680px) {
  .ce-video { grid-template-columns: 1fr; }
  .ce-video__thumb { width: 100%; }
  .checkin-input-row { flex-wrap: wrap; }
}

@media (max-width: 1100px) {
  .admin-nav a { white-space: nowrap; }
  .pages-layout { grid-template-columns: 1fr; }
  .pages-list { position: static; display: flex; flex-wrap: wrap; }
  .people-roles { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .pe-image { grid-template-columns: 1fr; }
  .pe-toolbar__actions { margin-left: 0; }
  .pub-item { grid-template-columns: 1fr; }
  .pub-item__actions { justify-content: flex-start; }
}

/* ==========================================================================
   Analytics, the dashboard's last 30 days, campaign links (admin-analytics.js)
   ========================================================================== */
.an-notice { padding: var(--space-xs) var(--space-s); border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--paper)); font-size: var(--step--1); }
.admin-panel > .an-notice { margin-bottom: var(--space-m); }
.an-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); margin-bottom: var(--space-s); }
.an-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.an-custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--step--1); }
.an-custom[hidden] { display: none; }
.an-date { width: auto; padding: 0.4rem 0.5rem; }
.an-range-note { font-size: var(--step--1); color: var(--gray-on-light); }
.an-live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 700; }
.an-live:empty { display: none; }
.an-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #1f7a3d; animation: an-pulse 2s infinite; }
@keyframes an-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, #1f7a3d 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .an-live__dot { animation: none; } }
.an-tabs { display: flex; gap: 2px; overflow-x: auto; margin-bottom: var(--space-l); border-bottom: 1px solid var(--paper-line); scrollbar-width: none; }
.an-tabs::-webkit-scrollbar { display: none; }
.an-tabs a { padding: 0.7rem 0.9rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--gray-on-light); font-size: var(--step--1); font-weight: 700; white-space: nowrap; }
.an-tabs a:hover { color: var(--ink); }
.an-tabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--red); }
.an-body, .an-dash { display: grid; gap: var(--space-m); }
.an-dash { margin-top: var(--space-l); }
.an-dash__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-s); }
.an-dash__head .attention__title { margin: 0; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-s); }
.an-kpi .stat-card__value { font-size: var(--step-2); }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-m); align-items: start; }
.an-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.an-card { min-width: 0; padding: var(--space-m); background: var(--paper-dim); }
.an-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-s); margin-bottom: var(--space-s); }
.an-card__title { font-size: var(--step-0); font-weight: 800; }
.an-card__sub { margin-top: 4px; font-size: 0.8rem; color: var(--gray-on-light); max-width: 70ch; }
.an-card__tools { margin-bottom: var(--space-s); }
.an-card__tools .admin-select { max-width: 100%; }
.an-empty { font-size: var(--step--1); color: var(--gray-on-light); }
.an-empty a { text-decoration: underline; text-underline-offset: 3px; }
.an-chart-wrap { min-width: 0; }
.an-chart { display: block; width: 100%; height: auto; overflow: visible; }
.an-gridline { stroke: var(--paper-line); stroke-width: 1; }
.an-axis { fill: var(--gray-on-light); font-size: 11px; }
.an-line { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.an-line--prev { stroke: var(--gray-on-light); stroke-width: 1.5; stroke-dasharray: 4 4; }
.an-area { fill: color-mix(in srgb, var(--red) 10%, transparent); }
.an-dot { fill: var(--red); }
.an-target { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 6 4; }
.an-target-label { fill: #7a5a22; font-size: 11px; font-weight: 700; }
.an-hit { fill: transparent; }
.an-hit:hover { fill: color-mix(in srgb, var(--ink) 5%, transparent); }
.an-legend { display: flex; flex-wrap: wrap; gap: 6px var(--space-s); margin-top: var(--space-2xs); font-size: 0.78rem; color: var(--gray-on-light); }
.an-legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--red); }
.an-legend i.is-prev { background: repeating-linear-gradient(90deg, var(--gray-on-light) 0 4px, transparent 4px 7px); }
.an-legend i.is-0 { height: 10px; width: 10px; border-radius: 2px; background: var(--red); }
.an-legend i.is-1 { height: 10px; width: 10px; border-radius: 2px; background: var(--gold); }
.an-bars { display: grid; gap: 10px; }
.an-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; font-size: var(--step--1); }
.an-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.an-bar__label:hover { color: var(--red); }
.an-bar__value { color: var(--gray-on-light); font-variant-numeric: tabular-nums; }
.an-bar__track { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--paper-line); }
.an-bar__fill { display: block; height: 100%; border-radius: 3px; background: var(--red); }
.an-bar__note { grid-column: 1 / -1; font-size: 0.72rem; color: var(--gray-on-light); }
.an-table td.num, .an-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table tr.is-flagged td { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.an-table .an-progress { min-width: 90px; }
.an-path { display: block; margin-top: 2px; font-size: 0.72rem; color: var(--gray-on-light); word-break: break-all; }
.an-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-s); }
.an-goal { display: grid; gap: 2px; padding: var(--space-s); border-left: 2px solid var(--gold); background: var(--paper); transition: background var(--dur-s); }
.an-goal:hover { background: color-mix(in srgb, var(--gold) 10%, var(--paper)); }
.an-goal strong { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.1; }
.an-goal span { font-size: 0.8rem; color: var(--gray-on-light); }
.an-funnel { display: grid; gap: 14px; }
.an-step { display: grid; gap: 4px; }
.an-step__top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--step--1); }
.an-step__bar { height: 22px; overflow: hidden; border-radius: 3px; background: var(--paper-line); }
.an-step__fill { display: block; height: 100%; background: var(--red); }
.an-step__drop { font-size: 0.72rem; color: var(--gray-on-light); }
.an-heat-wrap { overflow-x: auto; }
.an-heat { display: grid; gap: 2px; min-width: 560px; }
.an-heat__row { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 2px; align-items: center; }
.an-heat__day, .an-heat__hour { font-size: 0.68rem; color: var(--gray-on-light); }
.an-heat__cell { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--red) calc(var(--v) * 100%), var(--paper)); }
.an-stack { display: flex; height: 26px; margin-bottom: var(--space-s); overflow: hidden; border-radius: 3px; background: var(--paper-line); }
.an-stack span { display: block; height: 100%; }
.an-stack .is-0 { background: var(--red); }
.an-stack .is-1 { background: var(--gold); }
.an-mine { max-width: 640px; }
.an-mine small { color: var(--gray-on-light); }
.an-stat strong { display: block; font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1; }
.an-stat span { font-size: 0.75rem; color: var(--gray-on-light); }
.an-progress { height: 8px; overflow: hidden; border-radius: 4px; background: var(--paper-line); }
.an-progress span { display: block; height: 100%; background: var(--red); }
.an-progress.is-done span { background: #1f7a3d; }
.an-insight { display: grid; gap: var(--space-s); padding: var(--space-s) var(--space-m); border: 1px solid var(--paper-line); border-left: 3px solid var(--gold); border-radius: 3px; background: var(--paper); }
.an-insight__stats { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); }
.an-pace { display: grid; }
.an-pace__row { display: grid; gap: 6px; padding: var(--space-s) 0; border-top: 1px solid var(--paper-line); }
.an-pace__row:first-child { border-top: 0; padding-top: 0; }
.an-pace__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: var(--step--1); }
.an-pace__top a:hover strong { color: var(--red); }
.ce-subhead { margin-top: var(--space-xs); padding-top: var(--space-s); border-top: 1px solid var(--paper-line); color: var(--gray-on-light); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ce-form > .ce-subhead:first-child, .ce-detail .ce-subhead:first-of-type { border-top: 0; }
.cl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-l); align-items: start; }
.cl-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--space-s) var(--space-m); align-items: start; }
.cl-form .admin-field { align-content: start; }
.cl-qr__empty { display: grid; place-items: center; height: 100%; margin: 0; padding: var(--space-s); color: var(--gray-on-light); font-size: 0.8rem; text-align: center; }
.cl-form .admin-select, .cl-dest .admin-input { width: 100%; max-width: 100%; }
.cl-dest { display: grid; gap: 6px; }
.cl-result { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: var(--space-s); border-top: 1px solid var(--paper-line); }
.cl-link { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; word-break: break-all; }
.cl-qr { width: 240px; max-width: 100%; aspect-ratio: 1; padding: 10px; background: #fff; box-shadow: 0 0 0 1px var(--paper-line); }
.cl-qr canvas, .cl-qr img { display: block; width: 100% !important; height: auto !important; }
.cl-qr canvas + img { display: none !important; }
.admin-dialog .cl-qr { margin: 0 auto var(--space-s); }
@media (max-width: 900px) {
  .cl-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The admin on a phone: a bar with the screen's name and a Menu button
   that opens the sidebar; big targets for checking people in at the door.
   ========================================================================== */
/* Nothing wider than its column: a dropdown with long choices shrinks to fit,
   and the columns of a screen may narrow (a wide table then scrolls). */
.admin-select { max-width: 100%; }
.ce-form, .ce-detail, .ce-group, .ce-list, .ce-item, .ce-field, .people-layout > * { min-width: 0; }
.admin-current, .admin-nav-toggle { display: none; }
@media (max-width: 900px) {
  /* The bar keeps its height on a short screen; the content takes the rest. */
  .admin-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .admin-sidebar { position: sticky; top: 0; z-index: 40; height: auto; max-height: 100svh; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 16px; overflow: visible; }
  .admin-sidebar__brand { margin: 0; padding: 0; font-size: var(--step-0); }
  .admin-current { display: block; flex: 1; min-width: 0; margin: 0; color: var(--paper); font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-nav-toggle { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); border-radius: 999px; color: var(--paper); font-size: 0.85rem; font-weight: 700; }
  .admin-nav, .admin-sidebar__foot { display: none; }
  /* Open: the whole list on its own full-width row under the bar, scrolling
     if it's taller than the screen, with signing out below it. */
  .admin-shell.is-nav-open .admin-sidebar { align-content: flex-start; overflow-y: auto; }
  .admin-shell.is-nav-open .admin-nav { display: flex; flex: 0 0 100%; flex-direction: column; width: 100%; max-height: calc(100svh - 175px); overflow-y: auto; padding-top: 6px; }
  .admin-shell.is-nav-open .admin-nav__group-label { display: block; }
  .admin-shell.is-nav-open .admin-sidebar__foot { display: flex; flex: 0 0 100%; flex-wrap: wrap; align-items: center; gap: 2px var(--space-m); margin-top: 0; padding-top: 10px; }
  .admin-shell.is-nav-open .admin-me { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
  .admin-shell.is-nav-open .admin-sidebar__link { padding: 8px 0; }
  .admin-nav a { min-height: 44px; padding: 0.7rem 0.9rem; white-space: normal; }
  .detail-panel, .ce-detail { scroll-margin-top: 76px; }
  .admin-main { padding: 16px; }
  .admin-panel__title { font-size: var(--step-2); }
}
@media (max-width: 680px) {
  .checkin-input-row { display: grid; grid-template-columns: 1fr; }
  .checkin-input-row .btn-ghost { order: -1; }
  .checkin-input-row .btn { width: 100%; justify-content: center; padding: 1rem; font-size: 1rem; }
  .checkin-id { padding: 0.9rem; font-size: 1.35rem; text-align: center; }
  .checkin-video { max-width: none; }
  .checkin-result__main { font-size: 1.35rem; }
  .checkin-result[data-outcome="success"] { background: color-mix(in srgb, #1f7a3d 12%, var(--paper)); }
  .checkin-result[data-outcome="warn"] { background: color-mix(in srgb, var(--gold) 18%, var(--paper)); }
  .checkin-result[data-outcome="error"] { background: color-mix(in srgb, var(--red) 10%, var(--paper)); }
  .inbox-bar > * { flex: 1 1 100%; }
  .admin-toasts { left: 12px; right: 12px; }
  .admin-toast { max-width: none; }
  .an-toolbar { flex-direction: column; align-items: stretch; }
  .an-range .admin-select { flex: 1 1 100%; }
  .an-card { padding: var(--space-s); }
  .an-kpis { grid-template-columns: 1fr 1fr; }
}