/* The clinic's paper — js/documents.js lays the blocks out, this sets them.
   Every size is in points, the PDF unit, and is the number the Android
   drawing code uses (PrescriptionDocument.kt, CertificateDocument.kt,
   StatementDocument.kt), so the browser's page and the phone's page are the
   same page. Nothing here follows the app's theme: paper is white in the dark. */

.doc {
  --doc-sans: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --doc-serif: Georgia, "Noto Serif", "Times New Roman", serif;
  position: relative;
  color: #000;
  font-family: var(--doc-sans);
  font-size: 10.5pt;
  line-height: 1.17;
  text-align: left;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.doc .serif { font-family: var(--doc-serif); }
.doc p { margin: 0; }
.doc b { font-weight: 700; }

.doc-page { background: #fff; overflow: hidden; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.doc-content { position: absolute; }
.doc-measure { position: absolute; left: -20000px; top: 0; visibility: hidden; }
.blk { display: block; }
.doc-footer { position: absolute; font-size: 7pt; line-height: 1; color: rgba(0, 0, 0, 0.45); white-space: nowrap; }

/* Drawn across a draft, repeated diagonally so it survives being cropped. */
.doc-watermark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.doc-watermark > div {
  position: absolute; inset: -40%;
  display: flex; flex-direction: column; justify-content: space-around; align-items: center;
  transform: rotate(-30deg);
}
.doc-watermark span { font: 700 34pt/1 var(--doc-sans); color: rgba(255, 0, 0, 0.13); white-space: nowrap; }

/* Labels are small, letter-spaced and grey. Grey is safe here and nowhere
   else on the page: every label's word is redundant with the value beside it,
   so a photocopier losing it loses nothing. */
.doc .lbl { font-size: 7pt; font-weight: 700; color: rgba(0, 0, 0, 0.55); letter-spacing: 1.3pt; white-space: nowrap; }
.doc .rule { height: 0; border-top: 0.6pt solid rgba(0, 0, 0, 0.25); }

/* A captured signature is ink on a white ground. Multiplied onto the paper,
   the white disappears and only the ink sits on the line — what iOS does. */
.sig-ink { display: block; mix-blend-mode: multiply; }

/* ----------------------------------------------------------- prescription */

.rx-letterhead { display: flex; flex-direction: column; align-items: center; gap: 2pt; text-align: center; }
.rx-dentist { font-size: 15pt; font-weight: 700; }
.rx-small { font-size: 9pt; }
.rx-head-rule { align-self: stretch; margin-top: 3.5pt; margin-bottom: 1.5pt; border-top: 0.8pt solid rgba(0, 0, 0, 0.35); }

.rx-patient { padding-top: 10pt; padding-bottom: 7pt; }
.rx-date { display: flex; justify-content: flex-end; align-items: baseline; gap: 5pt; font-size: 9pt; margin-bottom: 7pt; }
.rx-field {
  display: flex; align-items: baseline; gap: 5pt;
  padding-bottom: 1.5pt; margin-bottom: 1.5pt; border-bottom: 0.6pt solid rgba(0, 0, 0, 0.25);
}
.rx-field .grow { flex: 1; min-width: 0; }
.rx-symbol { padding-top: 8pt; font-size: 26pt; font-weight: 700; }

.rx-drug { padding-bottom: 3.5pt; margin-bottom: 8.5pt; }
.rx-drug:not(.last) { border-bottom: 0.6pt solid rgba(0, 0, 0, 0.14); }
.rx-drug-line { display: flex; gap: 6pt; align-items: baseline; }
.rx-no { flex: none; width: 14pt; text-align: right; font-size: 10.5pt; font-weight: 700; color: rgba(0, 0, 0, 0.6); }
.rx-drug-text { font-size: 11pt; white-space: pre-wrap; }
.rx-brand { font-size: 10pt; color: rgba(0, 0, 0, 0.7); }
.rx-sig { display: flex; gap: 5pt; align-items: baseline; padding-left: 20pt; margin-top: 3pt; font-size: 9.5pt; }
.rx-sig span:last-child { white-space: pre-wrap; }
.rx-note { padding-top: 4pt; font-size: 9.5pt; font-style: italic; white-space: pre-wrap; }

.rx-signature { padding-top: 22pt; display: flex; justify-content: flex-end; }
.rx-sign { width: 190pt; display: flex; flex-direction: column; align-items: center; }
.rx-ink { height: 44pt; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.rx-sign-rule { align-self: stretch; margin-bottom: 2pt; border-top: 0.7pt solid rgba(0, 0, 0, 0.5); }
.rx-sign-name { font-size: 10.5pt; font-weight: 700; text-align: center; }
.rx-licences { display: flex; flex-direction: column; align-items: flex-start; gap: 2pt; font-size: 9pt; }
.rx-licences > div { display: flex; gap: 5pt; align-items: baseline; }
.rx-licences .lbl { width: 18pt; }

/* ------------------------------------------------------------ certificate */

/* The inks: #0B5B58 is the app's teal taken down to about a third of its
   lightness, so white type on it survives a black-and-white printer; #2FA39A
   is the brighter stripe; #EAF4F2 is light enough to vanish on a copier. */
.doc-cert .lbl { font-size: 7.5pt; letter-spacing: 1.5pt; color: #0B5B58; }

/* Her name and the clinic's details, white on the band, which runs off the
   top and sides of the paper: the block bleeds into the margin it sits in. */
.cert-band {
  margin: -40pt -40pt 0; padding: 34pt 40pt 26pt;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24pt;
  background: #0B5B58; color: #fff; border-bottom: 3pt solid #2FA39A;
}
.cert-dentist { font-size: 21pt; font-weight: 700; white-space: nowrap; }
.doc-cert .lbl.mint { display: block; margin-top: 5pt; color: #A8DDD6; }
.cert-band-details {
  display: flex; flex-direction: column; gap: 3pt; text-align: right;
  min-width: 150pt; max-width: 220pt; font-size: 9.5pt; color: rgba(255, 255, 255, 0.92);
}

.cert-title { padding-top: 28pt; }
.cert-bar { display: block; width: 40pt; height: 4pt; margin-bottom: 9pt; background: #2FA39A; }
.cert-title-line { display: flex; justify-content: space-between; align-items: flex-end; }
.cert-word { font-size: 30pt; font-weight: 700; letter-spacing: 7pt; color: #0B5B58; line-height: 1; }
.cert-issued { display: flex; flex-direction: column; align-items: flex-end; gap: 1pt; font-size: 12pt; }

.cert-panel { margin-top: 12pt; padding: 18pt; background: #EAF4F2; border-top: 2pt solid #0B5B58; }
.cert-patient { margin-top: 3pt; font-size: 16pt; font-weight: 700; }
.cert-fields { display: flex; gap: 26pt; margin-top: 13pt; }
.cert-field { display: flex; flex-direction: column; gap: 3pt; white-space: nowrap; }
.cert-field .serif { font-size: 12.5pt; font-weight: 700; }
.cert-field.address { flex: 1; min-width: 90pt; white-space: normal; }

.cert-prose { padding-top: 14pt; font-size: 13.5pt; line-height: 1.3; }
.cert-salute { font-style: italic; margin-bottom: 11pt !important; }
.cert-recommend { padding-top: 18pt; }
.cert-recommend-head { display: flex; align-items: center; gap: 10pt; }
.cert-recommend-head i { flex: 1; border-top: 0.75pt solid rgba(47, 163, 154, 0.55); }
.cert-recommend p { margin-top: 7pt; font-size: 13.5pt; line-height: 1.3; white-space: pre-wrap; }

.cert-signature { padding-top: 26pt; }
.cert-yours { font-size: 12.5pt; font-style: italic; margin-bottom: 6pt !important; }
.cert-sign { display: inline-flex; flex-direction: column; align-items: center; min-width: 120pt; }
.cert-ink { height: 54pt; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 3pt; }
.cert-sign-name { font-size: 13.5pt; font-weight: 700; }
.cert-licences { align-self: flex-start; display: flex; gap: 16pt; margin-top: 3pt; font-size: 10.5pt; }
.cert-licences > span { display: inline-flex; gap: 5pt; align-items: baseline; }

.doc-foot-band { position: absolute; left: 0; right: 0; bottom: 0; height: 15pt; background: #0B5B58; border-top: 3pt solid #2FA39A; }

/* -------------------------------------------------------------- statement */

.doc-statement { font-size: 9.5pt; }
.doc-statement .lbl.teal { display: block; margin-bottom: 4pt; font-size: 7.5pt; letter-spacing: 1.4pt; color: #008080; }
.st-strip { display: block; height: 3pt; background: #008080; }
.st-masthead { display: flex; justify-content: space-between; align-items: flex-start; padding: 14pt 0; }
.st-practice { font-size: 16pt; font-weight: 700; }
.st-attending { margin-top: 1pt; font-size: 8.5pt; color: rgba(0, 0, 0, 0.55); }
.st-word { text-align: right; }
.st-statement { font-size: 22pt; font-weight: 700; letter-spacing: 4pt; margin-right: -4pt; color: #008080; }
.st-of { margin-top: 1pt; font-size: 8.5pt; font-weight: 700; letter-spacing: 2.6pt; margin-right: -2.6pt; color: rgba(0, 0, 0, 0.55); }
.doc .st-rule { border-top: 0.6pt solid rgba(0, 0, 0, 0.10); }
.st-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24pt; padding: 14pt 0; min-height: 80pt; }
.st-small { margin-bottom: 2pt; font-size: 9pt; color: rgba(0, 0, 0, 0.55); }
.st-billed { margin-bottom: 2pt; font-size: 11pt; font-weight: 700; }
.st-tiny { font-size: 8pt; color: rgba(0, 0, 0, 0.55); }

.st-hero, .st-plan-hero {
  display: flex; justify-content: space-between;
  padding: 16pt 18pt 14pt 15pt;
  background: rgba(0, 128, 128, 0.08); border-left: 3pt solid #008080;
}
.st-hero { height: 78pt; }
.st-hero-left { display: flex; flex-direction: column; justify-content: space-between; }
.st-hero-left .lbl { font-size: 7pt; letter-spacing: 1.2pt; }
.st-hero-value { margin-top: 1pt; font-size: 10.5pt; font-weight: 700; }
.st-hero-right { display: flex; flex-direction: column; align-items: flex-end; }
.st-hero-right .lbl.teal { margin-bottom: 3pt; }
.st-amount { font-size: 26pt; font-weight: 700; }
.st-hero-right .st-tiny { margin-top: auto; }

.st-ledger { padding-top: 16pt; padding-bottom: 6pt; }
.st-heading { margin-bottom: 10pt; font-size: 9pt; font-weight: 700; letter-spacing: 1.6pt; color: #008080; }
.st-heading .st-tiny { letter-spacing: 0; font-weight: 400; }
.st-row {
  display: grid; grid-template-columns: 56pt minmax(0, 1fr) 74pt 74pt 62pt; align-items: baseline;
  padding: 5pt 0; border-bottom: 0.4pt solid rgba(0, 0, 0, 0.10);
}
.st-ledger.no-balance .st-row { grid-template-columns: 56pt minmax(0, 1fr) 80pt 80pt; }
.st-row:last-child { border-bottom: 0; }
.st-cols {
  padding: 0 0 4pt; border-bottom: 0.9pt solid rgba(0, 128, 128, 0.55);
  font-size: 7.5pt; font-weight: 700; letter-spacing: 1pt; color: rgba(0, 0, 0, 0.55);
}
.st-row .r { text-align: right; }
.st-row .r:not(:last-child) { padding-right: 12pt; }
.st-row .b { font-weight: 700; }
.st-row .muted { color: rgba(0, 0, 0, 0.55); }
.st-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6pt; }
.st-empty { padding: 8pt 0; font-size: 9pt; color: rgba(0, 0, 0, 0.55); }

.st-totals { display: flex; flex-direction: column; align-items: flex-end; padding-top: 8pt; }
.st-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 14pt; margin-bottom: 3pt; }
.doc .st-total-rule { width: 210pt; margin: 0 0 6pt; border-top: 0.6pt solid rgba(0, 0, 0, 0.10); }
.st-total.big b { font-size: 9.5pt; }
.st-total.big span { font-size: 12pt; font-weight: 700; color: #008080; }
.st-total.big.credit span { color: rgb(20, 120, 60); }

.st-plan-hero { height: 74pt; margin: 10pt 0 6pt; }
.st-plan-name { margin-top: 3pt; font-size: 15pt; font-weight: 700; }
.st-plan-total { font-size: 22pt; font-weight: 700; }
.st-plan .st-row { grid-template-columns: 34pt minmax(0, 1fr) 90pt 110pt; }
.st-plan-row { padding: 4pt 0 5pt; }
.st-plan-summary { padding-top: 10pt; }

.st-smallprint { padding-top: 10pt; text-align: center; font-size: 7pt; color: rgba(0, 0, 0, 0.55); }
.doc .st-smallprint .rule { margin-bottom: 3pt; border-top: 0.5pt solid rgba(0, 0, 0, 0.10); }