:root {
  --r1: 10px;
  --r2: 999px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --v-line: var(--t3-lh);
  --v-item: var(--s2);
  --v-block: var(--s4);
  --v-section: var(--s6);

  --anchor-top: var(--s4);

  --maxw: 760px;
  --gutter: var(--s4);
  --touch: 44px;

  --t1: 11px;
  --t2: 13px;
  --t3: 15px;
  --t4: 22px;
  --t5: 28px;
  --t6: 44px;
  --t3-lh: 1.6;
  --t5-lh: 1.2;
  --t6-lh: 1.05;
  --t-input: 16px;

  --bp-sm: 560px;
  --bp-md: 860px;

  --bg: #f7f7f8;
  --surface: #ffffff;
  --ink: #1b1b1f;
  --ink-2: #6b6b73;
  --line: #e3e3e7;
  --accent: #3a3a42;
  --accent-ink: #ffffff;
  --accent-soft: #eeeef1;
  --good: #2e6b52;
  --warn: #8a6100;
  --bad: #9a2f2f;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, .10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1c;
    --surface: #242427;
    --ink: #ececef;
    --ink-2: #a2a2aa;
    --line: #37373c;
    --accent: #c9c9d2;
    --accent-ink: #1e1e21;
    --accent-soft: #303036;
    --good: #7fc0a4;
    --warn: #d8ab4a;
    --bad: #e08b8b;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, .55);
  }
}

.btn {
  font: 600 var(--t3) / 1 inherit;
  font-family: inherit;
  min-height: var(--touch);
  padding: var(--s3) var(--s4);
  border-radius: var(--r1);
  cursor: pointer;
  border: 1.5px solid transparent;
  background: transparent;
}
.btn-pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-sec { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-txt { background: transparent; color: var(--ink-2); border-color: transparent; padding-inline: var(--s2); }
.btn:disabled { opacity: .35; cursor: default; }

input, select, textarea { font-size: var(--t-input); }


.tap { min-height: var(--touch); min-width: var(--touch); }


:root { --accent: #23466e; --accent-ink: #ffffff; --accent-soft: #eaf0f7; }
@media (prefers-color-scheme: dark) {
  :root { --accent: #8fb3e0; --accent-ink: #1e1e21; --accent-soft: #253345; }
}

html { scrollbar-gutter: stable; color-scheme: light dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--t3)/var(--v-line) system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
h1, h2, p, figure, fieldset, dl, dd { margin: 0; }
a { color: var(--accent); text-underline-offset: var(--s1); }
button, input, textarea, select { font-family: inherit; color: var(--ink); }
button, summary { cursor: pointer; }
:focus-visible { outline: calc(var(--s1) / 2) solid var(--accent); outline-offset: var(--s1); }
h2 { font-size: var(--t4); line-height: var(--t5-lh); }
.merpad-header, .frame-main, .frame-footer { width: calc(100% - 2 * var(--gutter)); max-width: var(--maxw); margin-inline: auto; }
.merpad-header { display: flex; align-items: center; gap: var(--s4); height: calc(var(--touch) + 2 * var(--s3)); padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.merpad-header a { color: var(--ink); text-decoration: none; }
.merpad-brand { display: flex; align-items: center; gap: var(--s2); min-height: var(--touch); margin-right: auto; font-size: var(--t4); font-weight: 700; }
.merpad-mark { width: var(--s6); height: var(--s6); flex: none; }
.merpad-tools { position: relative; }
.merpad-tools summary { display: flex; align-items: center; gap: var(--s1); min-height: var(--touch); padding: var(--s2) var(--s3); list-style: none; border: 1px solid var(--line); border-radius: var(--r1); font-size: var(--t2); }
.merpad-tools summary::-webkit-details-marker { display: none; }
.merpad-menu { position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 10; width: calc(var(--s6) * 8); max-width: calc(100vw - 2 * var(--s6)); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); box-shadow: var(--shadow-2); }
.merpad-group + .merpad-group { margin-top: var(--v-block); padding-top: var(--v-block); border-top: 1px solid var(--line); }
.merpad-group-title { color: var(--ink-2); font-size: var(--t2); }
.merpad-menu a { display: flex; align-items: center; min-height: var(--touch); }
.merpad-header a[aria-current] { font-weight: 700; }
.frame-title { padding-top: var(--v-section); padding-bottom: var(--v-block); }
.frame-title h1 { font-size: var(--t5); line-height: var(--t5-lh); white-space: nowrap; }
.frame-title p { margin-top: var(--v-item); font-size: var(--t2); color: var(--ink-2); white-space: nowrap; }
.frame-tool { min-width: 0; }
.frame-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--v-block); }
.frame-actions:empty { margin-top: 0; }
.frame-notice, .frame-handoff { margin-top: var(--v-item); font-size: var(--t2); color: var(--ink-2); overflow-wrap: anywhere; }
.frame-notice:empty, .frame-handoff:empty { margin-top: 0; }
.frame-explanation { display: grid; gap: var(--v-section); margin-top: var(--v-section); padding-top: var(--v-section); border-top: 1px solid var(--line); }
.frame-explanation h2 { margin-bottom: var(--v-item); }
.frame-explanation p + p { margin-top: var(--v-item); }
.frame-explanation dt { font-weight: 700; margin-top: var(--v-block); }
.frame-explanation dd { margin-top: var(--s1); color: var(--ink-2); }
.frame-explanation ul { list-style: none; margin: 0; padding: 0; }
.frame-explanation li + li { margin-top: var(--v-block); }
.frame-explanation li p { color: var(--ink-2); }
.frame-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); padding-block: var(--v-block); margin-top: var(--v-section); border-top: 1px solid var(--line); font-size: var(--t1); color: var(--ink-2); }
.frame-footer a { color: inherit; }

