/* ======================================================================
   HSP TOOLS — shared screen + print/PDF stylesheet
   Human System Protocol™
   Version: 2026-09-09 — generic print architecture

   Purpose
   -------
   One reusable stylesheet for interactive HSP tools that are used as a
   normal responsive web page and can also be printed/saved as A4 PDF.

   Generic architecture
   --------------------
   hsp-tool                    tool/page scope
   hsp-tool--start             START family (amber)
   hsp-tool--practice          PRACTICE family (teal)
   hsp-tool--core              CORE family
   hsp-tool--life              LIFE family
   hsp-tool--work              WORK family
   hsp-tool--explore           EXPLORE family

   hsp-tool-print-enabled      optional printable-page marker
   hsp-print-page              exactly one fixed A4 print sheet
   hsp-print-flow              print section that may span 1..n A4 pages
   hsp-print-cover             generic fixed A4 cover
   hsp-print-only              hidden on screen, visible in print
   hsp-screen-only             visible on screen, hidden in print
   hsp-print-hide              hidden in normal print
   hsp-print-keep              explicitly retained in print
   hsp-print-workbook-last     last fixed workbook page before optional appendix
   hsp-print-last              actual final fixed print page

   Recommended cover classes
   -------------------------
   START:
     hsp-tool hsp-tool--start hsp-print-cover hsp-print-only hsp-print-page

   PRACTICE:
     hsp-tool hsp-tool--practice hsp-print-cover hsp-print-only hsp-print-page

   Recommended long explanation classes
   ------------------------------------
     hsp-observation-explanation hsp-print-hide hsp-print-flow

   Print modes
   -----------
   Normal print:
     fixed workbook pages print; hsp-print-hide stays hidden.

   Print with explanation:
     JavaScript adds body.hsp-print-with-explanation; hsp-print-flow sections
     become visible, each starts on a fresh physical page and may continue
     across as many pages as required.

   CMS pagination note
   -------------------
   Every CMS item is wrapped in its own .weblet_content. For flowing sections,
   the wrapper owns break-before when :has() is available; the child section
   remains free to fragment across pages. This is more reliable in Chrome print.

   Legacy compatibility
   --------------------
   hsp-observation-print-cover and hsp-what-happened-print-cover are retained
   only as aliases for older content. New content should use hsp-print-cover.
   Existing .hsp-workbook-item markup remains supported.
   ====================================================================== */

:root {
  --hsp-start: #E3A62A;
  --hsp-core: #1F4E79;
  --hsp-practice: #2F8F83;
  --hsp-life: #D96C5F;
  --hsp-work: #4F6473;
  --hsp-explore: #4D5DAA;

  --hsp-ink: #1A2429;
  --hsp-muted: #607079;
  --hsp-line: #D7E0E3;
  --hsp-paper: #FFFFFF;
  --hsp-soft-neutral: #F6F8F9;

  /* Default: PRACTICE. Tool/family selectors below override these. */
  --hsp-accent: var(--hsp-practice);
  --hsp-accent-soft: #DDEFEA;
  --hsp-accent-ink: #236D65;
}

/* ----------------------------------------------------------------------
   1. FAMILY TOKENS
   ---------------------------------------------------------------------- */

.hsp-tool--start,
.hsp-workbook-item,
.hsp-what-happened-print-cover {
  --hsp-accent: var(--hsp-start);
  --hsp-accent-soft: #F7EBCF;
  --hsp-accent-ink: #8A6515;
}

.hsp-tool--practice,
.hsp-observation-tool,
.hsp-observation-intro,
.hsp-observation-print-cover,
.hsp-input-filter,
.hsp-trigger-map,
.hsp-pattern-map,
.hsp-system-scan,
.hsp-rollback-review {
  --hsp-accent: var(--hsp-practice);
  --hsp-accent-soft: #DDEFEA;
  --hsp-accent-ink: #236D65;
}

.hsp-tool--core {
  --hsp-accent: var(--hsp-core);
  --hsp-accent-soft: #E4EDF4;
  --hsp-accent-ink: #163A5B;
}

.hsp-tool--life {
  --hsp-accent: var(--hsp-life);
  --hsp-accent-soft: #F6E1DD;
  --hsp-accent-ink: #9B4D43;
}

.hsp-tool--work {
  --hsp-accent: var(--hsp-work);
  --hsp-accent-soft: #E3E8EC;
  --hsp-accent-ink: #394954;
}

