/* Editing: the edit dialog and its fields, ordered lists, role and tool rows, the picker field and
   its drawer, the toast and start-up messages. Buttons and the shared field style are in layout.css. */

/* Modal dialogs (edit, Appearance, ⌘K search) and their backdrops */
.editor,.appearance,.cmdk{border:var(--dialog-border);border-radius:var(--panel-radius);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-overlay)}
.editor::backdrop,.picker::backdrop,.appearance::backdrop,.cmdk::backdrop{background:var(--scrim)}

/* Edit dialog */
.editor{width:min(var(--w-editor),calc(100vw - 2rem));max-height:calc(100dvh - 3rem);padding:var(--space-4)}
.editor h3{margin:0 0 var(--space-3)}
.ed-notice{font-size:var(--fs-md);color:var(--ink-2);max-height:60vh;overflow-y:auto}
.ed-notice p{margin:0 0 var(--space-2)}
.ed-fields,.meta{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-3)}
.ed-fields label,.meta label{display:flex;flex-direction:column;gap:calc(0.1875rem * var(--dz));font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-2)}
.ed-fields label.check,.meta label.check{flex-direction:row;align-items:center}
.ed-fields .wide,.meta .wide{grid-column:1 / -1}
.ed-fields input:not([type=checkbox]),.ed-fields select,.ed-fields textarea,.meta input,.meta select,.meta textarea{font-weight:var(--fw-regular)}
.ed-fields fieldset,.meta{border:1px solid var(--line);border-radius:var(--card-radius);padding:var(--space-2) var(--space-3);margin:0}
.meta{margin-top:var(--space-3)}
legend{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--accent-ink);padding:0 var(--space-1)}
.ed-error{margin:var(--space-3) 0 0;padding:var(--space-2);border-radius:var(--radius-xs);background:var(--chg-del-wash);color:var(--neg);font-size:var(--fs-md)}
.ed-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-3)}
@media (max-width:35em){.ed-fields,.meta{grid-template-columns:1fr}}

/* Ordered lists in the edit dialog and the process form: one row per item. A fieldset defaults to
   min-width:min-content, which let long picker labels push the rows past the card. */
fieldset{min-width:0}
.list-field{display:flex;flex-direction:column;gap:var(--space-1)}
.list-row{display:flex;align-items:center;gap:var(--space-1)}
.list-row > select,.list-row > input,.list-label{flex:1;min-width:0}
.list-row > .list-level{flex:0 1 11rem}
.list-label{font-size:var(--fs-md)}
.list-field > .linkish{align-self:flex-start}
/* Step form: roles (role, count, authority) and tools (tool, used for) */
.role-row{display:grid;grid-template-columns:1fr 4rem minmax(7rem,11rem) auto;gap:calc(0.375rem * var(--dz));margin-bottom:calc(0.375rem * var(--dz))}
.role-row.tool-row{grid-template-columns:1fr minmax(7rem,11rem) auto}

/* Picker (js/ui/picker.js): a field that looks like an input and opens the drawer below */
.pk-field{display:flex;min-width:0}
.pk-field.grow{flex:1}
.pk-btn{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);text-align:left;cursor:pointer;min-height:var(--ctl-h)}
.pk-btn:hover{border-color:var(--muted)}
.pk-btn.is-empty .pk-val{color:var(--muted)}
.pk-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-caret{flex:none;color:var(--muted);font-size:var(--fs-xs)}
.list-row .pk-field.list-level,.role-row .pk-field.list-level{flex:0 0 12rem}
/* The drawer: a modal dialog pinned to the right edge, over the page or the edit dialog */
.picker{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:none;max-width:none;width:min(var(--w-picker),100vw);padding:0;border:0;border-left:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-drawer-end);display:none;flex-direction:column}
.picker[open]{display:flex}
.pk-head{gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--grid)}
.pk-head h3{margin:0;font-size:var(--t-title)}
.pk-body{flex:1;min-height:0;display:flex;flex-direction:column}
.pk-search{padding:var(--space-3) var(--space-4) var(--space-2)}
.pk-search input,.pk-add input:not([type=checkbox]){width:100%;box-sizing:border-box;padding:calc(0.375rem * var(--dz)) var(--space-2)}
/* .pk-list is also the part pages' link list (layout.css), whose margin, padding and type apply here too */
.pk-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:1px}
.pk-opt{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 var(--space-2);padding:calc(0.4375rem * var(--dz)) var(--space-2);border-radius:var(--radius-xs);cursor:pointer;font-size:var(--fs-md)}
.pk-opt small{grid-column:1;font-size:var(--t-meta)}
.pk-opt .pk-tick{grid-column:2;grid-row:1 / 3;color:var(--accent-ink);font-weight:var(--fw-heavy)}
.pk-opt:hover,.pk-opt:focus-visible{background:var(--grid);outline:none}
.pk-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.pk-opt.is-on{background:var(--accent-wash);font-weight:var(--fw-semibold)}
.pk-none{padding:var(--space-2)}
.pk-foot{padding:var(--space-3) var(--space-4);border-top:1px solid var(--grid)}
.pk-foot p{margin:0}
.pk-addbtn{all:unset;box-sizing:border-box;width:100%;cursor:pointer;padding:var(--space-2) var(--space-3);border:1px dashed var(--muted);border-radius:var(--field-radius);color:var(--accent-ink);font-weight:var(--fw-semibold)}
.pk-addbtn:hover{background:var(--accent-wash)}
.pk-addbtn:focus-visible{outline:2px solid var(--focus)}
.pk-add{flex:1;overflow:auto;padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.pk-add label{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--t-label);font-weight:var(--fw-semibold)}
.pk-add label.check{flex-direction:row;align-items:center;font-weight:var(--fw-regular)}
.pk-add p{margin:0}
.pk-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:auto}

/* Toast */
.toast{position:fixed;left:50%;bottom:var(--space-4);translate:-50% 0;z-index:var(--z-toast);background:var(--ink);color:var(--surface);font-size:var(--fs-md);padding:var(--space-2) var(--space-4);border-radius:var(--pill-radius);box-shadow:var(--shadow-overlay)}
.toast a{color:inherit;font-weight:var(--fw-bold)}

/* Start-up messages */
.boot-msg{max-width:40rem;margin:var(--space-4) auto}
.boot-msg pre{background:var(--grid);padding:var(--space-2) var(--space-3);border-radius:var(--radius-xs);overflow:auto}