/* The print views: the Impilo system's own light inversion.
 *
 * Pearl and Cloud White surfaces with Deep Iris text. Deliberately NOT a
 * desaturated version of the screen theme. Printing a Deep Iris page wastes a
 * cartridge and reads badly, and the system defines the inversion anyway.
 *
 * These pages are shown on screen too, so they must be legible without a
 * printer. Only the @media print block below is print-specific.
 */

:root {
  --color-deep-iris: #16165c;
  --color-pearl: #f4f4f6;
  --color-cloud-white: #ffffff;
  --color-ash: #d8d8e3;
  --color-clinical-cyan: #00b1ff;
  --color-mint-vital: #00ffaa;
  --color-amber-flag: #ffb020;
  --font-stack: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
                BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ink-muted: #5b5b77;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-pearl);
  color: var(--color-deep-iris);
  font-family: var(--font-stack);
  font-weight: 500;
  font-size: 12pt;
  line-height: 1.45;
}

.sheet {
  max-width: 7.6in;
  margin: 0 auto;
  background: var(--color-cloud-white);
  padding: 0.55in 0.6in 0.7in;
}

h1 { font-size: 21pt; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4pt; }
h2 { font-size: 13pt; font-weight: 600; letter-spacing: -0.01em; margin: 18pt 0 6pt; }

/* The banner, as a stamp: uppercase on paper, where a filed sheet has to say
 * what it is at arm's length. The text itself is config.DEIDENTIFIED_NOTICE. */
.deid-bar {
  background: var(--color-amber-flag);
  color: var(--color-deep-iris);
  font-weight: 600; font-size: 8.5pt; letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7pt 12pt; border-radius: 9999px; text-align: center;
  margin-bottom: 14pt;
}

.meta { color: var(--ink-muted); font-size: 9.5pt; margin-bottom: 14pt; }
.muted { color: var(--ink-muted); }
.tiny { font-size: 8pt; line-height: 1.5; color: var(--ink-muted); }

/* The four response anchors. They were laid out as one row of inline spans
 * each carrying `white-space: nowrap`, and the four labels measure about 7.2in
 * of text at 9.5pt against a 6.4in content column, so the row ran straight out
 * through the right-hand border of its own box. nowrap on the span is correct
 * and stays: an anchor broken across two lines is unreadable on a form someone
 * is scanning while answering. What was missing is somewhere for the row to
 * wrap TO, so this is a two-column grid, which fits the pair per row with room
 * to spare and matches the printed PDF. */
.scale-key {
  border: 1px solid var(--color-ash); border-radius: 7px;
  padding: 8pt 12pt; font-size: 9.5pt; margin-bottom: 12pt;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4pt 12pt;
}
.scale-key span { white-space: nowrap; }
@media (max-width: 640px) { .scale-key { grid-template-columns: 1fr; } }

table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
th {
  text-align: left; font-size: 7.5pt; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 1px solid var(--color-ash); padding: 0 6pt 4pt;
}
td { padding: 4pt 6pt; border-bottom: 1px solid #eeeef3; vertical-align: top; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Numeric headers stay on one line: "Norm M" wrapping to "NORM / M"
   reads as sloppy on a document a clinician files. */
th.num { text-align: right; white-space: nowrap; }
tr.suppressed td { color: var(--ink-muted); font-style: italic; }

/* ---- blank questionnaire ---- */
.q-item { display: flex; gap: 8pt; padding: 3.2pt 0; border-bottom: 1px solid #f0f0f5; }
.q-item .n {
  min-width: 22pt; text-align: right; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; font-size: 9pt;
}
.q-item .stem { flex: 1; font-size: 9.5pt; }
.q-item .boxes { display: flex; gap: 5pt; }
.q-item .boxes i {
  display: inline-block; width: 13pt; height: 13pt;
  border: 1px solid var(--color-deep-iris); border-radius: 3px;
}
.q-item .given {
  display: inline-block; width: 13pt; height: 13pt; border-radius: 3px;
  border: 1px solid var(--color-deep-iris); text-align: center;
  font-size: 8.5pt; line-height: 13pt; font-weight: 600;
}
.q-item .given.on { background: var(--color-deep-iris); color: var(--color-cloud-white); }
.q-item .given.blank { border-style: dashed; color: var(--ink-muted); }

.chart { margin: 10pt 0 6pt; }
.chart svg { display: block; width: 100%; height: auto; }

.band {
  display: inline-block; border-radius: 9999px; padding: 1.5pt 7pt;
  font-size: 7.5pt; font-weight: 600; color: var(--color-deep-iris);
}
.band.wnl { background: var(--color-mint-vital); }
.band.elev, .band.clin { background: var(--color-amber-flag); }
.band.none { border: 1px dashed var(--color-ash); color: var(--ink-muted); }

.rights {
  margin-top: 16pt; padding-top: 8pt; border-top: 1px solid var(--color-ash);
  font-size: 7.5pt; line-height: 1.5; color: var(--ink-muted);
}

.noprint { margin: 12pt auto; max-width: 7.6in; }
.noprint a, .noprint button, .noprint .pdf {
  font: inherit; font-size: 10pt; font-weight: 600;
  border-radius: 9999px; border: 1px solid var(--color-deep-iris);
  background: transparent; color: var(--color-deep-iris);
  padding: 7pt 16pt; cursor: pointer; text-decoration: none; margin-right: 8pt;
}
/* The primary action on this page is taking the form away with you. */
.noprint .pdf {
  background: var(--color-deep-iris); color: var(--color-cloud-white);
}

@media print {
  body { background: var(--color-cloud-white); }
  .sheet { max-width: none; padding: 0; }
  .noprint { display: none !important; }
  .page-break { break-before: page; }
  /* Band chips and the banner are meaningful, not decorative: force the
   * browser to print their backgrounds rather than dropping them. */
  .deid-bar, .band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 0.5in; }
}