/* ==========================================================================
   The appointment letter as a document
   --------------------------------------------------------------------------
   A titled card: the title across the top over a coloured rule, a block of
   references with a photograph, a subject, then headed sections — label and
   value rows, two-column rows, bullet points or written paragraphs — an
   approval line, and a row of signatures and stamps at the foot.

   Sized in millimetres against A4, so what is on screen is what comes out of
   the printer.
   ========================================================================== */

.rs-doc{
  /* Two blues, not one. The title is the darker of them and carries the page;
     the labels are a lighter, friendlier blue so a column of them reads as
     information rather than as a wall of headings. One blue for both made the
     whole document look shouted. */
  --rs-doc-accent:#14528c;        /* the title, and the section headings */
  --rs-doc-label:#1a7ac0;         /* the labels down the left of every row */
  --rs-doc-rule:#22a6a0;          /* the line under the title */
  --rs-doc-ink:#20232b;
  --rs-doc-soft:#71727d;
  --rs-doc-hair:#e6e8f0;
  --rs-doc-approve:#c0392b;

  box-sizing:border-box;
  width:210mm;
  max-width:100%;
  margin:0 auto;
  /* Side padding holds every part of the letter in from the edge. The band is
     the one exception and pulls itself back out with a negative margin — doing
     it this way round means no single block can lose its indent by setting a
     margin shorthand, which is exactly what went wrong when the siblings were
     indented individually. */
  padding:0 13mm 14mm;
  background:#fff;
  color:var(--rs-doc-ink);
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-size:10pt;
  line-height:1.55;
  border:1px solid var(--rs-doc-hair);
  border-radius:6px;
  box-shadow:0 2px 18px rgba(20,25,60,.07);
}
.rs-doc *{ box-sizing:border-box }

/* The little marks beside the labels. */
.rs-doc__i{
  flex:0 0 auto;
  width:13px; height:13px;
  vertical-align:-2px;
  color:var(--rs-doc-label);
}
/* A section's mark belongs to its heading, so it takes the heading's colour
   and a little more weight to match the larger type beside it. */
.rs-doc__heading .rs-doc__i{ width:15px; height:15px; color:var(--rs-doc-accent) }

/* --------------------------------------------------------- the letterhead */
/* A band across the very top: crest, who is issuing the letter and how to
   reach them, and a code to check it against. Everything in it is typed on the
   letter screen, so it carries the society's own name and nobody else's. */
