body { font-family: 'Segoe UI', sans-serif; background: #f5f7fa; color: #1a1a2e; margin: 0; padding: 0; }
.page { max-width: 960px; margin: 0 auto; padding: 2rem; }
.activity { background: #fff; border-radius: 12px; padding: 2.5rem; box-shadow: 0 4px 24px rgba(0,0,0,0.07); }

/* Hero */
.activity-hero { background: linear-gradient(135deg, #1b5e20, #388e3c); color: #fff; border-radius: 10px; padding: 2.5rem 2rem 2rem 2rem; margin-bottom: 2.5rem; }
.activity-label { font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; }
.activity-title { font-size: 2rem; font-weight: 800; margin: 0.4rem 0 0.5rem 0; }
.activity-subtitle { font-size: 1.05rem; opacity: 0.85; margin-bottom: 1.2rem; }
.meta-bar { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-top: 1rem; }
.badge { background: #fff; color: #1b5e20; border-radius: 20px; padding: 0.25rem 0.9rem; font-size: 0.85rem; font-weight: 700; }
.tag { background: rgba(255,255,255,0.18); color: #fff; border-radius: 20px; padding: 0.2rem 0.75rem; font-size: 0.82rem; }

/* Sections */
h2 { color: #1b5e20; border-bottom: 2px solid #c8e6c9; padding-bottom: 0.4rem; margin-top: 2.2rem; }
h3 { color: #2e7d32; margin-top: 1.5rem; }

/* Steps */
.step { background: #f9fbe7; border-left: 5px solid #8bc34a; border-radius: 8px; padding: 1.2rem 1.5rem; margin: 1.2rem 0; }
.step-number { display: inline-block; background: #33691e; color: #fff; border-radius: 50%; width: 28px; height: 28px; text-align: center; line-height: 28px; font-weight: 700; font-size: 0.9rem; margin-right: 0.6rem; }
.step-title { font-weight: 700; font-size: 1.05rem; color: #1b5e20; }

/* Code */
pre { background: #1e1e2e; color: #cdd6f4; border-radius: 8px; padding: 1.2rem 1.5rem; overflow-x: auto; 
    font-size: 0.73rem; line-height: 1.6; white-space: pre; font-family: 'Fira Code', 'Consolas', monospace; margin: 0.8rem 0; }
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
code { background: #e8f5e9; color: #1b5e20; border-radius: 4px; padding: 0.1rem 0.4rem; font-size: 0.72em; font-family: 'Fira Code', 'Consolas', monospace; }
.cmd { background: #263238; color: #80cbc4; border-radius: 8px; padding: 0.9rem 1.4rem; 
    font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.95rem; white-space: pre; overflow-x: auto; margin: 0.8rem 0; }

/* Callouts */
.callout { border-radius: 8px; padding: 1rem 1.3rem; margin: 1.2rem 0; }
.callout.note    { background: #e3f2fd; border-left: 5px solid #1976d2; }
.callout.warning { background: #fff8e1; border-left: 5px solid #f9a825; }
.callout.success { background: #e8f5e9; border-left: 5px solid #388e3c; }
.callout.tip     { background: #f3e5f5; border-left: 5px solid #7b1fa2; }
.callout-title   { font-weight: 700; display: block; margin-bottom: 0.4rem; }

/* Checklist */
ul.checklist { list-style: none; padding-left: 0.5rem; }
ul.checklist li { padding: 0.3rem 0; }
ul.checklist li::before { content: "☐ "; font-size: 0.9rem; color: #388e3c; }

/* File tree */
.file-tree { background: #1e1e2e; color: #cdd6f4; border-radius: 8px; padding: 1.2rem 1.5rem; 
    font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.80rem; line-height: 1.8; white-space: pre; overflow-x: auto; }

/* Table */
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th { background: #2e7d32; color: #fff; padding: 0.2rem 0.5rem; text-align: left; }
td { padding: 0.35rem 0.65rem; border-bottom: 1px solid #e0e0e0; }
tr:nth-child(even) td { background: #f5f5f5; }

/* Deliverables */
.deliverable-box { background: linear-gradient(135deg, #e8f5e9, #f1f8e9); border: 2px solid #66bb6a; border-radius: 10px; padding: 1.5rem 2rem; margin: 2rem 0; }
.deliverable-box h3 { color: #2e7d32; margin-top: 0; }

/* Diagram placeholder */
.diagram-placeholder { background: #f0f4f8; border: 2px dashed #90a4ae; border-radius: 8px; padding: 2rem; 
    text-align: center; color: #546e7a; margin: 1.2rem 0; font-style: italic; }


/* =========================================================
   PRINT / PDF
   Optimized for Chromium / Chrome "Save as PDF"
   ========================================================= */

@media print {

  /* ---------------------------------------------------------
     1. PAGE SETUP
     --------------------------------------------------------- */

  @page {
    size: Letter;
    margin: 18mm 16mm 20mm 16mm;
  }

  html {
    background: #fff !important;
  }

  body {
    background: #fff !important;
    color: #1a1a2e;
    margin: 0;
    padding: 0;

    /*
     * Tell Chromium to preserve backgrounds and colors.
     * Chrome's print dialog should also have
     * "Background graphics" enabled.
     */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }


  /* ---------------------------------------------------------
     2. MAIN PAGE CONTAINER
     * Remove screen-only spacing/shadow effects.
     * Do NOT constrain the printable content unnecessarily.
     * --------------------------------------------------------- */

  .page {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .activity {
    width: auto;
    margin: 0;
    padding: 0;

    background: #fff;

    /*
     * Shadows and rounded outer containers are useful on screen
     * but unnecessary in a PDF.
     */
    box-shadow: none;
    border-radius: 0;
  }


  /* ---------------------------------------------------------
     3. HERO
     * Keep the hero together and preserve its background.
     * --------------------------------------------------------- */

  .activity-hero {
    break-inside: avoid;
    page-break-inside: avoid;

    /*
     * Prevent the hero from being split between pages.
     */
    break-before: auto;
    break-after: avoid;

    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .activity-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  .activity-subtitle {
    break-after: avoid;
    page-break-after: avoid;
  }

  .meta-bar {
    break-inside: avoid;
    page-break-inside: avoid;
  }


  /* ---------------------------------------------------------
     4. HEADINGS
     * Never leave a heading stranded at the bottom of a page.
     * --------------------------------------------------------- */

  h1,
  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;

    break-inside: avoid;
    page-break-inside: avoid;
  }

  h2 {
    margin-top: 1.8rem;
  }

  h3 {
    margin-top: 1.2rem;
  }

  /*
   * Keep the section header with at least some content.
   */
  .section-header {
    break-after: avoid;
    page-break-after: avoid;

    break-inside: avoid;
    page-break-inside: avoid;
  }


  /* ---------------------------------------------------------
     5. STEPS
     * A step should ideally remain together.
     *
     * If a very large step cannot fit on one page, Chromium
     * is allowed to split it rather than creating excessive
     * blank space.
     * --------------------------------------------------------- */

  .step {
    break-inside: avoid;
    page-break-inside: avoid;

    /*
     * Avoid unnecessary large gaps caused by the screen
     * layout when printing.
     */
    margin-top: 1rem;
    margin-bottom: 1rem;

    /*
     * Preserve the green background and border.
     */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .step-number {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }


  /* ---------------------------------------------------------
     6. TABLES
     * Tables are one of the most important PDF pagination cases.
     * --------------------------------------------------------- */

  table {
    width: 100%;

    /*
     * Tell Chromium not to split the table if possible.
     */
    break-inside: avoid;
    page-break-inside: avoid;

    /*
     * Keep the table visually attached to surrounding content.
     */
    margin-top: 0.8rem;
    margin-bottom: 1rem;

    border-collapse: collapse;

    /*
     * Helps Chromium render table backgrounds correctly.
     */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  th,
  td {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /*
   * Prevent an isolated table heading immediately before a table.
   */
  table + h3,
  h3 + table {
    break-before: avoid;
  }


  /* ---------------------------------------------------------
     7. FIGURES / DIAGRAMS
     *
     * Supports several common structures:
     *
     * <figure>
     *   <img>
     *   <figcaption>
     * </figure>
     *
     * and your custom .diagram structures.
     * --------------------------------------------------------- */

  figure,
  .figure,
  .diagram,
  .diagram-container,
  .diagram-wrapper {
    break-inside: avoid;
    page-break-inside: avoid;

    break-before: auto;
    break-after: avoid;

    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  img {
    /*
     * Never allow an image to become wider than the printable area.
     */
    max-width: 100%;
    height: auto;

    /*
     * Prevent Chromium from splitting an image.
     */
    break-inside: avoid;
    page-break-inside: avoid;

    /*
     * Preserve image colors.
     */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  figure img,
  .figure img,
  .diagram img,
  .diagram-container img,
  .diagram-wrapper img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  figcaption,
  .figure-caption,
  .diagram-caption {
    break-before: avoid;
    page-break-before: avoid;

    break-inside: avoid;
    page-break-inside: avoid;

    text-align: center;
  }


  /* ---------------------------------------------------------
     8. DIAGRAM PLACEHOLDERS
     * --------------------------------------------------------- */

  .diagram-placeholder {
    break-inside: avoid;
    page-break-inside: avoid;

    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }


  /* ---------------------------------------------------------
     9. CALLOUTS
     *
     * Keep notes/warnings/tips with their content.
     * --------------------------------------------------------- */

  .callout {
    break-inside: avoid;
    page-break-inside: avoid;

    /*
     * Avoid a callout being separated from the heading
     * immediately before it.
     */
    break-before: auto;

    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .callout-title {
    break-after: avoid;
    page-break-after: avoid;
  }


  /* ---------------------------------------------------------
     10. CODE BLOCKS
     *
     * Keep short code blocks together.
     * Very long blocks may still split naturally.
     * --------------------------------------------------------- */

  pre,
  .cmd,
  .file-tree {
    break-inside: avoid;
    page-break-inside: avoid;

    /*
     * Preserve the dark background in PDF.
     */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;

    /*
     * Avoid excessive vertical space.
     */
    margin-top: 0.7rem;
    margin-bottom: 0.9rem;
  }

  /*
   * Do not allow inline <code> to accidentally inherit
   * print-breaking behavior.
   */
  code {
    break-inside: auto;
    page-break-inside: auto;
  }


  /* ---------------------------------------------------------
     11. LISTS
     * Avoid splitting a small list unnecessarily.
     * --------------------------------------------------------- */

  ul,
  ol {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  li {
    break-inside: avoid;
    page-break-inside: avoid;
  }


  /* ---------------------------------------------------------
     12. CHECKLIST
     * --------------------------------------------------------- */

  .deliverable-box {
    break-inside: avoid;
    page-break-inside: avoid;

    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  ul.checklist {
    break-inside: avoid;
    page-break-inside: avoid;
  }


  /* ---------------------------------------------------------
     13. LINKS
     *
     * Keep links visually clean in a printed document.
     * --------------------------------------------------------- */

  a {
    color: inherit;
    text-decoration: none;
  }


  /* ---------------------------------------------------------
     14. AVOID EMPTY / ORPHANED ELEMENTS
     * --------------------------------------------------------- */

  p {
    orphans: 3;
    widows: 3;
  }


  /* ---------------------------------------------------------
     15. UTILITY CLASSES
     *
     * These can be added to specific elements when you want
     * precise manual pagination control.
     * --------------------------------------------------------- */

  .print-page-break {
    break-before: page;
    page-break-before: always;
  }

  .print-avoid-break {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-break-after {
    break-after: page;
    page-break-after: always;
  }

  .print-no-break {
    break-inside: avoid;
    page-break-inside: avoid;
  }


  /* ---------------------------------------------------------
     16. PRINT-ONLY ADJUSTMENTS
     * --------------------------------------------------------- */

  .no-print,
  .print-hidden {
    display: none !important;
  }

}

  /* ---------------------------------------------------------
     16. Headure and Footer
     * --------------------------------------------------------- */

/* Capture the H1 text to use in the running header */
h1 {
  string-set: doc-title content();
}

@page {
  size: A4;
  margin: 25mm 20mm 20mm 20mm;

  @top-center {
    content: string(doc-title);
    font-family: var(--font-body, sans-serif);
    font-size: 9pt;
    color: #666;
  }

  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
    font-family: var(--font-body, sans-serif);
    font-size: 9pt;
    color: #666;
  }
}

/* Optional: no header/footer on the first page (hero page) */
@page :first {
  @top-center {
    content: none;
  }
}