/* =========================================================================
   Admin styles. Loaded on top of site.css.

   The governing constraint: the primary user is posting from a phone, often
   one-handed, often on a bad connection. So — big tap targets (44px floor
   everywhere), a body field that is the first thing under your thumb, and a
   photo tray that shows upload progress per photo rather than one opaque
   spinner. Desktop is the secondary case and just gets more width.
   ========================================================================= */

.admin-band { background: var(--ink); }
.admin-bar {
  max-width: var(--container); margin: 0 auto;
  padding: 12px var(--pad-x);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
}
.admin-bar__mark {
  font-family: 'Ephesis', 'Apple Chancery', cursive;
  font-size: 26px; color: var(--cream); margin: 0; line-height: 1;
}
.admin-bar__mark a { color: var(--cream); }
.admin-bar nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; }
.admin-bar nav a,
.admin-bar form button {
  color: #d8d2c4; font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0;
}
.admin-bar nav a:hover,
.admin-bar form button:hover { color: #fff; }
.admin-bar nav a[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--terracotta); }
.admin-bar a:focus-visible,
.admin-bar button:focus-visible { outline: 3px solid #f0c48a; outline-offset: 2px; }

.admin-main { max-width: 780px; margin: 0 auto; padding: 32px var(--pad-x) 96px; }
.admin-main--wide { max-width: var(--container); }
.admin-main h1 { font-size: 26px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.admin-main .lede { color: var(--muted-warm); font-size: 15px; margin: 0 0 28px; }

/* ---- forms ---- */
.field { margin-bottom: 20px; }
.field > label,
.field-label {
  display: block; font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-warm); margin-bottom: 8px;
}
.field .hint { font-size: 13px; color: var(--muted-warm); margin: 6px 0 0; font-weight: 400;
               letter-spacing: 0; text-transform: none; }

input[type="text"], input[type="email"], input[type="password"],
input[type="datetime-local"], input[type="color"], select, textarea {
  width: 100%; font-family: inherit; font-size: 16px;  /* 16px stops iOS zoom-on-focus */
  color: var(--ink); background: #fff;
  border: 1px solid #d6cdb9; border-radius: var(--radius-photo);
  padding: 12px; min-height: 48px;
}
textarea { line-height: 1.6; resize: vertical; }
#compose-body-input { min-height: 140px; font-size: 17px; }
.body-md { min-height: 380px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
input[type="color"] { padding: 4px; height: 48px; }

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1 1 200px; min-width: 0; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  border: 0; border-radius: var(--radius-photo); cursor: pointer;
  background: var(--accent); color: var(--cream);
}
.btn:hover { background: #7d5837; color: var(--cream); }
.btn[disabled] { background: #b3a992; cursor: progress; }
.btn--full { width: 100%; }
.btn--ghost { background: none; color: var(--ink); border: 1px solid #d6cdb9; }
.btn--ghost:hover { background: #ece6da; color: var(--ink); }
.btn--danger { background: none; color: #8a3b32; border: 1px solid #d8bdb8; }
.btn--danger:hover { background: #8a3b32; color: var(--cream); }
.btn--sm { min-height: 44px; padding: 8px 14px; font-size: 14px; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

/* ---- photo tray ---- */
.tray-add {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 64px; margin-bottom: 14px;
  border: 2px dashed #cbbfa6; border-radius: var(--radius-card);
  background: #fbf8f2; color: var(--ink);
  font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.tray-add:hover { border-color: var(--accent); background: #f5efe3; }

.photo-tray {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.photo-tray:empty { display: none; }

.thumb {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  background: #e8e1d2; border: 1px solid var(--hairline);
}
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.thumb.is-error { border-color: #b9564a; }

.thumb__remove {
  position: absolute; top: 6px; right: 6px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(30,28,24,.82); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.thumb__remove:hover { background: #8a3b32; }

.thumb__caption {
  width: 100%; border: 0; border-top: 1px solid var(--hairline);
  border-radius: 0; min-height: 44px; font-size: 14px; padding: 10px;
}

.thumb__stage {
  position: absolute; left: 0; right: 0; bottom: 44px;
  background: rgba(30,28,24,.78); color: #fff;
  font-size: 12px; padding: 6px 8px; text-align: center;
}
.thumb__stage:empty { display: none; }
.thumb__retry {
  background: none; border: 1px solid #fff; color: #fff;
  border-radius: 3px; padding: 4px 10px; font-size: 12px;
  font-family: inherit; cursor: pointer; min-height: 32px;
}
.thumb__progress { position: absolute; left: 0; right: 0; bottom: 44px; height: 3px; background: rgba(255,255,255,.35); }
.thumb__bar { height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }

.thumb__hero {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; font-size: 12px; border-top: 1px solid var(--hairline);
  background: #fbf8f2; min-height: 40px;
}

.upload-note {
  margin: 12px 0 0; padding: 10px 12px; font-size: 14px;
  background: #eef0e2; border-left: 4px solid var(--olive);
}
.upload-note.is-error { background: #f7e7e4; border-left-color: #8a3b32; }

.compose-status { font-size: 13px; color: var(--muted-warm); margin: 0; }

/* ---- tables / lists ---- */
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th {
  text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-warm); padding: 0 12px 10px 0; border-bottom: 1px solid var(--hairline);
}
.admin-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.admin-table td:last-child, .admin-table th:last-child { padding-right: 0; text-align: right; }
.admin-table .title { font-weight: 600; }
.admin-table .when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.admin-table form { display: inline; }

.pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: #ece6da; color: var(--muted-warm);
}
.pill--blog  { background: #e5e8d6; color: #4a5340; }
.pill--quick { background: #f0e4d8; color: #7a5333; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.filters a {
  font-size: 14px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #d6cdb9; min-height: 44px; display: inline-flex; align-items: center;
}
.filters a[aria-current="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---- login ---- */
.login-wrap { max-width: 380px; margin: 12vh auto; padding: 0 var(--pad-x); }
.login-wrap .wordmark { font-size: 46px; text-align: center; margin-bottom: 4px; }
.login-wrap p.sub { text-align: center; color: var(--muted-warm); font-size: 14px; margin: 0 0 32px; }
.login-error {
  background: #f7e7e4; border-left: 4px solid #8a3b32;
  padding: 12px 14px; font-size: 14px; margin-bottom: 20px;
}

@media (max-width: 600px) {
  .admin-main { padding-top: 24px; }
  .photo-tray { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .admin-table thead { display: none; }
  /* Tables become stacked blocks on a phone — a 5-column table cannot reflow
     at 320px, and a sideways scroll here is the exact WCAG 1.4.10 failure. */
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr { border-bottom: 1px solid var(--hairline); padding: 14px 0; }
  .admin-table td { border: 0; padding: 2px 0; text-align: left !important; }
  .admin-table td:last-child { margin-top: 10px; }
}