/*
  50-editor-skeleton.css — v42.57  The six-section editor (88-editor-skeleton.js)

  From design/codex-entries/Edit-skeleton.html: 44px controls, 10px between
  fields, short fields paired, a quiet section rule with a chevron, and a
  footer of Save + Save & add another. Inputs keep 16px text — anything
  smaller makes iOS zoom the page on focus.

  Scoped to #modal.codex-editor .ed-skeleton throughout (v42.47 trap).
*/

#modal.codex-editor .ed-skeleton {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  padding: 0; margin: 6px 0 0; border: 0; background: none;
}

/* ---------- section head: name · summary · rule · chevron ---------- */
#modal.codex-editor .ed-section { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: none; min-width: 0; margin: 0; padding: 0; border: 0; }
#modal.codex-editor .ed-section-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer;
}
#modal.codex-editor .ed-section-name { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
#modal.codex-editor .ed-section-summary {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
#modal.codex-editor .ed-section-summary:empty { display: none; }
#modal.codex-editor .ed-section-rule { flex: 1 1 auto; height: 1px; background: rgba(120, 92, 43, .28); }
#modal.codex-editor .ed-section-chevron {
  flex: 0 0 auto; width: 9px; height: 9px; margin: 0 4px 3px 2px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .15s ease;
}
#modal.codex-editor .ed-section[data-open="false"] .ed-section-chevron { transform: rotate(-45deg); margin-bottom: 0; }
#modal.codex-editor .ed-section-head:focus-visible { outline: 2px solid var(--lagoon-deep); outline-offset: 2px; border-radius: 6px; }

/* ---------- fields: pairs on a phone, as the boards draw them ---------- */
#modal.codex-editor .ed-section-body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
#modal.codex-editor .ed-section-body > * { min-width: 0; margin: 0; }
#modal.codex-editor .ed-section-body > .span-2,
#modal.codex-editor .ed-section-body > section,
#modal.codex-editor .ed-section-body > .check-row,
#modal.codex-editor .ed-section-body > .secret-access-panel,
#modal.codex-editor .ed-section-body > .modal-note,
#modal.codex-editor .ed-section-body > .row-sub,
#modal.codex-editor .ed-section-body > .rule-note { grid-column: 1 / -1; }
#modal.codex-editor .ed-section-body > [data-ed-half] { grid-column: auto; }
/* The name always has the whole row; so does a lone field with nothing to pair with. */
#modal.codex-editor .ed-section[data-ed-section="identity"] .ed-section-body > :first-child,
#modal.codex-editor .ed-section-body > :only-child { grid-column: 1 / -1; }
/* A field with "Create and link a new entry" under it needs the whole row. */
#modal.codex-editor .ed-section-body > :has(details, .codex-create) { grid-column: 1 / -1; }
/* Long text and anything with a picker under it gets the full width. */
#modal.codex-editor .ed-section[data-ed-section="notes"] .ed-section-body > *,
#modal.codex-editor .ed-section[data-ed-section="links"] .ed-section-body > * { grid-column: 1 / -1; }

/* Label size is the type scale's (--cx-label, 41-codex-refinement); only the gap is ours. */
#modal.codex-editor .ed-skeleton label:not(.check-row):not(.secret-master-toggle):not(.secret-person-option) {
  margin-bottom: 4px;
}
#modal.codex-editor .ed-skeleton input:not([type="checkbox"]):not([type="hidden"]):not([type="file"]),
#modal.codex-editor .ed-skeleton select {
  display: block; min-height: 44px; padding: 9px 12px; border-radius: 11px;
}
/* "Also known as" sits beside Race; it grows when it needs a second name. */
#modal.codex-editor .ed-skeleton [data-ed-half] textarea { display: block; height: 44px; min-height: 44px; padding: 9px 12px; resize: vertical; }
#modal.codex-editor .ed-skeleton [data-ed-half] .field-hint {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#modal.codex-editor .ed-skeleton .check-row { min-height: 44px; }

/* ---------- footer: Save, then Save & add another ---------- */
#modal.codex-editor [data-modal-body] .form-actions.ed-footer {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px;
}
#modal.codex-editor [data-modal-body] .form-actions.ed-footer > .button { min-height: 48px; margin: 0; }
#modal.codex-editor [data-modal-body] .form-actions.ed-footer > .button:only-child { grid-column: 1 / -1; }
#modal.codex-editor [data-modal-body] .form-actions.ed-footer > [data-ed-another] {
  padding: 0 16px; white-space: nowrap;
  background: var(--chart); color: var(--ink); border: 1px solid var(--line-strong);
}

