/* SPDX-License-Identifier: MIT */
/* LCB Manchester admin panel styles. Only used behind admin/login.php.
   Reuses the site tokens from css/styles.css so the panel feels like part
   of the same site. */

.admin-body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
}

.admin-block { display: block; width: 100%; }

/* Class rules below set display on the same elements that use the hidden
   attribute, so hidden has to win. */
[hidden] { display: none !important; }

/* The site ghost button is white on a dark background. The admin pages are
   light, so the ghost button needs its own colours here. The top bar stays
   dark and keeps the light treatment. */
.admin-body .btn-ghost {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.admin-body .btn-ghost:hover { background: var(--mist); border-color: var(--muted); }
.admin-topbar .btn-ghost {
  background: rgba(255,255,255,.12);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.55);
}
.admin-topbar .btn-ghost:hover { background: rgba(255,255,255,.22); }

/* ---------------- top bar ---------------- */

/* The top bar sticks to the top of the screen, so anything the browser scrolls
   to has to stop below it instead of hiding underneath. */
html { scroll-padding-top: 7rem; }

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .7rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--white);
  text-decoration: none;
}
.admin-brand img { border-radius: 12px; background: var(--white); }
.admin-brand strong { display: block; font-family: var(--serif); font-size: 1.15rem; line-height: 1.1; }
.admin-brand small { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #9be7c4; }

.admin-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.admin-tab {
  color: #cbd5e1;
  text-decoration: none;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .9rem;
  border: 1px solid transparent;
}
.admin-tab:hover { color: var(--white); background: rgba(255,255,255,.08); }
.admin-tab.is-active { background: var(--bd-green); color: var(--white); border-color: var(--bd-green); }

.admin-topbar-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.admin-who { font-size: .8rem; color: #cbd5e1; }

/* ---------------- layout ---------------- */

.admin-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  display: grid;
  gap: 1.25rem;
}
/* Grid items must be allowed to shrink, or a wide card can push the whole
   admin page sideways on a narrow phone. */
.admin-main > * { min-width: 0; }

.admin-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.admin-panel-head { margin-bottom: 1rem; }
.admin-panel-head h2 { margin: 0 0 .25rem; font-family: var(--serif); font-size: 1.6rem; }
.admin-panel-head p { margin: 0; color: var(--muted); font-size: .92rem; }

.admin-kicker {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bd-green);
  font-weight: 700;
}

/* ---------------- stats ---------------- */

