/* PharmaPlanta printable documents — A4, print-first, in the identity of the website.
 *
 * The quotation, the data sheet and the non-circumvention declaration share this
 * one file, so that a buyer who receives all three sees one company rather than
 * three. The palette, the radii and the kicker headings are the website's own.
 */

:root{
  /* Every value below the first line is a tint or a shade of the brand.
     A second issuing company sets them all from its own colour: see
     PP_Issuers::palette(), which keeps exactly these ratios. */
  --doc-brand:#1F4D4F; --doc-brand-d:#143537; --doc-brand-l:#e6eeee;
  --doc-brand-b:#cfe0df; --doc-ink:#12292B; --doc-ink-t:#c3d3d2;
  --doc-page:#6e7a7e; --doc-strip-a:#e8efef; --doc-strip-b:#cfdcdc;
  --doc-foot:#0f2224; --doc-foot-t:#9db1b0;
  --doc-steel:#3D5A5C; --doc-grey:#8C9193;
  --doc-line:#dce5e5; --doc-line2:#eef3f3; --doc-bg:#f3f7f7;
  --doc-good:#2b6f4c; --doc-good-l:#e6f1ea;
  --doc-warn:#a8710f; --doc-warn-l:#fbf2e2;
  --doc-crit:#9c3b3b; --doc-crit-l:#f6eaea;
  --doc-r:2.6mm;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body.pp-doc{
  background:var(--doc-page); color:var(--doc-ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:10.4pt; line-height:1.5; -webkit-font-smoothing:antialiased;
}

/* --- the on-screen toolbar, never printed ------------------------------- */

.pp-doc__toolbar{
  position:sticky; top:0; z-index:10; background:var(--doc-ink); color:var(--doc-ink-t);
  padding:10px 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:10pt;
}
.pp-doc__toolbar button{
  background:var(--doc-brand); color:#fff; border:0; border-radius:7px;
  padding:9px 16px; font:inherit; font-weight:600; cursor:pointer; min-height:40px;
}
.pp-doc__toolbar button:hover{background:var(--doc-brand-d)}
.pp-doc__back{
  color:#fff; text-decoration:none; font-weight:600; border:1px solid rgba(255,255,255,.35);
  border-radius:7px; padding:9px 14px; min-height:40px; display:inline-flex; align-items:center;
}
.pp-doc__back:hover{background:rgba(255,255,255,.12)}
.pp-doc__back:focus-visible{outline:2px solid #fff; outline-offset:2px}

/* --- the sheet ---------------------------------------------------------- */

.pp-doc__sheet{max-width:210mm; margin:8mm auto; background:#fff; box-shadow:0 2mm 8mm rgba(0,0,0,.3)}
.pp-doc__topbar,
.pp-doc__head,
.pp-doc__body,
.pp-doc__foot{padding-left:14mm; padding-right:14mm}

.pp-doc__topbar{
  background:var(--doc-ink); color:var(--doc-ink-t); font-size:7.6pt;
  padding-top:2.2mm; padding-bottom:2.2mm;
  display:flex; justify-content:space-between; gap:8mm; flex-wrap:wrap;
}
.pp-doc__topbar b{color:#fff; font-weight:600}

.pp-doc__head{
  background:#fff; border-bottom:1.4mm solid var(--doc-brand);
  padding-top:5mm; padding-bottom:4.5mm;
  display:flex; justify-content:space-between; align-items:center; gap:8mm;
}
.pp-doc__brand{flex:0 0 auto}
.pp-doc__logo{max-height:15mm; width:auto; display:block}
/* A plate for a logo drawn in white. Without one it is simply not there. */
.pp-doc__plate{display:inline-block}
.pp-doc__plate.is-dark{
  background:var(--doc-ink); border-radius:2mm; padding:2.4mm 3.4mm;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.pp-doc__wordmark{font-size:17pt; font-weight:800; letter-spacing:-.02em; color:var(--doc-ink); line-height:1}
.pp-doc__wordmark i{font-style:normal; font-weight:400; color:var(--doc-brand)}
.pp-doc__tagline{
  margin-top:1.6mm; padding-top:1.4mm; border-top:.4mm solid var(--doc-line);
  font-size:6pt; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--doc-grey);
}
.pp-doc__doctype{text-align:right}
.pp-doc__doctype .pp-doc__docname{
  font-size:9pt; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--doc-brand);
}
.pp-doc__doctype .pp-doc__docref{font-size:15pt; font-weight:800; letter-spacing:-.02em; margin-top:.6mm}
/* Who sent this, in the middle of the letterhead. Small, but readable: it is
   the address somebody writes back to. */
.pp-doc__company{
  flex:1 1 auto; text-align:left; font-size:8pt; color:var(--doc-steel); line-height:1.5;
}
.pp-doc__company div:first-child{font-weight:700; color:var(--doc-ink); font-size:8.6pt}
.pp-doc__doctype{flex:0 0 auto}

.pp-doc__body{padding-top:4mm; padding-bottom:4mm}

/* --- headings ----------------------------------------------------------- */

.pp-doc__kicker,
.pp-doc__body h2{
  margin:0 0 2.2mm; font-size:8pt; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--doc-brand); border:0; padding:0;
}
.pp-doc__body h2{margin-top:5mm}
.pp-doc__body h1{font-size:16pt; margin:0 0 2mm; letter-spacing:-.02em; line-height:1.2}
.pp-doc__sub{color:var(--doc-grey); margin:0 0 5mm; font-size:9.4pt}
.pp-doc__body p{margin:0 0 2.6mm}

/* --- parties, dates ----------------------------------------------------- */

.pp-doc__cards{display:flex; gap:4mm}
.pp-doc__cards > div{
  flex:1; background:var(--doc-bg); border:.3mm solid var(--doc-line);
  border-radius:var(--doc-r); padding:2.8mm 3.4mm;
}
.pp-doc__cards > div:first-child{background:var(--doc-brand-l); border-color:var(--doc-brand-b)}
.pp-doc__cards b{display:block; font-size:9.8pt; font-weight:700; margin-bottom:.8mm}
.pp-doc__cards p{margin:0; font-size:9pt; color:var(--doc-ink); line-height:1.5}
/* The label is a label, not the first line of the address: a rule under it,
   because ".pp-doc__cards p" above had already taken the margin away. */
.pp-doc__cards .pp-doc__kicker{
  margin:0 0 2mm; padding-bottom:1.4mm; border-bottom:.3mm solid var(--doc-line);
}

.pp-doc__strip{display:flex; gap:3.5mm; margin-top:3mm; flex-wrap:wrap}
.pp-doc__strip > div{
  flex:1; min-width:34mm; background:#fff; border:.3mm solid var(--doc-line);
  border-radius:var(--doc-r); padding:2.2mm 3.2mm;
}
.pp-doc__strip span{
  display:block; font-size:6.6pt; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--doc-grey); margin-bottom:.6mm;
}
.pp-doc__strip em{font-style:normal; font-size:8.8pt; font-weight:600}

/* --- the position table ------------------------------------------------- */

.pp-doc__pos{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:4mm; font-size:8.8pt;
  border:.3mm solid var(--doc-line); border-radius:var(--doc-r); overflow:hidden;
}
.pp-doc__pos thead th{
  background:var(--doc-brand); color:#fff; font-weight:700; font-size:7pt;
  letter-spacing:.09em; text-transform:uppercase; padding:2.4mm 3mm; text-align:left;
}
.pp-doc__pos thead th.pp-doc__num{text-align:right}
.pp-doc__pos td{padding:2.2mm 3mm; vertical-align:top; border-top:.3mm solid var(--doc-line)}
.pp-doc__pos tbody tr:first-child td{border-top:0}
.pp-doc__pos td.pp-doc__num{
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600;
}
.pp-doc__item{display:flex; gap:3.6mm}
.pp-doc__item h3{margin:0 0 .7mm; font-size:9.8pt; font-weight:700; letter-spacing:-.01em}
.pp-doc__shot{
  width:31mm; height:21mm; flex:none; border-radius:2mm; overflow:hidden;
  border:.3mm solid var(--doc-line); background:linear-gradient(160deg,var(--doc-strip-a),var(--doc-strip-b));
}
.pp-doc__shot img{width:100%; height:100%; object-fit:cover; display:block}
.pp-doc__meta{margin:0 0 1.2mm; font-size:7.9pt; color:var(--doc-steel)}
.pp-doc__badge{
  display:inline-block; font-size:6.6pt; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; background:#fff; color:var(--doc-steel);
  padding:.7mm 2mm; border-radius:1.4mm; margin-right:1.6mm;
}
.pp-doc__badge--available{background:var(--doc-good-l); color:var(--doc-good)}
.pp-doc__badge--reserved{background:var(--doc-warn-l); color:var(--doc-warn)}
.pp-doc__badge--sold{background:var(--doc-crit-l); color:var(--doc-crit)}
.pp-doc__spec{
  margin:0; padding:0; list-style:none; font-size:7.7pt; color:var(--doc-steel);
  line-height:1.45; columns:2; column-gap:5mm;
}
.pp-doc__spec li{margin-bottom:.4mm; break-inside:avoid}
.pp-doc__spec b{color:var(--doc-ink); font-weight:600}

/* --- totals ------------------------------------------------------------- */

.pp-doc__sums{margin:2mm 0 0 auto; width:86mm; font-size:9pt; border-collapse:collapse}
.pp-doc__sums td{padding:1.5mm 3mm}
.pp-doc__sums td:last-child{text-align:right; font-variant-numeric:tabular-nums}
.pp-doc__sums .pp-doc__total td{
  background:var(--doc-brand-l); color:var(--doc-brand);
  font-weight:800; font-size:11pt; padding:2.2mm 3mm;
}
.pp-doc__sums .pp-doc__total td:first-child{border-radius:2.2mm 0 0 2.2mm}
.pp-doc__sums .pp-doc__total td:last-child{border-radius:0 2.2mm 2.2mm 0}
/* The VAT sentence belongs under the total it qualifies, and is read: it tells
   the buyer what the invoice will say. */
/* Scoped past ".pp-doc__body p", which is one point more specific and was
   quietly putting the margin back. */
.pp-doc__body p.pp-doc__vat{
  font-size:8pt; color:var(--doc-steel); margin:1.6mm 0 0 auto;
  line-height:1.5; width:86mm; text-align:right;
}

/* --- terms and scope ---------------------------------------------------- */

.pp-doc__grid{display:flex; gap:4mm; margin-top:3.4mm}
.pp-doc__grid > div{flex:1; min-width:0}
.pp-doc__panel{
  background:var(--doc-bg); border:.3mm solid var(--doc-line);
  border-radius:var(--doc-r); padding:3.4mm 3.8mm;
}
.pp-doc__dl{margin:0; font-size:8.3pt; columns:2; column-gap:5mm}
.pp-doc__dl > *{break-inside:avoid}
.pp-doc__dl dt{
  font-size:6.4pt; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--doc-grey); margin-top:1.8mm;
}
.pp-doc__dl dt:first-child{margin-top:0}
.pp-doc__dl dd{margin:.5mm 0 0; color:var(--doc-ink)}
/* The quotation's terms: one pair per cell, three cells to a row, and never a
   label on one side of a break and its value on the other. */
.pp-doc__grid--terms{display:block}
.pp-doc__terms{
  margin:0; font-size:8.3pt;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2.6mm 5mm;
}
.pp-doc__term{break-inside:avoid; page-break-inside:avoid; min-width:0}
.pp-doc__terms dt{
  font-size:6.4pt; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--doc-grey); margin:0;
}
.pp-doc__terms dd{margin:.5mm 0 0; color:var(--doc-ink); line-height:1.4}
.pp-doc__closing{margin-top:3.4mm}
.pp-doc__closing .pp-doc__accept{margin-top:0}
.pp-doc__closing .pp-doc__accept + .pp-doc__accept{margin-top:1.6mm}
.pp-doc__text{margin:0; font-size:8.2pt; color:var(--doc-ink); line-height:1.5}
.pp-doc__body p.pp-doc__accept,
.pp-doc__accept{margin:3.4mm 0 0; padding:0 .5mm; font-size:8pt; line-height:1.5; color:var(--doc-steel)}
.pp-doc__accept b{color:var(--doc-ink); font-weight:700}

