/* 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)}
/* A label is a wrapping row so its help icon (E59) sits beside the text; the control keeps its own
   line below, as it did when the label was a column. */
.ed-fields label,.meta label{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;column-gap:var(--space-1);row-gap:calc(0.1875rem * var(--dz));font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-2)}
.ed-fields label > :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.pk-field,.pk-field-group),
.meta label > :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.pk-field,.pk-field-group){flex:1 0 100%}
.ed-fields label.check,.meta label.check{flex-direction:row;flex-wrap:nowrap;align-items:center;column-gap:calc(0.1875rem * var(--dz))}
.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,#pk-body,.pk-pane,.pk-results{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}
.pk-add .pk-fld{display:flex;flex-direction:column;gap:var(--space-1)}
.pk-add .pk-lbl{font-size:var(--t-label);font-weight:var(--fw-semibold)}
.pk-add select{font-weight:var(--fw-regular);width:100%;box-sizing:border-box;min-height:var(--ctl-h);font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--field-radius)}
.pk-new{flex:none;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--accent-ink);background:var(--accent-wash);border-radius:var(--pill-radius);padding:0 var(--space-2)}
.pk-new[hidden]{display:none}
.pk-opt .pk-new{grid-column:2;grid-row:1 / 3}
.pk-grp{padding:var(--space-2) var(--space-2) var(--space-1);font-size:var(--t-meta);font-weight:var(--fw-bold);color:var(--muted)}
/* Multi mode (open items): a tick, the row, its amount, Only */
.pk-bulk{padding:var(--space-1) var(--space-4);border-bottom:1px solid var(--grid)}
.pk-all,.pk-rowmain{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--fs-md)}
.pk-all input,.pk-rowmain input{margin:0;accent-color:var(--m-system);width:0.9375rem;height:0.9375rem;flex:none}
.pk-row{display:grid;grid-template-columns:minmax(0,1fr) 7rem auto;align-items:center;gap:var(--space-2);padding:calc(0.4375rem * var(--dz)) var(--space-2);border-radius:var(--radius-xs)}
.pk-row:hover,.pk-row:focus-within{background:var(--grid)}
.pk-row:hover .only,.pk-row:focus-within .only{opacity:1}
.pk-rowtext{display:flex;flex-direction:column;min-width:0}
.pk-rowtext small{font-size:var(--t-meta)}
.pk-amt{width:100%;box-sizing:border-box;min-height:var(--ctl-h);padding:0 var(--space-2);font:inherit;font-size:var(--fs-md);text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--field-radius)}
.pk-amt:disabled{opacity:var(--from-fade)}
.pk-donebar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)}
.pk-total{font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.pk-foot .ed-error{margin:0 0 var(--space-2)}
/* The local demo page (views/dev_pickers.html) */
.pk-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:var(--space-3)}
.pk-demo .pk-fld{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.pk-echo{margin:var(--space-2) 0 0;padding-left:var(--space-4);font-size:var(--fs-sm);overflow-wrap:anywhere}

/* 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}

/* A saved-changes notice at the top of a form or list page */
.ok-note{margin:0 0 var(--space-3);padding:var(--space-2);border-radius:var(--radius-xs);background:var(--accent-wash);color:var(--accent-ink);font-size:var(--fs-md)}
/* A select's width is its longest option: let the form's grid shrink it to the column (phones). */
.ed-fields > *{min-width:0}
.ed-fields select{max-width:100%}

/* The books' New pages and document pages (routes.md §4.1): a head card, the lines card, the totals and journal preview card, a
   sticky bar. The pages are one column of cards; the fields use the field style of the edit dialog. */
.doc-page{display:flex;flex-direction:column;flex:1 0 auto;gap:var(--gap-card);min-width:0}
.doc-page > h2{margin:0;font-size:var(--fs-lg-plus);font-weight:var(--fw-title)}
.doc-page > .sub,.doc-page > .kicker{margin:0}
.doc-form{display:flex;flex-direction:column;flex:1 0 auto;gap:var(--gap-card);min-width:0}
.doc-card h3{padding-right:0;margin-bottom:var(--space-2)}
.doc-card .sub{margin:0 0 var(--space-2)}
.doc-head{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.doc-head .wide{grid-column:1 / -1}
.doc-head .doc-number,.doc-head .doc-fld{display:flex;flex-direction:column;gap:calc(0.1875rem * var(--dz));min-width:0}
.fld-l{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-2)}
.doc-head .doc-number strong{font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.doc-head label small,.doc-head .doc-number small{font-weight:var(--fw-regular)}
.doc-head textarea{width:100%}
.doc-head:has(#f-settlement option[value="credit"]:checked) .cash-field{display:none}
.doc-add{margin:var(--space-2) 0 0}

/* The lines: one grid row per line, columns by kind. Labels are shown over each field on phones; the header row only on wide screens. */
.dl-head,.dl-row{display:grid;gap:var(--space-2);align-items:start}
.dl-head{padding:0 0 var(--space-1);font-size:var(--t-label);font-weight:var(--fw-strong);color:var(--ink-2);border-bottom:1px solid var(--line);margin-bottom:var(--space-2)}
.dl-head .num{text-align:right}
.dl-sales{grid-template-columns:minmax(8rem,2fr) minmax(10rem,2fr) 5rem 7rem 8rem 7rem 2rem}
.dl-bill{grid-template-columns:minmax(8rem,2fr) minmax(10rem,2fr) 8rem 7rem 7rem 2rem}
.dl-journal{grid-template-columns:minmax(10rem,2fr) minmax(9rem,1.5fr) 8rem 8rem minmax(6rem,1.5fr) 7rem 8rem 2rem}
.dl-receipt-wh{grid-template-columns:minmax(10rem,2fr) 8rem 8rem 2rem}
.dl-receipt-line{grid-template-columns:minmax(8rem,1.5fr) minmax(10rem,2fr) minmax(9rem,1.5fr) 8rem 7rem 2rem}
.dl-payment-line{grid-template-columns:minmax(8rem,1.5fr) minmax(10rem,2fr) minmax(9rem,1.5fr) 8rem 7rem 7rem 2rem}
.app-amt{max-width:8rem;margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.only{all:unset;box-sizing:border-box;cursor:pointer;font-size:var(--fs-sm);color:var(--accent-ink);font-weight:var(--fw-semibold);padding:calc(0.125rem * var(--dz)) calc(0.375rem * var(--dz));border-radius:var(--radius-xs)}
.only:hover{background:var(--accent-wash)}
.dl-rows{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.dl-c{display:flex;flex-direction:column;gap:calc(0.1875rem * var(--dz));min-width:0}
.dl-c .pk-field{width:100%}
.dl-row input:not([type=hidden]),.ob-row input:not([type=hidden]){width:100%;min-width:0;font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--field-radius);padding:calc(0.3125rem * var(--dz)) var(--space-2)}
.dl-num input,.ob-amt input{text-align:right;font-variant-numeric:tabular-nums}
.dl-lbl{display:none;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink-2)}
.dl-x{all:unset;box-sizing:border-box;width:var(--ctl-h);height:var(--ctl-h);display:grid;place-items:center;cursor:pointer;color:var(--muted);border-radius:var(--field-radius);font-size:var(--fs-lg)}
.dl-x:hover{color:var(--neg);background:var(--chg-del-wash)}
.dl-x:focus-visible{outline:2px solid var(--focus)}
@media (max-width:64em){
  .dl-head{display:none}
  .dl-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-2);border:1px solid var(--line);border-radius:var(--card-radius)}
  .dl-row .dl-desc,.dl-row .dl-acct,.dl-row .dl-memo{grid-column:1 / -1}
  .dl-row .dl-x{grid-column:2;justify-self:end}
  .dl-lbl{display:block}
}

/* The totals and journal preview */
.doc-totals{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:0 0 var(--space-3)}
.doc-totals div{display:flex;flex-direction:column}
.doc-totals dt,.doc-facts dt{font-size:var(--fs-sm);color:var(--muted)}
.doc-totals dd,.doc-facts dd{margin:0;font-variant-numeric:tabular-nums}
.doc-totals .doc-total dd,.doc-facts .doc-total dd{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.doc-check{margin:var(--space-2) 0 0;font-size:var(--fs-md);font-weight:var(--fw-strong);font-variant-numeric:tabular-nums}
.doc-check.ok{color:var(--pos)}
.doc-check.bad{color:var(--neg)}
.doc-warn{margin:var(--space-2) 0 0;padding:var(--space-2);border-radius:var(--radius-xs);background:var(--chg-edit-wash);color:var(--chg-edit);font-size:var(--fs-md)}
.doc-todo{margin:var(--space-2) 0 0;font-size:var(--fs-md)}
.doc-todo p{margin:0}
.doc-todo ul,.doc-errors ul{margin:var(--space-1) 0 0;padding-left:var(--space-4)}

/* The sticky bar at the bottom of the page: errors, Cancel, Save and new, Save */
.doc-bar{position:sticky;bottom:calc(-1 * var(--pad-page-y));z-index:var(--z-bar);display:flex;flex-direction:column;gap:var(--space-2);margin:auto calc(-1 * var(--pad)) calc(-1 * var(--pad-page-y));padding:var(--space-2) var(--pad);background:var(--surface);border-top:var(--bar-border);box-shadow:var(--bar-shadow)}
.doc-bar .doc-errors{margin:0;max-height:8rem;overflow:auto}
.doc-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2)}
.doc-bar .ob-check{margin-right:auto}