.admin-stat-grid {
  display: grid;
  /* min() keeps the track from being wider than the screen on a narrow
     phone, which used to push the dashboard 141px sideways. */
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 1rem;
}
.admin-stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bd-green);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.admin-stat-label { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.admin-stat-value { display: block; font-family: var(--serif); font-size: 2.4rem; line-height: 1.1; margin: .2rem 0; }
.admin-stat-value-sm { font-size: 1.5rem; }
.admin-stat-note { display: block; font-size: .8rem; color: var(--muted); }

/* ---------------- alerts ---------------- */

.admin-alert {
  border-radius: 12px;
  padding: .7rem .9rem;
  font-size: .92rem;
  margin-bottom: .75rem;
  border: 1px solid transparent;
}
.admin-alert-ok { background: #e9f7f0; color: #07553f; border-color: #b9e4d0; }
.admin-alert-error { background: #fdecee; color: #8b1c2c; border-color: #f6c8ce; }
.admin-alert-warn { background: #fff8e1; color: #6c4f00; border-color: #f2dfa8; }
.admin-empty { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------------- forms ---------------- */

.admin-form { display: grid; gap: 1rem; }
.admin-field { display: grid; gap: .35rem; }
.admin-field label { font-weight: 600; font-size: .88rem; }
.admin-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="tel"],
.admin-form input[type="date"],
.admin-form input[type="password"],
.admin-form input[type="text"],
.admin-form select,
.admin-form textarea {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--white);
  color: var(--ink);
}
.admin-form textarea { min-height: 5rem; resize: vertical; }
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  outline: 2px solid var(--bd-green);
  outline-offset: 1px;
}
.admin-form-foot { margin: 0; font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.admin-field-note { margin: 0; font-size: .82rem; color: var(--muted); }
.admin-field label.admin-check {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: .92rem;
}
.admin-field label.admin-check input[type="checkbox"] { margin-top: .15rem; width: 1.05rem; height: 1.05rem; }

.admin-drop {
  position: relative;
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--mist);
  padding: 1.5rem 1rem;
  text-align: center;
}
.admin-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
/* The file picker sits on top of the box with no opacity, so the browser
   focus ring cannot be seen. The outline goes on the box itself, so a person
   using the keyboard can see where they are. */
.admin-drop:focus-within {
  outline: 2px solid var(--bd-green);
  outline-offset: 2px;
}
.admin-drop-title { margin: 0 0 .25rem; font-weight: 600; }
.admin-drop-note { margin: 0; font-size: .82rem; color: var(--muted); }
.admin-drop.is-busy { border-color: var(--bd-green); background: #e9f7f0; }

.admin-file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.admin-file-list li {
  display: flex;
  gap: .6rem;
  align-items: center;
  font-size: .84rem;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .45rem .6rem;
}
.admin-file-list .hd-badge {
  margin-left: auto;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: var(--bd-green);
  color: var(--white);
  white-space: nowrap;
}
.admin-file-list .hd-badge.is-plain { background: var(--line); color: var(--muted); }

/* ---------------- HD engine box ---------------- */

.admin-hd-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,106,78,.06), rgba(1,33,105,.06));
  padding: 1rem;
}
.admin-hd-head { display: flex; align-items: center; gap: .6rem; }
.admin-hd-state {
  margin-left: auto;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bd-green);
  background: #e9f7f0;
  border: 1px solid #b9e4d0;
  padding: .18rem .55rem;
  border-radius: 999px;
}
.admin-hd-note { margin: .4rem 0 0; font-size: .84rem; color: var(--muted); }
.admin-hd-preview {
  margin-top: .85rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.admin-hd-preview figure { margin: 0; }
.admin-hd-preview figcaption { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.admin-hd-preview img {
  width: 100%;
  height: 190px;
  /* The whole picture must be visible here. This panel exists to show that a
     face is not reshaped, so cutting the top off a face would defeat it. */
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--mist);
}

/* ---------------- tables ---------------- */

.admin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-table th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.admin-table code { background: var(--mist); padding: .1rem .35rem; border-radius: 6px; font-size: .78rem; }
/* On a narrow phone a wide table is made to scroll sideways inside its own
   panel, so it can never push the admin page off the screen. */
@media (max-width: 760px) {
  .admin-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table thead, .admin-table tbody { display: table; width: 100%; }
}

/* ---------------- years ---------------- */

.admin-year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.admin-year-chip {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .6rem .7rem;
  background: var(--mist);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.admin-year-chip:hover { border-color: var(--bd-green); background: #eef7f2; transform: translateY(-1px); }
.admin-year-chip:focus-visible { outline: 2px solid var(--bd-green); outline-offset: 2px; }
.admin-year-chip.is-current { border-color: var(--bd-green); background: #e7f3ec; }
.admin-year-chip strong { display: block; font-family: var(--serif); font-size: 1.25rem; }
.admin-year-chip span { font-size: .76rem; color: var(--muted); }

/* ---------------- Time Capsule manager ---------------- */

.capsule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.capsule-item {
  display: grid;
  grid-template-columns: 28px 96px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .7rem;
  background: var(--white);
}
.capsule-item.is-dragging { opacity: .6; border-color: var(--bd-green); box-shadow: 0 0 0 2px rgba(0,106,78,.25); }
.capsule-item.is-removed { border-color: #d9534f; background: #fdf3f2; }
.capsule-item.is-removed .capsule-thumb,
.capsule-item.is-removed .capsule-body { opacity: .45; }
body.capsule-sorting { user-select: none; -webkit-user-select: none; }

.capsule-grip {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: .4rem .25rem; cursor: grab; touch-action: none;
  border-radius: 8px; background: var(--mist);
}
.capsule-grip:active { cursor: grabbing; }
.capsule-grip span { display: block; width: 14px; height: 2px; background: var(--muted); border-radius: 2px; }

.capsule-thumb {
  width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
  background: var(--mist); border: 1px solid var(--line);
  display: grid; place-items: center;
}
/* contain, not cover. The admin sees the WHOLE picture, the same way a
   visitor sees it in the album. */
.capsule-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.capsule-thumb-video {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

.capsule-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.capsule-file { margin: 0; font-size: .76rem; color: var(--muted); word-break: break-all; }
.capsule-label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.capsule-caption {
  width: 100%; max-width: 100%; font: inherit; font-size: .92rem; line-height: 1.45;
  padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--mist); color: var(--ink); resize: vertical; min-height: 2.9rem;
}
.capsule-caption:focus { outline: 2px solid var(--bd-green); outline-offset: 1px; background: var(--white); }

.capsule-tools { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .2rem; min-width: 0; }
.capsule-tools > * { min-width: 0; }
.capsule-move { min-height: 34px; min-width: 0; }
.capsule-move[disabled] { opacity: .4; cursor: not-allowed; }
.capsule-year-pick { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); min-width: 0; }
.capsule-year-pick select {
  font: inherit; font-size: .84rem; padding: .4rem .5rem;
  border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink);
  min-height: 34px; min-width: 0; max-width: 100%;
}
.capsule-delete {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); border-radius: 999px; padding: .4rem .7rem;
  font-size: .8rem; color: var(--muted); cursor: pointer; min-height: 34px;
}
.capsule-delete input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.capsule-delete:has(input:checked) { border-color: #d9534f; color: #a53a37; background: #fdf3f2; }
.capsule-delete:focus-within { outline: 2px solid var(--bd-green); outline-offset: 2px; }

.capsule-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.capsule-actions .btn { min-height: 44px; }
.capsule-missing { margin: 0; padding-left: 1.2rem; font-size: .88rem; color: var(--muted); }

@media (max-width: 640px) {
  .capsule-item { grid-template-columns: 22px 64px minmax(0, 1fr); gap: .5rem; padding: .5rem; }
  .capsule-thumb { width: 64px; height: 64px; }
  .capsule-file { font-size: .68rem; }
  .capsule-caption { font-size: .86rem; min-height: 2.4rem; padding: .45rem .55rem; }
  .capsule-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .35rem; margin-top: .35rem; }
  .capsule-move, .capsule-delete { width: 100%; justify-content: center; min-height: 40px; padding-left: .3rem; padding-right: .3rem; font-size: .78rem; }
  .capsule-year-pick { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .capsule-year-pick select { width: 100%; min-height: 40px; }
}

/* ---------------- gallery words ---------------- */

.admin-panel-foot {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line);
}
.admin-panel-foot .admin-field-note { margin: 0; }

.words-block { margin-bottom: 1.5rem; }
.words-block:last-of-type { margin-bottom: 0; }
.words-block h3 { margin: 0 0 .35rem; font-family: var(--serif); font-size: 1.2rem; }
.words-block > .admin-field-note { margin: 0 0 .75rem; }

/* The heading of the six picture boxes section. It sits above the upload
   area, outside a .words-block, so it carries the same look. */
.words-subhead { margin: 0 0 .75rem; font-family: var(--serif); font-size: 1.2rem; }

.words-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.words-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: .6rem; align-items: end;
  border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; background: var(--mist);
}
.words-num { font-family: var(--serif); font-weight: 700; color: var(--muted); text-align: center; padding-bottom: .45rem; }
.words-field { display: grid; gap: .25rem; min-width: 0; }
.words-field label { font-weight: 600; font-size: .82rem; }
.words-field input {
  width: 100%; min-width: 0; max-width: 100%;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: var(--white); color: var(--ink);
}
.words-field input:focus { outline: 2px solid var(--bd-green); outline-offset: 1px; }
.words-tools { display: flex; gap: .35rem; }
.words-tools .btn { min-height: 40px; padding: .45rem .7rem; font-size: .82rem; }

/* ---------------- the six picture boxes ---------------- */

/* One row for each of the six boxes. The picture is on the left, the
   caption and the buttons on the right. The picture is always shown whole,
   never cropped, so the admin sees exactly what a visitor sees. */
.box-list { margin-bottom: 1.25rem; }
.box-row {
  grid-template-columns: 28px 112px minmax(0, 1fr);
  align-items: start;
}
.box-thumb {
  width: 112px; height: 84px;
  background: var(--mist); border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; display: grid; place-items: center;
}
.box-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.box-thumb-empty {
  font-size: .7rem; line-height: 1.2; color: var(--muted); text-align: center; padding: .3rem;
}
/* A picture that cannot move any further is shown greyed out, the same way
   the Time Capsule shows a picture that cannot move. */
.box-tools .btn[disabled] { opacity: .4; cursor: not-allowed; }
.box-replace { margin-top: .35rem; display: grid; gap: .2rem; }
.box-replace label { font-size: .78rem; font-weight: 600; color: var(--muted); }

/* The control that adds more picture boxes. The number of boxes on the
   Gallery page is the owner's choice, so the count sits at the top of the
   list of boxes. */
.box-count { margin-bottom: 1rem; }
.box-count-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.box-count-row input[type="number"] {
  font: inherit; font-size: .95rem; padding: .45rem .55rem; width: 5.5rem;
  border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink);
}
.box-count-row .btn { min-height: 40px; }
/* Taking a box away is the one action that cannot be undone by pressing the
   button again, so it is marked in the deep red of the Union Jack. The ghost
   button rule is more specific than a single class, so this one has to be as
   well, or the red never shows. */
