/* ===========================================================================
 * Admin surface
 * ===========================================================================
 * Given a different ground from the public portal on purpose: an operator must
 * never mistake what they are editing for what the world sees. The distinction is
 * carried by the *surface*, not by a label someone might not read.
 *
 * All values are tokens. The hex guard in tests/unit/tokens-sync.test.ts fails the
 * build if a literal colour appears here.
 * =========================================================================== */

body.admin {
  background: var(--palette-ink-900);
  color: var(--palette-bone-50);
  color-scheme: dark;
}

body.admin .chrome {
  border-bottom: var(--border-hairline) solid var(--palette-ink-700);
}

body.admin .section__title,
body.admin .hero__name {
  color: var(--palette-bone-0);
}

body.admin .section__lead,
body.admin .section__label,
body.admin .footer {
  color: var(--palette-ink-300);
}

body.admin .footer {
  border-top-color: var(--palette-ink-700);
}

body.admin .register {
  background: var(--palette-ink-800);
  border-color: var(--palette-ink-700);
}

body.admin .register__head {
  background: var(--palette-ink-700);
  border-bottom-color: var(--palette-ink-600);
  color: var(--palette-ink-300);
}

body.admin .register__row {
  border-bottom-color: var(--palette-ink-700);
  /* The evidence keyline still marks a real document — the metaphor holds on
     both surfaces, which is what makes the two feel like one product. */
  border-left-color: var(--palette-verdigris-400);
}

body.admin .register__name {
  color: var(--palette-bone-50);
}

body.admin .register__item,
body.admin .register__meta,
body.admin .register__version {
  color: var(--palette-ink-300);
}

body.admin .empty {
  background: var(--palette-ink-800);
  border-color: var(--palette-ink-700);
}

body.admin .empty__text {
  color: var(--palette-ink-300);
}

body.admin .button--primary {
  background: var(--palette-verdigris-400);
  border-color: var(--palette-verdigris-400);
  color: var(--palette-ink-950);
}

body.admin .button--secondary {
  border-color: var(--palette-verdigris-600);
  color: var(--palette-verdigris-200);
  background: transparent;
}

body.admin .button--secondary:hover {
  background: var(--palette-ink-700);
}

body.admin :focus-visible {
  outline-color: var(--palette-verdigris-200);
}

/* A standing reminder of which surface you are on. */
.admin__public-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs-size);
  color: var(--palette-ink-300);
  border-left: var(--border-keyline) solid var(--palette-amber-500);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-8);
  background: var(--palette-ink-800);
  border-radius: var(--radius-sm);
}

.admin__banner {
  font-family: var(--font-sans);
  font-size: var(--text-sm-size);
  color: var(--palette-ink-950);
  background: var(--palette-verdigris-200);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-6);
}

/* A rejected edit. Deliberately a different treatment from a confirmation: an
   operator who skims must not read "not saved" as "saved". */
.admin__banner--error {
  color: var(--color-critical-text);
  background: var(--color-surface-inset);
  border-left: var(--border-keyline) solid var(--color-critical-border);
}

.admin__subtitle {
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  margin: var(--space-7) 0 var(--space-4);
}

.admin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.admin__actions form {
  margin: 0;
}

body.admin .admin__actions .button {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs-size);
}