/* A payment plan, as a slip of paper. One colour scheme. */
:root { --wall: #2a0a14; --gold: #c9a24b; --cream: #f2e2c4; --paper: #fffdf6; --ink: #2a1c2e; --teal: #4fb3a9; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--wall); color: var(--cream); font-family: 'Crimson Pro',Georgia,serif; }
main { display: flex; flex-direction: column; align-items: center; padding: 48px 16px 120px; }
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.slip { width: min(100%, 520px); padding: 22px 20px 24px; background: var(--paper); color: var(--ink); border: 3px solid var(--gold); border-radius: 4px; box-shadow: 0 18px 40px #000c; transform: rotate(-.6deg); font: 17px/1.5 'Crimson Pro',Georgia,serif; }
.slip h2 { margin: 0 0 6px; font: bold 24px/1.2 'Crimson Pro',Georgia,serif; }
.slip .wait, .slip .note { font-style: italic; }
.slip table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 16px; }
.slip td { padding: 6px 4px; border-bottom: 1px dotted #2a1c2e55; }
.slip td:last-child { text-align: right; white-space: nowrap; }
.slip tr.paid td { color: #4f8f5a; }
.slip tr.next td { font-weight: bold; }
.slip .pay { display: block; width: 100%; margin: 14px 0 6px; padding: 12px; border: 3px solid var(--ink); border-radius: 8px; background: var(--ink); color: #ffe9a8; font: bold 18px 'Crimson Pro',Georgia,serif; cursor: pointer; }
.slip .pay:hover, .slip .pay:focus-visible { background: #4e1230; outline: none; box-shadow: 0 0 0 3px var(--teal); }
.slip .fine { margin: 10px 0 0; font-size: 13px; line-height: 1.5; opacity: .85; }
.slip .done { color: #4f8f5a; font-weight: bold; }