.rs-doc__band{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:5mm;
  margin:0 -13mm;
  padding:4.5mm 13mm;
  /* Kept as a belt to the drawn rectangle's braces: on screen, and anywhere the
     SVG is unavailable, this is what paints the band. */
  background:var(--rs-doc-band, #137a4d);
  color:#fff;
}

/* The drawn band. See the note beside the <svg> in class-rs-letter-doc.php:
   a background is discarded by a print dialog, a rectangle is not. */
.rs-doc__band-ink{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
}
.rs-doc__band > *:not(.rs-doc__band-ink){ position:relative; z-index:1 }

/* The crest keeps its place whether or not one has been uploaded — an empty
   band that reflows the moment a logo arrives is not a design anybody can
   check.
 *
   It does not force a shape on what goes in it. A round seal, a wide wordmark,
   a tall shield: the height is fixed so the band is always the same depth, and
   the width is whatever the crest's own proportions ask for. It used to be a
   circle with the overflow clipped, which cut the corners off every logo that
   was not round. */
.rs-doc__band-crest{
  display:flex; align-items:center; justify-content:center;
  min-width:19mm;
  height:19mm;
}
/* Only an empty one is marked out, and only faintly. */
.rs-doc__band-crest:not(:has(img)){
  width:19mm;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.rs-doc__band-logo{
  width:auto; height:auto;
  max-width:38mm;
  max-height:100%;
  display:block;
}

.rs-doc__band-who{ display:flex; flex-direction:column; gap:1mm; min-width:0 }
.rs-doc__band-who strong{
  font-size:13.5pt;
  font-weight:700;
  letter-spacing:.015em;
  line-height:1.15;
}
/* Each line sits behind its own mark, and the marks line up under one another
   because the icon is a fixed size and never shrinks. */
.rs-doc__band-who span{
  display:flex; align-items:center; gap:1.8mm;
  font-size:8.5pt;
  line-height:1.3;
  color:rgba(255,255,255,.93);
}
.rs-doc__band-who .rs-doc__i{
  width:11px; height:11px;
  color:rgba(255,255,255,.85);
}

/* Small: it is a code to scan, not a feature of the page. */
.rs-doc__band-qr{
  display:flex; flex-direction:column; align-items:center; gap:0.8mm;
  padding:1.6mm;
  background:#fff;
  border-radius:2px;
}
.rs-doc__band-qr img,
.rs-doc__band-qr > svg{ width:14mm; height:14mm; display:block }
.rs-doc__band-qr span{
  font-size:5.6pt; font-weight:700; letter-spacing:.06em;
  color:var(--rs-doc-band, #137a4d);
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---------------------------------------------------------------- the top */
/* The two outer slots are the same fixed width and are always in the markup,
   even when empty. That is what keeps the title dead centre whether or not a
   crest and a code have been set, and it means an uploaded logo of any shape —
   or an SVG carrying no intrinsic size at all — cannot collapse its column. */
.rs-doc__top{
  display:grid;
  grid-template-columns:30mm 1fr 30mm;
  align-items:center;
  gap:5mm;
  margin-top:12mm;
  padding-bottom:3mm;
  border-bottom:1.5px solid var(--rs-doc-rule);
}
/* With a band above, the crest and the code live up there instead, so the
   title row is only a title and needs less room around it. */
.rs-doc__top--under-band{ margin-top:7mm }
/* A slot with nothing in it takes no height, so a letter with no crest gets a
   tight band rather than 16mm of white above the rule. The width still comes
   from the grid, so nothing can collapse the way it did before. */
.rs-doc__slot{ display:block; min-width:0 }
.rs-doc__slot:has(img){ height:16mm }
.rs-doc__slot--qr{ display:flex; justify-content:flex-end; align-items:center }

.rs-doc__logo{
  display:block;
  width:100%; height:100%;
  object-fit:contain;
  object-position:left center;
}
.rs-doc__qr{ width:16mm; height:16mm; display:block }
.rs-doc__qr > svg{ width:100%; height:100%; display:block }

.rs-doc__title{
  margin:0;
  font-size:15.5pt;
  font-weight:700;
  text-align:center;
  letter-spacing:.005em;
  color:var(--rs-doc-accent);
}

/* ----------------------------------------------- references and photograph */
.rs-doc__meta{
  display:grid;
  grid-template-columns:1fr 26mm;
  gap:6mm;
  align-items:start;
  margin-top:6mm;
}
.rs-doc__meta-rows{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:2.6mm 6mm;
  align-content:start;
}
/* Ref. No and Date sit side by side; everything after them runs down the left,
   the way the sample reads. */
.rs-doc__meta-rows > .rs-doc__pair:nth-child(n+3){ grid-column:1 }

.rs-doc__meta:not(:has(.rs-doc__photo)){ grid-template-columns:1fr }

.rs-doc__photo{
  width:26mm; height:32mm;
  object-fit:cover;
  border:1px solid var(--rs-doc-hair);
  border-radius:2px;
}

.rs-doc__pair{ margin:0; display:flex; gap:1.6mm; align-items:baseline }
.rs-doc__k{
  display:inline-flex; align-items:baseline; gap:1.4mm;
  color:var(--rs-doc-label);
  font-weight:700;
  white-space:nowrap;
}
.rs-doc__v{ color:var(--rs-doc-ink) }

/* -------------------------------------------------- a heading, and the rule */
/* Every headed block — the subject included — is a line of blue with a hairline
   ruled the full width beneath it. One rule, used everywhere, so nothing on the
   page has to invent its own. */
.rs-doc__heading{
  display:flex;
  align-items:center;
  gap:2mm;
  margin:9mm 0 4mm;
  padding-bottom:2mm;
  font-size:10.5pt;
  font-weight:700;
  color:var(--rs-doc-accent);
  border-bottom:1px solid var(--rs-doc-hair);
}
.rs-doc__heading--subject{ margin-top:6mm }

/* The line the letter is addressed on. Sits closer to the paragraph than to the
   subject above it, because the two of them are one piece of writing. */
.rs-doc__dear{
  margin:4mm 0 0;
  font-weight:600;
  color:var(--rs-doc-ink);
}
.rs-doc__dear + .rs-doc__intro{ margin-top:2mm }

.rs-doc__intro{ margin-top:4mm }
.rs-doc__intro p{ margin:0 0 3mm }
.rs-doc__intro strong{ color:var(--rs-doc-ink) }

/* ------------------------------------------------------------- a section */
.rs-doc__section{ margin:0 }

.rs-doc__rows{
  display:grid;
  grid-template-columns:1fr;
  gap:2.6mm 8mm;
  padding-left:3mm;
}
.rs-doc__rows--two{ grid-template-columns:repeat(2, minmax(0,1fr)) }
/* Two-column rows hold sentences, not single words, so they wrap. */
.rs-doc__rows--two .rs-doc__pair{ align-items:baseline }
.rs-doc__rows--two .rs-doc__v{ min-width:0 }

.rs-doc__text{ padding-left:3mm }
.rs-doc__text p{ margin:0 0 2.4mm }
.rs-doc__text strong{ color:var(--rs-doc-ink) }

/* A long summary of terms runs in two columns. Eighteen short clauses in a
   single column is most of a sheet of paper, and the alternative — shrinking
   the type until they fit — makes a document nobody wants to read. Each clause
   is kept whole, so none is ever split across the fold. */
.rs-doc__bullets{
  margin:0;
  padding-left:6mm;
  list-style:disc;
}
/* One clause per row.
   These used to run in two columns to save a sheet. Reading a contract that way
   means going down the left half, back up to the top, and down again — and the
   clause you are looking for is never where your eye expects it. One column
   reads top to bottom like the agreement it is; the length it costs is paid for
   by the second sheet below. */
.rs-doc__bullets--long{
  columns:auto;
  column-gap:normal;
}
.rs-doc__bullets--long li{
  break-inside:avoid;
  page-break-inside:avoid;
  -webkit-column-break-inside:avoid;
}
.rs-doc__bullets li{ margin:0 0 1.8mm; padding-left:0.5mm }
.rs-doc__bullets strong{ color:var(--rs-doc-ink) }

/* ----------------------------------------------------------- approved by */
.rs-doc__approve{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:3mm 10mm;
  margin-top:11mm;
  font-size:9.5pt;
  font-weight:700;
  color:var(--rs-doc-approve);
}

/* -------------------------------------------------- signatures and stamps */
/* A wrapping row rather than a fixed grid: two signatures and four stamps sit
   as happily as four and one, and a society that uploads none still gets ruled
   lines to sign on. */
/* Four marks to a row, and whatever is left over centred underneath. Two
   signatures and four seals come out as two and two, then two — balanced,
   rather than six squeezed onto one line at a size where none of them can be
   read. A row that is not full centres itself instead of hugging the left. */
.rs-doc__foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-end;
  gap:6mm 8mm;
  margin-top:6mm;
}

.rs-doc__mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.8mm;
  /* Four to a row: a signature and three seals, then whatever is left over
     centred beneath them. A fixed 40mm gave three on screen and four in print,
     so the letter he was reading and the letter he printed did not agree. The
     width is a quarter of the row once the three gaps are taken out, which is
     what makes four fit exactly and a fifth impossible. */
  flex:0 0 calc((100% - (3 * 8mm)) / 4);
  max-width:calc((100% - (3 * 8mm)) / 4);
  text-align:center;
}

/* One box, one size, for every mark. The picture is fitted into it — never the
   other way round — so two seals scanned at different sizes come out matching
   and every caption sits on the same line. */
/* A seal keeps the shape it was stamped in. The picture is given the cell as a
   limit and nothing more — no fixed height it must match, no box it is fitted
   into — so a rectangular stamp comes out rectangular, a round one round, and
   each fills as much of its cell as its own proportions allow. */
.rs-doc__mark-media{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  width:100%;
  height:20mm;
}
.rs-doc__mark-media img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  display:block;
}

/* ---------------------------------------------------------- a signature */
/* Signed above the line, named below it, the way a signature block has always
   been set. The rule is drawn whether or not a scanned signature sits on it,
   so a letter signed by hand and one signed in advance look the same. */
.rs-doc__mark:not(.rs-doc__mark--stamp) .rs-doc__mark-media{
  border-bottom:1px solid var(--rs-doc-ink);
  padding-bottom:1mm;
}
.rs-doc__mark strong{
  margin-top:1.6mm;
  font-family:Georgia, "Times New Roman", serif;
  font-size:9pt;
  font-weight:700;
  color:var(--rs-doc-ink);
  line-height:1.2;
}
.rs-doc__mark:not(.rs-doc__mark--stamp) span{
  font-family:Georgia, "Times New Roman", serif;
  font-size:8.5pt;
  font-style:italic;
  color:var(--rs-doc-soft);
  line-height:1.25;
}

/* -------------------------------------------------------------- a seal */
/* Bigger than a signature, because a seal is meant to be read, and set a
   degree or two off square — a stamp is pressed by hand and one sitting
   perfectly level reads as clip art. */
.rs-doc__mark--stamp .rs-doc__mark-media{ height:28mm }
.rs-doc__mark--stamp:nth-of-type(odd) .rs-doc__mark-media img{ transform:rotate(-2.5deg) }
.rs-doc__mark--stamp:nth-of-type(even) .rs-doc__mark-media img{ transform:rotate(1.8deg) }

.rs-doc__mark--stamp span{
  font-size:6.5pt;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rs-doc-soft);
  line-height:1.25;
}

