/*
 * The A4 preview.
 *
 * The geometry is the PDF's, expressed as percentages of the sheet: top 45mm,
 * right 20mm, bottom 24mm, left 22mm of 210x297, and a 12.7mm tab as 7.56% of
 * the 168mm text column. Shared by the generator and the template review screen
 * so there is only one description of what a letter looks like.
 *
 * The font size is set in script, from the preview's own width, because it has
 * to shrink through the same six sizes the PDF's fitting loop uses.
 */

.a4 {
  width: 100%;
  max-width: 660px;
  aspect-ratio: 210/297;
  background: #fff url('letterpad.jpg') no-repeat;
  background-size: 100% 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 3px 14px rgba(0,0,0,.14);
  position: relative;
  overflow: hidden;
  padding: 15.15% 9.52% 8.08% 10.48%;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
  color: #000;
}

.a4 .lrline { display:flex; justify-content:space-between; gap:12px;
               font-weight:bold; text-decoration:underline; margin-bottom:.85em }
.a4 .to     { margin-bottom:.85em }
.a4 .tab    { margin-left:7.56% }
.a4 .salut  { font-weight:bold; margin-bottom:.85em }
.a4 .subref { display:flex; margin-bottom:.35em }
.a4 .subref .lab { flex:0 0 8.3%; font-weight:bold; margin-left:7.56% }
.a4 .subref .val { flex:1; text-align:justify }
.a4 .rule   { text-align:center; margin:.5em 0 .6em }
.a4 p       { margin:0 0 .55em; text-align:justify; text-indent:7.56% }
.a4 p.item  { text-indent:0; margin-left:7.56%; text-align:left }
.a4 p.closing { font-weight:bold }
.a4 .sign   { text-align:right; font-weight:bold; margin-top:2.2em; white-space:pre-line }
.a4 .encl   { display:flex; gap:6px; margin-top:.9em }
.a4 .encl b { flex:0 0 auto }
.a4 .padfooter { position:absolute; left:10.48%; right:9.52%; bottom:3.4%; text-align:center;
                 font-weight:bold; color:#002060; border-top:2px solid #002060; padding-top:3px }

/* Tables written into a letter body between [table] and [/table]. Borders and
   padding mirror what lib/letter_table.php draws in the PDF. */
.a4 table.tbl { width:100%; border-collapse:collapse; margin:.5em 0 .9em; table-layout:fixed }
.a4 table.tbl th,
.a4 table.tbl td { border:1px solid #000; padding:.25em .45em; vertical-align:middle;
                   word-wrap:break-word; overflow-wrap:break-word }
.a4 table.tbl th { font-weight:bold; text-align:center }
.a4 table.tbl td { text-align:justify }
.a4 table.tbl td.mid { text-align:center }