.hsp-tool--explore {
  --hsp-accent: var(--hsp-explore);
  --hsp-accent-soft: #E2E6F6;
  --hsp-accent-ink: #354379;
}

/* ----------------------------------------------------------------------
   2. SCREEN / PRINT VISIBILITY
   ---------------------------------------------------------------------- */

.hsp-tool .hsp-print-only,
.hsp-workbook-item .print-only,
.hsp-workbook-item .hsp-print-only,
.hsp-print-cover.hsp-print-only,
.hsp-observation-print-cover.hsp-print-only,
.hsp-what-happened-print-cover.hsp-print-only {
  display: none !important;
}

.hsp-tool .hsp-screen-only,
.hsp-workbook-item .screen-only,
.hsp-workbook-item .hsp-screen-only,
.hsp-observation-tool .hsp-screen-only {
  display: revert;
}

/* ----------------------------------------------------------------------
   3. COMMON TOOL CONTENT
   ---------------------------------------------------------------------- */

.hsp-tool,
.hsp-observation-tool,
.hsp-workbook-item {
  color: var(--hsp-ink);
}

.hsp-tool .eyebrow,
.hsp-observation-tool .eyebrow,
.hsp-workbook-item .eyebrow {
  color: var(--hsp-accent-ink);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hsp-tool-note {
  max-width: 760px;
  color: #33434A;
  font-size: 1.02rem;
  line-height: 1.5;
}

.hsp-mini-note,
.hsp-privacy-note,
.hsp-small,
.hsp-scale-caption {
  color: var(--hsp-muted);
  font-size: .92rem;
}

.hsp-field-label,
.hsp-question {
  display: block;
  margin: 1rem 0 .45rem;
  font-weight: 700;
}

.hsp-observation-field,
.hsp-tool textarea,
.hsp-workbook-item textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #CBD5D9;
  border-radius: 9px;
  background: #FFF;
  padding: .8rem;
  color: inherit;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.hsp-tool input[type="text"],
.hsp-tool input[type="number"],
.hsp-tool input[type="email"],
.hsp-tool select {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid #CBD5D9;
  border-radius: 8px;
  background: #FFF;
  padding: .65rem .72rem;
  color: inherit;
  font: inherit;
}

.hsp-observation-field:focus,
.hsp-tool textarea:focus,
.hsp-workbook-item textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--hsp-accent) 52%, white);
  outline-offset: 1px;
}

.hsp-field-small,
.hsp-write-sm { min-height: 64px; }
.hsp-field-medium,
.hsp-write-md { min-height: 96px; }
.hsp-field-large,
.hsp-write-lg { min-height: 140px; }
.hsp-write-xl { min-height: 205px; }

/* ----------------------------------------------------------------------
   4. LAYOUT COMPONENTS
   ---------------------------------------------------------------------- */

.hsp-two-col,
.hsp-two-cols,
.hsp-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 1rem 0;
}

.hsp-compare > div,
.hsp-two-cols > div {
  border: 1px solid #E0E5E7;
  border-radius: 10px;
  background: #FAFBFB;
  padding: 1rem;
}

.hsp-interpretation-grid,
.hsp-meaning-example {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.hsp-step-card,
.hsp-meaning-example > span {
  border: 1px solid var(--hsp-line);
  border-radius: 11px;
  background: #FFF;
  padding: 1rem;
}

.hsp-step-card {
  border-top: 4px solid var(--hsp-accent);
}

.hsp-step-card strong,
.hsp-step-card span {
  display: block;
}

.hsp-step-card span {
  margin: .35rem 0 .7rem;
}

.hsp-input-example,
.hsp-two-line,
.hsp-tool-callout {
  border-left: 4px solid var(--hsp-accent);
  padding: .35rem 0 .35rem 1rem;
}

.hsp-rule-template,
.hsp-start-panel,
.hsp-tool-soft-block {
  margin: 1rem 0;
  border-radius: 10px;
  background: var(--hsp-accent-soft);
  padding: .9rem 1rem;
}

.hsp-start-panel {
  border-left: 4px solid var(--hsp-accent);
}

.hsp-subeyebrow {
  color: var(--hsp-accent-ink);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hsp-inline-write {
  display: inline-block;
  min-width: 150px;
  margin: 0 .4rem;
  border-bottom: 1px solid #6C7B82;
}

/* ----------------------------------------------------------------------
   5. CHECKBOXES / RADIO BUTTONS / SCALES
   ---------------------------------------------------------------------- */

.hsp-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1.2rem;
  margin: .75rem 0 1.2rem;
}

.hsp-check-grid-wide {
  grid-template-columns: 1fr;
}

.hsp-check-list {
  display: grid;
  gap: .55rem;
  margin: .75rem 0 1.2rem;
}

.hsp-check-grid label,
.hsp-check-list label {
  display: flex;
  align-items: flex-start;
  gap: .48rem;
  break-inside: avoid;
}

.hsp-check-grid input[type="checkbox"],
.hsp-check-list input[type="checkbox"],
.hsp-scale input[type="radio"] {
  box-sizing: border-box;
  width: auto !important;
  margin: .22em 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  accent-color: var(--hsp-accent);
}

.hsp-scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .5rem;
  max-width: 650px;
  margin: 1rem 0 .35rem;
}

