/* Jarbou3i canonical editor (UIX-4, ADR-0002): the working draft's sections
   and one field at a time. Classes are .j-editor-*; the buttons, field,
   status, chips and the recovery banner are kernel and work-panel controls. */

/* Inside the dialog panel, so it takes the panel's colour. */
.j-editor { display: grid; gap: var(--j-s-3); margin-top: var(--j-s-3); background: transparent; }
.j-editor-note { margin: 0; min-height: 1.4em; color: var(--j-fg-muted); font-size: var(--j-t-12); }

/* Undo, Redo and the unsaved state on one side; commit and save on the other. */
.j-editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-2); }
.j-editor-bar .j-status { margin-inline-end: auto; }

/* The sections beside the field; content first, identity and metadata after. */
.j-editor-grid { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: var(--j-s-4); }
.j-editor-nav { display: grid; align-content: start; gap: var(--j-s-1); max-height: 62vh; overflow-y: auto; padding: var(--j-s-1); }
.j-editor-nav > .j-label { margin: var(--j-s-3) 0 var(--j-s-1); }
.j-editor-sec {
  display: flex; align-items: center; justify-content: space-between; gap: var(--j-s-2);
  min-height: 44px; padding: 0 var(--j-s-3); border: 1px solid transparent; border-radius: var(--j-r-2);
  background: transparent; color: var(--j-fg); font: inherit; text-align: start; cursor: pointer;
}
.j-editor-sec:hover:not(:disabled) { background: var(--j-raise); border-color: var(--j-line); }
.j-editor-sec:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }
.j-editor-sec[aria-current="true"] { background: var(--j-signal-wash); border-color: var(--j-signal); }
.j-editor-sec:disabled { opacity: .5; cursor: not-allowed; }
.j-editor-sec .j-mono { overflow-wrap: anywhere; font-size: var(--j-t-13); }
/* On the panel colour, so it keeps its contrast on the selected section too. */
.j-editor-sec .j-chip { flex: none; background: var(--j-panel); }

/* One canonical field as JSON, with its check (a kernel note) and the problems under it. */
.j-editor-main { display: grid; gap: var(--j-s-2); align-content: start; min-width: 0; }
.j-editor .j-editor-json { min-height: 360px; resize: vertical; text-align: left; font-family: var(--j-font-code); }
/* Not a scroll box of its own: it has nothing to focus, so a keyboard could
   not scroll it. The dialog scrolls instead. */
.j-editor-errors ul { margin: 0; padding-inline-start: var(--j-s-5); color: var(--j-fg); }

@media (max-width: 720px) {
  .j-editor-grid { grid-template-columns: 1fr; }
  .j-editor-nav { display: flex; overflow-x: auto; max-height: none; }
  .j-editor-nav > .j-label { flex: none; align-self: center; margin: 0 var(--j-s-2); }
  .j-editor-sec { flex: none; }
  .j-editor .j-editor-json { min-height: 280px; }
}

@media (forced-colors: active) {
  .j-editor-sec[aria-current="true"] { outline: 2px solid Highlight; }
}