/* Template sketches - the thumbnail of a printed page, in the gallery and on the
   landing page. Markup: designs/_thumb.html. Geometry: apps.designs.services.sketch.

   The sketch is the page in miniature, measured in the page's own millimetres:
   `--mm` is one millimetre of an A4 sheet at whatever width the box is drawn, so
   a block 26mm tall here is 26mm of the real page. The header blocks are placed
   from the template's layout and the body flows in its real order, so what
   differs between two sketches is what differs between the two PDFs - where the
   title sits, how deep the band is, whether the table is framed, filled, banded
   or ruled - and not a colour on an otherwise identical drawing.

   Text is drawn as bars: an ink bar for what the eye reads first (names, figures)
   and a pale one for everything else. The sheet is --paper, so it stays white in
   the dark theme like the page it stands for. */

.sk {
  --mm: calc(100cqw / 210);
  --ink: #3a434f;
  --pale: #cdd3da;
  --faint: #e8ecf0;
  --tint: #eef1f5;
  container-type: inline-size;
  position: relative;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(22, 32, 44, 0.14);
}

.sk i {
  display: block;
  flex: none;
  height: calc(var(--mm) * 1.7);
  border-radius: calc(var(--mm) * 0.5);
  background: var(--pale);
}

.sk span { display: flex; }

/* --- Header ---------------------------------------------------------------- */

.sk-band { position: absolute; inset: 0 0 auto 0; height: var(--band); }

.sk-h { position: absolute; display: flex; flex-direction: column; align-items: flex-start; }
.sk-h.sk-right { align-items: flex-end; }
.sk-h.sk-center { align-items: center; }

.sk .sk-mark {
  width: calc(var(--mm) * 32);
  height: calc(var(--mm) * 10);
  border-radius: calc(var(--mm) * 1.2);
  background: var(--accent);
  opacity: 0.16;
}

/* The title is the one line of real type, set as the PDF sets it: the
   template's face at its base size (`--type`, in mm), and each style below
   copies its `.doc-title` - size, weight, case and tracking. A heavy display
   word and a widely spaced light serif are told apart at any size, and no
   arrangement of bars could say "serif". */
.sk .sk-display {
  display: block;
  font-family: var(--font);
  font-size: calc(var(--mm) * var(--type) * 2.1);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--accent);
  white-space: nowrap;
}

.sk .sk-subject { width: calc(var(--mm) * 34); margin-top: calc(var(--mm) * 2.4); }

.sk-meta { flex-direction: column; gap: calc(var(--mm) * 2.9); width: 100%; margin-top: calc(var(--mm) * 0.6); }
.sk-meta .sk-pair { justify-content: space-between; gap: calc(var(--mm) * 3); }
.sk .sk-meta .sk-k { width: calc(var(--mm) * 15); }
.sk .sk-meta .sk-v { width: calc(var(--mm) * 19); background: var(--ink); }

.sk-party { flex-direction: column; gap: calc(var(--mm) * 2.6); align-items: inherit; }
.sk .sk-label { width: calc(var(--mm) * 9); height: calc(var(--mm) * 1.2); background: var(--accent); opacity: 0.7; }
.sk .sk-name { width: calc(var(--mm) * 30); height: calc(var(--mm) * 2.2); background: var(--ink); }
.sk .sk-party .sk-line { width: calc(var(--mm) * 34); }
.sk .sk-party .sk-line:nth-child(2n) { width: calc(var(--mm) * 26); }
.sk .sk-party .sk-line:nth-child(3n) { width: calc(var(--mm) * 40); }

/* --- Body ------------------------------------------------------------------ */

.sk-body {
  position: absolute;
  top: var(--band);
  left: 0;
  right: 0;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
}

/* The table: a grid with the PDF's columns, so a style that rules or bands its
   cells has cells to rule. */
.sk-items { margin-top: calc(var(--mm) * 3.5); }

.sk-tr {
  display: grid;
  grid-template-columns: 1fr repeat(3, calc(var(--mm) * 18)) calc(var(--mm) * 26);
  border-bottom: calc(var(--mm) * 0.25) solid var(--faint);
}

.sk-tr > span {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--mm) * 1.2);
  padding: calc(var(--mm) * 2.6) calc(var(--mm) * 2.4);
}
.sk-tr > span:first-child { align-items: flex-start; }

