/* Admin restyle — step 5. "Light pass, tokens only": no new layout
   system, no grid. This reuses the same box/header/button-wall
   components already built for the homepage, restyles the raw form
   controls with the token scale, and otherwise leaves adminList.js /
   adminForm.js / adminConfirmDelete.js's structure alone.

   Not yet wired in — previewed via admin-preview.html. When this is
   folded into the real templates, the only change needed there is
   swapping class names (box/diary-box -> mod-box, title -> a heading
   class, smalltext -> a plain text link, sbbutton -> button-wall__item)
   — no behavior, no field names, no routes touched. */

.admin-heading {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  color: var(--color-heading);
}

.admin-back {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
}
.admin-back:hover {
  color: var(--color-link);
}

.admin-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.admin-toolbar a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  border: var(--border-hair) solid var(--color-panel-border);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
}
.admin-toolbar a:hover {
  color: var(--color-link);
  border-color: var(--color-accent);
}

/* entry rows — reuse the same timeline-gutter shape as the homepage
   log list, since an admin row and a diary log entry are structurally
   the same thing: a title, a date, a status. */
.admin-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-bottom: var(--border-hair) solid var(--color-panel-border);
}
.admin-row:last-child {
  border-bottom: none;
}
.admin-row__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text);
}
.admin-row__status {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
}
.admin-row__status--published {
  color: var(--color-moss);
}
.admin-row__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.admin-row__actions form {
  margin: 0;
}

/* filter/search bar above the entry list */
.admin-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.admin-filterbar__types {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.admin-filter {
  color: var(--color-text-muted);
  text-decoration: none;
  padding-bottom: var(--space-1);
  border-bottom: var(--border-hair) solid transparent;
}
.admin-filter:hover {
  color: var(--color-link);
  border-bottom-color: var(--color-panel-border);
}
.admin-filter.is-active {
  color: var(--color-heading);
  border-bottom: var(--border-thick) solid var(--color-accent);
}
.admin-search {
  display: flex;
  gap: var(--space-2);
  margin: 0;
}

/* form controls */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 62ch;
}
.admin-label {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.admin-input,
.admin-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-panel-bg);
  border: var(--border-hair) solid var(--color-panel-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}
.admin-input:focus,
.admin-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-wash);
}
.admin-textarea {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  resize: vertical;
}
.admin-input--sm {
  width: auto;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
}
.admin-error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-hair) solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* buttons — plain bordered, accent invert on hover, same treatment as
   the button-wall cells */
.admin-form-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.admin-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-panel-bg);
  border: var(--border-hair) solid var(--color-panel-border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.admin-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.admin-btn--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-2xs);
}
.admin-form-footer {
  margin-top: var(--space-3);
}

/* === Split editor (write | live preview) ===
   One column on narrow screens, side-by-side above the same breakpoint
   post.css/grid.css already use for their own two-column layouts. */
.admin-editor {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-2);
}
@media (min-width: 860px) {
  .admin-editor {
    grid-template-columns: 1fr 1fr;
  }
}
.admin-editor__pane {
  border: var(--border-hair) solid var(--color-panel-border);
  border-top: var(--border-thick) solid var(--color-pine);
  background: var(--color-panel-bg);
}
.admin-editor__pane .admin-form {
  max-width: none;
  padding: var(--space-4);
}
.admin-editor__preview {
  padding: var(--space-4);
  min-height: 12rem;
  font-size: var(--text-base);
}
.admin-editor__preview:empty::before {
  content: "nothing to preview yet.";
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

.admin-editor__imagebar {
  padding: 0 var(--space-4) var(--space-4);
}
.admin-editor__dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  border: var(--border-hair) dashed var(--color-panel-border-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  text-align: center;
  cursor: pointer;
}
.admin-editor__dropzone:hover,
.admin-editor__dropzone:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-text);
  outline: none;
}
.admin-editor__dropzone:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent-wash);
}
.admin-editor__dropzone.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-accent-wash);
  color: var(--color-text);
}
.admin-editor__status {
  margin: var(--space-2) 0 0;
  min-height: 1em;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-text-faint);
}