/* EDITING — Editing a page in place, which only a signed-in administrator sees.

   One of ten stylesheets split out of a single 10,361-line tree.css.
   THE ORDER MATTERS AND IS NOT ALPHABETICAL. The layout links them as
   base → tree → correspondences → reference → tarot → chrome → astrology → history → sections → editing,
   and the rules inside this file keep the order they had in the original,
   so the cascade resolves exactly as it did before the split. */

/* In-page editing ---------------------------------------------------------
   This deliberately uses the public site's own CSS rather than loading the
   admin Tailwind build and its reset into every reader-facing page.

   THE PALETTE BELOW IS NOT THE SITE'S, AND THAT IS THE POINT. Cream paper and
   near-black ink is the console's own colouring reproduced here: editing
   furniture has to be tellable from the page it is sitting on at a glance, so
   this surface is INVERTED against the reading ground rather than drawn from
   `--surface` and `--ink`. `spec/e2e/admin.spec.mjs` pins both values. The
   cast shadows ARE theme tokens, because a cream panel needs far less shadow
   on a cream page than on a near-black one. What cream cannot do on a cream
   page is signal editing, which is the open question the light theme asks of
   this file. */
.public-admin-bar {
  --editor-ink: #17130d;
  --editor-paper: #f0e6ce;
  --editor-paper-hover: #fff7e5;
  position: fixed;
  top: 50%;
  right: 0.65rem;
  z-index: 80;
  display: grid;
  box-sizing: border-box;
  width: 3.25rem;
  justify-items: center;
  align-items: center;
  gap: 0.42rem;
  padding: 0.48rem 0.35rem 0.55rem;
  border: 1px solid #8a7143;
  border-radius: 0.7rem;
  background: var(--editor-paper);
  color: var(--editor-ink);
  font-size: var(--type-label);
  line-height: 1;
  box-shadow: 0 4px 18px var(--shadow-strong);
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
}

