/* The draft is an editable document; the issued paper keeps its own styling. */
.draft-save-actions {
  position:sticky;top:0;z-index:10;
  justify-content:flex-end;gap:8px;padding:10px 0;margin-bottom:20px;
  border-bottom:1px solid var(--line);background:var(--app-canvas);
}
/* Clear the persistent actions for short editor targets without shifting long text carets. */
#main:has(.draft-save-actions) :is(button, input, select, summary, a, .draft-form-mode textarea),
#main:has(.draft-save-actions) > #page-errors {
  scroll-margin-top:calc(var(--draft-actions-height, 0px) + 12px);
  scroll-margin-bottom:12px;
}
.editor-view-switch { display:flex;gap:2px;width:max-content;max-width:100%;padding:3px;margin:0 auto 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface); }
.editor-view-switch .rk-button { min-height:34px;padding:5px 12px;font-size:var(--font-meta-size); }
.editor-view-switch .rk-button[aria-pressed="true"] { background:var(--interaction-pressed);color:var(--ink); }
.draft-editor-grid { display:block;max-width:1000px;margin:0 auto; }
.draft-editor-grid .editor-panel { min-width:0; }
.draft-preview-disclosure { margin-top:20px;border-top:1px solid var(--line);padding-top:12px; }
.draft-preview-disclosure>summary { display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:8px 4px;cursor:pointer;color:var(--ink-muted);font-size:var(--font-body-size); }
.draft-preview-disclosure>summary::after { content:'▸';margin-left:4px; }
.draft-preview-disclosure[open]>summary::after { content:'▾'; }
.draft-preview-disclosure .preview-panel { position:static;max-width:640px;margin:14px auto 0; }
.draft-preview-disclosure .preview-panel>header { flex-wrap:wrap; }

.draft-sheet {
  --surface:#fff; --app-panel:#fff; --surface-subtle:#f6f6f6;
  --ink:#232323; --ink-muted:#626262; --ink-subtle:#777777;
  --line:#e4e4e4; --line-strong:#bcbcbc; --interaction-hover:#f4f4f4;
  --interaction-pressed:#e8e8e8; --focus-color:#232323;
  color-scheme:light;color:var(--ink);background:var(--surface);
  border:1px solid #e4e4e4;box-shadow:0 4px 18px #00000010;
  padding:clamp(20px,4vw,48px);font-size:max(15px,.9375rem);line-height:1.55;
  overflow-wrap:anywhere;min-width:0;
}
.draft-sheet-heading { display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:36px; }
.draft-sheet .paper-kicker { font-size:max(13px,.8125rem);margin:0 0 18px; }
.draft-sheet-heading h2 { font-size:2rem;line-height:1.2;letter-spacing:-.035em; }
.draft-number { margin-top:5px;color:var(--ink-muted);font-size:max(13px,.8125rem); }
.draft-sheet .paper-mark { flex:none; }
.draft-parties { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:28px;margin-bottom:32px; }
.draft-parties>div { min-width:0; }
.draft-parties h3 { margin-bottom:10px;font-size:max(13px,.8125rem);color:var(--ink-muted); }
.draft-address,[data-draft-seller] { line-height:1.6; }
.draft-parties .customer-field { margin-bottom:12px; }
.draft-parties .rk-button:not(.customer-select-row .rk-button) { margin:8px 0 0;padding:4px 0;min-height:32px;justify-content:flex-start;text-align:left; }
.draft-sheet .field-hint,.draft-sheet .field small { font-size:max(13px,.8125rem); }
.draft-meta { padding:0 0 28px;margin-bottom:30px;border-bottom:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); }
.draft-sheet .field { font-size:max(13px,.8125rem); }
.draft-sheet .field input,.draft-sheet .field select,.draft-sheet .field textarea,.draft-sheet .customer-select-row select { font-size:max(15px,.9375rem); }
.draft-sheet .form-section { background:transparent;border:0;border-radius:0;padding:0;margin:0 0 26px; }
.draft-sheet .form-section>header { align-items:baseline;flex-wrap:wrap;margin-bottom:14px; }
.draft-sheet .form-section h2 { font-size:1rem; }
.draft-sheet .subtle { font-size:max(13px,.8125rem); }

