/* Interactive Studio Sheet Styles */
.clinical-page {
  width: 210mm;
  min-height: 297mm;
  padding: 14mm 12mm 12mm 12mm;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin-bottom: 24px;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  color: var(--ink-2);
  font-size: 10.4px;
  line-height: 1.45;
  position: relative;
  page-break-after: always;
  break-after: page;
}

.clinical-running-header {
  width: 100%;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-size: 8px;
  color: #64748b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.clinical-running-header strong {
  color: #0f172a;
}

.clinical-running-footer {
  width: 100%;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-size: 8px;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.specimen-tag {
  color: #dc2626;
  font-weight: 800;
  padding: 1px 4px;
  background: #fef2f2;
  border-radius: 3px;
  border: 1px solid #fecaca;
  font-size: 7.5px;
}

@media print {
  .navbar, .sidebar, .preview-toolbar {
    display: none !important;
  }
  .preview-viewport, .report-paper-container {
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  .clinical-page {
    box-shadow: none !important;
    margin: 0 !important;
    padding: 10mm 10mm !important;
    page-break-after: always !important;
    break-after: page !important;
  }
}

  
    /*
      Clinical Summary Report.

      Laid out as one flowing document rather than a stack of fixed-height page
      boxes. The Smart Report's `.page { height: 297mm; overflow: hidden }`
      approach needs a browser measurement pass to avoid silently clipping
      content; here the print engine paginates, `break-inside: avoid` keeps
      blocks whole, and `thead` repeats itself across pages. Nothing can be
      clipped because nothing is clamped to a box.

      The running header carrying patient name and booking id is not in this
      document at all - it is bound once in generate_clinical_report.py and
      drawn by the print engine on every page, so the value exists in exactly
      one place.
    */
    @page {
      size: A4 portrait;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    :root {
      --ink: #0f172a;
      --ink-2: #334155;
      --ink-3: #64748b;
      --ink-4: #94a3b8;
      --rule: #e2e8f0;
      --rule-2: #cbd5e1;
      --surface: #f8fafc;

      --brand: #047857;
      --brand-2: #065f46;
      --brand-bg: #ecfdf5;
      --brand-line: #a7f3d0;

      /* One colour per tier. Nothing else in the report is allowed these. */
      --tier-normal: #16a34a;
      --tier-normal-bg: #f0fdf4;
      --tier-normal-line: #bbf7d0;
      --tier-borderline: #d97706;
      --tier-borderline-bg: #fffbeb;
      --tier-borderline-line: #fde68a;
      --tier-out: #dc2626;
      --tier-out-bg: #fef2f2;
      --tier-out-line: #fecaca;
    }

    
    /* Per-lab accent. Only the brand ramp is overridable - the three tier
       colours are fixed, because they carry clinical meaning and a lab must
       not be able to recolour "Out of Range" into something reassuring. */
    :root {
      --brand: #1e40af;
      --brand-2: #1e3a8a;
      --brand-bg: #eff6ff;
      --brand-line: #bfdbfe;
    }
    

    body {
      font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--ink-2);
      background: #fff;
      font-size: 10.4px;
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
    }

    .ico {
      width: 1em;
      height: 1em;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }

    /* ---------------------------------------------------------------- cover */
    .cover {
      break-after: page;
      min-height: 252mm;
      display: flex;
      flex-direction: column;
    }

    .cover-brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--brand);
    }

    .cover-lockup {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .cover-lockup img {
      height: 46px;
      width: auto;
      object-fit: contain;
    }

    .cover-lab {
      font-size: 22px;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -0.5px;
      line-height: 1.1;
    }

    .cover-tag {
      font-size: 8.4px;
      font-weight: 700;
      color: var(--ink-3);
      letter-spacing: 1.4px;
      text-transform: uppercase;
      margin-top: 2px;
    }

    .accred {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-end;
    }

    .accred span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border: 1px solid var(--brand-line);
      background: var(--brand-bg);
      color: var(--brand);
      font-size: 8px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 4px;
      letter-spacing: 0.3px;
    }

    /* Stands in for a logo file. Initials in the brand ramp read as a mark
       rather than as missing artwork. */
    .cover-monogram {
      width: 46px;
      height: 46px;
      border-radius: 10px;
      background: var(--brand);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.5px;
      flex: 0 0 auto;
    }

    /* Typographic cover panel, used when the lab supplies no artwork. */
    .cover-panel {
      margin-top: auto;
      border: 1px solid var(--rule);
      border-radius: 14px;
      overflow: hidden;
    }

    .cover-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 24px 26px;
      background: var(--brand-bg);
      border-bottom: 1px solid var(--brand-line);
    }

    .cover-panel-label {
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--brand);
    }

    .cover-panel-figure {
      font-size: 38px;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -1px;
      line-height: 1.1;
      margin-top: 3px;
    }

    .cover-panel-figure span {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink-3);
      letter-spacing: 0;
    }

    .cover-panel-tiers {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: flex-end;
    }

    .cover-panel-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .cover-panel-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 26px;
      border-bottom: 1px solid var(--rule);
      font-size: 11px;
    }

    .cover-panel-item:nth-child(2n) {
      border-left: 1px solid var(--rule);
    }

    /* An odd number of panels leaves a ragged half-row; the last one spans
       instead of sitting beside an empty cell. */
    .cover-panel-item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    .cover-panel-item .ico {
      width: 17px;
      height: 17px;
      color: var(--brand);
    }

    .cover-panel-name {
      font-weight: 700;
      color: var(--ink);
    }

    .cover-panel-count {
      margin-left: auto;
      font-weight: 900;
      color: var(--ink-4);
    }

    /* Marks a demonstration report. Deliberately in the Out of Range red
       rather than the brand ramp: it must not read as a badge of quality. */
    .accred span.specimen {
      background: var(--tier-out-bg);
      border-color: var(--tier-out-line);
      color: var(--tier-out);
    }

    .cover-title-block {
      margin-top: 30px;
    }

    /* Full-width image band under the title, as on the Smart Report cover. The
       height is capped rather than the width so a differently proportioned
       photograph cannot change the cover's vertical rhythm. */
    .cover-hero {
      margin-top: 22px;
    }

    .cover-hero-img {
      border-radius: 12px;
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--rule);
      box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    }

    .cover-hero-img img {
      display: block;
      width: 100%;
      max-height: 108mm;
      object-fit: cover;
      object-position: center 48%;
    }

    .cover-tagline {
      text-align: center;
      margin-top: 14px;
    }

    .cover-tagline-main {
      font-size: 17px;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -0.4px;
    }

    .cover-tagline-main span {
      color: var(--brand);
    }

    .cover-tagline-sub {
      font-size: 8.6px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--brand);
      margin-top: 5px;
    }

    .cover-eyebrow-row {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 11px;
    }

    /* The AI mark sits ahead of the report kind, filled rather than outlined,
       so it is the first thing read on the cover. */
    .ai-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--brand);
      color: #fff;
      font-size: 8.6px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      padding: 5px 11px 5px 9px;
      border-radius: 20px;
    }

    .ai-badge .ico {
      width: 12px;
      height: 12px;
      fill: #fff;
      stroke: none;
    }

    .cover-eyebrow {
      font-size: 9.4px;
      font-weight: 800;
      color: var(--ink-4);
      letter-spacing: 2.4px;
      text-transform: uppercase;
    }

    /* Restates what the AI actually did. Sits under whichever cover treatment
       is in use - photograph or typographic panel. */
    .ai-strip {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 14px;
      padding: 12px 15px 13px 15px;
      border: 1px solid var(--brand-line);
      background: var(--brand-bg);
      border-radius: 10px;
      font-size: 9.4px;
      line-height: 1.5;
      color: var(--ink-2);
    }

    .ai-strip .ico {
      width: 14px;
      height: 14px;
      fill: var(--brand);
      stroke: none;
      margin-top: 1px;
    }

    .cover-title {
      font-size: 36px;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -1px;
      line-height: 1.1;
      margin-top: 8px;
    }

    .cover-sub {
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 10px;
      font-weight: 500;
    }

    .cover-meta {
      margin-top: auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }

    .cover-meta-item {
      padding: 14px 16px 14px 0;
    }

    .cover-meta-item + .cover-meta-item {
      padding-left: 18px;
      border-left: 1px solid var(--rule);
    }

    .meta-label {
      font-size: 7.8px;
      font-weight: 800;
      color: var(--ink-4);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .meta-value {
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      margin-top: 3px;
    }

    .meta-value.accent {
      color: var(--brand);
    }

    .meta-note {
      font-size: 8.6px;
      color: var(--ink-3);
      margin-top: 2px;
    }

    .cover-collection {
      margin-top: 22px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .collection-item .meta-value {
      font-size: 10.6px;
      font-weight: 700;
    }

    .cover-foot {
      margin-top: 20px;
      padding-top: 18px;
      border-top: 1px solid var(--rule);
      display: flex;
      justify-content: space-between;
      font-size: 8.6px;
      color: var(--ink-3);
    }

    /* -------------------------------------------------------------- headings */
    .section {
      margin-top: 20px;
    }

    .section:first-child {
      margin-top: 0;
    }

    /* A section that owns its page outright. Only the executive summary uses
       this - everything after it flows and is broken by the print engine. */
    .section.own-page {
      break-after: page;
    }

    /* Starts a fresh page. On the final section this makes it the last page
       whole, rather than letting its first question strand at the foot of the
       advisory page. */
    .section.starts-page {
      break-before: page;
    }

    .section-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 6px;
      border-bottom: 1.5px solid var(--ink);
      margin-bottom: 12px;
      break-after: avoid;
    }

    .section-head .ico {
      width: 15px;
      height: 15px;
      color: var(--brand);
    }

    .section-title {
      font-size: 14.4px;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -0.3px;
    }

    .section-note {
      margin-left: auto;
      font-size: 8.8px;
      color: var(--ink-3);
      font-weight: 600;
    }

    .section-lede {
      font-size: 9.6px;
      color: var(--ink-3);
      margin: -6px 0 12px 0;
      /* The head's own break-after: avoid stops at the lede - without this the
         heading and its lede strand at the foot of a page with the content
         they introduce overleaf. */
      break-after: avoid;
    }

    /* ------------------------------------------------------ executive summary */
    .exec-grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 16px;
      break-inside: avoid;
    }

    .score-card {
      border: 1px solid var(--rule);
      border-radius: 10px;
      padding: 22px 24px;
    }

    .score-figure {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .score-num {
      font-size: 44px;
      font-weight: 900;
      color: var(--brand);
      letter-spacing: -1.4px;
      line-height: 1;
    }

    .score-of {
      font-size: 12.6px;
      font-weight: 700;
      color: var(--ink-3);
    }

    .score-msg {
      font-size: 10.4px;
      color: var(--ink-3);
      margin-top: 10px;
      line-height: 1.45;
    }

    .tier-legend {
      display: flex;
      gap: 6px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .tier-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 8.8px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 20px;
      border: 1px solid;
    }

    .tier-chip .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex: 0 0 auto;
    }

    .t-normal { color: var(--tier-normal); border-color: var(--tier-normal-line); background: var(--tier-normal-bg); }
    .t-borderline { color: var(--tier-borderline); border-color: var(--tier-borderline-line); background: var(--tier-borderline-bg); }
    .t-out { color: var(--tier-out); border-color: var(--tier-out-line); background: var(--tier-out-bg); }

    .t-normal .dot { background: var(--tier-normal); }
    .t-borderline .dot { background: var(--tier-borderline); }
    .t-out .dot { background: var(--tier-out); }

    .vitals-card {
      border: 1px solid var(--rule);
      border-radius: 10px;
      padding: 22px 24px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      align-content: start;
    }

    .vital .meta-value {
      font-size: 20px;
    }

    .vital-unit {
      font-size: 9px;
      font-weight: 600;
      color: var(--ink-3);
    }

    /* Parameters needing attention, listed once as a pointer into the table. */
    .attention {
      margin-top: 16px;
      border: 1px solid var(--rule);
      border-radius: 10px;
      overflow: hidden;
      break-inside: avoid;
    }

    .attention-head {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 11px 16px;
      background: var(--surface);
      border-bottom: 1px solid var(--rule);
      font-size: 10.2px;
      font-weight: 800;
      color: var(--ink);
    }

    .attention-head .ico {
      width: 13px;
      height: 13px;
      color: var(--tier-out);
    }

    .attention-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .attention-item {
      display: flex;
      align-items: baseline;
      gap: 7px;
      padding: 10.5px 16px;
      border-bottom: 1px solid var(--rule);
      font-size: 10.4px;
    }

    .attention-item:nth-child(2n) {
      border-left: 1px solid var(--rule);
    }

    .attention-name {
      color: var(--ink-2);
      font-weight: 600;
    }

    .attention-val {
      margin-left: auto;
      font-weight: 800;
      white-space: nowrap;
    }

    /* --------------------------------------------------- body systems map */
    /* Two card columns flanking the figure. The figure column is fixed so the
       two card columns stay equal to each other whatever the artwork does. */
    .body-map {
      display: grid;
      grid-template-columns: 1fr 60mm 1fr;
      gap: 11px;
      align-items: center;
      margin-top: 10px;
    }

    .organ-col {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    /* Tighter than the chips elsewhere: two must fit across a card column. */
    .organ-counts .count-chip {
      font-size: 7.6px;
      padding: 2px 6px;
    }

    .organ-card {
      display: flex;
      align-items: center;
      gap: 9px;
      border: 1px solid var(--rule);
      border-radius: 10px;
      padding: 9px 11px;
      break-inside: avoid;
    }

    /* An unscreened system stays visible but recedes - the reader should see
       what was not covered without it competing with what was. */
    .organ-card.unscreened {
      background: var(--surface);
      border-style: dashed;
    }

    .organ-icon {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--brand-bg);
      border: 1px solid var(--brand-line);
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }

    .organ-icon .ico {
      width: 16px;
      height: 16px;
      color: var(--brand);
    }

    .organ-card.unscreened .organ-icon {
      background: #fff;
      border-color: var(--rule-2);
    }

    .organ-card.unscreened .organ-icon .ico {
      color: var(--ink-4);
    }

    .organ-body {
      min-width: 0;
    }

    .organ-name {
      font-size: 9.9px;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.25;
    }

    .organ-card.unscreened .organ-name {
      color: var(--ink-3);
      font-weight: 700;
    }

    .organ-counts {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      margin-top: 4px;
    }

    .count-chip.untested {
      color: var(--ink-4);
      border-color: var(--rule-2);
      background: #fff;
    }

    .body-figure {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    /* Held in a slate blue rather than the brand ramp: the figure is
       anatomical furniture, and tinting it per-brand would make it compete
       with the tier colours on the cards either side of it. */
    .figure-svg {
      width: 100%;
      height: 130mm;
      fill: #cddcea;
      stroke: #8fa9c2;
      stroke-width: 2.4;
      stroke-linejoin: round;
    }

    /* Bounded on both axes. Sizing by height alone lets a wide or
       generously-padded source image overrun the figure column and cover the
       organ cards beside it, which is exactly what happened. */
    .figure-img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 130mm;
      object-fit: contain;
      display: block;
    }

    .body-figure-cap {
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: var(--ink-4);
      text-align: center;
    }

    .reading-key {
      margin-top: 16px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      break-inside: avoid;
    }

    .key-item {
      border: 1px solid var(--rule);
      border-radius: 10px;
      padding: 15px 18px 16px 18px;
    }

    .key-label {
      font-size: 7.8px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--ink-4);
      margin-bottom: 8px;
    }

    .key-tiers {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }

    .key-item .mini-track {
      margin-bottom: 3px;
    }

    .key-text {
      font-size: 9.8px;
      line-height: 1.5;
      color: var(--ink-3);
      margin-top: 11px;
    }

    /* ------------------------------------------------------- summary table */
    .summary-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 9.4px;
    }

    .summary-table thead {
      display: table-header-group;
    }

    .summary-table th {
      text-align: left;
      font-size: 7.8px;
      font-weight: 800;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: var(--ink-4);
      padding: 6px 8px;
      border-bottom: 1.5px solid var(--rule-2);
      background: #fff;
    }

    .summary-table td {
      padding: 3.6px 8px;
      border-bottom: 1px solid var(--rule);
      vertical-align: baseline;
    }

    .summary-table tbody tr {
      break-inside: avoid;
    }

    .col-param { width: 29%; color: var(--ink); font-weight: 600; }
    .col-value { width: 14%; font-weight: 800; color: var(--ink); white-space: nowrap; }
    .col-ref   { width: 22%; color: var(--ink-3); white-space: nowrap; }
    .col-level { width: 18%; vertical-align: middle; }
    .col-tier  { width: 17%; }

    /* The bar that replaced the standalone slider cards. Same tier geometry,
       one per table row, sized to sit on a single line of type. */
    .mini-track {
      position: relative;
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(to right,
        var(--tier-out) 0%,
        var(--tier-out) 10.0%,
        var(--tier-borderline) 10.0%,
        var(--tier-borderline) 20.0%,
        var(--tier-normal) 20.0%,
        var(--tier-normal) 75.0%,
        var(--tier-borderline) 75.0%,
        var(--tier-borderline) 85.0%,
        var(--tier-out) 85.0%,
        var(--tier-out) 100%);
    }

    .mini-marker {
      position: absolute;
      top: -2px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--tier-normal);
      transform: translateX(-50%);
      box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.28);
    }

    .mini-marker.t-borderline { border-color: var(--tier-borderline); }
    .mini-marker.t-out { border-color: var(--tier-out); }

    .col-level .mini-track {
      margin: 0 7px 0 1px;
    }

    .tier-cell {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 800;
      font-size: 8.8px;
      white-space: nowrap;
    }

    .tier-cell .dot {
      width: 6.5px;
      height: 6.5px;
      border-radius: 50%;
      flex: 0 0 auto;
    }

    .tier-cell.t-normal { color: var(--tier-normal); background: none; border: 0; }
    .tier-cell.t-borderline { color: var(--tier-borderline); background: none; border: 0; }
    .tier-cell.t-out { color: var(--tier-out); background: none; border: 0; }

    /* ---------------------------------------------------- panel unit */
    /* One panel: its head, its results table, and the AI reading of it. The
       unit deliberately does NOT set break-inside: avoid - a 21-row panel is
       taller than a page, so it has to be allowed to break. The AI block
       inside it is what stays whole. */
    .panel-unit {
      border: 1px solid var(--rule);
      border-radius: 10px;
      margin-bottom: 16px;
      overflow: hidden;
    }

    .panel-unit:last-of-type {
      margin-bottom: 4px;
    }

    /* The table sits flush inside the unit, so its cells carry the same side
       inset as the panel head above them. */
    .panel-unit .summary-table th:first-child,
    .panel-unit .summary-table td:first-child {
      padding-left: 14px;
    }

    .panel-unit .summary-table th:last-child,
    .panel-unit .summary-table td:last-child {
      padding-right: 14px;
    }

    .panel-unit .summary-table tbody tr:last-child td {
      border-bottom: 0;
    }

    /* The AI reading, marked as such and tinted so it reads as commentary on
       the table rather than as more table. */
    .panel-ai {
      border-top: 1px solid var(--brand-line);
      background: var(--brand-bg);
    }

    .panel-ai-head {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px 0 14px;
      font-size: 9.2px;
      font-weight: 900;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: var(--brand);
      break-after: avoid;
    }

    .panel-ai-head .ico {
      width: 13px;
      height: 13px;
      fill: var(--brand);
      stroke: none;
    }

    .panel-ai-for {
      margin-left: auto;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: none;
      color: var(--ink-4);
    }

    .panel-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      background: var(--surface);
      border-bottom: 1px solid var(--rule);
      /* Never the last thing on a page - a panel name with its table overleaf
         reads as an empty panel. */
      break-after: avoid;
    }

    .panel-head .ico {
      width: 15px;
      height: 15px;
      color: var(--brand);
    }

    .panel-name {
      font-size: 11.8px;
      font-weight: 900;
      color: var(--ink);
      letter-spacing: -0.2px;
    }

    .panel-counts {
      margin-left: auto;
      display: flex;
      gap: 5px;
    }

    .count-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 8px;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 20px;
      border: 1px solid;
    }

    .count-chip .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
    }

    .narrative {
      padding: 12px 14px 13px 14px;
    }

    .narrative-row {
      display: flex;
      break-inside: avoid;
      gap: 9px;
      padding-bottom: 9px;
      margin-bottom: 9px;
      border-bottom: 1px solid var(--brand-line);
    }

    .narrative-row:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }

    .narrative-row .ico {
      width: 13px;
      height: 13px;
      color: var(--brand);
      margin-top: 1px;
    }

    .narrative-label {
      font-size: 8.6px;
      font-weight: 800;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: var(--ink-4);
      margin-bottom: 2px;
    }

    .narrative-text {
      font-size: 10.6px;
      line-height: 1.5;
      color: var(--ink-2);
    }

    /* ------------------------------------------------------------- advisory */
    .advice-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .advice-card {
      border: 1px solid var(--rule);
      border-radius: 10px;
      padding: 11px 14px 12px 14px;
      break-inside: avoid;
    }

    .advice-card.wide {
      grid-column: 1 / -1;
    }

    .advice-title {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 10.2px;
      font-weight: 900;
      color: var(--ink);
      margin-bottom: 7px;
    }

    .advice-title .ico {
      width: 13px;
      height: 13px;
      color: var(--brand);
    }

    .advice-list {
      list-style: none;
    }

    .advice-list li {
      position: relative;
      padding-left: 13px;
      font-size: 9.8px;
      line-height: 1.45;
      color: var(--ink-2);
      margin-bottom: 4px;
    }

    .advice-list li:last-child {
      margin-bottom: 0;
    }

    .advice-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--brand);
    }

    .advice-list.dont li::before { background: var(--tier-out); }
    .advice-list.info li::before { background: var(--ink-4); }

    .advice-sub {
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: var(--ink-4);
      margin: 8px 0 4px 0;
    }

    .advice-sub:first-child {
      margin-top: 0;
    }

    /* ------------------------------------------------------------ questions */
    /* A numbered worksheet rather than a stack of cards. The rule runs down
       the left behind the numerals, so the list reads as one sequence to work
       through in a consultation. */
    .qlist {
      list-style: none;
      position: relative;
      margin-top: 2px;
      padding-left: 3px;
    }

    .qitem {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 13px;
      padding: 12px 14px 13px 0;
      border-top: 1px solid var(--rule);
      break-inside: avoid;
    }

    .qitem:last-child {
      border-bottom: 1px solid var(--rule);
    }

    .qnum {
      flex: 0 0 auto;
      width: 27px;
      height: 27px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10.4px;
      font-weight: 900;
      background: var(--surface);
      color: var(--ink-4);
      border: 1px solid var(--rule);
    }

    /* Priority is carried by the numeral rather than by tinting the whole
       row: five filled panels in a column would read as five alarms. */
    .qitem.priority .qnum {
      background: var(--tier-out-bg);
      border-color: var(--tier-out-line);
      color: var(--tier-out);
    }

    .qbody {
      min-width: 0;
      flex: 1 1 auto;
    }

    .qmeta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 3px;
    }

    .qcat {
      font-size: 7.8px;
      font-weight: 800;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: var(--ink-4);
    }

    .qitem.priority .qcat {
      color: var(--tier-out);
    }

    .qflag {
      font-size: 7.4px;
      font-weight: 800;
      letter-spacing: 0.3px;
      color: var(--ink-4);
      border: 1px solid var(--rule-2);
      border-radius: 20px;
      padding: 1.5px 7px;
    }

    .qitem.priority .qflag {
      color: var(--tier-out);
      border-color: var(--tier-out-line);
      background: var(--tier-out-bg);
    }

    .qtext {
      font-size: 10.6px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.4;
    }

    .qwhy {
      font-size: 9.2px;
      color: var(--ink-3);
      margin-top: 3px;
      line-height: 1.45;
    }

    .qtick {
      flex: 0 0 auto;
      width: 13px;
      height: 13px;
      border: 1.4px solid var(--rule-2);
      border-radius: 3.5px;
      margin-top: 8px;
    }

    .qfoot {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      font-size: 8.6px;
      color: var(--ink-4);
      font-weight: 600;
    }

    .qfoot .qtick {
      margin-top: 0;
      width: 11px;
      height: 11px;
    }

    .disclaimer {
      margin-top: 10px;
      border: 1px solid var(--rule);
      background: var(--surface);
      border-radius: 8px;
      padding: 9px 12px;
      font-size: 8.2px;
      line-height: 1.45;
      color: var(--ink-3);
      break-inside: avoid;
    }

    .disclaimer strong {
      color: var(--ink-2);
    }