/* ---------- header: Cancel · title · Save ---------- */
#modal.codex-editor .modal-head > .x.ed-cancel {
  width: auto !important; min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: 10px; font-size: 14px; font-weight: 600;
}
#modal.codex-editor .modal-head:has(> .ed-cancel) { grid-template-columns: auto minmax(0, 1fr) auto; }
#modal.codex-editor .modal-head:has(> .ed-cancel) h2 { text-align: center; }
/* The title takes focus on open so a screen reader starts there; it is not a control. */
#modal.codex-editor .modal-head:has(> .ed-cancel) h2:focus { outline: none; box-shadow: none; }

/* ---------- v42.59: the footer covers the bottom edge, all editors ---------- */
/* The body is the scroller and had 24px of bottom padding; a sticky footer is
   measured from inside that padding, so it parked 14px above the bottom with
   form text showing beneath it, and 20px short of each side. The body now has
   no bottom padding, the footer sits flush (bottom: 0), bleeds to both edges,
   carries the safe-area inset itself, and is opaque. scroll-padding keeps a
   focused field (keyboard open) clear of it. Applies to every
   #modal.codex-editor, the older chart/event/fleet editors included. */
#modal.codex-editor { --ed-pad-x: 20px; }
@media (min-width: 700px) { #modal.codex-editor { --ed-pad-x: 28px; } }
#modal.codex-editor .editor-body {
  padding-bottom: 0;
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
#modal.codex-editor .editor-body > .form-actions {
  position: sticky; bottom: 0; z-index: 3;
  width: auto; margin: 16px calc(-1 * var(--ed-pad-x)) 0;
  padding: 10px var(--ed-pad-x) calc(10px + env(safe-area-inset-bottom));
  background: var(--chart);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 12px -8px rgba(29, 23, 17, .22);
}

/* ---------- v42.60: the photo album as a strip (Edit-NPC.html) ---------- */
/* The editor shows every picture at once as 76px tiles instead of a full-width
   carousel. Embla still owns the track and writes inline transforms, so those
   are overridden here, inside the editor only. */
#modal.codex-editor .ed-photo-strip { padding: 0; border: 0; background: none; box-shadow: none; }
#modal.codex-editor .ed-photo-strip .profile-photo-carousel {
  overflow: visible; height: auto; min-height: 0; aspect-ratio: auto; border: 0; background: none; padding: 0;
}
#modal.codex-editor .ed-photo-strip .embla-photo-track {
  display: flex; flex-wrap: wrap; gap: 18px; padding: 8px 8px 0 0; transform: none !important;
}
#modal.codex-editor .ed-photo-strip .profile-photo-slide {
  position: relative; flex: 0 0 76px; width: 76px; height: 76px; min-width: 0; margin: 0;
  transform: none !important; border-radius: 12px; overflow: visible; cursor: pointer;
  border: 1px solid rgba(120, 92, 43, .35); background: rgba(120, 92, 43, .10);
}
#modal.codex-editor .ed-photo-strip .profile-photo-slide.is-deleted { display: none; }
#modal.codex-editor .ed-photo-strip .profile-photo-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 11px; display: block;
}
#modal.codex-editor .ed-photo-strip .profile-primary-badge {
  position: absolute; left: 4px; bottom: 4px; top: auto; right: auto; margin: 0;
  padding: 1px 6px; border-radius: 999px; font-size: .68rem; letter-spacing: 0; box-shadow: none;
  background: var(--brass); color: #1b1105; border: 0;
}
#modal.codex-editor .ed-photo-strip .profile-photo-slide:has(.profile-primary-badge:not([hidden])) { outline: 2px solid var(--brass); outline-offset: 1px; }
/* The remove button keeps its full 44px target, centred on the tile's corner;
   only a 28px circle is drawn inside it, so it doesn't swamp a 76px tile. */
#modal.codex-editor .ed-photo-strip .profile-photo-delete {
  top: -16px; right: -16px; border: 0; box-shadow: none; font-size: 1rem; color: #fff4dc;
  background: radial-gradient(circle, rgba(102, 28, 18, .94) 0 13px, rgba(255, 220, 196, .75) 13px 14px, transparent 14.5px);
}
#modal.codex-editor .ed-photo-strip :is(.profile-photo-nav, .profile-primary-button, .profile-new-badge) { display: none !important; }
#modal.codex-editor .ed-photo-strip .profile-photo-placeholder { padding: 10px 0; color: var(--ink-soft); font-size: var(--t0); }
#modal.codex-editor .ed-photo-hint { margin: 6px 0 0; }
/* "Choose" is one compact row, as on the board. */
#modal.codex-editor .ed-section[data-ed-section="picture"] .profile-upload-field label { margin-bottom: 4px; }
#modal.codex-editor .ed-section[data-ed-section="picture"] input[type="file"] {
  min-height: 44px; padding: 6px; border-radius: 11px; font-size: 14px;
}
#modal.codex-editor .ed-section[data-ed-section="picture"] input[type="file"]::file-selector-button {
  min-height: 32px; margin-right: 10px; padding: 0 14px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(120, 92, 43, .45); background: transparent; color: var(--ink); font: inherit; font-weight: var(--fw-emph);
}

