/* =========================================================
   Blog + admin — additions on top of the shared design system
   (/assets/css/style.css). Uses the same custom-property tokens
   so both apps stay visually identical.
   ========================================================= */

.blog-shell { padding-block: var(--space-5); }
.blog-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.blog-list-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: border-color 0.15s ease;
}
.blog-list-item:hover { border-color: var(--accent); }
.blog-list-item h2 { font-size: 1.25rem; }
.blog-list-item time { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); }
.blog-list-item p { color: var(--text-muted); }
.blog-empty-state { text-align: center; padding: var(--space-5); color: var(--text-dim); border: 1px dashed var(--border); border-radius: var(--radius-md); }

.post-header { margin-bottom: var(--space-4); }
.post-header time { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); }
.post-header h1 { margin-top: var(--space-2); }

/* Rendered Markdown */
.prose { max-width: 72ch; color: var(--text); line-height: 1.75; }
.prose h2 { margin-top: var(--space-4); margin-bottom: var(--space-2); font-size: 1.4rem; }
.prose h3 { margin-top: var(--space-3); margin-bottom: var(--space-1); }
.prose p { margin-bottom: var(--space-3); color: var(--text-muted); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.prose ul, .prose ol { margin: 0 0 var(--space-3) 1.4em; color: var(--text-muted); }
.prose li { margin-bottom: 0.4em; }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-3);
  color: var(--text-dim);
  font-style: italic;
  margin: var(--space-3) 0;
}
.prose code {
  font-family: var(--font-mono);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}
.prose pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  overflow-x: auto;
  margin-bottom: var(--space-3);
}
.prose pre code { background: none; border: none; padding: 0; }
.prose img { border-radius: var(--radius-sm); margin-block: var(--space-3); }
.prose hr { border: none; border-top: 1px solid var(--border); margin-block: var(--space-4); }

/* Admin shell */
.admin-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.admin-topbar .logo { font-family: var(--font-mono); font-weight: 700; }
.admin-topbar nav { display: flex; gap: var(--space-3); align-items: center; font-size: 0.9rem; color: var(--text-muted); }
.admin-topbar nav a:hover { color: var(--text); }
.admin-main { padding-block: var(--space-4); }

.flash {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  font-size: 0.92rem;
  border: 1px solid var(--border);
}
.flash-success { border-color: var(--teal); color: var(--teal); background: rgba(31, 200, 161, 0.08); }
.flash-error { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.08); }

.admin-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); gap: var(--space-2); flex-wrap: wrap; }

.table-simple { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.table-simple th, .table-simple td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.table-simple th { color: var(--text-dim); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; }
.table-simple tr:last-child td { border-bottom: none; }
.table-simple td.actions { display: flex; gap: var(--space-2); white-space: nowrap; }

.badge { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.7em; border-radius: 999px; font-size: 0.75rem; font-family: var(--font-mono); }
.badge-published { background: rgba(31, 200, 161, 0.12); color: var(--teal); }
.badge-draft { background: var(--accent-soft); color: var(--accent); }

.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); max-width: 720px; }
.field { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: 0.4em; }
.field label { font-size: 0.85rem; color: var(--text-dim); font-weight: 600; }
.field .hint { font-size: 0.8rem; color: var(--text-dim); font-weight: 400; }
.field input[type="text"], .field input[type="password"], .field input[type="datetime-local"], .field textarea, .field select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.9em;
  color: var(--text);
  font: inherit;
  font-family: var(--font-mono);
}
.field textarea { font-family: var(--font-mono); min-height: 320px; resize: vertical; line-height: 1.6; }
.field-checkbox { flex-direction: row; align-items: center; gap: 0.6em; }
.field-checkbox input { width: 18px; height: 18px; }
.field-row { display: flex; gap: var(--space-3); }
.field-row .field { flex: 1; }
.form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.validation-summary { color: #ef4444; font-size: 0.88rem; margin-bottom: var(--space-2); }
span.field-validation-error, .text-danger { color: #ef4444; font-size: 0.82rem; }

.login-shell { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; }