.sk .sk-tr i { width: calc(var(--mm) * 10); }
.sk .sk-tr .sk-desc { width: calc(var(--mm) * 38); background: var(--ink); }
.sk .sk-tr .sk-detail { width: calc(var(--mm) * 28); height: calc(var(--mm) * 1.3); }
.sk .sk-tr .sk-amount { width: calc(var(--mm) * 16); background: var(--ink); }

.sk-thead { border-bottom-color: var(--accent); }
.sk-thead > span { padding-top: calc(var(--mm) * 2.2); padding-bottom: calc(var(--mm) * 2.2); }
.sk .sk-thead i { width: calc(var(--mm) * 8); height: calc(var(--mm) * 1.2); background: var(--accent); opacity: 0.75; }
.sk .sk-thead > span:first-child i { width: calc(var(--mm) * 18); }
.sk-items .sk-tr:last-child { border-bottom-color: transparent; }

.sk-totals { display: flex; flex-direction: column; margin-top: calc(var(--mm) * 2.5); }
.sk-totals.sk-right { margin-left: auto; }
.sk-trow { justify-content: space-between; align-items: center; padding: calc(var(--mm) * 2) 0; }
.sk .sk-trow i { width: calc(var(--mm) * 14); }
.sk .sk-trow i + i { width: calc(var(--mm) * 16); background: var(--ink); }
.sk-grand { padding: calc(var(--mm) * 2.6) calc(var(--mm) * 2.4); border-radius: calc(var(--mm) * 1.2); }
.sk .sk-grand i { height: calc(var(--mm) * 2.6); background: var(--accent); }
.sk .sk-grand i + i { width: calc(var(--mm) * 22); background: var(--accent); }

.sk-text { display: flex; flex-direction: column; gap: calc(var(--mm) * 1.8); margin-top: calc(var(--mm) * 4); }
.sk-text.sk-center { align-items: center; }
.sk .sk-heading { width: calc(var(--mm) * 12); height: calc(var(--mm) * 1.2); background: var(--accent); opacity: 0.7; }
.sk .sk-text .sk-line { width: calc(var(--mm) * 70); }

.sk-bank { display: flex; flex-direction: column; gap: calc(var(--mm) * 2); margin-top: calc(var(--mm) * 4); }
.sk-bank-cols { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--mm) * 5); }
.sk-bank-rows { flex-direction: column; gap: calc(var(--mm) * 2.6); }
.sk-bank-rows .sk-pair { gap: calc(var(--mm) * 14); }
.sk-bank-rows .sk-pair:nth-child(4) { margin-top: calc(var(--mm) * 2.4); }
.sk .sk-bank-rows .sk-k { width: calc(var(--mm) * 24); }
.sk .sk-bank-rows .sk-v { width: calc(var(--mm) * 46); background: var(--ink); }
.sk .sk-bank-rows .sk-pair:nth-child(2n) .sk-v { width: calc(var(--mm) * 30); }

/* The GiroCode on its white card, as the PDF prints it: a module grid in the
   page's ink, three finder squares, a hairline and rounded corners. */
.sk-qr {
  padding: calc(var(--mm) * 1.6);
  background: #ffffff;
  border: calc(var(--mm) * 0.25) solid rgba(0, 0, 0, 0.14);
  border-radius: calc(var(--mm) * 2.4);
}
.sk .sk-qr i {
  width: calc(var(--mm) * 26);
  height: calc(var(--mm) * 26);
  border-radius: 0;
  background:
    conic-gradient(var(--ink) 0 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0 / calc(var(--mm) * 3.2) calc(var(--mm) * 3.2);
  opacity: 0.55;
}

.sk-compliance { margin-top: calc(var(--mm) * 4); padding-left: calc(var(--mm) * 2.4); border-left: calc(var(--mm) * 0.5) solid var(--ink); }
.sk .sk-compliance i { width: calc(var(--mm) * 62); height: calc(var(--mm) * 1.2); }

.sk-signature { margin-top: calc(var(--mm) * 14); }
.sk-signature.sk-right { margin-left: auto; }
.sk .sk-signature i { width: 100%; height: calc(var(--mm) * 0.4); background: var(--pale); }

.sk-foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--mm) * 8);
  display: flex;
  justify-content: center;
  padding-top: calc(var(--mm) * 2.2);
  border-top: calc(var(--mm) * 0.25) solid var(--faint);
}
.sk .sk-foot i { width: calc(var(--mm) * 70); height: calc(var(--mm) * 1.2); }

