/* The edit sheet (lib/edit.js): one look for creating, editing and deleting anything. It sits on
   top of every screen, so it uses the :root tokens and never .la / CRM scoping. The sheet frame
   (.sheet, .sheet.modal, .sheet-scrim: a bottom sheet on a phone, a centred dialog on a wide
   screen) comes from crm.css; this file adds what is inside it. */

.es-scrim { z-index: 70; }
.es.sheet { z-index: 71; color: var(--ink); gap: .9rem; padding-top: 0; }
.es-head { position: sticky; top: 0; z-index: 1; background: var(--card); margin: 0 -1rem; padding: .9rem 1rem .4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.es-h { margin: 0; font: 700 1.1rem/1.25 var(--font); overflow-wrap: anywhere; }
.es .es-x { min-width: 2.4rem; font-size: 1.3rem; line-height: 1; padding: .2rem .5rem; border-color: transparent; }
.es-form { display: flex; flex-direction: column; gap: .75rem; margin: 0; }
.es-row { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.es-lab { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.es-hint { font-size: .8rem; color: var(--ink-3); }
.es .field { background: var(--card); border-radius: 12px; font-size: 1rem; }
.es textarea.field { resize: vertical; min-height: 5.5rem; line-height: 1.4; font: inherit; }
.es select.field { font: inherit; }
.es-boolrow { flex-direction: row; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; }
.es-check { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
.es-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding-top: .3rem; }
.es-foot.asking { flex-direction: column; align-items: stretch; }
.es-btns { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.es .btn { border-radius: 999px; }
.es-danger { border-color: var(--bad) !important; color: var(--bad) !important; background: transparent; }
.es-danger.solid { background: var(--bad) !important; color: #fff !important; }
.es-ask { margin: 0; color: var(--ink); line-height: 1.4; }
.es-confirm .es-ask { color: var(--ink-2); }

/* The ✎ that opens a sheet: quiet until hovered, always there on a touch screen. */
.es-edit {
  flex: none; display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem; padding: 0 .35rem;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink-2, #566864);
  font: 600 .95rem/1 var(--font); cursor: pointer;
}
.es-edit:hover, .es-edit:focus-visible { color: var(--ink); border-color: var(--line); background: var(--card); }
@media (pointer: coarse) { .es-edit { min-width: 2.6rem; min-height: 2.6rem; } }

/* A toast raised while a sheet is open (a missing name, say) shows above it. */
#toast.toast { z-index: 80; }