/* The letterhead maker. The panel, the buttons and the readout are
   logo.css; what is here is the sheet.

   The sheet is drawn in CENTIMETRES, off the same figures that go into
   the .docx, scaled by one number: --ppc, pixels per centimetre, which
   the page sets from the column width. Nothing in the preview carries a
   measurement of its own, so it cannot show a letterhead the file does
   not contain. */

.sheet {
  --ppc: 24px;
  position: relative;
  width: calc(var(--w) * var(--ppc));
  height: calc(var(--h) * var(--ppc));
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 28px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  font-family: Calibri, Carlito, var(--font-body), sans-serif;
  color: #1c1c1c;
}

/* 1 cm is 28.3465pt, so a size in points is pt / 28.3465 of a centimetre.
   The .docx says 12pt; this says the same 12pt. */
.sheet { --pt: calc(var(--ppc) / 28.3465); }

.sheet__band {
  position: absolute;
  left: calc(var(--ml) * var(--ppc));
  width: calc(var(--tw) * var(--ppc));
}

.sheet__hdr { top: 0; }
.sheet__ftr { bottom: 0; }

/* The margin lines, so what the letterhead leaves for a letter is
   visible rather than asserted. Not printed, obviously: this is the
   preview's own furniture. */
.sheet__text {
  position: absolute;
  left: calc(var(--ml) * var(--ppc));
  right: calc(var(--mr) * var(--ppc));
  top: calc(var(--mt) * var(--ppc));
  bottom: calc(var(--mb) * var(--ppc));
  border: 1px dashed rgba(28, 28, 28, 0.16);
}

.sheet__text b {
  position: absolute;
  left: 0;
  top: calc(var(--ppc) * 0.35);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(28, 28, 28, 0.34);
}

.lh-row { display: flex; align-items: flex-end; gap: calc(var(--ppc) * 0.3); }

.lh-logo { display: block; height: auto; flex: none; }

.lh-countries {
  flex: 1 1 auto;
  text-align: right;
  font-weight: 700;
  font-size: calc(12 * var(--pt));
  line-height: 1.15;
  white-space: nowrap;
}

/* Wrapping is the thing the country cell exists to allow, so when the
   list finally outgrows the line the preview has to show it wrapping
   rather than trimming it. */
.lh-countries.is-wrapping { white-space: normal; }

.lh-desc {
  font-weight: 700;
  font-size: calc(12 * var(--pt));
  line-height: calc(var(--descline) * var(--ppc));
  height: calc(var(--descline) * var(--ppc));
  white-space: nowrap;
}

/* Three bars across the text block with paper between them, which is
   what the table in the file comes out as. The gap is the measurement
   that carries the mark: butted up, it reads as one bar changing colour. */
.lh-rule {
  display: flex;
  gap: calc(var(--rulegap) * var(--ppc));
  height: calc(var(--rule) * var(--ppc));
}
.lh-rule i { flex: 1 1 0; }
.lh-rule i:nth-child(1) { background: var(--color-brand-orange); }
.lh-rule i:nth-child(2) { background: var(--color-brand-blue); }
.lh-rule i:nth-child(3) { background: var(--color-brand-green); }

.lh-foot { display: flex; align-items: center; gap: calc(var(--ppc) * 0.3); }
.lh-page {
  flex: 1 1 auto;
  font-size: calc(11 * var(--pt));
  line-height: 1.2;
  color: #1c1c1c;
  white-space: nowrap;
}
.lh-endorse { display: block; height: auto; flex: none; }

/* display:block would otherwise beat the UA rule for [hidden], and COZ
   CLUB's footer carries no endorsement line: it is the brand the line
   names. The document was already right; the preview was not. */
.lh-logo[hidden], .lh-endorse[hidden] { display: none; }

/* The sheet is a document, so the checker behind it goes: a letterhead
   is never on a transparent ground and the pattern would read as part of
   the paper. */
.canvas--sheet {
  min-height: 0;
  padding: clamp(16px, 2.6vw, 30px);
  background-image: none;
  background-color: #efedea;
}

/* The figures a build card states. Nothing in the project styles a
   table, so this is a definition list. */
.figspec { margin: 0 0 14px; font-size: 13px; }

.figspec dt {
  float: left;
  clear: left;
  width: 62%;
  padding: 5px 0;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}

.figspec dd {
  margin: 0;
  padding: 5px 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.figspec dt:last-of-type, .figspec dd:last-of-type { border-bottom: 0; }

@media (max-width: 680px) {
  .sheet { --ppc: 16px; }
}