/* --- One silhouette per style ---------------------------------------------- */

/* Minimal: no box anywhere. A hairline under the band and under the column
   heads, and a ruled grand total in the accent. */
.sk-minimal .sk-band { border-bottom: calc(var(--mm) * 0.25) solid var(--faint); }
.sk-minimal .sk-display { font-size: calc(var(--mm) * var(--type) * 2.4); font-weight: 300; letter-spacing: 0.06em; }
.sk-minimal .sk-tr > span:first-child { padding-left: 0; }
.sk-minimal .sk-tr > span:last-child { padding-right: 0; }
.sk-minimal .sk-grand { border-radius: 0; padding-left: 0; padding-right: 0; border-top: calc(var(--mm) * 0.35) solid var(--accent); }

/* Classic: the framed table under a filled head, banded rows, a filled total,
   and an accent rule closing the band. Letterspaced capitals for the title. */
.sk-classic .sk-band { border-bottom: calc(var(--mm) * 0.3) solid var(--accent); }
.sk-classic .sk-display { font-size: calc(var(--mm) * var(--type) * 2.2); letter-spacing: 0.14em; text-transform: uppercase; }
.sk-classic .sk-label { opacity: 1; box-shadow: 0 calc(var(--mm) * 1.3) 0 calc(var(--mm) * -0.4) var(--pale); }
.sk-classic .sk-items { border: calc(var(--mm) * 0.3) solid #d3dbe3; border-radius: calc(var(--mm) * 2.4); overflow: hidden; }
.sk-classic .sk-thead { background: var(--accent); }
.sk-classic .sk-thead i { background: #ffffff; }
.sk-classic .sk-tr:nth-child(odd):not(.sk-thead) { background: #f6f8fa; }
.sk-classic .sk-tr > span + span { border-left: calc(var(--mm) * 0.2) solid var(--faint); }
.sk-classic .sk-grand { background: var(--accent); }
.sk-classic .sk-grand i { background: #ffffff; }

/* Modern: the whole header is one full-bleed accent band, the column heads a
   floating pill, the total a pill to match. */
.sk-modern .sk-band { background: var(--accent); }
.sk-modern .sk-h i { background: #ffffff; opacity: 0.55; }
.sk-modern .sk-display { color: #ffffff; font-size: calc(var(--mm) * var(--type) * 2.6); font-weight: 800; letter-spacing: -0.02em; }
.sk-modern .sk-h .sk-name,
.sk-modern .sk-h .sk-v { opacity: 1; }
.sk-modern .sk-mark { opacity: 0.3; }
.sk-modern .sk-body { padding: 0 calc(var(--mm) * 12); }
.sk-modern .sk-foot { left: calc(var(--mm) * 12); right: calc(var(--mm) * 12); }
.sk-modern .sk-thead { background: var(--accent); border-radius: calc(var(--mm) * 2); border-bottom-color: transparent; }
.sk-modern .sk-thead i { background: #ffffff; }
.sk-modern .sk-grand { background: var(--accent); border-radius: calc(var(--mm) * 2); }
.sk-modern .sk-grand i { background: #ffffff; }

/* Compact: everything closer together under an accent rule, in a small
   pale-headed frame. */
.sk-compact .sk-band { border-bottom: calc(var(--mm) * 0.35) solid var(--accent); }
.sk-compact .sk-display { font-size: calc(var(--mm) * var(--type) * 1.7); letter-spacing: 0.04em; }
.sk-compact .sk-party { gap: calc(var(--mm) * 2); }
.sk-compact .sk-meta { gap: calc(var(--mm) * 2.1); }
.sk-compact .sk-items { border: calc(var(--mm) * 0.25) solid #dde3e9; border-radius: calc(var(--mm) * 1.4); margin-top: calc(var(--mm) * 2.5); }
.sk-compact .sk-thead { background: #f2f5f8; border-bottom-color: #dde3e9; }
.sk-compact .sk-tr > span { padding-top: calc(var(--mm) * 1.5); padding-bottom: calc(var(--mm) * 1.5); }
.sk-compact .sk-trow { padding: calc(var(--mm) * 1.1) 0; }
.sk-compact .sk-grand { border-radius: 0; border-top: calc(var(--mm) * 0.3) solid var(--accent); padding: calc(var(--mm) * 1.6) 0; }
.sk-compact .sk-text,
.sk-compact .sk-bank,
.sk-compact .sk-compliance { margin-top: calc(var(--mm) * 3); }

/* Elegant: centred and ruled, never boxed. A widely spaced title over a rule,
   the details between the parties, the table held by two accent hairlines and
   the total closed with a double rule. */
.sk-elegant .sk-title { border-bottom: calc(var(--mm) * 0.25) solid #e3ddd2; padding-bottom: calc(var(--mm) * 3); }
.sk-elegant .sk-display { font-size: calc(var(--mm) * var(--type) * 2.2); font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase; }
.sk-elegant .sk-meta { width: calc(var(--mm) * 46); }
.sk-elegant .sk-label { opacity: 0.55; }
.sk-elegant .sk-name { background: var(--ink); opacity: 0.8; }
.sk-elegant .sk-thead { border-top: calc(var(--mm) * 0.3) solid var(--accent); }
.sk-elegant .sk-tr > span:first-child { padding-left: 0; }
.sk-elegant .sk-tr > span:last-child { padding-right: 0; }
.sk-elegant .sk-items .sk-tr:last-child { border-bottom-color: var(--accent); }
.sk-elegant .sk-grand { border-radius: 0; padding-left: 0; padding-right: 0; border-top: calc(var(--mm) * 0.3) solid var(--accent); border-bottom: calc(var(--mm) * 1) double var(--accent); }
.sk-elegant .sk-grand i { height: calc(var(--mm) * 2); opacity: 0.85; }

/* Bold: a display title on its accent bar, a solid head, a solid total, and a
   heavy rule over the footer. */
.sk-bold .sk-display { font-size: calc(var(--mm) * var(--type) * 3.1); font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; }
.sk-bold .sk-display::after { content: ""; display: block; width: calc(var(--mm) * 34); height: calc(var(--mm) * 1.6); margin-top: calc(var(--mm) * 3); background: var(--accent); }
.sk-bold .sk-subject { margin-top: calc(var(--mm) * 3); background: var(--ink); }
.sk-bold .sk-label { opacity: 1; }
.sk-bold .sk-thead { background: var(--accent); border-bottom-color: transparent; }
.sk-bold .sk-thead > span { padding-top: calc(var(--mm) * 2.8); padding-bottom: calc(var(--mm) * 2.8); }
.sk-bold .sk-thead i { background: #ffffff; opacity: 1; }
.sk-bold .sk-grand { background: var(--accent); border-radius: 0; padding: calc(var(--mm) * 3.4) calc(var(--mm) * 3); }
.sk-bold .sk-grand i { background: #ffffff; height: calc(var(--mm) * 3.2); }
.sk-bold .sk-foot { border-top: calc(var(--mm) * 1) solid var(--accent); }

/* Ledger: a short header, and the one table with a rule between every column,
   framed in the accent, rows banded; the totals framed below it. */
.sk-ledger .sk-display { font-size: calc(var(--mm) * var(--type) * 1.9); letter-spacing: 0.12em; text-transform: uppercase; }
.sk-ledger .sk-meta { width: calc(var(--mm) * 46); }
.sk-ledger .sk-items { border: calc(var(--mm) * 0.35) solid var(--accent); }
.sk-ledger .sk-thead { border-bottom: calc(var(--mm) * 0.35) solid var(--accent); }
.sk-ledger .sk-tr { border-bottom-color: #e2e6eb; }
.sk-ledger .sk-tr > span + span { border-left: calc(var(--mm) * 0.25) solid #d8dde3; }
.sk-ledger .sk-tr:nth-child(odd):not(.sk-thead) { background: #f6f8fa; }
.sk-ledger .sk-totals { border: calc(var(--mm) * 0.35) solid var(--accent); }
.sk-ledger .sk-trow { padding-left: calc(var(--mm) * 2.4); padding-right: calc(var(--mm) * 2.4); border-bottom: calc(var(--mm) * 0.25) solid #e2e6eb; }
.sk-ledger .sk-grand { background: var(--accent); border-radius: 0; border-bottom: none; }
.sk-ledger .sk-grand i { background: #ffffff; }
.sk-ledger .sk-foot { border-top: calc(var(--mm) * 0.35) solid var(--accent); }

/* Slate: soft grey fills with rounded corners and no lines at all - the column
   heads, the banded rows, the totals panel and the payment panel. */
.sk-slate .sk-display { font-weight: 650; letter-spacing: -0.01em; }
.sk-slate .sk-label { background: #6b7683; opacity: 0.6; }
.sk-slate .sk-name { background: var(--accent); }
.sk-slate .sk-tr { border-bottom: none; }
.sk-slate .sk-thead { background: var(--tint); border-radius: calc(var(--mm) * 1.4); }
.sk-slate .sk-thead i { background: #6b7683; opacity: 0.6; }
.sk-slate .sk-tr:nth-child(odd):not(.sk-thead) { background: #f7f9fb; }
.sk-slate .sk-grand { background: var(--tint); border-radius: calc(var(--mm) * 1.4); padding-top: calc(var(--mm) * 3); padding-bottom: calc(var(--mm) * 3); }
.sk-slate .sk-bank { background: #f7f9fb; border-radius: calc(var(--mm) * 1.6); padding: calc(var(--mm) * 3.4) calc(var(--mm) * 3.6); }
.sk-slate .sk-heading { background: #6b7683; opacity: 0.6; }
.sk-slate .sk-foot { border-top-color: transparent; }

/* Outline: the opposite of Slate - every group in an accent hairline box, and
   no fill anywhere. Parties, table, totals and payment details. */
.sk-outline .sk-display { font-size: calc(var(--mm) * var(--type) * 2); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.sk-outline .sk-meta { width: calc(var(--mm) * 46); }
.sk-outline .sk-seller,
.sk-outline .sk-client { border: calc(var(--mm) * 0.3) solid var(--accent); padding: calc(var(--mm) * 3) calc(var(--mm) * 3.2); }
.sk-outline .sk-label { opacity: 1; }
.sk-outline .sk-items { border: calc(var(--mm) * 0.3) solid var(--accent); }
.sk-outline .sk-thead { border-bottom: calc(var(--mm) * 0.3) solid var(--accent); }
.sk-outline .sk-totals { border: calc(var(--mm) * 0.3) solid var(--accent); }
.sk-outline .sk-trow { padding-left: calc(var(--mm) * 2.6); padding-right: calc(var(--mm) * 2.6); }
.sk-outline .sk-grand { border-radius: 0; border-top: calc(var(--mm) * 0.3) solid var(--accent); }
.sk-outline .sk-bank { border: calc(var(--mm) * 0.3) solid var(--accent); padding: calc(var(--mm) * 3) calc(var(--mm) * 3.2); }
.sk-outline .sk-foot { border-top-color: var(--accent); }

/* Airy: thin, widely spaced and mostly paper. The lightest marks of the ten, a
   light title in spaced capitals, no rule between rows, and a large light total. */
.sk-airy .sk-display { font-size: calc(var(--mm) * var(--type) * 1.7); font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; }
.sk-airy .sk-subject { margin-top: calc(var(--mm) * 3.4); }
.sk-airy .sk-meta { width: calc(var(--mm) * 44); gap: calc(var(--mm) * 3.4); }
.sk-airy .sk-label { background: #7a8592; opacity: 0.5; }
.sk-airy .sk-name { background: var(--accent); height: calc(var(--mm) * 1.9); }
.sk-airy .sk-party { gap: calc(var(--mm) * 3.2); }
.sk-airy .sk-v,
.sk-airy .sk-desc,
.sk-airy .sk-amount { opacity: 0.75; }
.sk-airy .sk-tr { border-bottom: none; }
.sk-airy .sk-thead { border-bottom: calc(var(--mm) * 0.25) solid #d9dee4; }
.sk-airy .sk-thead i { background: #7a8592; opacity: 0.5; }
.sk-airy .sk-tr > span { padding-top: calc(var(--mm) * 3.2); padding-bottom: calc(var(--mm) * 3.2); }
.sk-airy .sk-tr > span:first-child { padding-left: 0; }
.sk-airy .sk-tr > span:last-child { padding-right: 0; }
.sk-airy .sk-grand { border-radius: 0; padding-left: 0; padding-right: 0; border-top: calc(var(--mm) * 0.25) solid #d9dee4; }
.sk-airy .sk-grand i { height: calc(var(--mm) * 3.4); opacity: 0.75; }
.sk-airy .sk-heading { background: #7a8592; opacity: 0.5; }
.sk-airy .sk-bank-rows { gap: calc(var(--mm) * 3.2); }