.draft-document-mode .draft-line>header { flex-wrap:wrap; }
.draft-document-mode .draft-line .line-number,.draft-document-mode .draft-line .line-caption { font-size:max(13px,.8125rem); }
.draft-document-mode .draft-line .line-actions .rk-button { min-width:36px;min-height:36px; }
.draft-document-mode .draft-line .line-numbers { grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr));gap:12px;margin-top:14px; }
.draft-document-mode .draft-line .line-numbers .field { font-size:max(13px,.8125rem); }
.draft-document-mode .draft-line-net { display:flex;flex-direction:column;justify-content:flex-end;gap:7px;min-width:0;font-size:max(13px,.8125rem);color:var(--ink-muted); }
.draft-document-mode .draft-line-net strong { display:block;min-height:42px;padding:9px 0;color:var(--ink);font-size:max(15px,.9375rem);font-variant-numeric:tabular-nums;overflow-wrap:anywhere; }
.draft-document-mode .draft-line-details { margin-top:14px;font-size:max(13px,.8125rem); }
.draft-document-mode .draft-line-details summary { cursor:pointer;width:max-content;max-width:100%;padding:3px 0;color:var(--ink-muted); }
.draft-document-mode .draft-line-details .field { max-width:10rem;margin-top:10px; }
.draft-document-mode .draft-line .zero-reason { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:12px; }
.draft-sheet [data-add-line] { width:auto;padding-inline:14px; }
.draft-totals-region { display:flow-root; }
.draft-totals { max-width:24rem;margin:30px 0 0 auto; }
.draft-totals .paper-totals { max-width:none;margin:0; }
.draft-totals .paper-totals>div { font-size:max(15px,.9375rem);gap:16px;margin:8px 0; }
.draft-totals .paper-totals .paper-grand { font-size:1.1rem; }
.draft-totals .paper-totals dd { white-space:normal;text-align:right;overflow-wrap:anywhere; }
.draft-totals.stale { opacity:.65; }
.draft-sheet-status { color:var(--ink-muted);font-size:max(13px,.8125rem);text-align:right;margin:8px 0 28px; }
.draft-payment { margin:24px 0; }
.draft-sheet .paper-footer { font-size:max(13px,.8125rem);line-height:1.6; }
.draft-sheet [aria-invalid="true"] { border-color:#ad2930; }
.draft-sheet .field-error { color:#9b1b23; }
.draft-error-link { border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:underline;cursor:pointer; }
@media(max-width:680px) {
  .draft-sheet { padding:20px 16px; }
  .draft-sheet .field input,.draft-sheet .field select,.draft-sheet .field textarea,.draft-sheet .customer-select-row select { font-size:max(16px,1rem); }
  .draft-sheet-heading { margin-bottom:26px; }
  .draft-meta { grid-template-columns:1fr; }
  .draft-document-mode .draft-line { padding:12px; }
}
/* The form view retains the existing card layout while sharing line affordances. */
.draft-form-mode .draft-line-net { display:flex;flex-direction:column;justify-content:flex-end;gap:7px;min-width:0;color:var(--ink-muted);font-size:var(--font-meta-size); }
.draft-form-mode .draft-line-net strong { display:block;min-height:39px;padding:8px 0;color:var(--ink);font-size:var(--font-body-size);font-variant-numeric:tabular-nums;overflow-wrap:anywhere; }
.draft-form-mode .draft-line-details { margin-top:12px;color:var(--ink-muted);font-size:var(--font-meta-size); }
.draft-form-mode .draft-line-details summary { cursor:pointer;width:max-content;max-width:100%;padding:3px 0; }
.draft-form-mode .draft-line-details .field { max-width:10rem;margin-top:10px; }

/* On a wide document, each line reads across like an invoice row. */
.draft-sheet { container-type:inline-size; }
.draft-sheet-heading { margin-bottom:26px; }
.draft-sheet .paper-kicker { margin-bottom:12px; }
.draft-parties { margin-bottom:24px; }
.draft-meta { padding-bottom:22px;margin-bottom:24px; }
.draft-document-mode .draft-line { background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0 16px;margin:0; }
.draft-document-mode .draft-line>header { margin-bottom:8px; }
.draft-document-mode .line-caption { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.draft-document-mode .draft-line-details { margin-top:10px; }
.draft-document-mode [data-add-line] { margin-top:12px; }
@container (min-width:48rem) {
  .draft-document-mode .draft-line { display:grid;grid-template-columns:minmax(12rem,2.4fr) minmax(4.5rem,.75fr) minmax(5rem,.8fr) minmax(6.5rem,1fr) minmax(5rem,.75fr) minmax(7rem,1fr);gap:0 10px;align-items:start; }
  .draft-document-mode .draft-line>header { grid-column:1/-1; }
  .draft-document-mode .draft-description { grid-column:1; }
  .draft-document-mode .line-numbers { display:contents; }
  .draft-document-mode .line-numbers>.field,.draft-document-mode .draft-line-net { min-width:0; }
  .draft-document-mode .draft-line-details,.draft-document-mode .zero-reason { grid-column:1/-1; }
  .draft-document-mode .draft-line-net strong { padding-inline:0; }
}
/* Form totals follow the application theme rather than the white paper palette. */
.draft-form-mode .draft-totals .paper-totals dt { color:var(--ink-muted); }
.draft-form-mode .draft-totals .paper-totals .paper-grand { border-color:var(--line-strong); }
.draft-form-mode .draft-totals .paper-totals .paper-grand dt { color:var(--ink); }
.draft-form-mode .draft-totals .paper-totals dd { color:var(--ink); }

/* Quiet editable marks retain visible hover, focus and validation states. */
.draft-sheet .field input,.draft-sheet .field textarea,.draft-sheet .field select,
.draft-sheet .rk-select-control.rk-select-control select,.draft-sheet .customer-select-row select {
  background:transparent;border:1px solid transparent;border-bottom-color:var(--line-strong);border-radius:3px;
}
.draft-sheet .field input:hover,.draft-sheet .field textarea:hover,.draft-sheet .field select:hover,
.draft-sheet .rk-select-control.rk-select-control select:hover { background:var(--surface-subtle);border-color:var(--line-strong); }
.draft-sheet .field input:focus,.draft-sheet .field textarea:focus,.draft-sheet .field select:focus,
.draft-sheet .rk-select-control.rk-select-control select:focus { background:var(--surface);border-color:var(--ink); }
.draft-sheet .field [aria-invalid="true"],.draft-sheet .rk-select-control.rk-select-control select[aria-invalid="true"] { border-color:#ad2930; }
.draft-document-mode .currency-input { border:0;border-bottom:1px solid var(--line-strong);border-radius:3px; }
.draft-document-mode .currency-input:hover { background:var(--surface-subtle); }
.draft-document-mode .currency-input:focus-within { border-bottom-color:var(--ink);background:var(--surface); }
.draft-document-mode .currency-input:has([aria-invalid="true"]) { border-bottom-color:#ad2930; }
.draft-sheet .field .currency-input input:is(input,:hover,:focus) { border:0;background:transparent; }
.draft-document-mode .line-description,.draft-document-mode .draft-notes textarea { min-height:42px;resize:none;overflow:hidden; }
.draft-document-mode input[name$=".quantity"],.draft-document-mode input[name$=".unit_price"] { text-align:right;font-variant-numeric:tabular-nums; }
.draft-document-mode .draft-line-net strong { text-align:right; }
.draft-sheet [data-add-line] { border:0!important;padding-inline:4px; }
.draft-line-headings { display:none; }
@container (min-width:48rem) {
  .draft-line-headings,.draft-document-mode .draft-line { grid-template-columns:minmax(12rem,2.4fr) minmax(4.5rem,.75fr) minmax(5rem,.8fr) minmax(6.5rem,1fr) minmax(5rem,.75fr) minmax(7rem,1fr);column-gap:10px; }
  .draft-line-headings { display:grid;padding:0 0 8px;border-bottom:1px solid var(--line-strong);color:var(--ink-muted);font-size:max(13px,.8125rem);line-height:1.3; }
  .draft-line-headings span:nth-child(2),.draft-line-headings span:nth-child(4),.draft-line-headings span:last-child { text-align:right; }
  .draft-document-mode .draft-description,.draft-document-mode .line-numbers>.field,.draft-document-mode .draft-line-net { grid-row:1; }
  .draft-document-mode .draft-description>span,.draft-document-mode .line-numbers>.field>span:first-child,.draft-document-mode .draft-line-net>span { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
  .draft-document-mode .draft-line>header { grid-column:3/-1;grid-row:2;justify-content:flex-end;margin:4px 0 0; }
  .draft-document-mode .line-number { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
  .draft-document-mode .draft-line-details { grid-column:1/3;grid-row:2;margin:4px 0 0; }
  .draft-document-mode .zero-reason { grid-row:3; }
}

/* Point to a changed row without animating its values or changing layout. */
.draft-line[data-line-feedback] { position:relative; }
.draft-line[data-line-feedback]::after {
  content:'';position:absolute;inset:0 -5px;pointer-events:none;
  border:1px solid var(--line-strong);border-radius:var(--radius-tight);
  opacity:0;animation: draft-line-arrive calc(var(--motion-reveal) * 2) var(--motion-reveal-easing);
}
@keyframes draft-line-arrive { from { opacity:1; } to { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .draft-line[data-line-feedback]::after { animation:none; } }
[data-motion="reduced"] .draft-line[data-line-feedback]::after { animation:none; }