/* Settled outside WatchFlow (public/js/settle-outside.js) — the bulk sheet, the block in a payable's sheet, the status tone.
   Rhythm: 24 / 16 / 12 / 8. Tap targets 44px on touch. */
.sox-overlay .sox-modal { width: 640px; max-width: calc(100vw - 32px); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.sox-overlay .sox-modal > * { flex-shrink: 0; }   /* the sheet scrolls; its sections never squash into each other */
.sox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sox-head .modal-title { margin-bottom: 6px; }
.sox-sub { font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 52ch; }
.sox-x { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sox-x svg { width: 16px; height: 16px; }
.sox-x:hover { color: var(--white, inherit); border-color: var(--muted); }
.sox-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sox-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sox-field-wide { grid-column: 1 / -1; }
.sox-l { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sox-l em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.sox-input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-raised, var(--bg-panel)); color: inherit; font: inherit; font-size: 15px; }
.sox-input:focus { outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: 1px; }
.sox-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sox-kind { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sox-kind.is-on { border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.sox-kind-box { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--muted); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.sox-kind.is-on .sox-kind-box { background: var(--gold); border-color: var(--gold); color: #fff; }
.sox-kind-box svg { width: 14px; height: 14px; }
.sox-kind-t { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 500; line-height: 1.25; min-width: 0; }
.sox-kind-t small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.sox-preview { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 64px; transition: opacity .15s; }
.sox-preview.is-busy { opacity: .55; }
.sox-total { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; }
.sox-total-n { font-family: var(--font-serif); font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sox-total-l { font-size: 13.5px; color: var(--muted); }
.sox-group-h { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.sox-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; padding: 4px 0; border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
.sox-line:last-of-type { border-bottom: 0; }
.sox-line span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sox-line em { font-style: normal; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.sox-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sox-more { font-size: 13px; color: var(--muted); }
.sox-note { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
.sox-warn { color: color-mix(in srgb, var(--amber, #b7791f) 85%, var(--muted)); }
.sox-empty { font-size: 14px; line-height: 1.5; color: var(--muted); }
.sox-empty strong { color: inherit; font-weight: 600; }
.sox-foot { display: flex; justify-content: flex-end; gap: 12px; position: sticky; bottom: -28px; z-index: 1; background: var(--bg-panel); padding: 12px 0 16px; margin: -8px 0 -16px; border-top: 1px solid var(--border); }
.sox-foot .btn { min-height: 44px; padding: 0 20px; justify-content: center; text-align: center; }
.sox-recent { display: flex; flex-direction: column; gap: 8px; }
.sox-recent:empty { display: none; }
.sox-batch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.sox-batch-t { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 0; }
.sox-batch-t small { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.sox-batch.is-undone .sox-batch-t { color: var(--muted); }
.sox-undo { min-height: 40px; flex: 0 0 auto; }
.sox-undone { font-size: 12.5px; color: var(--muted); flex: 0 0 auto; }

/* one payable's sheet */
.sox-one { display: flex; justify-content: flex-start; margin: 4px 0 12px; }
.sox-block { border: 1px solid color-mix(in srgb, var(--wfil-grey, #7a8494) 35%, var(--border)); background: color-mix(in srgb, var(--wfil-grey, #7a8494) 6%, transparent); border-radius: 12px; padding: 14px 16px; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.sox-block-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sox-block-title { font-size: 15px; font-weight: 600; line-height: 1.35; }
.sox-block-sub { font-size: 13px; line-height: 1.45; color: var(--muted); }
.sox-block-diff { font-size: 13.5px; line-height: 1.45; color: var(--amber, #b7791f); font-weight: 500; }
.sox-block .sox-input { margin-top: 6px; }
.sox-block-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* the status word: closed, not paid — a neutral grey, never the green of a payment */
.ap-status.settled { color: var(--wfil-grey, #6b7280); border-color: color-mix(in srgb, #7a8494 40%, transparent); background: color-mix(in srgb, #7a8494 10%, transparent); }
.invoice-status-badge[data-status="settled"] { background: color-mix(in srgb, #7a8494 12%, transparent); color: #5f6875; }
.invoice-status-badge[data-status="settled"]::before { background: #7a8494; }
html body #page-payments.wfil-pg .pt-c-status .invoice-status-badge[data-status="settled"] { --wfil-tone: var(--wfil-grey); }
html body :is(#page-payments).wfil-pg .wfil-dot[data-v="settled"] { background: var(--wfil-grey); }
html body :is(#page-payments).wfil-pg .wfil-pill[data-v="settled"] { background: color-mix(in srgb, var(--wfil-grey) 8%, var(--wfil-surface)); border-color: color-mix(in srgb, var(--wfil-grey) 20%, var(--wfil-line)); color: color-mix(in srgb, var(--wfil-grey) 75%, var(--wfil-ink)); }
html[data-remodel-mode="night"] .invoice-status-badge[data-status="settled"] { color: #aab2bf; }

@media (max-width: 640px) {
  .sox-overlay { align-items: flex-end; }
  .sox-overlay .sox-modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); gap: 16px; }
  .sox-fields { grid-template-columns: 1fr; gap: 12px; }
  .sox-kinds { grid-template-columns: 1fr; gap: 8px; }
  .sox-x { width: 44px; height: 44px; min-height: 44px; }
  .sox-total-n { font-size: 26px; }
  .sox-foot { bottom: calc(-16px - env(safe-area-inset-bottom)); padding: 12px 0 8px; margin: -4px 0 -8px; }
  .sox-foot .btn { flex: 1 1 0; }
  .sox-undo { min-height: 44px; }
  .sox-block-actions .btn { min-height: 44px; }
}
/* 10-27 new-UI pass: bold sans title with a small uppercase eyebrow, 15px/600 footer buttons (they read 13px and thin). */
html body .sox-head .modal-title { font-family: inherit !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.2px; line-height: 1.2; }
html body .sox-head .modal-title::before { content: 'Payables'; display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--off-white); margin-bottom: 6px; }
html body .sox-foot .btn { font-size: 15px; font-weight: 600; }