.admin-body .box-remove { color: var(--uk-red); border-color: var(--uk-red); }
.admin-body .box-remove:hover { background: #fff5f6; border-color: var(--uk-red); }
.admin-body .box-remove[disabled] { color: var(--muted); border-color: var(--line); }
.admin-body .box-remove[disabled]:hover { background: var(--white); border-color: var(--line); }
.box-replace input[type="file"] {
  width: 100%; min-width: 0; font-size: .78rem; color: var(--muted);
}
.box-replace-note { font-size: .72rem; color: var(--bd-green); margin: 0; }
.box-tools { margin-top: .45rem; flex-wrap: wrap; }

.words-years { display: grid; gap: .75rem; }
.words-year {
  border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem;
  background: var(--mist); display: grid; gap: .5rem;
}
.words-year-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.words-year-head strong { font-family: var(--serif); font-size: 1.3rem; color: var(--uk-blue); }
.words-year-link {
  font-size: .82rem; color: var(--bd-green);
  display: inline-flex; align-items: center; min-height: 32px;
}

@media (max-width: 640px) {
  .words-row { grid-template-columns: 24px minmax(0, 1fr); }
  .box-row { grid-template-columns: 24px 84px minmax(0, 1fr); }
  .box-thumb { width: 84px; height: 64px; }
  .words-tools { grid-column: 1 / -1; }
  .words-tools .btn { flex: 1 1 0; justify-content: center; }
  .box-tools .btn { flex: 1 1 auto; }
  .words-year { padding: .6rem .65rem; }
}

/* ---------------- members ---------------- */

.admin-member-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .admin-member-layout { grid-template-columns: 1fr; } }

