/* Order Forms, invoices and the Order Form template. Only what the component set (platform app.css, console.css,
   keys.css) doesn't cover; tokens only. Raw values are layout dimensions. */

/* ---- lists ---- */
.ofa-filters .seg, .inv-filters .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ofa-filters .seg button, .inv-filters .seg button { white-space: nowrap; flex: none; }
.ofa-org, .inv-org { display: block; max-width: 260px; }
.inv-desc { display: block; max-width: 260px; }
.ofa-aside { margin: 0 2px var(--s-3); }
.ofa-link { display: inline-flex; align-items: center; gap: var(--s-2); }
.ofa-link:hover { text-decoration: none; }
.ofa-link:hover .mono { text-decoration: underline; text-underline-offset: 2px; }
.tabs .badge { height: 18px; padding: 0 6px; }
.inv-chip { height: var(--h-sm); }
/* the organisation search of /order-forms/new */
.ofa-find { padding: var(--s-2); margin-bottom: var(--s-4); }
.ofa-find-in { position: relative; }
.ofa-find-in > .i { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.ofa-find-in .input { padding-left: calc(var(--s-3) + 16px + var(--s-2)); border-color: transparent; background: var(--canvas); }
.ofa-find-in .input:focus { border-color: var(--accent); }

/* ---- one Order Form ---- */
.ofa-h { display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ofa-h .st { font: var(--f-label); letter-spacing: 0; }
.ofa-grid { align-items: start; }
.ofa-done { background: var(--good-wash); }
.ofa-done > .i { color: var(--good); }
.ofa-done > .btn { align-self: center; }
.ofa-mt { margin-top: var(--s-4); }
.ofa-foot { justify-content: flex-end; padding-top: var(--s-1); }
.ofa-special { white-space: pre-wrap; }
.kv-panel .panel-b > dl.kv { padding: 0; }
.ofa-side dl.kv { grid-template-columns: 120px 1fr; }
.ofa-side .cell-sub { display: block; }
.ofa-rcpt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the signer's name as the signature, in the serif italic: what the customer typed */
.ofa-sig-name { font: italic var(--w-regular) var(--fs-title)/1.2 var(--serif); color: var(--accent-ink); margin: 0 0 var(--s-4); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-2); overflow-wrap: anywhere; }
.ofa-consent { margin: 0; padding: var(--s-2) var(--s-3); border-left: 2px solid var(--line-2); color: var(--ink-2); font: var(--f-small); text-wrap: pretty; }
.ofa-hash { display: block; overflow-wrap: anywhere; word-break: break-all; color: var(--ink-2); }
.badge .i { margin-left: -2px; }
/* history */
.ofa-events { list-style: none; margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); position: relative; }
.ofa-ev { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-2) 0; position: relative; }
.ofa-ev::before { content: ""; position: absolute; left: 5px; top: 22px; bottom: -10px; width: 1px; background: var(--line-2); }
.ofa-ev:last-child::before { display: none; }
.ofa-ev-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--ink-4); }
.ofa-ev.sign .ofa-ev-dot, .ofa-ev.send .ofa-ev-dot, .ofa-ev.view .ofa-ev-dot { box-shadow: inset 0 0 0 2px var(--accent); }
.ofa-ev.countersign .ofa-ev-dot { background: var(--good); box-shadow: none; }
.ofa-ev.void .ofa-ev-dot, .ofa-ev.expire .ofa-ev-dot { box-shadow: inset 0 0 0 2px var(--bad); }
.ofa-ev b { font-weight: var(--w-medium); display: block; }
.ofa-ev time { font: var(--f-small); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; }
/* the countersign dialog: what countersigning does */
.ofa-effects { list-style: none; margin: 0; padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); border-radius: var(--r-m); background: var(--sunk); }
.ofa-effects li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink); text-wrap: pretty; }
.ofa-effects .i { color: var(--accent-ink); margin-top: 2px; }
/* a note's form error with its way out (the template link) */
.note[data-form-err] .btn { align-self: center; }

/* ---- invoices ---- */
.sheet-h .inv-sub { font: var(--f-small); color: var(--ink-3); }
.inv-sum { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.inv-amt { font: var(--f-figure); letter-spacing: -.02em; }
.inv-acts { gap: var(--s-2); margin-bottom: var(--s-1); }
.inv-acts .btn { margin: 0; }
.inv-sheet dd .cell-sub { display: block; }
.inv-billto { margin: 0; line-height: var(--lh-body); }
.inv-lines td.inv-desc-cell { white-space: normal; min-width: 180px; padding-top: var(--s-2); padding-bottom: var(--s-2); }
.inv-lines tfoot th, .inv-lines tfoot td { border-top: 1px solid var(--line-2); border-bottom: 0; height: 44px; }
.inv-lines tfoot th { text-align: left; font: var(--f-body); font-weight: var(--w-semibold); color: var(--ink); }
.inv-total { font-size: var(--fs-heading); }
.inv-sheet .aside { margin-top: var(--s-2); }
/* the line editor: description, quantity, unit price, amount, remove */
.inv-lines-ed { display: flex; flex-direction: column; gap: var(--s-2); }
.inv-line { display: grid; grid-template-columns: minmax(0, 1fr) 84px 120px 96px var(--h-md); gap: var(--s-2); align-items: center; }
.inv-line-h { font: var(--f-label); color: var(--ink-2); }
.inv-line-h .n { text-align: right; }
.inv-cell { min-width: 0; display: flex; flex-direction: column; gap: var(--gap-label); }
.inv-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inv-line-amt { height: var(--h-md); display: flex; align-items: center; justify-content: flex-end; color: var(--ink-2); white-space: nowrap; }
.inv-line .ibtn[disabled] { opacity: .35; cursor: default; }
.inv-lines-err:not(:empty) { margin-top: calc(-1 * var(--s-2)); margin-bottom: calc(-1 * var(--s-2)); }
.inv-add { margin-top: calc(-1 * var(--s-1)); }
.inv-live { font: var(--f-body); white-space: nowrap; }
.inv-live b { font-size: var(--fs-heading); }
.inv-orgs { display: grid; gap: var(--s-2); }
.inv-orgs > div { display: grid; gap: var(--s-2); }
.inv-orgs .choice small.mono { font-family: var(--mono); font-size: var(--fs-micro); }

/* ---- the template ---- */
.tpl-grid { align-items: start; }
.tpl-doc { padding: var(--s-8) var(--s-10); }
.tpl-key { vertical-align: 1px; font-size: var(--fs-micro); }
.tpl-edit textarea[name="body"] { font: var(--f-code); min-height: 420px; }
.tpl-meta dd .cell-sub { display: block; }
.tpl-side { position: sticky; top: var(--s-4); }
.tpl-phs { list-style: none; margin: 0; padding: var(--s-2); display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.tpl-ph { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; border: 0; background: none; text-align: left; padding: var(--s-2); border-radius: var(--r-s); color: var(--ink); }
.tpl-ph:hover { background: var(--hover); }
.tpl-ph code { color: var(--accent-ink); }
.tpl-ph small { font: var(--f-small); color: var(--ink-3); }

@media (max-width: 1080px) {
  .tpl-side { position: static; }
}
@media (max-width: 760px) {
  .ofa-h { gap: var(--s-2); }
  .ofa-find-in .input::placeholder { font-size: var(--fs-small); }
  /* the status filters wrap instead of scrolling out of sight */
  .ofa-filters .seg, .inv-filters .seg { flex-wrap: wrap; overflow: visible; }
  /* a heading with a description and a button: the text takes the width, the button goes under it */
  .ofa-cust .sec-h { flex-wrap: wrap; }
  .ofa-cust .sec-h .sec-t { flex-basis: 100%; }
  .ofa-side dl.kv { grid-template-columns: 110px 1fr; }
  .ofa-sig-name { font-size: var(--fs-figure); }
  .ofa-done { flex-wrap: wrap; }
  .ofa-done > p { flex-basis: calc(100% - 16px - var(--s-3)); }
  .ofa-done > .btn:first-of-type { margin-left: calc(16px + var(--s-3)); }
  .ofa-org, .inv-org, .inv-desc { max-width: 150px; }
  .inv-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--h-md); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); align-items: end; }
  .inv-line-h { display: none; }
  .inv-l { position: static; width: auto; height: auto; overflow: visible; clip: auto; font: var(--f-label); color: var(--ink-2); }
  .inv-line > .inv-cell:first-child { grid-column: 1 / -1; }
  .inv-line-amt { grid-column: 1 / 3; justify-content: flex-start; height: auto; }
  .inv-line .ibtn { grid-column: 3; grid-row: 2; }
  .tpl-doc { padding: var(--s-5) var(--s-4); }
  .tpl-edit textarea[name="body"] { min-height: 320px; }
  .inv-acts .spacer { display: none; }
  .inv-acts { width: 100%; }
}