/* The field pencil (COMMAND-810, public/field-edit): a small pencil right beside a Details value on a record page, the
   one field opened in place with Save and Cancel under it, and the question "Save changes to {field}?" on the shared
   popup shell (modal.js). Loaded by index.html after app.css, so it uses the app's colours. No design yet: every part
   carries the POC marker (poc-ui), which draws nothing since COMMAND-817. No inline styles anywhere (the CSP drops them): these classes only. */

/* The pencil: small, right after the value, always visible (never only on hover), on every size. */
.field-pencil {
  display: inline-grid; place-items: center; vertical-align: middle;
  width: 26px; height: 26px; margin-left: 6px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer;
}
.field-pencil svg { width: 15px; height: 15px; }
.field-pencil:hover, .field-pencil:focus-visible { color: var(--accent); background: var(--surface-2); }

/* The open field: its input over the value column's width, Save and Cancel under it. */
.field-edit { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.field-edit .input { width: 100%; }
.field-edit .record-form-i18n { display: grid; grid-template-columns: 1fr; gap: 6px; }
.field-edit .record-form-lang { display: flex; flex-direction: column; gap: 2px; }
.field-edit-error { margin: 0; }
.field-edit-buttons { display: flex; gap: 8px; }

/* A phone (under 600px): the open field spans the whole row under its label, its input and buttons the full width. */
@media (max-width: 599px) {
  .record-dl dd.field-open { grid-column: 1 / -1; }
  .field-edit-buttons .btn { flex: 1; }
}
/* A wide screen: it stays in the value column; an i18n pair side by side. */
@media (min-width: 600px) {
  .field-edit .record-form-i18n { grid-template-columns: 1fr 1fr; }
}

/* The question: a small popup over a dimmed page, in the middle on every size (it is short). */
.field-edit-ask-back {
  position: fixed; inset: 0; z-index: 22;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.45);
}
.field-edit-ask { border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 25%); }
.field-edit-ask h2 { margin: 0; font-size: 1.05rem; }
.field-edit-ask .modal-body:empty { display: none; }
.field-edit-ask .modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }