/* ============================================================================
   Document layout — "Signature".

   The company's own mark leads the page: the ribbon mark with AN Advertising
   and its slogan on the left, the document's name set large and bold on the
   right in the document's own face, and the mark's six colours drawn once
   beneath them. Below that the page is quiet - charcoal type on light blue
   rules - and the brand blue is spent where the eye has to land: the column
   heads, the sections, the amount in words and the amount payable.

   Colour is carried by BORDERS wherever a shade would carry meaning alone. A
   browser whose print settings drop background shading still prints every
   rule, so the headings, the sections and the total stay marked, and no text
   is ever set in white on a shade that might not print.

   Every size multiplies --doc-fs so the print fitter can pull a document onto
   one page.
   ========================================================================== */

.doc-theme-signature {
  --sg-ink: #1b1e22;
  --sg-soft: #5d646c;
  --sg-hair: #e0e5ea;
  --sg-rule: #c6ced6;
  --sg-grid: #d5e4ee;
  --sg-blue: #0b7db3;
  --sg-blue-deep: #06597f;
  --sg-tint: #eaf5fb;
  --sg-shade: #f6f9fb;
  --sg-loc: #c4e0f0;
  --sg-focus: #eef7fc;
  --sg-mark: rgba(11, 125, 179, .07);
  --sg-magenta: #e2348f;

  /* The logo's name only. The face is self-hosted by the app (next/font) under
     a name of its own, given here as --font-brand; the print window is handed
     the same rules. */
  --sg-face: var(--font-brand, "Montserrat Alternates"), "Segoe UI", Arial, sans-serif;
  --sg-title: calc(34pt * var(--doc-fs));
  --sg-body: calc(9.6pt * var(--doc-fs));
  --sg-cell: calc(9.3pt * var(--doc-fs));
  --sg-sub: calc(8.6pt * var(--doc-fs));
  --sg-label: calc(7.4pt * var(--doc-fs));

  color: var(--sg-ink);
  font-size: var(--sg-body);
}

/* [USER 25 Oct 2026] A quotation is told from a tax invoice at a glance: the
   same layout, with every blue - the heads, the sections, the amount in words,
   the amount payable - in the mark's red. Invoices keep the blue. */
.doc-theme-signature.doc-kind-quotation {
  /* The shades a step lighter, the text a step darker (user, 25 Oct 2026). */
  --sg-hair: #f1ebeb;
  --sg-rule: #e4d9d9;
  --sg-grid: #f4e4e4;
  --sg-blue: #d54a50;
  --sg-blue-deep: #680e12;
  --sg-tint: #fdf4f4;
  --sg-shade: #fefbfb;
  --sg-loc: #f8e1e2;
  --sg-focus: #fef6f6;
  --sg-mark: rgba(213, 74, 80, .055);
}

/* ------------------------------------------------------------------ header */
/* The row is exactly as tall as the mark. The title is laid over it rather
   than in it, so the title's size never changes the header's height. */
.doc-theme-signature .doc-brand-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 8mm;
}
.doc-theme-signature .doc-brand { display: flex; align-items: center; gap: 2.6mm; }
/* Width given, not left to the image: the room beside the mark is measured for
   the title, and an image still loading has no width to measure. */
.doc-theme-signature .doc-brand-mark {
  display: block; height: calc(17mm * var(--doc-fs)); width: calc(14.75mm * var(--doc-fs));
}
.doc-theme-signature .doc-brand-words { display: flex; flex-direction: column; }
.doc-theme-signature .doc-brand-name {
  font-family: var(--sg-face); font-weight: 600;
  font-size: calc(16.5pt * var(--doc-fs)); line-height: 1; letter-spacing: .005em;
  color: #111111; white-space: nowrap;
}
.doc-theme-signature .doc-brand-slogan {
  display: block; width: calc(40mm * var(--doc-fs)); height: auto; margin-top: 1.2mm;
}
/* The document's name, in the document's own face: bold, and the largest type
   on the page.

   Its letters stand on a line fixed 5.06mm above the foot of the header, and
   a larger size grows them UPWARDS only. The box is positioned by its bottom
   edge, and that edge is exactly the baseline: the box's own strut has no size
   (font-size 0) and the name's line box has no height (line-height 0), so the
   line ends where the letters stand, whatever face or size they are set in.

   Always one line. A name too long for the room beside the mark is set smaller
   by --sg-title-fit, which the sheet measures in the face actually used. */
.doc-theme-signature .doc-brand-title {
  position: absolute; right: 0; bottom: calc(5.06mm * var(--doc-fs));
  font-size: 0; line-height: 0; white-space: nowrap;
}
.doc-theme-signature .doc-brand-title > span {
  font-size: calc(var(--sg-title) * var(--sg-title-fit, 1)); line-height: 0;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sg-ink);
}

/* The mark's six colours, once, under the header - as rules, so they print. */
.doc-theme-signature .doc-brand-strip { display: flex; margin: 2.6mm 0 1.1mm; }
.doc-theme-signature .doc-brand-strip span { flex: 1; border-top: 2.2pt solid; }
.doc-theme-signature .doc-brand-strip span:nth-child(1) { border-color: #3cb3e5; }
.doc-theme-signature .doc-brand-strip span:nth-child(2) { border-color: #e5348f; }
.doc-theme-signature .doc-brand-strip span:nth-child(3) { border-color: #f2d91f; }
.doc-theme-signature .doc-brand-strip span:nth-child(4) { border-color: #e1262c; }
.doc-theme-signature .doc-brand-strip span:nth-child(5) { border-color: #63af4b; }
.doc-theme-signature .doc-brand-strip span:nth-child(6) { border-color: #262324; }

/* The company's particulars on one line, spread across the page. */
.doc-theme-signature .doc-brand-org {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2mm; white-space: nowrap;
  font-size: calc(6.9pt * var(--doc-fs)); line-height: 1.3; color: var(--sg-soft);
}
.doc-theme-signature .doc-brand-org > * + *::before {
  content: "·"; margin-right: 1.4mm; color: var(--sg-rule); font-weight: 400;
}
.doc-theme-signature .doc-brand-org b { font-weight: 700; color: var(--sg-ink); }

/* -------------------------------------------------------------- meta block */
.doc-theme-signature .doc-meta { gap: 0 8mm; margin-bottom: 1mm; }
.doc-theme-signature .doc-meta-row {
  display: flex; flex-direction: row; align-items: baseline; gap: 2mm;
  border: 0; padding: 0 0 .35mm; font-size: var(--sg-body);
}
.doc-theme-signature .doc-meta-key {
  min-width: 22mm; font-size: var(--sg-label); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sg-blue-deep); line-height: 1.22;
}
.doc-theme-signature .doc-meta-key::after { content: none; }
.doc-theme-signature .doc-meta-val { color: var(--sg-ink); line-height: 1.22; }
.doc-theme-signature .doc-fixed { font-weight: 700; color: var(--sg-ink); }
.doc-theme-signature .doc-subject {
  margin: .4mm 0 1.6mm; padding: 1mm 0;
  border: 0; border-top: .5pt solid var(--sg-hair); border-bottom: .5pt solid var(--sg-hair);
}
.doc-theme-signature .doc-subject .doc-meta-val {
  font-size: calc(10pt * var(--doc-fs)); font-weight: 700;
}
.doc-theme-signature .doc-statement {
  border-left: 2pt solid var(--sg-blue); padding-left: 3mm; color: var(--sg-ink);
}

/* ------------------------------------------------------------------ table */
.doc-theme-signature .doc-table { margin-top: 1mm; border: .5pt solid var(--sg-grid); }
.doc-theme-signature .doc-table th {
  background: var(--sg-tint); color: var(--sg-blue-deep);
  border: .5pt solid var(--sg-grid);
  border-top: .5pt solid var(--sg-blue); border-bottom: 1.4pt solid var(--sg-blue);
  padding: 2.1mm 1.8mm; font-size: var(--sg-label); font-weight: 700;
  letter-spacing: .09em; text-align: left; line-height: 1.15;
}
.doc-theme-signature .doc-table th.doc-th-num { text-align: right; }
.doc-theme-signature .doc-table th.doc-th-ctr { text-align: center; }
/* a light blue grid, so a figure can be followed across a wide row */
.doc-theme-signature .doc-table td {
  border: .5pt solid var(--sg-grid);
  padding: calc(1.8mm * var(--doc-row-k, 1)) 1.8mm; font-size: calc(var(--doc-line-pt, 9.3) * 1pt * var(--doc-fs)); line-height: 1.34;
}
/* alternate shading, on the class the engine sets for every other priced line */
.doc-theme-signature .doc-row-alt td { background: var(--sg-shade); }

.doc-theme-signature .doc-row-section td {
  background: var(--sg-tint); color: var(--sg-blue-deep);
  border: .5pt solid var(--sg-grid); border-left: 2.2pt solid var(--sg-blue);
  padding: 2mm 1.8mm 1.6mm;
  font-size: calc(var(--doc-sub-pt, 9.8) * 1pt * var(--doc-fs)); font-weight: 700; letter-spacing: .11em;
}
.doc-theme-signature .doc-row-section td.doc-sec-gap {
  background: transparent; border-left: .5pt solid var(--sg-grid);
}
.doc-theme-signature .doc-row-location td {
  background: var(--sg-loc); color: var(--sg-blue-deep);
  border: .5pt solid var(--sg-grid); border-left: 3.2pt solid var(--sg-blue-deep);
  padding: 2.2mm 1.8mm 1.8mm;
  font-size: calc(var(--doc-loc-pt, 10.3) * 1pt * var(--doc-fs)); font-weight: 700; letter-spacing: .13em;
}
/* A note is set a little smaller than the lines around it, whatever their size. */
.doc-theme-signature .doc-row-note td {
  color: var(--sg-soft); font-style: italic; font-size: calc((var(--doc-line-pt, 9.3) - .7) * 1pt * var(--doc-fs)); padding-top: .6mm;
}
/* [USER 10 Nov 2026] A combined invoice's quotation heading (0372): the note line's size, upright, soft, a hairline above. */
.doc-theme-signature .doc-row-quotation td {
  color: var(--sg-soft); font-size: calc((var(--doc-line-pt, 9.3) - .7) * 1pt * var(--doc-fs)); letter-spacing: .02em;
  padding-top: .6mm; border-top: .5pt solid var(--sg-hair);
}

/* ----------------------------------------------------------------- totals */
.doc-theme-signature .doc-totals { margin-top: 3mm; }
.doc-theme-signature .doc-totals table { min-width: 90mm; border: 0; }
.doc-theme-signature .doc-totals td {
  border: 0; border-bottom: .5pt solid var(--sg-hair);
  padding: 1.3mm 2.2mm; font-size: var(--sg-cell);
}
.doc-theme-signature .doc-totals .k {
  background: transparent; color: var(--sg-soft); font-weight: 700;
  text-transform: uppercase; font-size: var(--sg-label); letter-spacing: .09em;
}
.doc-theme-signature .doc-totals .cur { color: var(--sg-soft); font-size: var(--sg-label); }
/* the amount payable: tinted, ruled in blue above and below, set in ink */
.doc-theme-signature .doc-totals .grand td {
  background: var(--sg-tint); color: var(--sg-ink);
  border: 0; border-top: 1.4pt solid var(--sg-blue); border-bottom: 1.4pt solid var(--sg-blue);
  padding: 1.9mm 2.2mm; font-size: calc(12pt * var(--doc-fs)); font-weight: 700;
}
.doc-theme-signature .doc-totals .grand .k { color: var(--sg-blue-deep); }
.doc-theme-signature .doc-totals .grand .cur { color: var(--sg-ink); font-size: calc(8.4pt * var(--doc-fs)); }

/* ------------------------------------------------------------------ words */
/* highlighted as the Sleek layout does it: a tinted band with a rule down its edge */
.doc-theme-signature .doc-words {
  margin-top: 2.1mm; padding: 1.3mm 2.4mm;
  background: var(--sg-tint); border-left: 1.6pt solid var(--sg-blue);
  font-size: var(--sg-sub); color: var(--sg-ink);
}
.doc-theme-signature .doc-words b { text-transform: none; font-weight: 700; color: var(--sg-blue-deep); }

/* ------------------------------------------------------------------ terms */
.doc-theme-signature .doc-terms {
  margin-top: 3.2mm; font-size: calc(7.8pt * var(--doc-fs)); color: var(--sg-soft);
}
.doc-theme-signature .doc-terms h4 {
  font-size: var(--sg-label); letter-spacing: .11em; color: var(--sg-ink); margin-bottom: 1.2mm;
}
.doc-theme-signature .doc-terms ol { columns: 2; column-gap: 8mm; padding-left: 4mm; }
.doc-theme-signature .doc-terms li { margin-bottom: .35mm; break-inside: avoid; line-height: 1.32; }

/* ------------------------------------------------------------- signatures */
.doc-theme-signature .doc-sign { margin-top: 4.8mm; column-gap: 18mm; font-size: var(--sg-sub); }
.doc-theme-signature .doc-sign-box b {
  font-size: var(--sg-label); letter-spacing: .09em; text-transform: uppercase;
  color: var(--sg-ink); font-weight: 700;
}
.doc-theme-signature .doc-sign-line {
  margin-top: 13.5mm; border-top: .7pt solid var(--sg-ink);
  padding-top: 1.1mm; color: var(--sg-soft); font-size: var(--sg-label);
}

/* ----------------------------------------------------------------- footer */
.doc-theme-signature .doc-foot {
  margin-top: 3mm; padding-top: 1.4mm; border: 0; border-top: .5pt solid var(--sg-rule);
  color: var(--sg-soft); font-size: var(--sg-label); letter-spacing: .03em;
}

.doc-theme-signature .doc-draft-mark {
  font-size: calc(54pt * var(--doc-fs)); color: var(--sg-mark); letter-spacing: .3em;
}

/* editing affordances follow the theme */
.doc-theme-signature [contenteditable]:focus { outline-color: var(--sg-blue); background: var(--sg-focus); }
.doc-theme-signature .doc-pick:hover { background: var(--sg-focus); box-shadow: 0 1px 0 var(--sg-blue); }
.doc-theme-signature .doc-colgrip:hover::after,
.doc-theme-signature .doc-colgrip.is-dragging::after { background: var(--sg-magenta); }
.doc-theme-signature .doc-add { color: var(--sg-blue-deep); }
.doc-theme-signature .doc-add:hover { background: var(--sg-focus); border-color: var(--sg-blue); }

/* page furniture in the printed, paginated document */
.doc-theme-signature .page-foot {
  border-top: .5pt solid var(--sg-hair) !important;
  color: var(--sg-soft); font-size: var(--sg-label);
}
.doc-theme-signature .page-cont { color: var(--sg-soft); font-size: var(--sg-label); }