/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f5f5f0;
  min-height: 100vh;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
header {
  background: #054f8b;
  color: #fff;
  padding: 18px 32px;
}

header h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

main {
  max-width: 860px;
  margin: 32px auto;
  padding: 0 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 28px 32px;
}

.card h2 {
  font-size: 16px;
  font-weight: 700;
  color: #054f8b;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

/* ── Field group ──────────────────────────────────────────────────────────── */
.field-group {
  margin-bottom: 18px;
}

.field-group label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 5px;
  color: #333;
}

.field-group input[type="text"],
.field-group input[type="url"],
.field-group textarea,
.field-group select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s;
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
  outline: none;
  border-color: #054f8b;
  box-shadow: 0 0 0 2px rgba(5, 79, 139, 0.12);
}

.field-group textarea {
  resize: vertical;
}

textarea.code-area {
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  background: #fafafa;
}

.hint {
  font-size: 12px;
  color: #777;
  margin-bottom: 6px;
}

/* ── Upload zone ──────────────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  color: #666;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: #054f8b;
  background: #f0f6fc;
}

.upload-zone p { margin: 6px 0; }

.file-name {
  font-weight: 600;
  color: #054f8b;
  font-size: 14px;
}

.link-btn {
  background: none;
  border: none;
  color: #054f8b;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
}

.upload-or {
  text-align: center;
  color: #aaa;
  font-size: 13px;
  margin: 16px 0 14px;
  position: relative;
}

.upload-or::before,
.upload-or::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: #e0e0e0;
}

.upload-or::before { left: 0; }
.upload-or::after  { right: 0; }

/* ── Status bar ───────────────────────────────────────────────────────────── */
.status-bar {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 5px;
  font-size: 14px;
}

.status-info    { background: #e8f0fb; color: #1a3f6f; border: 1px solid #c0d5f0; }
.status-success { background: #e6f4ea; color: #1a5c2a; border: 1px solid #a8d5b0; }
.status-error   { background: #fdecea; color: #7b1a14; border: 1px solid #f0b8b4; }

/* ── Related articles grid ────────────────────────────────────────────────── */
.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 600px) {
  .related-grid { grid-template-columns: 1fr; }
}

.related-slot {
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 16px;
  background: #fafafa;
}

.related-slot h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #444;
}

.swap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.swap-row label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
}

.swap-row select {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  min-width: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: #054f8b;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover { background: #043e6e; }

.btn-secondary {
  display: inline-block;
  background: #fff;
  color: #054f8b;
  border: 2px solid #054f8b;
  border-radius: 5px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
  margin-right: 10px;
  margin-top: 14px;
}

.btn-secondary:hover { background: #f0f6fc; }

.btn-small {
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-small:hover { background: #e0e0e0; }

/* Image URL field emphasis */
.image-url-field label { color: #054f8b; }
.image-url-field input { border-color: #a0c0e0; background: #f5faff; }
.image-url-field input:focus { border-color: #054f8b; background: #fff; }

.required { color: #c0392b; font-weight: 700; }
.field-note { font-weight: 400; color: #888; font-size: 11px; }

/* Inline graph slots */
.graph-slot {
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 16px;
  background: #fafafa;
  margin-bottom: 16px;
}

.graph-slot h3 {
  font-size: 14px;
  font-weight: 700;
  color: #444;
  margin-bottom: 12px;
}

/* ── Template selector ────────────────────────────────────────────────────── */
.template-selector {
  display: flex;
  gap: 16px;
}

.template-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.template-card strong {
  font-size: 14px;
  color: #1a1a1a;
}

.template-card span {
  font-size: 12px;
  color: #666;
  font-weight: 400;
}

.template-card:hover {
  border-color: #054f8b;
  background: #f0f6fc;
}

.template-card.selected {
  border-color: #054f8b;
  background: #e8f3fc;
}

.template-card.selected strong {
  color: #054f8b;
}

@media (max-width: 500px) {
  .template-selector { flex-direction: column; }
}

/* ── Details/summary (collapsible body) ───────────────────────────────────── */
details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #054f8b;
  margin-bottom: 10px;
  user-select: none;
}

details[open] summary { margin-bottom: 10px; }

/* ── Result links ─────────────────────────────────────────────────────────── */
#result-links {
  margin-top: 6px;
}

/* ── Baby accent colour ──────────────────────────────────────────────── */
.baby-accent .card h2 { color: #4aa8d8; }
.baby-accent .btn-primary { background: #4aa8d8; }
.baby-accent .btn-primary:hover { background: #3a95c4; }