:root {
  --ink: #000000;
  --atlantic: #115175;
  --atlantic-deep: #0a3550;
  --ocean: #99cce7;
  --shallows: #e9f2f8;
  --paper: #ffffff;
  --slate: #55616b;
  --rule: #d4dee6;
  --text: #16191c;
  --good: #1b7a3d;
  --good-bg: #e7f5ec;
  --warn: #9a6400;
  --warn-bg: #fbf1dd;
  --bad: #a3271f;
  --bad-bg: #fbe9e7;
  --font-slab: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --font-text: "Libre Franklin", "Franklin Gothic", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--shallows);
  color: var(--text);
  font-family: var(--font-text);
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--font-slab); font-weight: 600; color: var(--ink); margin: 0 0 0.5em; }
a { color: var(--atlantic); }
a:hover { color: var(--atlantic-deep); }

.wrap { max-width: 72rem; margin-inline: auto; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 4rem; }

.bar {
  background: var(--ink);
  color: #fff;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.bar a { color: #fff; font-weight: 600; text-decoration: none; }
.bar nav { display: flex; gap: 1.25rem; align-items: center; font-size: 0.95rem; }
.bar nav a { color: var(--ocean); }
.bar .role-badge { background: var(--atlantic); color: #fff; border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.8rem; }
.bar .brand { display: flex; align-items: center; gap: 0.65rem; }
.bar .brand img { display: block; height: 1.9rem; width: auto; }
.bar .brand span { font-family: var(--font-slab); font-size: 1.1rem; letter-spacing: 0.01em; }

.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; gap: 1.5rem; }
.editor-grid .sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.editor-grid .sidebar .panel { margin-bottom: 0; }
@media (max-width: 64rem) {
  .editor-grid { grid-template-columns: 1fr; }
}

.image-field .thumbs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; }
.image-field .thumb { position: relative; width: 6.5rem; height: 4.5rem; border-radius: 0.3rem; overflow: hidden; border: 1px solid var(--rule); background: var(--shallows); }
.image-field .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-field .thumb button { position: absolute; top: 0.2rem; right: 0.2rem; border: none; border-radius: 999px; width: 1.3rem; height: 1.3rem; line-height: 1; background: rgba(0,0,0,0.65); color: #fff; cursor: pointer; font-size: 0.85rem; }
.image-field input[type="file"] { font-size: 0.9rem; }
.image-field .uploading { color: var(--slate); font-size: 0.85rem; margin-top: 0.4rem; }

.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { color: var(--slate); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--shallows); }

.status { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.status--draft { background: var(--rule); color: var(--slate); }
.status--pending_review { background: var(--warn-bg); color: var(--warn); }
.status--changes_requested { background: var(--bad-bg); color: var(--bad); }
.status--approved, .status--published { background: var(--good-bg); color: var(--good); }

.btn {
  display: inline-block; border: none; border-radius: 0.35rem; padding: 0.55rem 1.1rem;
  font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--atlantic); color: #fff;
}
.btn:hover { background: var(--atlantic-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--atlantic); border: 1px solid var(--rule); }
.btn--ghost:hover { background: var(--shallows); color: var(--atlantic-deep); }
.btn--danger { background: var(--bad); }
.btn--danger:hover { background: #7a1d17; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.92rem; }
.field input[type="text"], .field input[type="email"], .field input[type="date"],
.field input[type="url"], .field textarea, .field select {
  width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: 0.35rem;
  font-family: inherit; font-size: 1rem; background: var(--paper); color: var(--text);
}
.field textarea { min-height: 14rem; resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 0.92rem; }
.field .hint { color: var(--slate); font-size: 0.85rem; margin-top: 0.25rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.checks label { font-weight: 400; display: flex; align-items: center; gap: 0.4rem; }

.msg { padding: 0.75rem 1rem; border-radius: 0.35rem; margin-bottom: 1rem; font-size: 0.95rem; }
.msg--error { background: var(--bad-bg); color: var(--bad); }
.msg--ok { background: var(--good-bg); color: var(--good); }

.comment { border-top: 1px solid var(--rule); padding: 0.75rem 0; }
.comment .meta { color: var(--slate); font-size: 0.85rem; margin-bottom: 0.25rem; }

.login-card { max-width: 24rem; margin: 10vh auto 0; }
.login-card img { height: 3rem; margin-bottom: 1.5rem; }

.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.muted { color: var(--slate); }
.empty { color: var(--slate); font-style: italic; padding: 1rem 0; }