/* --- classic key/value table, used by the data sheet and the agreement --- */

.pp-doc__table{width:100%; border-collapse:collapse; margin-bottom:3mm; font-size:9.4pt}
.pp-doc__table tr{border-bottom:.3mm solid var(--doc-line)}
.pp-doc__table tr:last-child{border-bottom:0}
.pp-doc__table th{
  width:42%; text-align:left; padding:1.8mm 3mm 1.8mm 0;
  color:var(--doc-grey); font-weight:500; vertical-align:top;
}
.pp-doc__table td{padding:1.8mm 0; font-weight:600; vertical-align:top}
.pp-doc__table--parties th{width:32%}
.pp-doc__table--parties td{font-weight:400}

.pp-doc__photos{display:grid; grid-template-columns:repeat(3, 1fr); gap:3mm; margin-bottom:5mm}
.pp-doc__photo{border:.3mm solid var(--doc-line); border-radius:2mm; overflow:hidden; background:#f4f7f7}
.pp-doc__photo img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3}
.pp-doc__photo--main{grid-column:span 3}
.pp-doc__photo--main img{aspect-ratio:16/9}

.pp-doc__price{
  margin-top:5mm; padding:3.5mm 4mm; background:var(--doc-brand-l); border-radius:var(--doc-r);
  font-weight:700; color:var(--doc-brand); display:flex; align-items:baseline; gap:3mm; flex-wrap:wrap;
}
.pp-doc__price-label{font-size:9pt; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.75}
.pp-doc__price-value{font-size:14pt; letter-spacing:-.01em}
.pp-doc__price-note{margin-left:auto; font-size:9pt; font-weight:500; opacity:.8}
.pp-doc__blank{
  border:.3mm dashed var(--doc-line); border-radius:2mm; padding:4mm;
  color:var(--doc-grey); text-align:left;
}

