/* Admin page. Loaded after base.css and blog.css (frames, listings, the
   post view); this file only adds the page layout and the forms. */

.admin {
  width: min(84ch, 100%);
  margin: 0 auto;
  display: grid;
  /* minmax(0, 1fr): the column may shrink below its content's width, so a
     long ls line ends in … instead of widening the page. */
  grid-template-columns: minmax(0, 1fr);
  row-gap: calc(var(--line) * 2);
}

/* blog.css places .header in a named grid area of the blog's three-column
   layout. Here there is no such area (the browser would invent an extra
   column for it), so the header just takes its turn like everything else. */
.admin .header { grid-area: auto; }

.views {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: calc(var(--line) * 2);
}

/* --- Forms --- */

/* One field per line: label on the left, input on the right. */
.field {
  display: grid;
  grid-template-columns: 7ch 1fr;
  align-items: baseline;
  column-gap: 1ch;
}
.field + .field,
.hint + .field { margin-top: calc(var(--line) / 2); }
.field label,
.field .label { color: var(--dim); }

.field-text { align-items: start; }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2ch;
}
.choices label { color: var(--text); cursor: pointer; }

/* Inputs are an underline; the text area a thin box. */
input,
textarea {
  font: inherit;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dim);
  border-radius: 0;
  padding: 2px 0;
  width: 100%;
  min-width: 0;
}
textarea {
  border: 1px solid var(--dim);
  padding: calc(var(--line) / 2) 1ch;
  line-height: var(--line);
  resize: vertical;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--text);
}
input::placeholder { color: var(--dim); opacity: 0.7; }

input[type="radio"],
input[type="checkbox"] {
  width: auto;
  accent-color: var(--accent);
  margin-right: 0.5ch;
}

.hint { margin-left: 8ch; }

/* The image block is wrapped in its own div, so give it (and the field
   after it) the same gap as the other fields. */
#image-field,
#image-field + .field { margin-top: calc(var(--line) / 2); }

/* Image picker: "> choose image", a status line, and a thumbnail of the
   uploaded image. */
.image-pick,
.image-thumb { margin: calc(var(--line) / 2) 0 0 8ch; }
.image-pick { display: flex; flex-wrap: wrap; gap: 0 2ch; }
.image-thumb {
  display: block;
  max-width: min(32ch, 100%);
  max-height: calc(var(--line) * 10);
  border: 1px solid var(--dim);
}
.form-actions { margin-top: var(--line); }

.message {
  min-height: var(--line);
  margin-top: var(--line);
  color: var(--accent);
}
.message.error { color: var(--error); }

/* --- Status & currently --- */

.meta-row {
  display: grid;
  grid-template-columns: 12ch 1fr auto;
  align-items: baseline;
  column-gap: 2ch;
}
.meta-row + .meta-row { margin-top: calc(var(--line) / 2); }
.meta-row .key-fixed { color: var(--dim); }
.meta-buttons { white-space: pre; }
.meta-count { color: var(--dim); }

/* --- Posts --- */

.ls .line-actions {
  white-space: pre;
  padding-left: 2ch;
}
.ls .line-actions .ask { color: var(--error); }

/* Phones: key with its buttons (or the status count) on one line, the
   value under them across the full width. */
@media (max-width: 600px) {
  .meta-row { grid-template-columns: 1fr auto; }
  .meta-row > :last-child { grid-row: 1; grid-column: 2; }
  .meta-row .value { grid-column: 1 / -1; }
  .hint,
  .image-pick,
  .image-thumb { margin-left: 0; }
}