.frame-tool input:not([type=checkbox]):not([type=radio]), .frame-tool select, .frame-tool textarea {
  display: block; width: 100%; min-width: 0; min-height: var(--touch); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); line-height: var(--t5-lh);
}
.frame-tool textarea { resize: vertical; line-height: var(--v-line); }
.frame-tool [aria-invalid="true"] { border-color: var(--bad); outline: calc(var(--s1) / 2) solid var(--bad); outline-offset: 0; }
.frame-tool input[type=checkbox] { width: var(--s5); height: var(--s5); margin: 0; accent-color: var(--accent); flex: none; }
.frame-tool summary { min-height: var(--touch); display: flex; align-items: center; color: var(--accent); }
.mp-label, .frame-tool label { display: block; font-size: var(--t2); color: var(--ink-2); margin-top: var(--v-item); }
.mp-check { display: flex !important; align-items: center; gap: var(--s2); min-height: var(--touch); color: var(--ink) !important; font-size: var(--t3) !important; }
.mp-error { color: var(--bad); font-size: var(--t2); white-space: pre-line; }
.mp-error:empty { display: none; }
.mp-small { font-size: var(--t2); color: var(--ink-2); }
.mp-example.mp-off { visibility: hidden; }
.mp-lead, .mp-example { font-size: var(--t2); color: var(--ink-2); margin-bottom: var(--v-item); }
.mp-panel { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r1); min-width: 0; }
.mp-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding-block: var(--s1); }
.mp-row dd { white-space: nowrap; }
.mp-total { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s2); font-weight: 700; }
.mp-total strong { font-size: var(--t4); }
.mp-decimal { text-align: right; color: var(--ink-2); font-size: var(--t2); }
.mp-two { display: grid; gap: var(--s4); align-items: start; }
.mp-inputs, .fee-fields { min-width: 0; }
.mp-disclaimer { margin-top: var(--v-block); font-size: var(--t2); color: var(--ink-2); overflow-wrap: anywhere; }
.mp-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0 !important; border: 0 !important; }
.mp-resultbox:not(:has(> .mp-result:not(:empty))) { display: none; }
.tc-side { display: grid; gap: var(--s2); min-width: 0; }
.tc-side .mp-label { margin-top: 0; }
.mp-legal h2 { margin-top: var(--v-section); margin-bottom: var(--v-item); }
.mp-legal p + p, .mp-legal ul { margin-top: var(--v-item); }
.mp-legal { overflow-wrap: anywhere; }
.mp-group ul { list-style: none; padding: 0; margin: 0; }
.mp-print { display: none; }

