@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,500;10..48,600;10..48,700&family=Hanken+Grotesk:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=DM+Sans:wght@400;500;600;700&display=swap');
/* -- The Ledger: paid-document design system --------------------------------
   Compiled from DESIGN-SPEC-documents.md. Loaded AFTER theme.css so it owns the
   document surface; the runtime brand-colour override (ns-brand-style) is injected
   later still, so a customer's own colour continues to win.
   Dials: DESIGN_VARIANCE 3 - MOTION_INTENSITY 1 - VISUAL_DENSITY 4
   ------------------------------------------------------------------------- */

:root {
  --doc-ink:     #102d31;
  --doc-accent:  #153f45;
  --doc-gold:    #b9d8cf;
  --doc-paper:   #f6fbf9;
  --doc-ground:  #e4f0ec;
  --doc-muted:   #576a6b;
  --doc-rule:    color-mix(in srgb, var(--doc-accent) 22%, transparent);
  --doc-tint:    color-mix(in srgb, var(--doc-accent) 5%, transparent);
  --doc-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --doc-body:    'Hanken Grotesk', system-ui, sans-serif;
}

/* -- The sheet -------------------------------------------------------------- */
body:has(.doc-wrap) { background: var(--doc-ground) !important; }

.doc-wrap {
  background: var(--doc-paper);
  color: var(--doc-ink);
  font-family: var(--doc-body) !important;
  max-width: 58rem;
  margin: 2.5rem auto 4rem;
  padding: 3.25rem 3.5rem 4rem !important;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(28,25,22,.09), 0 24px 48px -24px rgba(28,25,22,.22);
  position: relative;
}
.doc-wrap::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--doc-accent), var(--doc-gold));
  border-radius: 2px 0 0 2px;
}

/* -- Masthead --------------------------------------------------------------- */
.doc-header {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--doc-rule) !important;
  border-radius: 0 !important;
  padding: 0 0 1.15rem !important;
  margin: 0 0 2.25rem !important;
  position: relative;
}
.doc-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--doc-rule); opacity: .55;
}
.doc-header h1 {
  font-family: var(--doc-display) !important;
  font-size: clamp(1.6rem, 3.2vw, 2.1rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--doc-ink) !important;
  margin: 0 0 0.5rem !important;
}
.doc-meta {
  font-family: var(--doc-body);
  font-size: 0.74rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--doc-muted) !important;
  gap: 1.25rem !important;
}
.doc-meta strong { color: var(--doc-ink); font-weight: 600; }
#ns-brand-logo-el { margin-bottom: 0.9rem !important; }

/* -- Sections: the margin numeral (signature move) -------------------------- */
.doc-content { counter-reset: docsec; }
.doc-content h2 {
  font-family: var(--doc-display) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--doc-accent) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 2.4rem 0 0.75rem !important;
  padding-left: 3.7rem;
  position: relative;
  counter-increment: docsec;
}
.doc-content h2::before {
  content: counter(docsec, decimal-leading-zero);
  position: absolute; left: 0; top: -0.62rem;
  font-family: var(--doc-display);
  font-size: 2.2rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--doc-accent) 12%, transparent);
  pointer-events: none; user-select: none;
}
.doc-content h2::after {
  content: ''; position: absolute; left: 3.7rem; bottom: -0.42rem;
  width: 2.25rem; height: 2px; background: var(--doc-accent); opacity: .55;
}
.doc-content p, .doc-content li { max-width: 68ch; line-height: 1.62; }
.doc-content ul, .doc-content ol { padding-left: 0.25rem; }
.doc-content li::marker { color: var(--doc-accent); }

/* -- Fields (autofill placeholders) ----------------------------------------- */
.placeholder {
  background: var(--doc-tint) !important;
  border-bottom: 1px dotted var(--doc-accent);
  border-radius: 2px !important;
  padding: 0 3px 1px !important;
  color: color-mix(in srgb, var(--doc-ink) 78%, var(--doc-accent)) !important;
}
.ns-filled, .placeholder.ns-filled {
  background: transparent !important;
  border-bottom: none;
  color: var(--doc-ink) !important;
  font-weight: 500;
}
[contenteditable]:focus { background: var(--doc-tint); border-radius: 2px; }