.admin-member-list { display: grid; gap: .6rem; }
.admin-member-row {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) auto;
  gap: .8rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .65rem .75rem;
  background: var(--white);
}
.admin-member-row img, .admin-member-row .admin-photo-empty {
  width: 64px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--mist);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: .65rem;
  text-align: center;
}
.admin-member-name { font-weight: 600; }
.admin-member-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; color: var(--muted); }
.admin-member-meta { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.admin-member-meta .is-missing { color: #8b1c2c; font-weight: 700; }
.admin-member-note { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.admin-member-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

/* On a phone the buttons of a member row move onto their own line under the
   member. Without this the details column is squeezed so narrow that the
   words run underneath the Delete button. */
@media (max-width: 640px) {
  .admin-member-row { grid-template-columns: 64px minmax(0, 1fr); }
  .admin-member-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .admin-member-actions .btn { min-height: 40px; }
}

.admin-photo-capture { display: grid; gap: .6rem; }
.admin-cam-stage {
  position: relative;
  background: var(--ink);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 260px;
}
.admin-cam-stage video { width: 100%; height: auto; display: block; }
.admin-cam-stage img { width: 100%; display: block; }
.admin-cam-placeholder { color: #cbd5e1; font-size: .86rem; padding: 2rem 1rem; text-align: center; }
.admin-cam-bar { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------------- login ---------------- */

.admin-login-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,106,78,.28), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(1,33,105,.35), transparent 60%),
    var(--ink);
}
.admin-login-wrap { width: 100%; max-width: 430px; }
.admin-login-card {
  background: rgba(255,255,255,.97);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
  display: grid;
  gap: .3rem;
}
.admin-login-crest { justify-self: center; border-radius: 16px; background: var(--white); }
.admin-login-card h1 { font-family: var(--serif); font-size: 2rem; margin: .1rem 0 .2rem; }
.admin-login-sub { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.admin-login-card label { font-weight: 600; font-size: .88rem; margin-top: .6rem; }
.admin-login-card input {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}
.admin-login-card input:focus { outline: 2px solid var(--bd-green); outline-offset: 1px; }
.admin-login-card button { margin-top: 1.1rem; }
.admin-login-meta { font-size: .78rem; color: var(--muted); text-align: center; margin: .55rem 0 0; }

.admin-subnav { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ---------------- narrow phones ----------------
   The top bar holds a brand, three tabs and two buttons. On a small phone it
   used to wrap into four rows, eat a third of the screen and push the page
   sideways. Keep it to two short rows that fit a 320px phone. */
@media (max-width: 640px) {
  html { scroll-padding-top: 5.5rem; }
  .admin-topbar { padding: .5rem .7rem; gap: .45rem .5rem; flex-wrap: wrap; }
  .admin-brand { gap: .5rem; min-width: 0; min-height: 32px; }
  .admin-brand img { width: 34px; height: 34px; border-radius: 10px; }
  .admin-brand strong { font-size: .95rem; }
  .admin-brand small { font-size: .58rem; letter-spacing: .1em; }
  .admin-tabs { order: 3; width: 100%; gap: .3rem; flex-wrap: nowrap; overflow-x: auto; }
  .admin-tab { padding: .35rem .6rem; font-size: .78rem; white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center; }
  .admin-topbar-right { margin-left: auto; gap: .35rem; }
  .admin-who { display: none; }
  .admin-topbar-right .btn { padding: .35rem .55rem; font-size: .72rem; min-height: 32px; }
}

@media (max-width: 400px) {
  .admin-brand { gap: .4rem; }
  .admin-brand img { width: 32px; height: 32px; }
  .admin-brand strong { font-size: .82rem; }
  .admin-brand small { display: none; }
  .admin-topbar { padding: .45rem .55rem; gap: .4rem; }
  .admin-topbar-right { gap: .3rem; }
  .admin-topbar-right .btn { padding: .3rem .4rem; font-size: .66rem; min-height: 32px; }
  .admin-tab { padding: .3rem .5rem; font-size: .74rem; min-height: 32px; }
}

@media (max-width: 340px) {
  /* On the smallest phones only the crest is kept, so the bar stays two short
     rows and the page below keeps its space. */
  .admin-brand strong { display: none; }
}

/* ---------------- old phone browsers ----------------
   Flex gap is not understood by an iPhone on iOS 14 or older, so these rows
   would sit tight against each other. This puts the space back there. It only
   applies to a browser that does not know about flex gap. */
@supports not (gap: 1rem) {
  .admin-topbar > * + * { margin-left: .5rem; }
  .admin-tabs > * + * { margin-left: .3rem; }
  .admin-topbar-right > * + * { margin-left: .35rem; }
  .admin-subnav > * + * { margin-left: .5rem; }
  .capsule-actions > * + * { margin-left: .6rem; }
  .capsule-tools > * + * { margin-left: .45rem; }
  .words-tools > * + * { margin-left: .35rem; }
  .admin-panel-foot > * + * { margin-left: .6rem; }
}

@media print {
  .admin-topbar, .admin-panel, .admin-member-list, .admin-subnav, .admin-hd-box, .admin-cam-bar { display: none !important; }
  .admin-body, .admin-main { background: #fff; padding: 0; }
}

/* ---------------- v57, the server check screen ----------------
   The badge sits next to a value and says plainly whether that value is
   right. The colour is only a helper, the words are always there too, so the
   screen still reads correctly for anybody who cannot see the colours. */
.check-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.check-badge.is-ok { background: #e9f7f0; color: #07553f; border-color: #b9e4d0; }
.check-badge.is-warn { background: #fff8e1; color: #6c4f00; border-color: #f2dfa8; }

/* The one time password box. It has to be easy to read out loud and easy to
   copy, so the text is large, spaced out and selected when the box is
   tapped. */
.admin-secret {
  font-family: Consolas, Menlo, "Courier New", monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: #ffffff;
  color: #111827;
  border: 1px dashed #9ca3af;
  border-radius: 10px;
  padding: .7rem .8rem;
  margin: .5rem 0;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

/* The four numbers, ready to copy into a message to the hosting company. */
.admin-code {
  font-family: Consolas, Menlo, "Courier New", monospace;
  font-size: .92rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  padding: .8rem .9rem;
  margin: .4rem 0 0;
  overflow-x: auto;
  white-space: pre;
}

/* A panel that carries a warning stays a normal panel, so the owner sees one
   clear block rather than two competing ones. */
.admin-panel-alert { border-color: #f2dfa8; }

/* The result badge sits under the name in the first column of the four
   numbers table, so it can be read on a phone without scrolling the table
   sideways. */
.admin-table td .check-badge { margin: .25rem .4rem .15rem 0; }
.admin-table td .admin-field-note { display: block; }