.hsp-scale label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 54px;
  border: 1px solid #DCE2E4;
  border-radius: 8px;
  background: #FFF;
  text-align: center;
  font-weight: 700;
}

.hsp-scale-caption {
  display: flex;
  justify-content: space-between;
  max-width: 650px;
}

/* ----------------------------------------------------------------------
   6. CHIPS / FLOW / SUMMARY MAPS
   ---------------------------------------------------------------------- */

.hsp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}

.hsp-chip-row span {
  border: 1px solid color-mix(in srgb, var(--hsp-accent) 30%, #DDD);
  border-radius: 999px;
  background: color-mix(in srgb, var(--hsp-accent-soft) 55%, white);
  padding: .3rem .65rem;
}

.hsp-flow-stack {
  display: grid;
  gap: .25rem;
  margin-top: 1rem;
}

.hsp-flow-stack > label {
  display: grid;
  grid-template-columns: 112px 1fr 1.5fr;
  gap: .6rem;
  align-items: center;
  border: 1px solid #DDE2E4;
  border-radius: 8px;
  padding: .55rem .7rem;
}

.hsp-flow-stack > b {
  text-align: center;
  line-height: 1;
  color: #78858B;
}

.hsp-flow-stack textarea {
  min-height: 2.7rem;
  padding: .4rem .5rem;
}

.hsp-summary-table,
.hsp-tool-table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
}

.hsp-summary-table th,
.hsp-summary-table td,
.hsp-tool-table th,
.hsp-tool-table td {
  border: 1px solid var(--hsp-line);
  padding: .55rem .7rem;
  vertical-align: top;
}

.hsp-summary-table th,
.hsp-tool-table th {
  background: color-mix(in srgb, var(--hsp-accent-soft) 55%, white);
  text-align: left;
}

.hsp-summary-table th { width: 30%; }

/* ----------------------------------------------------------------------
   7. ACTIONS / LABELS
   ---------------------------------------------------------------------- */

.hsp-tool-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0 0 1.3rem;
}

.hsp-print-button {
  cursor: pointer;
  font: inherit;
}

