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

   The most characterful of the three. It takes its palette straight from the
   company mark: the CMYK plume becomes a thin band across the head of the sheet
   and a coloured edge on the blocks that matter.

   Still a document, not a poster — the colour lives in rules, one header band
   and one totals bar. Body copy stays black on white so it photocopies, faxes
   and prints on a mono office machine without turning to mud.

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

.doc-theme-spectrum {
  --sp-ink: #1a1d21;
  --sp-soft: #5c6670;
  --sp-hair: #dfe4e8;
  --sp-slate: #232a31;
  --sp-band: #f4f7f9;

  /* straight off the company mark */
  --sp-cyan: #29abe2;
  --sp-magenta: #ec008c;
  --sp-yellow: #ffd400;
  --sp-green: #6abd45;
  --sp-red: #ed1c24;

  --sp-title: calc(22pt * var(--doc-fs));
  --sp-body:  calc(9.5pt * var(--doc-fs));
  --sp-cell:  calc(9.2pt * var(--doc-fs));
  --sp-sub:   calc(8.4pt * var(--doc-fs));
  --sp-label: calc(7.2pt * var(--doc-fs));

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

/* ------------------------------------------------------------------ header */
.doc-theme-spectrum .doc-head {
  align-items: center; padding-bottom: 2.6mm; border: 0;
  position: relative;
}
/* the plume, unrolled */
.doc-theme-spectrum .doc-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.4mm;
  background: linear-gradient(90deg,
    var(--sp-cyan) 0 20%, var(--sp-magenta) 20% 40%, var(--sp-yellow) 40% 60%,
    var(--sp-green) 60% 80%, var(--sp-red) 80% 100%);
  border-radius: .7mm;
}
.doc-theme-spectrum .doc-logo { height: 14mm; }
.doc-theme-spectrum .doc-org { font-size: calc(7.6pt * var(--doc-fs)); color: var(--sp-soft); line-height: 1.45; }
.doc-theme-spectrum .doc-org-name {
  font-size: calc(10.5pt * var(--doc-fs)); font-weight: 700; color: var(--sp-ink); letter-spacing: .03em;
}

.doc-theme-spectrum .doc-title {
  margin: 4mm 0 3mm; text-align: left; border: 0; padding: 0;
  font-size: var(--sp-title); font-weight: 700; letter-spacing: .1em;
  color: var(--sp-slate);
}

/* -------------------------------------------------------------- meta block */
.doc-theme-spectrum .doc-meta {
  gap: 0 10mm; margin-bottom: 2.5mm;
  background: var(--sp-band); border-radius: 2mm; padding: 3mm 3.5mm;
}
.doc-theme-spectrum .doc-meta-row {
  display: flex; flex-direction: row; align-items: baseline; gap: 1.6mm;
  border: 0; padding: 0 0 1.1mm;
}
.doc-theme-spectrum .doc-meta-key {
  min-width: 22mm; font-size: var(--sp-label); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sp-cyan); line-height: 1.3;
}
.doc-theme-spectrum .doc-meta-val { font-size: var(--sp-body); color: var(--sp-ink); line-height: 1.25; }
.doc-theme-spectrum .doc-subject {
  border: 0; border-top: .5pt solid var(--sp-hair);
  margin-top: 1mm; padding-top: 1.6mm;
}
.doc-theme-spectrum .doc-subject .doc-meta-key { color: var(--sp-soft); }
.doc-theme-spectrum .doc-fixed { font-weight: 700; }

