/* ---------- Tokens: copied from the site's paper register, so the editor
   reads as the same studio rather than a generic dashboard ---------- */
:root {
  --paper: #efe7da;
  --paper-deep: #e3d6c3;
  --sheet: #f7f2ea;
  --ink: #2a211a;
  --ink-soft: rgba(42, 33, 26, 0.66);
  --ink-faint: rgba(42, 33, 26, 0.42);
  --rule: rgba(42, 33, 26, 0.14);
  --terra: #a8502e;
  --ok: #4f6b3a;
  --bad: #a3332a;
  --radius: 10px;
  --gap: 1rem;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
}

[hidden] { display: none !important; }

.boot { padding: 2rem 1rem; color: var(--ink-soft); }

/* ---------- Controls ---------- */
.button {
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.button--primary { background: var(--terra); border-color: var(--terra); color: #fff; }
.button--quiet { border-color: transparent; background: none; color: var(--ink-soft); padding: 0 0.6rem; }
.button--danger { color: var(--bad); }
.button:disabled { opacity: 0.45; cursor: default; }
.button:focus-visible, .input:focus-visible, .tabs button:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

.field { display: grid; gap: 0.35rem; }
.field__label { font-size: 0.875rem; font-weight: 600; }
.field__hint { font-size: 0.8125rem; color: var(--ink-soft); }

.input {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  /* 16px stops iOS zooming the page on focus */
  font: 16px/1.5 var(--sans);
}
textarea.input { resize: vertical; min-height: 6.5rem; }
select.input { appearance: auto; }

/* ---------- Login ---------- */
.login { min-height: 100svh; display: grid; place-items: center; padding: 1rem; }
.login__form { width: 100%; max-width: 22rem; display: grid; gap: 1.25rem; }
.login__mark { margin: 0; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.login__title { margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.15; }
.login__error { margin: 0; min-height: 1.5em; color: var(--bad); font-size: 0.9375rem; }

/* ---------- Editor chrome ---------- */
.top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.top__mark { margin: 0 auto 0 0; font-weight: 600; }
.top__view, .top__out {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}
.tabs button {
  flex: none;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
}
.tabs button[aria-current="true"] { background: var(--ink); color: var(--paper); }

.panel {
  display: grid;
  gap: 1.5rem;
  max-width: 44rem;
  margin: 0 auto;
  /* room for the fixed save bar */
  padding: 1.25rem 1rem 7rem;
}
.panel__intro { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------- Lists and groups ---------- */
.group {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--sheet);
}
.group > .group { background: #fff; }
.group__head { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.group__title { margin: 0 auto 0 0; font-weight: 600; }
.list { display: grid; gap: 0.75rem; }
.list__title { margin: 0; font-size: 1rem; font-weight: 600; }

/* ---------- Photo field ---------- */
.photo { display: grid; gap: 0.75rem; }
.photo__frame {
  display: grid;
  place-items: center;
  min-height: 8rem;
  border-radius: var(--radius);
  background: var(--paper-deep);
  overflow: hidden;
}
.photo__frame img { display: block; width: 100%; height: auto; max-height: 22rem; object-fit: contain; }
.photo__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.photo__new { font-size: 0.8125rem; color: var(--terra); font-weight: 600; }

/* ---------- Save bar ---------- */
.savebar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--sheet);
  border-top: 1px solid var(--rule);
}
.savebar__status { margin: 0 auto 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.savebar__status[data-tone="ok"] { color: var(--ok); }
.savebar__status[data-tone="bad"] { color: var(--bad); }
.savebar .button { min-width: 7rem; }

@media (min-width: 48rem) {
  .panel { padding-inline: 2rem; }
  .savebar { justify-content: flex-end; padding-inline: max(2rem, calc((100vw - 44rem) / 2)); }
}