/* Copyright YCI Canada. All rights reserved. This runs the SnapEE sample on snapee.ca. You may read it. Copying or reusing it is not permitted (see the Terms of Use at https://snapee.ca/terms/). */

  :root {
    --primary: #020203;   /* Black Hole */
    --secondary: #585857; /* Sumi Ink */
    --accent: #13315C;    /* the colour preset; report.js sets the customer's choice */
    --answer-blue: #1155CC;
  }
  body {
    font-family: "Segoe UI", -apple-system, Arial, sans-serif;
    max-width: 800px; margin: 0 auto; padding: 0 20px 40px 20px; color: #111;
  }
  #printBtn {
    margin: 16px 0; padding: 7px 14px; cursor: pointer; background: var(--primary);
    color: white; border: none; border-radius: 3px; font-size: 13px;
  }

  .header {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 3px solid var(--accent); padding: 16px 0; margin-bottom: 8px;
  }
  .header img { height: 46px; max-width: 220px; object-fit: contain; display: block; }
  .header .orgname { font-size: 15px; font-weight: 700; color: var(--accent); }
  .header .doctitle { text-align: right; }
  .header .doctitle h1 { font-size: 15px; margin: 0; color: var(--primary); }
  .header .doctitle .sub { font-size: 10px; color: var(--secondary); margin-top: 2px; }

  .meta { color: var(--secondary); font-size: 11px; margin: 10px 0 4px 0; }

  .person-divider {
    display: flex; align-items: center; gap: 8px;
    margin: 30px 0 6px 0; padding-bottom: 6px; border-bottom: 2px solid var(--accent);
  }
  .person-divider .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
  .person-divider h1 { font-size: 16px; margin: 0; color: var(--primary); }

  h2 {
    font-size: 14px; background: var(--primary); color: white;
    padding: 7px 10px; margin-top: 22px;
  }
  .field { padding: 2px 0; font-size: 12.5px; }
  .field .label { color: var(--secondary); font-weight: 600; }
  .field .value { color: var(--answer-blue); }
  /* One look for every subsection title, whichever kind it is: a panel of the portal page (part-heading), a named
     group of questions (block-heading) or a table's caption (h3). Black text with a line in the accent colour
     under it. The section bar above them (h2) and the boxed entries below them are different things and look different. */
  h3, .block-heading, .part-heading {
    font-size: 12.5px; font-weight: 700; color: var(--primary);
    background: none; border: 0; border-bottom: 2px solid var(--accent);
    margin: 18px 0 5px 0; padding: 0 0 2px 0;
  }
  .part-intro { font-size: 11px; color: var(--secondary); margin: 3px 0 8px 0; line-height: 1.4; }
  .field .values { margin: 2px 0 3px 22px; padding: 0; color: var(--answer-blue); }
  .field .values li { margin: 1px 0; }
  .field-note { font-size: 11px; color: var(--secondary); font-style: italic; margin: 2px 0 0 0; }
  .field.rich { margin: 5px 0 9px 0; }
  .field.rich .label { font-weight: 600; color: var(--secondary); }
  .field.rich .label ul, .field.rich .label ol { font-weight: 400; margin: 3px 0 3px 22px; padding: 0; }
  .field.rich .label li { margin: 1px 0; }
  .field.rich .label p { font-weight: 400; margin: 3px 0; }
  .field.rich .label a { color: var(--secondary); }
  .field.rich .value { margin-top: 2px; }
  .entry { border: 1px solid #ddd; border-radius: 3px; padding: 8px 10px; margin: 8px 0; }
  .entry-title { font-weight: 700; color: var(--primary); margin-bottom: 4px; }

  .top-attribution {
    font-size: 11.5px; color: var(--primary); background: #f7f7f7;
    border-left: 3px solid var(--accent); padding: 8px 12px; margin: 10px 0 16px 0;
  }
  .top-attribution a { color: var(--primary); }

  .empty-note { font-size: 11px; color: var(--secondary); font-style: italic; padding: 2px 0 6px 10px; }
  .missing-note {
    font-size: 10.5px; color: #8a1016; background: #fdeeee; border: 1px solid #f0b5b7;
    border-radius: 3px; padding: 5px 8px; margin: 6px 0 10px 0;
  }

  .unconfirmed-note {
    font-size: 10.5px; color: #a15c00; background: #fff6e5; border: 1px solid #f0d999;
    border-radius: 3px; padding: 5px 8px; margin: 6px 0 10px 0;
  }

  .report-footer {
    margin-top: 40px; padding-top: 10px; border-top: 1px solid #eee;
    font-size: 10px; color: var(--secondary);
    /* keep the footer on the last page of content instead of alone on a page of its own */
    break-before: avoid; page-break-before: avoid;
  }

  /* ---- licence notices: shown on screen only, never printed ---- */
  .no-print { margin: 12px 0; }
  .lic-banner { font-size: 12px; border-radius: 3px; padding: 6px 10px; border: 1px solid #cfd8e3; background: #f3f6fa; color: #0F1B2D; }
  .lic-banner.notice, .lic-banner.warn { background: #FFF6E5; border-color: #F0D999; color: #8a4d00; }
  .lic-banner + .lic-banner { margin-top: 6px; }
  .lic-banner.stop { background: #FDEEEE; border-color: #F0B5B7; color: #8A1016; }
  .paused { font-size: 13px; padding: 12px 0; }

  /* ---- page 1 note, representative comments, client approval ---- */
  .cover-note { font-size: 11px; color: var(--secondary); margin: 22px 0 6px 0; line-height: 1.45; }
  .rep-reminder { font-size: 12px; color: #0F1B2D; background: #f3f6fa; border: 1px solid #cfd8e3; border-radius: 3px; padding: 6px 10px; margin: 12px 0 0 0; }
  .review-note {
    font-size: 11.5px; color: var(--primary); background: #f7f7f7; line-height: 1.45;
    border-left: 3px solid var(--accent); padding: 8px 12px; margin: 14px 0 0 0;
  }
  .rep-comments { margin: 14px 0 0 0; }
  .rep-comments textarea {
    width: 100%; box-sizing: border-box; font: 12px "Segoe UI", -apple-system, Arial, sans-serif;
    padding: 8px; border: 1px solid #bbb; border-radius: 3px; resize: vertical;
  }
  .comments-help { font-size: 10.5px; color: #6b7480; margin-top: 3px; }
  .rep-notes-print { display: none; }
  .approval-controls { font-size: 12px; background: #f3f6fa; border: 1px solid #cfd8e3; border-radius: 3px; padding: 8px 10px; }
  .approval-controls select { font-size: 12px; margin-left: 4px; }
  .approval-controls code { background: #fff; border: 1px solid #cfd8e3; padding: 1px 5px; }
  .approval-controls button { font-size: 11px; margin-left: 6px; cursor: pointer; }
  #subjectRow { margin-top: 6px; }
  .approval { margin-top: 30px; padding-top: 10px; border-top: 1px solid #ccc; font-size: 12px; color: var(--primary); }
  .approval-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
  .approval-text { margin: 8px 0; line-height: 1.45; }
  .approval-ref, .approval-who { font-size: 10.5px; color: var(--secondary); margin-top: 8px; }
  /* the small Signature and Date captions hang below the line, so each row needs room beneath it */
  .sig-row { display: flex; align-items: flex-end; gap: 16px; margin: 16px 0 26px 0; }
  .sig-who { flex: 0 0 34%; font-size: 12px; }
  .sig-role { font-size: 10px; color: var(--secondary); }
  .sig-box { flex: 1 1 auto; border-bottom: 1px solid #333; min-height: 34px; position: relative; }
  .sig-box span { position: absolute; left: 0; bottom: -13px; font-size: 9px; color: #777; }
  .sig-date { flex: 0 0 24%; }

  /* ---- cover summary ---- */
  .cover { margin: 6px 0 4px 0; }
  .cover-title { font-size: 14px; font-weight: 700; color: var(--primary); margin: 18px 0 8px 0; }
  .cover-sub { font-size: 11px; font-weight: 700; color: var(--primary); margin: 16px 0 5px 0; }
  .cover-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .cover-table th {
    text-align: left; font-size: 11px; color: var(--primary); background: #ececec;
    padding: 5px 10px;
  }
  .cover-table th:first-child { border-left: 3px solid var(--secondary); }
  .cover-table td { padding: 6px 10px; border-bottom: 1px solid #e3e3e3; color: var(--primary); }
  .cover-table td:nth-child(2) { color: var(--secondary); }
  .cover-list { margin: 4px 0 0 20px; padding: 0; font-size: 12px; color: #a15c00; }
  .cover-list li { margin: 3px 0; }

  /* ---- printing ----
     People follow one another without a page break, the first one straight after the cover. A short entry is
     never split across pages, a long one may be (its title stays with its first questions and its last two
     questions stay together), a question is never split from its answer, and a heading
     stays with what follows it.
     Colours are forced on, otherwise a browser with "Background graphics"
     off would print the section titles (white on black) as white on white. */
  .entry.long { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .keep-together, .entry:not(.long), .field, .field.rich, .missing-note, .unconfirmed-note, .cover-table tr, .approval, .sig-row, .rep-comments, .review-note, .end-block {
    break-inside: avoid; page-break-inside: avoid;
  }
  h2, h3, .block-heading, .part-heading, .person-divider, .cover-title, .cover-sub {
    break-after: avoid; page-break-after: avoid;
  }
  /* A heading is never left alone at the foot of a page. The section heading and its first two
     questions sit in one block that stays together (a chain of "avoid" rules on separate
     elements is only a hint, and browsers do not always follow it). */
  @media print {
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #printBtn, .no-print { display: none !important; }
    /* the page's bottom padding is for the screen; on paper it can push an empty page after a report that ends at the foot of one */
    body { padding-bottom: 0; }
    /* the typed comments print as plain text, and only when there are some */
    .rep-comments.empty { display: none; }
    .rep-notes-print {
      display: block; white-space: pre-wrap; font-size: 12px; line-height: 1.45;
      border: 1px solid #ddd; border-radius: 3px; padding: 8px 10px;
    }
  }
  /* Room at the foot of each page for the reference, statement and page numbers.
     The text itself is added by report.js, because it differs for every report. */
  @page { margin: 0.6in 0.6in 0.85in 0.6in; }