/* ------------------------------------------------------------------ table */
.doc-theme-spectrum .doc-table { margin-top: 2mm; border-radius: 2mm; overflow: hidden; }
.doc-theme-spectrum .doc-table th {
  background: var(--sp-slate); color: #fff; border: 0;
  padding: 2mm 1.5mm;
  font-size: var(--sp-label); font-weight: 700; letter-spacing: .07em;
  text-align: left; line-height: 1.15;
}
.doc-theme-spectrum .doc-table th.doc-th-num { text-align: right; }
.doc-theme-spectrum .doc-table th.doc-th-ctr { text-align: center; }
.doc-theme-spectrum .doc-table td {
  border: 0; border-bottom: .5pt solid var(--sp-hair);
  padding: 1.6mm 1.5mm; font-size: var(--sp-cell); line-height: 1.3;
}
/* a whisper of banding so the eye tracks across wide rows */
.doc-theme-spectrum .doc-row-alt td { background: #fafcfd; }

.doc-theme-spectrum .doc-row-section td {
  background: #eaf6fc; color: #0d6a94;
  border-bottom: 0; border-left: 1.2mm solid var(--sp-cyan);
  font-size: calc(7.6pt * var(--doc-fs)); font-weight: 700; letter-spacing: .1em;
  padding: 1.7mm 1.5mm;
}
.doc-theme-spectrum .doc-row-note td {
  color: var(--sp-soft); font-style: italic; font-size: var(--sp-sub);
  padding-top: 0; border-bottom: .5pt solid var(--sp-hair);
}

/* ----------------------------------------------------------------- totals */
.doc-theme-spectrum .doc-totals { margin-top: 3mm; }
.doc-theme-spectrum .doc-totals table { min-width: 94mm; border-radius: 2mm; overflow: hidden; }
.doc-theme-spectrum .doc-totals td {
  border: 0; border-bottom: .5pt solid var(--sp-hair);
  padding: 1.4mm 2.4mm; font-size: var(--sp-cell);
}
.doc-theme-spectrum .doc-totals .k {
  background: transparent; font-weight: 400; color: var(--sp-soft);
  text-transform: uppercase; font-size: var(--sp-label); letter-spacing: .09em;
}
.doc-theme-spectrum .doc-totals .cur { color: var(--sp-soft); font-size: var(--sp-label); }
.doc-theme-spectrum .doc-totals .grand td {
  background: var(--sp-slate); color: #fff; border-bottom: 0;
  font-size: calc(11.5pt * var(--doc-fs)); font-weight: 700; padding: 2.2mm 2.4mm;
}
.doc-theme-spectrum .doc-totals .grand td:first-child {
  border-left: 1.4mm solid var(--sp-magenta);
}
.doc-theme-spectrum .doc-totals .grand .cur { color: #c9d3db; font-size: calc(8pt * var(--doc-fs)); }

/* ------------------------------------------------------------------ words */
.doc-theme-spectrum .doc-words {
  margin-top: 2.4mm; padding: 1.8mm 2.6mm;
  background: #fffbe6; border-left: 1.4mm solid var(--sp-yellow); border-radius: 1.2mm;
  font-size: var(--sp-sub);
}
.doc-theme-spectrum .doc-words b { text-transform: none; font-weight: 700; }

/* ------------------------------------------------------------------ terms */
.doc-theme-spectrum .doc-terms {
  margin-top: 3mm; padding: 2.4mm 3mm; border: 0; border-radius: 2mm;
  background: var(--sp-band); color: var(--sp-soft);
  font-size: calc(7.6pt * var(--doc-fs));
}
.doc-theme-spectrum .doc-terms h4 {
  font-size: var(--sp-label); letter-spacing: .1em; color: var(--sp-green); margin-bottom: 1.4mm;
}
.doc-theme-spectrum .doc-terms ol { columns: 2; column-gap: 8mm; padding-left: 4mm; }
.doc-theme-spectrum .doc-terms li { margin-bottom: .4mm; break-inside: avoid; line-height: 1.3; }

/* ------------------------------------------------------------- signatures */
.doc-theme-spectrum .doc-sign { margin-top: 4mm; gap: 10mm; font-size: var(--sp-sub); }
.doc-theme-spectrum .doc-sign-box {
  border: .5pt solid var(--sp-hair); border-top: 1mm solid var(--sp-cyan);
  border-radius: 2mm; padding: 2.4mm 3mm;
}
.doc-theme-spectrum .doc-sign-box:last-child { border-top-color: var(--sp-magenta); }
.doc-theme-spectrum .doc-sign-box b {
  font-size: var(--sp-label); letter-spacing: .09em; text-transform: uppercase;
  color: var(--sp-soft); font-weight: 700;
}
.doc-theme-spectrum .doc-sign-line {
  margin-top: 7mm; border-top: .6pt solid var(--sp-ink);
  padding-top: 1mm; color: var(--sp-soft); font-size: var(--sp-label);
}

/* ----------------------------------------------------------------- footer */
.doc-theme-spectrum .doc-foot {
  margin-top: 3mm; padding-top: 1.6mm; border: 0;
  border-top: 2pt solid transparent;
  border-image: linear-gradient(90deg,
    var(--sp-cyan), var(--sp-magenta), var(--sp-yellow), var(--sp-green), var(--sp-red)) 1;
  color: var(--sp-soft); font-size: var(--sp-label); letter-spacing: .05em;
}

.doc-theme-spectrum .doc-draft-mark {
  font-size: calc(54pt * var(--doc-fs)); color: rgba(236,0,140,.08); letter-spacing: .3em;
}

/* editing affordances follow the theme */
.doc-theme-spectrum [contenteditable]:focus { outline-color: var(--sp-cyan); background: #eaf6fc; }
.doc-theme-spectrum .doc-pick:hover { background: #eaf6fc; box-shadow: 0 1px 0 var(--sp-cyan); }
.doc-theme-spectrum .doc-colgrip:hover::after,
.doc-theme-spectrum .doc-colgrip.is-dragging::after { background: var(--sp-cyan); }
.doc-theme-spectrum .doc-add { color: #0d6a94; }
.doc-theme-spectrum .doc-add:hover { background: #eaf6fc; border-color: var(--sp-cyan); }

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