.hsp-family-label,
.hsp-family-tag {
  display: inline-block;
  border-radius: 6px;
  background: var(--hsp-accent);
  color: #FFF;
  padding: .35rem .62rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------------
   8. CURRENT TOOL COMPATIBILITY
   ---------------------------------------------------------------------- */

/* Observation Map */
.hsp-observation-tool {
  position: relative;
}

.hsp-observation-tool .content_inner {
  max-width: 940px;
}

/* Wat gebeurde daar nou? */
.hsp-workbook-item .hsp-punchline {
  margin-top: 1.2rem;
}

.hsp-workbook-context {
  margin-top: 2rem;
}

/* ----------------------------------------------------------------------
   9. RESPONSIVE SCREEN LAYOUT
   ---------------------------------------------------------------------- */

@media (max-width: 720px) {
  .hsp-two-col,
  .hsp-two-cols,
  .hsp-compare,
  .hsp-interpretation-grid,
  .hsp-meaning-example,
  .hsp-check-grid {
    grid-template-columns: 1fr;
  }

  .hsp-flow-stack > label {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   PRINT / SAVE-AS-PDF
   ====================================================================== */

@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html {
    background: #FFF !important;
  }

  body:has(.hsp-tool-print-enabled),
  body:has(.hsp-print-page),
  body:has(.hsp-print-flow),
  body:has(.hsp-workbook-item) {
    margin: 0 !important;
    background: #FFF !important;
    counter-reset: hspPrintPage;
  }

  /* --------------------------------------------------------------
     Site chrome — ONLY on pages containing a printable HSP tool.
     This makes the file safe to include globally.
     -------------------------------------------------------------- */

  body:has(.hsp-tool-print-enabled) .site-nav,
  body:has(.hsp-tool-print-enabled) .site-footer,
  body:has(.hsp-tool-print-enabled) #site_editpageoption,
  body:has(.hsp-tool-print-enabled) .language-selection,
  body:has(.hsp-tool-print-enabled) .content_list_hero,

  body:has(.hsp-print-page) .site-nav,
  body:has(.hsp-print-page) .site-footer,
  body:has(.hsp-print-page) #site_editpageoption,
  body:has(.hsp-print-page) .language-selection,
  body:has(.hsp-print-page) .content_list_hero,

  body:has(.hsp-print-flow) .site-nav,
  body:has(.hsp-print-flow) .site-footer,
  body:has(.hsp-print-flow) #site_editpageoption,
  body:has(.hsp-print-flow) .language-selection,
  body:has(.hsp-print-flow) .content_list_hero,

  body:has(.hsp-workbook-item) .site-nav,
  body:has(.hsp-workbook-item) .site-footer,
  body:has(.hsp-workbook-item) #site_editpageoption,
  body:has(.hsp-workbook-item) .language-selection,
  body:has(.hsp-workbook-item) .content_list_hero {
    display: none !important;
  }

  /* Generic visibility */
  .hsp-print-only,
  .hsp-tool .hsp-print-only,
  .hsp-workbook-item .print-only,
  .hsp-workbook-item .hsp-print-only {
    display: block !important;
  }

  /* Generic covers are hidden on screen with specific selectors; restore them
     explicitly in print. Legacy tool-specific cover names remain aliases. */
  .hsp-print-cover.hsp-print-only,
  .hsp-observation-print-cover.hsp-print-only,
  .hsp-what-happened-print-cover.hsp-print-only,
  .hsp-print-page.hsp-print-only {
    display: block !important;
  }

  .hsp-screen-only,
  .hsp-tool .hsp-screen-only,
  .hsp-workbook-item .screen-only,
  .hsp-workbook-item .hsp-screen-only,
  .hsp-print-hide,
  .hsp-workbook-context {
    display: none !important;
  }

  /* Optional second print mode: add class hsp-print-with-explanation to body.
     .hsp-print-flow is the generic class for long printable explanation sections. */
  body.hsp-print-with-explanation .hsp-print-flow,
  body.hsp-print-with-explanation .hsp-tool-explanation,
  body.hsp-print-with-explanation .hsp-observation-explanation {
    display: block !important;
  }

  .hsp-print-keep {
    display: block !important;
  }

  /* CMS wrappers must not impose web widths/padding on A4 sheets. */
  body:has(.hsp-print-page) .container-main,
  body:has(.hsp-print-page) .container-content,
  body:has(.hsp-print-page) .section_1,
  body:has(.hsp-print-page) .cntnt_topic_sections,
  body:has(.hsp-print-page) .weblet_content,
  body:has(.hsp-print-page) .section-inner,
  body:has(.hsp-print-page) .content_item,
  body:has(.hsp-print-page) .content_inner,
  body:has(.hsp-print-page) .content_item_description,

  body:has(.hsp-print-flow) .container-main,
  body:has(.hsp-print-flow) .container-content,
  body:has(.hsp-print-flow) .section_1,
  body:has(.hsp-print-flow) .cntnt_topic_sections,
  body:has(.hsp-print-flow) .weblet_content,

  body:has(.hsp-workbook-item) .container-main,
  body:has(.hsp-workbook-item) .container-content {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* --------------------------------------------------------------
     Generic A4 page
     -------------------------------------------------------------- */

  .hsp-print-page,
  .hsp-workbook-item .hsp-workbook-page {
    position: relative;
    box-sizing: border-box;
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    margin: 0 !important;
    padding: 16mm 18mm 17mm;
    overflow: hidden;
    display: block !important;
    break-before: auto;
    page-break-before: auto;
    break-after: page !important;
    page-break-after: always !important;
    background: var(--hsp-paper) !important;
    color: #111;
    font-size: 10.2pt;
    line-height: 1.34;
  }

  .hsp-print-page {
    counter-increment: hspPrintPage;
  }

  /* Do NOT use :last-of-type here. In the CMS every print section lives
     inside its own .weblet_content wrapper, so every section is
     effectively :last-of-type. Use an explicit final-page marker instead. */
  .hsp-print-page.hsp-print-last,
  .hsp-print-page.hsp-print-workbook-last,
  .hsp-tool-hypothesis,
  .hsp-workbook-item.hsp-print-last .hsp-workbook-page {
    break-after: auto !important;
    page-break-after: auto !important;
  }

  /* Optional footer/page number. Generic pages use data attributes.
     Example: data-print-page="4" data-print-total="12" */
  .hsp-print-page[data-print-page]::before,
  .hsp-workbook-item .hsp-workbook-page::before {
    content: "HUMAN SYSTEM PROTOCOL™";
    position: absolute;
    left: 18mm;
    bottom: 8mm;
    color: #777;
    font-size: 7.7pt;
    letter-spacing: .08em;
  }

  .hsp-print-page[data-print-page]::after {
    content: attr(data-print-page) " / " attr(data-print-total);
    position: absolute;
    right: 18mm;
    bottom: 8mm;
    color: #777;
    font-size: 8pt;
  }

  .hsp-print-page:not([data-print-page])::before {
    content: "HUMAN SYSTEM PROTOCOL™";
    position: absolute;
    left: 18mm;
    bottom: 8mm;
    color: #777;
    font-size: 7.7pt;
    letter-spacing: .08em;
  }

  .hsp-print-page:not([data-print-page])::after {
    content: counter(hspPrintPage);
    position: absolute;
    right: 18mm;
    bottom: 8mm;
    color: #777;
    font-size: 8pt;
  }

  /* Existing START workbook uses a known 12-page total. */
  .hsp-workbook-item .hsp-workbook-page::after {
    content: attr(data-print-page) " / 12";
    position: absolute;
    right: 18mm;
    bottom: 8mm;
    color: #777;
    font-size: 8pt;
  }

  /* Existing Observation Map sections are CMS <section> wrappers. */
  section.hsp-print-page,
  section.hsp-print-cover,
  section.hsp-observation-print-cover,
  section.hsp-what-happened-print-cover,
  section.hsp-observation-tool,
  section.hsp-workbook-item,
  section.hsp-print-cover-item,
  .hsp-workbook-item .section-inner,
  .hsp-workbook-item .content_item,
  .hsp-workbook-item .content_inner,
  .hsp-workbook-item .content_item_description {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFF !important;
  }

  /* For section-based tools the inner CMS content becomes the A4 content area. */
  section.hsp-print-page > .section-inner {
    margin: 0 !important;
    padding: 0 !important;
  }

  section.hsp-print-page .content_item,
  section.hsp-print-page .content_inner,
  section.hsp-print-page .content_item_description {
    width: auto !important;
    max-width: none !important;
  }

  section.hsp-print-page {
    padding: 16mm 18mm 17mm !important;
  }

  /* Existing workbook already has its A4 page one level inside. */
  .hsp-workbook-item .hsp-workbook-page {
    padding: 16mm 18mm 17mm !important;
  }

  /* --------------------------------------------------------------
     Print typography / reusable explanatory blocks
     -------------------------------------------------------------- */

  .hsp-print-page h2,
  .hsp-workbook-page h2 {
    margin-top: 0;
    font-size: 22pt;
    line-height: 1.08;
  }

  .hsp-workbook-item h2 {
    display: none !important;
  }

  .hsp-tool-note {
    max-width: none;
    margin: 3mm 0 4mm;
    border-left: 3px solid var(--hsp-accent);
    background: color-mix(in srgb, var(--hsp-accent-soft) 55%, white) !important;
    padding: 3mm 3.5mm;
    font-size: 9.8pt;
    line-height: 1.42;
  }

  .system-block,
  .hsp-tool-callout,
  .hsp-rule-template,
  .hsp-start-panel,
  .hsp-tool-soft-block {
    break-inside: avoid;
    page-break-inside: avoid;
    border-left-color: var(--hsp-accent) !important;
    background: color-mix(in srgb, var(--hsp-accent-soft) 58%, white) !important;
  }

  /* --------------------------------------------------------------
     Fields
     -------------------------------------------------------------- */

  .hsp-observation-field,
  .hsp-tool textarea,
  .hsp-workbook-item textarea,
  .hsp-tool input[type="text"],
  .hsp-tool input[type="number"],
  .hsp-tool input[type="email"],
  .hsp-tool select {
    overflow: hidden;
    border: 1px solid #CFD5D8;
    border-radius: 2mm;
    background: #FFF !important;
    padding: 2.5mm;
    line-height: 1.35;
    resize: none;
  }

  .hsp-field-small,
  .hsp-write-sm { min-height: 18mm; }

  .hsp-field-medium,
  .hsp-write-md { min-height: 27mm; }

  .hsp-field-large,
  .hsp-write-lg { min-height: 42mm; }

  .hsp-write-xl { min-height: 63mm; }

  .hsp-field-label,
  .hsp-question {
    margin: 3.5mm 0 1.5mm;
  }

  /* --------------------------------------------------------------
     Grids / cards
     -------------------------------------------------------------- */

  .hsp-two-col,
  .hsp-two-cols,
  .hsp-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5mm;
    margin: 4mm 0;
  }

  .hsp-interpretation-grid,
  .hsp-meaning-example {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4mm;
    margin: 4mm 0;
  }

  .hsp-step-card,
  .hsp-meaning-example > span,
  .hsp-compare > div,
  .hsp-two-cols > div {
    border-radius: 2mm;
    padding: 3.5mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hsp-step-card .hsp-observation-field {
    min-height: 25mm;
  }

  /* --------------------------------------------------------------
     Checkboxes — keep box and label on the same line
     -------------------------------------------------------------- */

  .hsp-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.2mm 7mm;
    margin: 3mm 0;
  }

  .hsp-check-list {
    gap: 1.8mm;
    margin: 3mm 0;
  }

  .hsp-check-grid label,
  .hsp-check-list label {
    display: flex !important;
    align-items: flex-start;
    gap: 1.8mm;
    break-inside: avoid;
    page-break-inside: avoid;
    white-space: normal;
    line-height: 1.35;
  }

  .hsp-check-grid input[type="checkbox"],
  .hsp-check-list input[type="checkbox"],
  .hsp-scale input[type="radio"] {
    display: inline-block !important;
    box-sizing: border-box;
    width: 3.3mm !important;
    height: 3.3mm !important;
    margin: .25mm 0 0 !important;
    padding: 0 !important;
    flex: 0 0 3.3mm;
    vertical-align: -.45mm;
  }

  .hsp-scale {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2mm;
    margin: 3mm 0 1.5mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hsp-scale label {
    min-height: 16mm;
    border-radius: 2mm;
    padding: 2mm 1mm;
  }

  /* --------------------------------------------------------------
     Flow maps / summary tables
     -------------------------------------------------------------- */

  .hsp-flow-stack {
    gap: 1mm;
    margin-top: 3mm;
  }

  .hsp-flow-stack > label {
    grid-template-columns: 28mm 1fr 58mm;
    gap: 2mm;
    border-radius: 1.5mm;
    padding: 1.7mm 2.5mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hsp-flow-stack textarea {
    min-height: 11mm;
    height: 11mm;
    padding: 1.5mm;
  }

  .hsp-flow-stack > b {
    font-size: 9pt;
  }

  .hsp-summary-table,
  .hsp-tool-table {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .hsp-summary-table th,
  .hsp-summary-table td,
  .hsp-tool-table th,
  .hsp-tool-table td {
    padding: 2.2mm 3mm;
    font-size: 9.1pt;
  }

  .hsp-summary-table td {
    height: 9mm;
  }

  /* --------------------------------------------------------------
     Generic HSP print cover

     New markup should use:
       hsp-tool hsp-tool--<family> hsp-print-cover hsp-print-only hsp-print-page

     hsp-observation-print-cover and hsp-what-happened-print-cover are
     legacy aliases only.
     -------------------------------------------------------------- */

  .hsp-print-cover,
  .hsp-observation-print-cover,
  .hsp-what-happened-print-cover {
    position: relative;
    box-sizing: border-box;
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    margin: 0 !important;
    padding: 20mm 18mm 17mm !important;
    overflow: hidden !important;
    background: var(--hsp-paper) !important;
    color: var(--hsp-ink) !important;
    break-after: page !important;
    page-break-after: always !important;
  }

  /* Covers do not use the generic worksheet footer/counter. */
  .hsp-print-cover::before,
  .hsp-print-cover::after,
  .hsp-observation-print-cover::before,
  .hsp-observation-print-cover::after,
  .hsp-what-happened-print-cover::before,
  .hsp-what-happened-print-cover::after {
    content: none !important;
    display: none !important;
  }

  .hsp-print-cover > .section-inner,
  .hsp-print-cover .content_item,
  .hsp-print-cover .content_inner,
  .hsp-print-cover .content_item_description,
  .hsp-observation-print-cover > .section-inner,
  .hsp-observation-print-cover .content_item,
  .hsp-observation-print-cover .content_inner,
  .hsp-observation-print-cover .content_item_description,
  .hsp-what-happened-print-cover > .section-inner,
  .hsp-what-happened-print-cover .content_item,
  .hsp-what-happened-print-cover .content_inner,
  .hsp-what-happened-print-cover .content_item_description {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .hsp-print-cover-inner {
    position: relative;
    z-index: 2;
    padding-top: 18mm;
  }

  .hsp-print-cover h1,
  .hsp-observation-print-cover h1,
  .hsp-what-happened-print-cover h1 {
    max-width: 150mm;
    margin: 26mm 0 6mm;
    font-size: 30pt;
    line-height: 1.03;
  }

  .hsp-print-cover .lead,
  .hsp-observation-print-cover .lead,
  .hsp-what-happened-print-cover .lead,
  .hsp-cover-subtitle {
    max-width: 145mm;
    font-size: 15pt;
    line-height: 1.3;
  }

  .hsp-cover-rule {
    width: 46mm;
    margin: 18mm 0 7mm;
    border-top: 3px solid var(--hsp-accent);
  }

  .hsp-cover-note {
    max-width: 125mm;
  }

  .hsp-cover-author {
    position: absolute;
    left: 18mm;
    bottom: 16mm;
    z-index: 2;
    font-weight: 700;
  }

  /* Optional generic decorative cover field. Its color follows the family
     through --hsp-accent, so the same markup works for START, PRACTICE, etc. */
  .hsp-print-cover .hsp-cover-field,
  .hsp-observation-print-cover .hsp-cover-field,
  .hsp-what-happened-print-cover .hsp-cover-field {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 92mm;
    background: color-mix(in srgb, var(--hsp-accent) 22%, white);
    clip-path: polygon(0 26%, 18% 20%, 38% 23%, 57% 31%, 76% 29%, 100% 18%, 100% 100%, 0 100%);
  }

  .hsp-print-cover .hsp-cover-field::after,
  .hsp-observation-print-cover .hsp-cover-field::after,
  .hsp-what-happened-print-cover .hsp-cover-field::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55mm;
    background: var(--hsp-accent);
    opacity: .55;
    clip-path: polygon(0 35%, 25% 22%, 48% 30%, 70% 19%, 100% 28%, 100% 100%, 0 100%);
  }

  .hsp-print-cover .hsp-cover-bottom,
  .hsp-observation-print-cover .hsp-cover-bottom,
  .hsp-what-happened-print-cover .hsp-cover-bottom {
    position: absolute;
    left: 18mm;
    right: 18mm;
    bottom: 14mm;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8mm;
    font-size: 9pt;
  }

  .hsp-print-cover .hsp-cover-bottom span:nth-child(2),
  .hsp-observation-print-cover .hsp-cover-bottom span:nth-child(2),
  .hsp-what-happened-print-cover .hsp-cover-bottom span:nth-child(2) {
    margin-left: auto;
  }

  /* --------------------------------------------------------------
     Long explanation tables are screen-first by default.
     If explicitly retained in print, avoid splitting key blocks.
     -------------------------------------------------------------- */

  .hsp-print-keep table,
  .hsp-print-keep blockquote,
  .hsp-print-keep .system-block,
  .hsp-print-keep .hsp-step-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  
  /* =============================================================
     NORMAL vs EXTENDED PRINT MODE
     ============================================================= */

  /* Normal workbook: explanatory/browser-only content stays hidden. */
  .hsp-print-hide,
  .hsp-print-flow.hsp-print-hide,
  .hsp-observation-explanation.hsp-print-hide,
  .hsp-tool-explanation.hsp-print-hide {
    display: none !important;
  }

  /* Extended version: reveal explanation content. */
  body.hsp-print-with-explanation .hsp-print-flow.hsp-print-hide,
  body.hsp-print-with-explanation .hsp-observation-explanation.hsp-print-hide,
  body.hsp-print-with-explanation .hsp-tool-explanation.hsp-print-hide {
    display: block !important;
  }

  /* The workbook may end normally when no appendix is requested.
     In extended mode the following flow section owns the page boundary. */
  body:not(.hsp-print-with-explanation) .hsp-print-workbook-last,
  body.hsp-print-with-explanation .hsp-print-workbook-last {
    break-after: auto !important;
    page-break-after: auto !important;
  }

  /* =============================================================
     FLOWING EXPLANATION / ARTICLE SECTIONS

     Use .hsp-print-flow instead of .hsp-print-page for content that may
     continue onto a second, third, ... physical A4 page.

     Recommended CMS classes:
       hsp-observation-explanation hsp-print-hide hsp-print-flow

     Each CMS item is wrapped in .weblet_content. In Chrome print, forcing
     the break on that wrapper is more reliable than forcing it only on the
     nested section. The child remains free to fragment across pages.
     ============================================================= */

  /* CMS route: every explanation item starts on a new physical page. */
  body.hsp-print-with-explanation
  .weblet_content:has(> .hsp-print-flow) {
    break-before: page !important;
    page-break-before: always !important;
    break-after: auto !important;
    page-break-after: auto !important;
  }

  /* Generic/non-CMS fallback: the flow section itself requests a new page. */
  body.hsp-print-with-explanation .hsp-print-flow {
    display: block !important;
    position: static !important;
    box-sizing: border-box;
    width: 210mm !important;
    max-width: 210mm !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16mm 18mm 17mm !important;
    overflow: visible !important;
    background: #FFF !important;
    color: #111 !important;
    font-size: 10pt;
    line-height: 1.38;
    break-before: page !important;
    page-break-before: always !important;
    break-after: auto !important;
    page-break-after: auto !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* When the CMS wrapper owns the boundary, neutralize the nested break to
     avoid double forced breaks / blank pages. */
  body.hsp-print-with-explanation
  .weblet_content:has(> .hsp-print-flow) > .hsp-print-flow {
    break-before: auto !important;
    page-break-before: auto !important;
  }

  /* Migration safety: if a flow section accidentally still also has
     hsp-print-page, fixed A4 height/overflow and footer counters must lose. */
  body.hsp-print-with-explanation .hsp-print-flow::before,
  body.hsp-print-with-explanation .hsp-print-flow::after {
    content: none !important;
    display: none !important;
  }

  body.hsp-print-with-explanation .hsp-print-flow > .section-inner,
  body.hsp-print-with-explanation .hsp-print-flow .content_item,
  body.hsp-print-with-explanation .hsp-print-flow .content_inner,
  body.hsp-print-with-explanation .hsp-print-flow .content_item_description {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Keep headings with the content that follows. */
  body.hsp-print-with-explanation .hsp-print-flow h2 {
    margin-top: 0 !important;
    font-size: 21pt;
    line-height: 1.08;
    break-after: avoid-page;
    page-break-after: avoid;
  }

  body.hsp-print-with-explanation .hsp-print-flow h3,
  body.hsp-print-with-explanation .hsp-print-flow h4 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  body.hsp-print-with-explanation .hsp-print-flow p,
  body.hsp-print-with-explanation .hsp-print-flow li {
    orphans: 3;
    widows: 3;
  }

  /* Long tables may cross pages. Keep rows together where possible and
     repeat header/footer groups when the print engine supports it. */
  body.hsp-print-with-explanation .hsp-print-flow table,
  body.hsp-print-with-explanation .hsp-print-flow .hsp-table,
  body.hsp-print-with-explanation .hsp-print-flow .hsp-summary-table,
  body.hsp-print-with-explanation .hsp-print-flow .hsp-tool-table {
    width: 100% !important;
    max-width: none !important;
    border-collapse: collapse;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body.hsp-print-with-explanation .hsp-print-flow thead {
    display: table-header-group;
  }

  body.hsp-print-with-explanation .hsp-print-flow tfoot {
    display: table-footer-group;
  }

  body.hsp-print-with-explanation .hsp-print-flow tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body.hsp-print-with-explanation .hsp-print-flow th,
  body.hsp-print-with-explanation .hsp-print-flow td {
    padding: 2.2mm 2.6mm !important;
    font-size: 8.7pt !important;
    line-height: 1.3;
    vertical-align: top;
  }

  /* Small semantic blocks are better kept intact when possible. */
  body.hsp-print-with-explanation .hsp-print-flow blockquote,
  body.hsp-print-with-explanation .hsp-print-flow .system-block,
  body.hsp-print-with-explanation .hsp-print-flow .hsp-step-card,
  body.hsp-print-with-explanation .hsp-print-flow figure {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }


}