/* Site admin. Rides on /css/site.css for fonts, palette and .btn; this file only lays out forms. */
.admin { font-family: var(--ui); font-size: 16px; line-height: 1.5; }
.admin-head, .admin main { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 24px 8px; }
.admin-head a { color: var(--ink-soft); text-decoration: none; }
.admin-head h1 { flex: 1 1 auto; font-size: var(--step-1); }
.admin section { padding-top: 4px; }
.admin h2 { font-size: var(--step-2); }
.admin-hint { margin: 6px 0 16px; color: var(--ink-soft); }
.admin label { display: grid; gap: 4px; margin-top: 12px; font-weight: 600; font-size: 15px; }
.admin input[type="text"], .admin input[type="url"], .admin input[type="date"],
.admin input[type="password"], .admin textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: 400 16px/1.5 var(--read);
  color: var(--ink); background: var(--night-deep); border: 1px solid var(--rule); border-radius: 2px;
}
.admin input:focus-visible, .admin textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.admin textarea { resize: vertical; }
.admin .admin-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.admin-check input { width: 20px; height: 20px; accent-color: var(--ember); }
.admin-list { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: item; }
.admin-item { counter-increment: item; margin-top: 16px; padding: 4px 16px 16px; background: var(--night-raised); }
.admin-item::before { content: counter(item); display: block; padding-top: 8px; color: var(--gold); font-weight: 600; }
.admin-moves { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.admin .btn { min-height: 44px; padding: 0 18px; cursor: pointer; font-size: 15px; }
.admin-login { display: grid; gap: 12px; max-width: 360px; margin-top: 32px; }
.admin-save { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 32px; padding: 16px 0; background: var(--night); border-top: 1px solid var(--rule); }
.admin-status { margin: 0; min-height: 1.5em; color: var(--ink-soft); }
.admin .btn-quiet { background: transparent; }
.admin [hidden] { display: none !important; } /* .btn and .admin-login set display, which beats [hidden] */
.admin-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.admin-photos img { display: block; width: 100%; max-width: 240px; height: auto; background: var(--night-raised); }
.admin input[type="file"] { min-height: 44px; font: 400 15px/1.5 var(--ui); }
.admin a.btn { display: inline-flex; align-items: center; text-decoration: none; }
/* Sidebar + one panel at a time (admin.js showPanel). Phones: the sidebar becomes a sticky tab strip. */
.admin-editor { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 32px; }
.admin-panels { max-width: 760px; min-width: 0; }
.admin-nav { position: sticky; top: 24px; }
.admin-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.admin-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-left: 2px solid transparent;
  color: var(--ink-soft); font-weight: 500; font-size: 15px; text-decoration: none;
  transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.admin-nav a:hover { color: var(--gold); }
.admin-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.admin-nav a[aria-current] { color: var(--gold); border-left-color: var(--gold); background: oklch(0.80 0.095 80 / 0.08); }
@media (max-width: 759px) {
  .admin-editor { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 0; }
  .admin-nav { top: 0; z-index: 2; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    overflow-x: auto; scrollbar-width: none; background: oklch(0.165 0.016 235 / 0.94); border-bottom: 1px solid var(--rule); }
  .admin-nav ul { display: flex; gap: 0; }
  .admin-nav a { min-height: 48px; padding: 0 12px; white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .admin-nav a[aria-current] { border-bottom-color: var(--gold); background: none; }
}