/* A saved document */
.doc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--space-2) var(--space-4);margin:0}
.doc-facts > div{min-width:0}
.doc-facts dd{overflow-wrap:anywhere}
.doc-revs{margin:0;padding-left:var(--space-4);font-size:var(--fs-md)}
.doc-revs li{margin:0 0 var(--space-1)}
.doc-void summary{cursor:pointer;font-weight:var(--fw-strong);color:var(--neg)}
.doc-void form{margin-top:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2)}
.doc-void label{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.doc-void input{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--field-radius);padding:calc(0.3125rem * var(--dz)) var(--space-2)}
.doc-void-note{margin:0;padding:var(--space-2);border-radius:var(--radius-xs);background:var(--chg-edit-wash);color:var(--chg-edit);font-size:var(--fs-md)}

/* The opening balances: a row per account, a sub-grid per party for the accounts that name one */
.ob-head,.ob-row{display:grid;grid-template-columns:minmax(0,1fr) 9rem 9rem;gap:var(--space-2);align-items:center}
.ob-head{padding-bottom:var(--space-1);border-bottom:1px solid var(--line);font-size:var(--t-label);font-weight:var(--fw-strong);color:var(--ink-2)}
.ob-head .num{text-align:right}
.ob-acct{padding:calc(0.25rem * var(--dz)) 0;border-bottom:1px solid var(--grid)}
.ob-label{min-width:0;overflow-wrap:anywhere}
.ob-partied{display:flex;flex-direction:column;gap:var(--space-1)}
.ob-subs{display:flex;flex-direction:column;gap:var(--space-1);padding-left:var(--space-4)}
.ob-sub{grid-template-columns:minmax(0,1fr) 9rem 9rem var(--ctl-h)}
.ob-party .pk-field{width:100%}
.ob-amt{display:flex;flex-direction:column;min-width:0}
@media (max-width:45em){
  .ob-head{display:none}
  .ob-row,.ob-sub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob-row .ob-label,.ob-sub .ob-party{grid-column:1 / -1}
  .ob-subs{padding-left:0}
}