/* ---------- v42.64: one button vocabulary (Edit-buttons.html) ---------- */
/* Header Cancel · Save, footer Save · Save & add another — and everything
   inside the form is a quiet text button in the brass ink: no fill, no
   border, a 44px target. The four filled teal buttons under every Notes
   field were the loudest thing on the screen. */
#modal.codex-editor .codex-rich-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 4px 0 0 -10px; }
#modal.codex-editor .codex-rich-tools .rich-tool,
#modal.codex-editor .codex-rich-picker > summary.rich-tool,
#modal.codex-editor .codex-create > summary,
#modal.codex-editor #questGiverDraftPicker > summary {
  display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 44px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent; box-shadow: none;
  color: var(--brass-ink, #6e4f12); font: inherit; font-weight: 600; cursor: pointer; list-style: none;
  text-shadow: none;
}
#modal.codex-editor .codex-rich-picker > summary::-webkit-details-marker,
#modal.codex-editor .codex-create > summary::-webkit-details-marker,
#modal.codex-editor #questGiverDraftPicker > summary::-webkit-details-marker { display: none; }
#modal.codex-editor .codex-rich-picker > summary.rich-tool::before { content: '\1F517'; font-size: .9em; }
#modal.codex-editor .codex-rich-tools .rich-tool:hover,
#modal.codex-editor :is(.codex-rich-picker, .codex-create, #questGiverDraftPicker) > summary:hover { background: rgba(193, 138, 42, .14); }
#modal.codex-editor .codex-rich-tools .rich-tool:focus-visible,
#modal.codex-editor :is(.codex-rich-picker, .codex-create, #questGiverDraftPicker) > summary:focus-visible { outline: 2px solid var(--lagoon-deep); outline-offset: 0; }
/* Undo and Redo: two glyphs at the end of the row. */
#modal.codex-editor .codex-rich-tools .rich-tool-icon { width: 44px; padding: 0; justify-content: center; font-size: 1.15rem; }
#modal.codex-editor .codex-rich-tools .rich-tool-icon:first-of-type,
#modal.codex-editor .codex-rich-tools .rich-tool:not(.rich-tool-icon) + .rich-tool-icon { margin-left: auto; }
/* "+ New …" opens the same panel; the box only appears once it is open. */
#modal.codex-editor .codex-create:not([open]) { padding: 0; margin: 2px 0 0 -10px; border: 0; background: none; box-shadow: none; }
#modal.codex-editor #questGiverDraftPicker:not([open]) { padding: 0; margin: 2px 0 0 -10px; border: 0; background: none; box-shadow: none; }

/* Events and charts have no sheet: their Delete is the form's last row. */
#modal.codex-editor .ed-delete-row { display: flex; justify-content: flex-start; margin: 18px 0 0 -10px; }
#modal.codex-editor .ed-delete-row .ed-delete {
  min-height: 44px; padding: 0 10px; border: 0; background: transparent; box-shadow: none;
  color: var(--danger); font-weight: 600;
}

/* One Save colour: the header's Save was teal while the footer's was brass. */
#modal.codex-editor .modal-head .editor-save.primary {
  background: rgb(192, 138, 46); border-color: rgb(192, 138, 46); color: #1b1105; text-shadow: none;
}
/* "Link an entry" sits straight under the tools row, not a gap away. */
#modal.codex-editor .codex-rich-picker { margin: -2px 0 0 -10px; }
/* Any other secondary button placed inside the form (the character profile's
   "Manage relationships", "Edit description links") is quiet too. An open
   "+ New …" panel keeps its own filled Create button: that is its action. */
#modal.codex-editor .ed-skeleton .button.secondary:not(.rich-tool):not(:is(.codex-create, .ed-photo-strip, .codex-rich-picker, .family-connection-editor) .button) {
  width: auto; min-height: 44px; padding: 0 10px; margin-left: -10px;
  border: 0; background: transparent; box-shadow: none; text-shadow: none;
  color: var(--brass-ink, #6e4f12); font-weight: 600;
}