/* The one shared look. A new page does not add a stylesheet of its own. */
body { /* The page surface. */
  margin: 0; /* Remove the browser's outer gap. */
  background: #f4f0e6; /* Warm paper behind the words. */
  color: #1b2430; /* Dark ink. */
  font-family: Georgia, "Iowan Old Style", Palatino, serif; /* A face for reading. */
  line-height: 1.5; /* Space between lines. */
  font-size: 1.05rem; /* A comfortable reading size. */
} /* End of the page surface. */

.pointer { /* The fee-rule line agents read first. */
  margin: 0; /* Sit the line on the top edge. */
  padding: 0.8rem 1.25rem; /* Room around the words. */
  background: #0e2744; /* Navy band. */
  color: #f4f0e6; /* Light words on navy. */
} /* End of the fee-rule line. */

.pointer a { /* The fee-rule link inside the band. */
  color: #f4f0e6; /* Keep the link the same light color. */
} /* End of the fee-rule link. */

main { /* The reading column. */
  max-width: 40rem; /* Keep each line short. */
  margin: 1.5rem auto 3rem; /* Center the column and leave room below. */
  padding: 0 1.25rem; /* Side room on a phone. */
} /* End of the reading column. */

h1 { /* The page title. */
  font-size: 1.8rem; /* Large enough to be the title. */
  line-height: 1.2; /* Tight lines in a long title. */
  margin: 0 0 0.75rem; /* Space under the title. */
} /* End of the page title. */

h2 { /* A section label. */
  font-size: 1.15rem; /* Smaller than the title. */
  margin: 1.5rem 0 0.5rem; /* Space above a section. */
} /* End of a section label. */

p { /* A paragraph. */
  margin: 0.6rem 0; /* Space between paragraphs. */
} /* End of a paragraph. */

ol { /* The ordered steps an agent follows. */
  margin: 0.6rem 0; /* Space around the steps. */
  padding-left: 1.2rem; /* Room for the numbers. */
} /* End of the ordered steps. */

li { /* One step. */
  margin: 0.7rem 0; /* Space between steps. */
} /* End of one step. */

.label { /* A short field name. */
  display: block; /* Put the name on its own line. */
  font-size: 0.85rem; /* Slightly smaller than the value. */
  letter-spacing: 0.02em; /* A little air in the name. */
} /* End of a short field name. */

.pay-row { /* The QR code and the Bitcoin address side by side. */
  display: flex; /* Place the two parts in a row. */
  gap: 1rem; /* Space between the QR and the address. */
  align-items: center; /* Line them up in the middle. */
  flex-wrap: wrap; /* Stack them on a narrow screen. */
  margin: 0.75rem 0; /* Space around the pair. */
} /* End of the QR row. */

img { /* The QR picture. */
  width: 150px; /* Match the picture's own width. */
  height: 150px; /* Match the picture's own height. */
  background: #fff; /* White behind the code. */
} /* End of the QR picture. */

code { /* The Bitcoin address as text. */
  font-family: ui-monospace, "Cascadia Code", monospace; /* A face that keeps each character clear. */
  word-break: break-all; /* Let the long address wrap on a phone. */
} /* End of the Bitcoin address text. */

a { /* A text link in the column. */
  color: #0e2744; /* Navy link. */
} /* End of a text link. */

.scroll { /* Sideways scroll so the ledger can be wide. */
  overflow-x: auto; /* Scroll columns instead of crushing them. */
  margin: 1rem 0; /* Space around the grid. */
} /* End of the sideways scroll. */

table { /* The ledger grid. */
  width: 100%; /* Use the width of the scroll area. */
  border-collapse: collapse; /* Share borders between cells. */
  font-size: 0.9rem; /* Fit more columns on the screen. */
} /* End of the ledger grid. */

th, td { /* One ledger cell. */
  border-bottom: 1px solid #d9d1c3; /* A light line under the row. */
  text-align: left; /* Read every cell from the left. */
  padding: 0.4rem 0.5rem; /* Room inside the cell. */
  vertical-align: top; /* Line tall cells up at the top. */
  white-space: nowrap; /* Keep a value on one line inside the scroll area. */
} /* End of one ledger cell. */

td.notes { /* The notes cell can be a sentence. */
  white-space: normal; /* Let the notes wrap. */
  min-width: 16rem; /* Give the sentence a readable width. */
} /* End of the notes cell. */

label { /* The name of a form field. */
  display: block; /* Stack the name over the field. */
  margin-top: 0.9rem; /* Space between fields. */
} /* End of a form field name. */

input, select { /* A typed field or a menu. */
  font: inherit; /* Use the page's reading face. */
  width: 100%; /* Use the column width. */
  box-sizing: border-box; /* Keep padding inside the width. */
  margin-top: 0.3rem; /* A small gap under the name. */
  padding: 0.45rem 0.5rem; /* Room inside the field. */
} /* End of a typed field or a menu. */

button { /* A button. */
  font: inherit; /* Use the page's reading face. */
  margin-top: 0.9rem; /* Space above the button. */
  margin-right: 0.5rem; /* Space before the next button. */
  padding: 0.55rem 0.9rem; /* Room around the button words. */
  background: #0e2744; /* Navy button. */
  color: #f4f0e6; /* Light words on the button. */
  border: 0; /* No extra outline. */
  cursor: pointer; /* Show that the button can be used. */
} /* End of a button. */

button.quiet { /* The button that only clears browser rows. */
  background: #6d6458; /* A quieter color than the main button. */
} /* End of the quiet button. */

.hp { /* The spam field people leave empty. */
  position: absolute; /* Lift it out of the column. */
  left: -10000px; /* Park it off to the side. */
} /* End of the spam field. */