/* -- Callouts --------------------------------------------------------------- */
.highlight-box, .dbs-box, .warning-box, .safeguarding-box, .medical-box,
.privacy-notice, .inv-notes, .consent-block {
  background: var(--doc-tint) !important;
  border: none !important;
  border-left: 2px solid var(--doc-accent) !important;
  border-radius: 0 3px 3px 0 !important;
  padding: 0.95rem 1.15rem !important;
}
.warning-box { border-left-color: var(--doc-gold) !important; }

/* -- Tables ----------------------------------------------------------------- */
.policy-table, .data-table, .doc-table, .review-table, .inv-table, .consent-table {
  font-variant-numeric: tabular-nums;
  border-collapse: collapse;
}
.policy-table th, .data-table th, .doc-table th, .review-table th,
.inv-table th, .consent-table th {
  background: transparent !important;
  color: var(--doc-accent) !important;
  font-family: var(--doc-body);
  font-size: 0.7rem !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--doc-accent) !important;
  padding: 0.5rem 0.7rem !important;
}
.policy-table td, .data-table td, .doc-table td, .review-table td,
.inv-table td, .consent-table td {
  border-bottom: 1px solid var(--doc-rule) !important;
  padding: 0.6rem 0.7rem !important;
}
.policy-table tr:nth-child(even) td, .data-table tr:nth-child(even) td { background: transparent !important; }

/* -- Signature blocks ------------------------------------------------------- */
.sig-block { border-top: 1px solid var(--doc-rule) !important; padding-top: 1.75rem !important; }
.sig-col h3 {
  font-family: var(--doc-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--doc-muted) !important;
}
.sig-line { border-bottom: 1px solid var(--doc-ink) !important; opacity: .55; }
.sig-label { color: var(--doc-muted) !important; }

/* -- Invoice specifics ------------------------------------------------------ */
.inv-badge {
  background: transparent !important;
  color: var(--doc-ink) !important;
  border: 1px solid var(--doc-rule);
  border-radius: 2px !important;
}
.inv-badge .label { color: var(--doc-accent) !important; opacity: 1 !important; }
.inv-badge .number { font-family: var(--doc-display); }
.inv-from h1 { font-family: var(--doc-display) !important; color: var(--doc-ink) !important; }
.total-row:last-child { color: var(--doc-accent) !important; border-top-color: var(--doc-accent) !important; }
.fill-amount { border-bottom-color: var(--doc-rule) !important; }

/* -- Motion: hover/focus only (MOTION_INTENSITY 1) -------------------------- */
.doc-content a { color: var(--doc-accent); text-underline-offset: 2px; transition: opacity .15s ease-out; }
.doc-content a:hover { opacity: .72; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* -- Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
  .doc-content h2 { padding-left: 0; }
  .doc-content h2::before { position: static; display: block; font-size: 1.5rem; margin-bottom: .1rem; }
  .doc-content h2::after { left: 0; }
  .doc-wrap { padding: 2rem 1.35rem 3rem !important; margin: 0; border-radius: 0; box-shadow: none; }
}

/* -- Print: it is a document, not a web page -------------------------------- */
@media print {
  body:has(.doc-wrap) { background: #fff !important; }
  .doc-wrap { box-shadow: none !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .doc-wrap::before { display: none; }
  .doc-content h2::before { color: color-mix(in srgb, var(--doc-accent) 8%, transparent); }
  #ck, #ns-bar, #ns-panel, #ns-preview-banner { display: none !important; }
  .sig-block, .highlight-box, .dbs-box, .warning-box, .safeguarding-box,
  .medical-box, .privacy-notice, .consent-block,
  .policy-table, .data-table, .doc-table, .review-table, .inv-table { break-inside: avoid; }
  .doc-content h2 { break-after: avoid; }
}