/* --- signatures and footer ---------------------------------------------- */

.pp-doc__signatures{display:grid; grid-template-columns:1fr 1fr; gap:10mm; margin-top:6mm}
.pp-doc__signatures > div{display:flex; flex-direction:column; gap:1.4mm}
.pp-doc__sigline{border-bottom:.3mm solid var(--doc-ink); height:10mm}
.pp-doc__signatures span{font-size:8.4pt; font-weight:600}
.pp-doc__signatures .pp-doc__sigrole{color:var(--doc-grey); font-size:7.4pt; font-weight:400}

.pp-doc__foot{
  background:var(--doc-foot); color:var(--doc-foot-t); font-size:7pt;
  padding-top:2.8mm; padding-bottom:2.8mm;
  display:flex; justify-content:space-between; gap:6mm; flex-wrap:wrap;
}
.pp-doc__foot b{color:var(--doc-ink-t); font-weight:600}

@page{size:A4; margin:0}

@media print{
  .no-print{display:none !important}
  body.pp-doc{background:#fff}
  .pp-doc__sheet{max-width:none; margin:0; box-shadow:none}
  .pp-doc__body h2{break-after:avoid; page-break-after:avoid}
  .pp-doc__pos,
  .pp-doc__cards,
  .pp-doc__strip,
  .pp-doc__grid,
  .pp-doc__table,
  .pp-doc__photos,
  .pp-doc__sums,
  .pp-doc__signatures,
  .pp-doc__closing{break-inside:avoid; page-break-inside:avoid}
  /* The head and the foot repeat by themselves now: they are the head and the
     foot of the table the document is laid out in. */

  /*
   * And so does the head. A fixed element is drawn again on every sheet the
   * browser produces, which is the only way to get a running header out of a
   * print dialog — so the dark strip carrying the address and the domain now
   * stands at the top of page four as it does at the top of page one. The body
   * reserves its height, or the first page would start underneath it.
   */
  a{color:inherit; text-decoration:none}
}

@media screen and (max-width:800px){
  .pp-doc__sheet{margin:0}
  .pp-doc__head{flex-direction:column; align-items:flex-start; gap:5mm}
  .pp-doc__doctype,.pp-doc__company{text-align:left}
  .pp-doc__cards,.pp-doc__grid,.pp-doc__item{flex-direction:column}
  .pp-doc__shot{width:100%; height:40mm}
  .pp-doc__spec,.pp-doc__dl{columns:1}
  .pp-doc__terms{grid-template-columns:1fr 1fr}
  .pp-doc__sums{width:100%}
  .pp-doc__photos{grid-template-columns:1fr 1fr}
  .pp-doc__photo--main{grid-column:span 2}
  .pp-doc__signatures{grid-template-columns:1fr; gap:8mm}
}

/* The personal data record: one column, quoted back in the customer's own words. */
.pp-doc__record{
  border:0.25mm solid var(--doc-line, #d8e2e2); border-radius:2.6mm;
  padding:3mm 4mm; margin:0 0 3mm; break-inside:avoid;
}
.pp-doc__recordhead{margin:0 0 1.5mm; font-size:8pt; color:var(--doc-grey, #5b6b6b)}
.pp-doc__recordhead strong{color:var(--doc-ink, #16302f)}
.pp-doc__quote{
  margin:0; padding-left:3mm; border-left:0.6mm solid var(--doc-brand, #1F4D4F);
  font-size:9pt; line-height:1.45;
}

/*
 * A person is not split across two sheets.
 *
 * On a one-page document this changes nothing. On a customer file running to
 * three pages it is the difference between a record and a mess: without it a
 * name lands at the foot of one sheet and their details on the next, and the
 * reader has to hold a half-read person in their head across the turn.
 */
.pp-doc__body h2{break-after:avoid; page-break-after:avoid}
.pp-doc__table--person{break-inside:avoid; page-break-inside:avoid}
/* The statement a document closes with travels as one block, or not at all. */
.pp-doc__closing{break-inside:avoid; page-break-inside:avoid}

/* --- the sheet as one table, so its head and foot repeat ----------------- */

.pp-doc__pages{width:100%; border-collapse:collapse}
.pp-doc__cell{padding:0; text-align:left; font-weight:400; vertical-align:top}
.pp-doc__cell--body{padding-bottom:3mm}

/* The slot the page number sits in, kept clear at the right of the footer. */
.pp-doc__foot-gap{display:inline-block; min-width:17mm}

/*
 * A width is given on purpose. An absolutely positioned block with only its
 * right edge fixed stretches from wherever it would have stood in the flow, so
 * the label was drawn across the whole footer and its text landed at the far
 * left. Seventeen millimetres, right-aligned, is exactly the slot kept for it.
 */
/*
 * The page number is stamped by script, one absolutely positioned label per
 * sheet: Chromium answers "0 / 0" to the CSS page counters outside a margin box,
 * and does not implement margin boxes either. Positioned here rather than inside
 * the print block so that what is checked on screen is what will be printed.
 */
.pp-doc__pagenum{
  position:absolute; right:14mm; z-index:6; width:17mm; text-align:right;
  font-size:7pt; letter-spacing:.04em; color:var(--doc-foot-t); font-variant-numeric:tabular-nums;
}