.tc-identity { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
.tc-identity label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.tc-identity label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.tc-identity input { grid-row: 2; }
.tc-work { display: grid; gap: var(--s4); margin-top: var(--v-block); align-items: start; }
.tc-table { min-width: 0; }
.tc-table table, .mp-print table, .doc-items { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tc-table th, .tc-table td { text-align: left; border-bottom: 1px solid var(--line); padding: var(--s1); font-size: var(--t2); }
.tc-table thead th { color: var(--ink-2); font-weight: 500; vertical-align: bottom; }
.tc-table th:first-child { width: 12%; padding-left: 0; }
.tc-table th:nth-child(2), .tc-table th:nth-child(3) { width: 27%; }
.tc-table th:nth-child(4) { width: 18%; }
.tc-table th:last-child, .tc-table td:last-child { width: 16%; text-align: right; padding-right: 0; }
.tc-table td input:not([type=checkbox]) { padding: var(--s2) var(--s1); }
.tc-table tbody th { font-weight: 500; }
.mp-error-row td { border-bottom: 0; padding-top: 0; }
.mp-error-row td:last-child { text-align: left; }
.tc-settings { margin-top: var(--v-item); }

.bc-formats { border: 0; padding: 0; min-width: 0; }
.bc-formats legend { font-size: var(--t2); color: var(--ink-2); padding: 0; }
.bc-format-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.frame-tool .bc-format { position: relative; margin: 0; padding: var(--s2) var(--s1); border: 1px solid var(--line); border-radius: var(--r1); text-align: center; background: var(--surface); color: var(--ink); min-height: var(--touch); cursor: pointer; }
.bc-format:has(:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bc-format:has(:focus-visible) { outline: calc(var(--s1) / 2) solid var(--accent); }
.bc-format input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; }
.bc-format strong { display: block; font-size: var(--t3); }
.bc-format small { display: block; font-size: var(--t1); color: var(--ink-2); }
.frame-tool #bc-copies { max-width: calc(var(--s6) * 4); }
#bc-out { display: grid; gap: var(--s2); }
.bc-figure { background: #ffffff; color: #000000; padding: var(--s2); border-radius: var(--r1); text-align: center; }
.bc-figure svg { display: block; width: 100%; height: auto; max-height: calc(var(--s6) * 5); }
.bc-figure figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.doc-toolbar:empty { display: none; }
.doc-paper-choice { display: flex; align-items: center; gap: var(--s2); font-size: var(--t2); margin-bottom: var(--v-item); }
.doc-paper-choice .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.doc-paper { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r1); }
.doc-paper.doc-roll { max-width: calc(var(--s6) * 10); margin-inline: auto; }
.doc-head { display: grid; gap: var(--s4); }
.doc-logo { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.doc-logo img { max-height: calc(var(--s6) * 2); max-width: calc(var(--s6) * 5); }
.doc-logo .btn { margin: 0; color: var(--accent); }
.doc-title { font-size: var(--t5); font-weight: 700; line-height: var(--t5-lh); }
.doc-paid { font-size: var(--t2); border: 1px solid var(--line); border-radius: var(--r1); padding: var(--s1) var(--s2); vertical-align: middle; }
.doc-meta { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s2); }
.doc-meta label { grid-column: 1 / -1; }
.doc-meta .mp-error { grid-column: 1 / -1; }
.doc-meta label + input, .doc-meta label + select { grid-column: 1 / -1; }
.doc-bill { margin-top: var(--v-block); }
.doc-items { margin-top: var(--v-block); }
.doc-items th { font-size: var(--t2); text-align: left; color: var(--ink-2); font-weight: 400; padding: var(--s2) var(--s1); border-bottom: 1px solid var(--line); }
.doc-items td { padding: var(--s2) var(--s1); vertical-align: top; border-bottom: 1px solid var(--line); }
.doc-items th:first-child, .doc-items td:first-child { padding-left: 0; width: 42%; }
.doc-items th:nth-child(2) { width: 16%; }
.doc-items th:nth-child(3) { width: 22%; }
.doc-items th:last-child, .doc-items td:last-child { padding-right: 0; text-align: right; width: 20%; }
.doc-items td input:not([type=checkbox]) { padding: var(--s2) var(--s1); }
.doc-amount { display: block; padding-top: var(--s2); overflow-wrap: anywhere; }
.mp-remove { min-height: var(--touch); font-size: var(--t2); }
.doc-summary { display: grid; gap: var(--s2); margin-top: var(--v-block); }
.doc-adjs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: end; }
.doc-adj { flex: 1 1 calc(var(--s6) * 4); }
#doc-summary { margin-left: auto; width: 100%; max-width: calc(var(--s6) * 10); }

.fee-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); align-content: start; }
.fee-field { min-width: 0; }
.fee-full, .fee-more { grid-column: 1 / -1; }
.fee-money { position: relative; }
.fee-money span { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.frame-tool .fee-money input:not([type=checkbox]):not([type=radio]) { padding-left: var(--s6); }
.fee-more summary { font-size: var(--t2); }
.fee-more > .fee-fields { margin-bottom: var(--v-item); }
.fee-costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); }
.fee-mode { display: flex; gap: var(--s2); }
.fee-mode .btn { flex: 1; }
.fee-mode .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.fee-rows { margin: 0; }
.fee-rows dt { min-width: 0; }
.fee-total { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s2); }
.fee-keep { font-size: var(--t4); font-weight: 700; border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s2); }