.public-admin-bar form { margin: 0; }
.public-admin-bar__admin {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border: 1px solid #8a7143;
  border-radius: 50%;
  color: inherit;
  font-family: var(--serif);
  font-size: var(--type-label);
  font-weight: 700;
  text-decoration: none;
}
.public-admin-bar__admin:hover,
.public-admin-bar__admin:focus-visible { background: var(--editor-paper-hover); }
.public-admin-bar__label {
  color: #4c4232;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.public-admin-bar__toggle {
  display: block;
  box-sizing: border-box;
  width: 2.25rem;
  height: 1.25rem;
  padding: 0.12rem;
  border: 1px solid #786a52;
  border-radius: 999px;
  background: #b9ad97;
  color: #17130d;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.public-admin-bar__toggle[aria-checked="true"] {
  border-color: #175f31;
  background: #237a3b;
}
.public-admin-bar__track { display: block; width: 100%; height: 100%; }
.public-admin-bar__thumb {
  display: block;
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 1px 3px var(--shadow-strong);
  transition: transform 140ms ease;
}
.public-admin-bar__toggle[aria-checked="true"] .public-admin-bar__thumb {
  transform: translateX(0.96rem);
}
.public-admin-bar__toggle:hover { background: #c8baa1; }
.public-admin-bar__toggle[aria-checked="true"]:hover { background: #2d8a48; }
.public-admin-bar__toggle:focus-visible {
  outline: 2px solid #17130d;
  outline-offset: 2px;
}
.public-admin-bar--editing { box-shadow: 0 0 0 2px rgba(35, 122, 59, 0.32), 0 4px 18px var(--shadow-strong); }

.inline-editor__start,
.inline-editor__save,
.inline-editor__cancel {
  border: 1px solid color-mix(in srgb, var(--gold, #b99a55) 48%, transparent);
  border-radius: 0.3rem;
  background: #f0e6ce;
  color: #17130d;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.inline-editor__start:hover,
.inline-editor__save:hover:not(:disabled),
.inline-editor__cancel:hover { background: #fff7e5; }

.inline-editor {
  position: relative;
  margin-block: 0.15rem;
  padding: 0.25rem;
  border-radius: 0.4rem;
}

.inline-editor:has(.inline-editor__start:not([hidden])) {
  outline: 1px dashed color-mix(in srgb, var(--gold, #b99a55) 42%, transparent);
  outline-offset: 0.18rem;
}

.inline-editor__display { cursor: text; }
.inline-editor__display a { cursor: pointer; }

.inline-editor__start {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  padding: 0.18rem 0.42rem;
  border-color: #8a7143;
  background: #f0e6ce;
  color: #17130d;
  font-size: var(--type-label);
  font-weight: 700;
  box-shadow: 0 1px 5px var(--shadow-strong);
}

.inline-editor:has(.inline-editor__human:not([hidden])) .inline-editor__start {
  right: 1.65rem;
}

.inline-editor__form { display: grid; gap: 0.45rem; }
.inline-editor__form[hidden],
.inline-editor__display[hidden],
.inline-editor__start[hidden],
.inline-editor__human[hidden] { display: none; }

.inline-editor__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--gold, #b99a55) 55%, transparent);
  border-radius: 0.35rem;
  background: #f0e6ce;
  color: #17130d;
  caret-color: #17130d;
  font: inherit;
  line-height: 1.55;
}

.inline-editor__input:focus {
  outline: 2px solid color-mix(in srgb, var(--gold, #b99a55) 68%, transparent);
  outline-offset: 2px;
}

.inline-editor__actions { display: flex; gap: 0.4rem; }
.inline-editor__save,
.inline-editor__cancel { padding: 0.22rem 0.5rem; font-size: var(--type-label); }
.inline-editor__save:disabled { cursor: default; opacity: 0.45; }
.inline-editor__status {
  margin: 0.35rem 0 0;
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: var(--type-label);
  letter-spacing: 0.015em;
}
.inline-editor__status[data-error="true"] { color: var(--danger); }

/* Fallback editing for template and interface copy which has no richer model.
   The editor floats outside the target, so it remains valid even for table
   cells, links, headings and buttons. */
[data-page-copy-key] {
  position: relative;
  cursor: text !important;
  outline: 1px dashed color-mix(in srgb, var(--gold, #b99a55) 34%, transparent);
  outline-offset: 0.16rem;
}

[data-page-copy-key]:hover,
[data-page-copy-active="true"] {
  outline-color: #8a7143;
  background-image: linear-gradient(
    color-mix(in srgb, #f0e6ce 12%, transparent),
    color-mix(in srgb, #f0e6ce 12%, transparent)
  );
}

.page-copy-popover {
  position: fixed;
  z-index: 120;
  box-sizing: border-box;
  display: grid;
  gap: 0.5rem;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 0.8rem;
  border: 1px solid #8a7143;
  border-radius: 0.45rem;
  background: #f0e6ce;
  color: #17130d;
  box-shadow: 0 10px 36px var(--shadow-strong);
}

.page-copy-popover__heading {
  margin: 0;
  color: #17130d;
  font-size: var(--type-label);
  font-weight: 750;
}

.page-copy-popover__input { min-height: 8rem; }

/* Human-edit provenance is editing furniture, not another line of content.
   The small checked square sits over the box corner and reveals its timestamp
   only when an editor asks for it with a pointer or keyboard. */
.human-update-badge {
  position: absolute;
  top: -0.48rem;
  right: -0.48rem;
  z-index: 5;
  display: grid;
  box-sizing: border-box;
  width: 1.18rem;
  height: 1.18rem;
  margin: 0;
  place-items: center;
  border: 1px solid #b9e2c2;
  border-radius: 0.24rem;
  background: #237a3b;
  color: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: var(--type-label);
  font-weight: 800;
  line-height: 1;
  cursor: help;
  box-shadow: 0 1px 5px var(--shadow-strong);
}

.human-update-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 0.42rem);
  right: 0;
  width: max-content;
  max-width: min(19rem, 75vw);
  padding: 0.38rem 0.5rem;
  border: 1px solid #8a7143;
  border-radius: 0.25rem;
  background: #f0e6ce;
  color: #17130d;
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.2rem);
  transition: opacity 120ms ease, transform 120ms ease;
}

.human-update-badge:hover::after,
.human-update-badge:focus-visible::after,
[data-page-copy-key]:focus-visible > .page-copy__human::after {
  opacity: 1;
  transform: none;
}

.human-update-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .public-admin-bar {
    top: auto;
    right: 0.5rem;
    bottom: 0.75rem;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-admin-bar__toggle,
  .public-admin-bar__thumb { transition: none; }
}