/* A seal nobody has uploaded yet leaves its space marked out while the letter
   is being set up. It is never printed — a dashed circle on a letter somebody
   is handed reads as unfinished. */
.rs-doc__stamp-space{
  display:block;
  width:22mm; height:22mm;
  border:1px dashed #c8ccdb;
  border-radius:50%;
}

.rs-doc__sig-line{ display:block; width:100% }

.rs-doc__note{
  margin-top:7mm;
  padding-top:2.5mm;
  border-top:1px solid var(--rs-doc-hair);
  font-size:8pt;
  color:var(--rs-doc-soft);
  text-align:center;
}

/* ------------------------------------------------------------------ paper */
@media print{
  /* The footnote sits on the last line of the sheet with nothing under it,
     rather than floating wherever the content happens to end. */
  html, body{ height:100% }

  /* The page has no margin of its own so the letterhead can run to the edges,
     the way it does on the society's own stationery. Everything below it keeps
     its own side margins, and the foot of the page gets its breathing room from
     the note rather than from the sheet.
   *
     Measured in vh, not per cent. A percentage height resolves against the
     parent, and the theme's wrappers have no height of their own — so it came
     out as nothing, the document never stretched to the sheet, and the last
     line floated wherever the content happened to stop. In print vh is the
     page, which is exactly what it needs to be.
   *
     Only stretched when there is actually a last line to push down. Stretching
     it unconditionally set the document to exactly one sheet's height, so a
     single pixel of rounding anywhere above spilled it onto a second sheet —
     a whole blank page bought for a line that is no longer printed. */
  .rs-doc{ display:flex; flex-direction:column }
  .rs-doc:has(.rs-doc__note){ min-height:100vh }
  .rs-doc__note{ margin-top:auto; padding-bottom:1.2mm }

  /* On paper the card is the page, so it gives up its own frame and padding.
     A shade tighter than on screen as well: what reads as comfortable in a
     browser window is what pushes a letter onto a second sheet. */
  .rs-doc{
    box-shadow:none; border:0; width:auto; padding:0 12mm; margin:0; border-radius:0;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
    font-size:9.5pt;
    /* The body has to hold one sheet so the whole letter is two: this page and
       the signing page. Eighteen clauses one to a line is what sets the budget,
       and 1.42 is the most generous line that still fits them all. */
    line-height:1.42;
  }
  .rs-doc__heading{ margin:4.8mm 0 2.3mm; padding-bottom:1.4mm }
  .rs-doc__band{ margin:0 -12mm; padding:3mm 12mm; gap:4mm }
  .rs-doc__band-crest{ min-width:17mm; height:17mm }
  .rs-doc__band-crest:not(:has(img)){ width:17mm }
  /* Bigger on paper than on screen, which looks backwards and is not. A camera
     reading a code off a screen has a backlit, flat, self-lit source at
     whatever distance it likes. Off a sheet it has glare, a bend in the paper,
     office lighting, and — the case that actually matters — a photocopy of a
     photocopy, because that is what an employer or an embassy is handed.
   *
     The size was measured rather than chosen. A letter's verify URL encodes to
     33 modules, 41 across once the quiet zone either side is counted, and each
     rendered size was printed, rasterised at 150dpi and decoded again after
     one and three rounds of simulated copying:
   *
       13mm  0.32mm/module   unreadable even clean
       16mm  0.39            clean only
       18mm  0.44            clean only
       20mm  0.49            clean; one copy sometimes
       22mm  0.54            survives three rounds of copying
       25mm  0.61            survives three rounds of copying
   *
     So 13mm — what this used to be — never worked at all; it was only ever
     hidden before anybody found out. 22mm is where it starts surviving the
     copier, and 25mm buys nothing more while starting to dominate the
     letterhead. If it ever needs to be smaller, shorten what the code holds:
     fewer characters means fewer modules means a bigger module at the same
     width, and that is the only lever that costs no space. */
  .rs-doc__band-qr img,
  .rs-doc__band-qr > svg{ width:22mm; height:22mm }
  /* Height only. A width here as well would square off every crest that is
     not square, which is what it used to do. */
  .rs-doc__band-logo{ max-height:17mm; max-width:36mm }
  .rs-doc__top--under-band{ margin-top:3mm }
  .rs-doc__meta{ margin-top:4mm }
  .rs-doc__rows{ gap:1.9mm 8mm }
  .rs-doc__meta-rows{ gap:1.9mm 6mm }
  /* On a legal sheet the foot has room to be itself: lines with space above
     them to sign in, and seals at the size they are actually stamped. They had
     been shrunk to claw back an A4 page that was never going to be won.
   *
     Six marks do not fit across a sheet, so they fall into two rows. The space
     that pays for the second row comes out of the gaps between headings and
     between bullet points, not out of the seals — a seal too small to read is
     worse than a heading sitting a millimetre closer to its section. */
  .rs-doc__approve{ margin-top:3.5mm }

  /* The marks fall into an even grid rather than a centred flex row.
     Flex centres the last row on its own, so a foot of five marks printed
     three-then-two-in-the-middle and read as an accident. A grid keeps every
     column on the same axis down the sheet however many marks there are. */
  /* Four across, and a short last row sits in the middle.
   *
     A grid could not do the second half of that: its columns are fixed, so two
     seals left over stayed pinned to the first two columns and hung off the
     left of the sheet. Flex with the same width for every mark gives four to a
     row exactly as a grid does, and centres whatever is left over. */
  .rs-doc__foot{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-end;
    gap:12mm 5mm;
    margin-top:10mm;
  }
  /* The width a grid column would have been: the row less its three gaps,
     quartered. Keeping it exact is what stops four marks becoming three. */
  .rs-doc__mark{
    flex:0 0 calc((100% - (3 * 5mm)) / 4);
    max-width:calc((100% - (3 * 5mm)) / 4);
    width:auto;
  }
  /* margin-top only in the auto form, set above. Naming it again here with a
     length is what stopped the last line ever reaching the foot of the sheet. */
  .rs-doc__note{ padding-top:1.6mm; font-size:7.5pt }
  /* On a sheet of its own the seals can be the size they are actually stamped
     rather than the size that clawed back a page. */
  .rs-doc__mark-media{ height:22mm }
  .rs-doc__mark--stamp .rs-doc__mark-media{ height:28mm }
  /* Not on a letter anybody is handed. */
  .rs-doc__stamp-space{ display:none }
  .rs-doc__bullets li{ margin:0 0 1.35mm }
  .rs-doc__dear{ margin-top:3.6mm }
  .rs-doc__dear + .rs-doc__intro{ margin-top:1.5mm }
  .rs-doc__intro p{ margin:0 0 2.9mm }
  .rs-doc__band,
  .rs-doc__band *,
  .rs-doc__i,
  .rs-doc__approve,
  .rs-doc__k,
  .rs-doc__title{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
  /* Keep a section together — unless it is a long list of points, which would
     otherwise leave a third of a sheet empty and start again overleaf. Those
     flow, and only the individual points are kept whole. */
  .rs-doc__section,
  .rs-doc__mark{ break-inside:avoid; page-break-inside:avoid }

  .rs-doc__section:has(.rs-doc__bullets),
  .rs-doc__section:has(.rs-doc__text){ break-inside:auto; page-break-inside:auto }

  .rs-doc__bullets li,
  .rs-doc__text p{ break-inside:avoid; page-break-inside:avoid }

  /* A heading must never be the last thing on a sheet. */
  .rs-doc__heading{ break-after:avoid; page-break-after:avoid }

  /* ------------------------------------------------ the printed letterhead

     On screen the letterhead is a solid colour band. On paper it becomes
     stationery — the mark and the name in ink on white, with a rule under
     them. A block of solid colour across the top of a sheet is a web header
     that has wandered onto a letter, it drinks toner, and it comes out a
     different colour on every printer in every office it passes through.

     The QR stays. It used to be dropped here, on the reasoning that nobody
     scans a code off a page they are already holding — which had it exactly
     backwards. The person holding the page is rarely the person who has to
     believe it: an employer, an embassy, a bank is handed a printed letter and
     has no other way to tell whether it is real. On screen the code is a
     convenience; on paper it is the only proof there is. */
  .rs-doc--plainprint .rs-doc__band{
    background:#fff !important;
    color:var(--rs-doc-ink);
    padding-top:1mm;
    padding-bottom:3mm;
    /* The rule is what says "letterhead" once the colour has gone. */
    border-bottom:0.9mm solid var(--rs-doc-accent, #14528c);
  }
  /* The drawn rectangle exists for printers that discard backgrounds. Here the
     band is meant to be white, so it is the thing being discarded. */
  .rs-doc--plainprint .rs-doc__band-ink{ display:none }

  /* The white card the code sits in belongs to the coloured band; on white it
     is invisible padding, so it goes, and the code sits directly on the sheet.
     The code itself is drawn with its own black and white fills rather than
     inherited colour, so it survives a printer that has thrown every other
     colour away — which is the whole point of it being there. */
  .rs-doc--plainprint .rs-doc__band-qr{
    background:none;
    padding:0;
    border-radius:0;
  }
  /* The caption joins the letterhead instead of staying the band's green. It
     is 5.6pt — the smallest thing on the sheet — so it takes the same tone as
     everything else up here rather than a lighter one. */
  .rs-doc--plainprint .rs-doc__band-qr span{ color:#3d434f }

  /* Quieter than the body text, which is near-black: a letterhead is there to
     be recognised, not read twice. But it had been quietened to the point of
     disappearing — the name printed at about a quarter of the contrast of the
     text beneath it, which on a laser printer or a scanned copy is the
     difference between grey and gone. Dark enough to survive a photocopier,
     still clearly a step back from the body.
   *
     One tone for the whole block, name and details alike. Setting the address
     and telephone a shade lighter than the name is the instinct — they are the
     secondary information — and it is wrong here: they are 8.5pt against a
     13.5pt bold name, and smaller type needs more contrast than larger type to
     read as well, not less. Two tones meant the lines somebody actually has to
     copy down were the faintest thing on the sheet. */
  .rs-doc--plainprint .rs-doc__band-who strong,
  .rs-doc--plainprint .rs-doc__band-who span{ color:#3d434f }
  .rs-doc--plainprint .rs-doc__band-who svg{ color:#3d434f; fill:currentColor }

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

  /* The signing block gets a sheet of its own.
   *
     Not for room: because a page that begins with "APPROVED BY" and holds
     nothing but signatures and seals is a page somebody can lay flat, sign and
     scan back. Split across a fold it is neither a readable agreement nor a
     signable one.
   *
     The break goes on the approve row and the foot is tied to it, so the
     caption and the marks it introduces can never be separated. */
  /* Block, not flex.
   *
     .rs-doc is a flex column in print so the footnote can be pushed to the foot
     of a one-page letter. Chrome does not honour break-before on a flex item,
     so the page break below was quietly ignored and "APPROVED BY" stayed
     clinging to the bottom of page one while only the seals went overleaf.
     A split letter does not want the stretch anyway. */
  .rs-doc--split{ display:block }

  .rs-doc--split .rs-doc__approve{
    break-before:page; page-break-before:always;
    margin-top:0; padding-top:6mm;
  }
  .rs-doc--split .rs-doc__foot{ break-before:avoid; page-break-before:avoid }

  /* The stretch that pins the footnote to the foot of the sheet is for a
     one-page letter. With a deliberate second page it fights the break. */
  .rs-doc--split:has(.rs-doc__note){ min-height:0 }
  .rs-doc--split .rs-doc__note{ margin-top:8mm }
}

/* Scoped to screens. A4 at sensible margins is around 700px wide, so an
   unscoped max-width query put the printed letter into its phone layout —
   photograph under the references instead of beside them, QR code centred
   under the title instead of in the corner. */
@media screen and (max-width:820px){
  .rs-doc{ padding:0 6mm 9mm; font-size:10.5pt }
  .rs-doc__band{ grid-template-columns:auto 1fr; gap:4mm; margin:0 -6mm; padding:4mm 6mm }
  .rs-doc__band-crest{ min-width:15mm; height:15mm }
  .rs-doc__band-crest:not(:has(img)){ width:15mm }
  .rs-doc__band-qr{ grid-column:1 / -1; align-self:start; justify-self:start }
  .rs-doc__meta,
  .rs-doc__meta-rows,
  .rs-doc__rows--two{ grid-template-columns:1fr }
  .rs-doc__meta-rows > .rs-doc__pair:nth-child(n+3){ grid-column:auto }
  .rs-doc__photo{ justify-self:start }
  .rs-doc__top{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:3mm }
  .rs-doc__slot{ height:auto }
  .rs-doc__logo{ height:14mm; object-position:center }
  .rs-doc__slot--qr{ justify-content:center }
  .rs-doc__approve{ grid-template-columns:1fr; gap:2mm }

  /* Four seals across a phone would be four thumbnails nobody can read. */
  .rs-doc__mark{
    flex:0 0 calc((100% - 6mm) / 2);
    max-width:calc((100% - 6mm) / 2);
  }
}