@media (min-width: 560px) {
  .mp-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
  .tc-work { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s5); }
  .doc-head { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .doc-paper { padding: var(--s6); }
  .doc-paper.doc-roll { padding: var(--s4); }
  .doc-paper.doc-roll .doc-head { grid-template-columns: 1fr; }
}

@page { size: letter; margin: 0; }
@media print {
  html, body { background: #ffffff; color: #000000; }
  .merpad-header, .frame-footer, .frame-title, .frame-actions, .frame-notice, .frame-handoff, .frame-explanation, .frame-tool > :not(.mp-print) { display: none !important; }
  .frame-main { width: auto; max-width: none; margin: 0; }
  .mp-print { display: block; padding: 0.5in; font-size: var(--t3); }
  .mp-print table th, .mp-print table td { text-align: left; border-bottom: 1px solid #cccccc; padding: 4pt; }
  .mp-print .mp-row { display: flex; justify-content: space-between; max-width: 3in; margin-left: auto; }
  .mp-paper-meta { display: flex; justify-content: space-between; margin-block: 12pt; }
  .mp-labels { padding: 0; }
  .bc-sheet { position: relative; width: 8.5in; height: 11in; break-after: page; overflow: hidden; }
  .bc-sheet:last-child { break-after: auto; }
  .bc-cell { position: absolute; width: 2.625in; height: 1in; display: flex; align-items: center; justify-content: center; }
  .bc-cell svg { width: 2.4in; height: 0.85in; }
  .bc-c0 { left: 0.1875in; } .bc-c1 { left: 2.9375in; } .bc-c2 { left: 5.6875in; }
  .bc-r0 { top: 0.5in; } .bc-r1 { top: 1.5in; } .bc-r2 { top: 2.5in; } .bc-r3 { top: 3.5in; } .bc-r4 { top: 4.5in; }
  .bc-r5 { top: 5.5in; } .bc-r6 { top: 6.5in; } .bc-r7 { top: 7.5in; } .bc-r8 { top: 8.5in; } .bc-r9 { top: 9.5in; }
  .doc-print img { max-height: 0.8in; max-width: 2in; }
  .doc-print-head { display: flex; justify-content: space-between; margin-bottom: 18pt; }
  .doc-print-sum p { display: flex; justify-content: space-between; max-width: 3in; margin-left: auto; }
  .doc-print-roll { width: 72mm; }
  .doc-print-roll .doc-print-head { display: block; }
}