/* ============== Local styles, scoped to this page ============== */

    /* Callout boxes, same family as ucla.html */
    .pk-callout {
      padding: 18px 22px;
      border-left: 4px solid var(--wf-coral);
      background: var(--ys-bg-soft);
      border-radius: 0 10px 10px 0;
      margin: 14px 0;
    }
    .pk-callout.teal   { border-left-color: var(--ys-teal, #00B3A4); }
    .pk-callout.navy   { border-left-color: var(--ys-navy, #2F2D56); }
    .pk-callout.warn   { border-left-color: #c69b1a; background: #fdf6e0; }
    .pk-callout-tag {
      font-family: var(--ys-font-display);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 0.72rem;
      color: var(--wf-coral);
      margin-bottom: 6px;
    }
    .pk-callout.teal .pk-callout-tag { color: var(--ys-teal, #00B3A4); }
    .pk-callout.navy .pk-callout-tag { color: var(--ys-navy, #2F2D56); }
    .pk-callout.warn .pk-callout-tag { color: #a07712; }

    /* The tickable checklist itself. Real <input type="checkbox">
       so the list is tickable on screen and prints with empty
       boxes that can be marked on paper. */
    .pk-list {
      list-style: none;
      padding: 0;
      margin: 8px 0 0;
    }
    .pk-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 7px 4px;
      border-bottom: 1px dashed rgba(47,45,86,0.12);
      line-height: 1.45;
    }
    .pk-list li:last-child { border-bottom: 0; }
    .pk-list input[type="checkbox"] {
      width: 18px;
      height: 18px;
      margin-top: 3px;
      flex-shrink: 0;
      accent-color: var(--wf-coral);
      cursor: pointer;
    }
    .pk-list .pk-item { flex: 1; }
    .pk-list .pk-item .pk-note {
      display: block;
      font-size: 0.86rem;
      color: var(--ys-muted);
      margin-top: 2px;
    }
    .pk-list label { cursor: pointer; }

    /* Two-column grid for checklist cards, stacking on small screens. */
    .pk-checklist-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: 8px;
    }
    @media (max-width: 760px) {
      .pk-checklist-grid { grid-template-columns: 1fr; }
    }

    .pk-card {
      background: white;
      border: 1px solid rgba(47,45,86,0.12);
      border-radius: 12px;
      padding: 22px 24px;
      box-shadow: 0 1px 3px rgba(47,45,86,0.06);
    }
    .pk-card h3 {
      font-family: var(--ys-font-display);
      color: var(--ys-navy);
      margin: 0 0 4px;
      font-size: 1.18rem;
    }
    .pk-card .pk-card-tag {
      font-size: 0.76rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--wf-coral);
      margin-bottom: 10px;
    }

    /* Print / Save-as-PDF button */
    .pk-print-row {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      margin: 18px 0 8px;
    }
    .pk-print-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 999px;
      background: var(--ys-navy, #2F2D56);
      color: white;
      text-decoration: none;
      font-family: var(--ys-font-display);
      letter-spacing: 0.04em;
      font-size: 0.95rem;
      border: 0;
      cursor: pointer;
      transition: transform 0.15s ease, background 0.15s ease;
    }
    .pk-print-btn:hover { background: var(--wf-coral); transform: translateY(-1px); }
    .pk-print-btn svg { width: 18px; height: 18px; fill: currentColor; }

    /* Reset / tick-all helpers */
    .pk-tools {
      display: flex;
      gap: 8px;
      margin: 6px 0 14px;
      font-size: 0.85rem;
    }
    .pk-tools button {
      background: transparent;
      border: 1px solid rgba(47,45,86,0.2);
      border-radius: 999px;
      padding: 5px 12px;
      cursor: pointer;
      color: var(--ys-navy, #2F2D56);
      font-family: inherit;
    }
    .pk-tools button:hover { background: var(--ys-bg-soft); }

    /* Timing-rules table */
    .pk-timing {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(47,45,86,0.08);
    }
    .pk-timing th, .pk-timing td {
      padding: 10px 14px;
      border-bottom: 1px solid rgba(47,45,86,0.08);
      text-align: left;
      vertical-align: top;
    }
    .pk-timing th {
      background: var(--ys-bg-soft);
      color: var(--ys-navy);
      font-family: var(--ys-font-display);
      letter-spacing: 0.04em;
    }
    .pk-timing tr:last-child td { border-bottom: 0; }
    .pk-timing td.pk-when {
      font-weight: 600;
      color: var(--wf-coral);
      white-space: nowrap;
      font-family: var(--ys-font-display);
    }

    /* "Common mistakes" cards */
    .pk-mistakes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin-top: 8px;
    }
    .pk-mistake {
      background: white;
      border-left: 4px solid #c69b1a;
      border-radius: 0 10px 10px 0;
      padding: 14px 18px;
      box-shadow: 0 1px 2px rgba(47,45,86,0.06);
    }
    .pk-mistake h4 {
      margin: 0 0 4px;
      font-family: var(--ys-font-display);
      color: var(--ys-navy);
      font-size: 1.02rem;
    }
    .pk-mistake p { margin: 0; font-size: 0.9rem; color: var(--ys-muted); }

    /* Element that only appears in print output, used to brand the PDF. */
    .pk-print-only { display: none; }

    /* ============== Print-friendly PDF output ============== */
    @media print {
      /* Force backgrounds and accent colours to print across browsers. */
      *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }

      @page {
        size: A4 portrait;
        margin: 12mm 10mm 14mm 10mm;
      }

      html, body {
        background: white !important;
        color: #111 !important;
        font-size: 10.5pt;
        line-height: 1.4;
      }

      /* Hide everything that is screen-only chrome. */
      .ys-site-header,
      .ys-site-footer,
      .wf-hero,
      .pk-print-row,
      .pk-tools,
      .ys-btn-row { display: none !important; }

      /* Top-of-PDF brand block (only shows in print). */
      .pk-print-only {
        display: block !important;
        text-align: center;
        padding: 0 0 12px;
        margin-bottom: 14px;
        border-bottom: 1.5px solid #2F2D56;
      }
      .pk-print-only .pk-print-title {
        font-family: var(--ys-font-display, Futura, system-ui, sans-serif);
        font-size: 18pt;
        color: #2F2D56;
        margin: 0 0 4px;
        letter-spacing: 0.02em;
      }
      .pk-print-only .pk-print-sub {
        font-size: 9.5pt;
        color: #555;
        margin: 0;
      }

      /* Tight, single-column layout for the main checklist; keep mistakes 2-col. */
      .wf-section { padding: 8px 0 !important; }
      .wf-section.alt { background: white !important; }
      .ys-container { max-width: 100% !important; padding: 0 !important; }
      .ys-section-head { margin-bottom: 18px; }
      .ys-section-head h2 { font-size: 14pt; margin: 12px 0 4px; }
      .ys-section-head p { font-size: 10pt; color: #444; }
      .ys-rule { display: none; }

      .pk-checklist-grid {
        display: block !important;
        gap: 0 !important;
      }
      .pk-checklist-grid > .pk-card {
        width: 100%;
        margin-bottom: 12px;
      }

      .pk-mistakes-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }

      /* Card / callout styling. */
      .pk-card,
      .pk-callout,
      .pk-mistake,
      .pk-timing {
        box-shadow: none !important;
        border: 1px solid #c8c8d2 !important;
        background: white !important;
        page-break-inside: avoid;
      }
      .pk-callout { border-left-width: 4px !important; }
      .pk-callout.teal { border-left-color: #00B3A4 !important; }
      .pk-callout.navy { border-left-color: #2F2D56 !important; }
      .pk-callout.warn { border-left-color: #c69b1a !important; background: #fdf6e0 !important; }
      .pk-mistake { border-left: 4px solid #c69b1a !important; }

      .pk-card h3,
      .pk-callout-tag,
      .pk-card-tag,
      .pk-mistake h4,
      .pk-timing th { color: #2F2D56 !important; }

      .pk-card { padding: 12px 14px !important; }
      .pk-card h3 { font-size: 11.5pt; }
      .pk-card-tag { font-size: 8.5pt; }

      .pk-list { margin: 4px 0 0; }
      .pk-list li {
        padding: 4px 2px;
        page-break-inside: avoid;
        font-size: 10pt;
      }
      .pk-list .pk-item .pk-note {
        font-size: 8.5pt;
        color: #555;
      }

      .pk-timing th, .pk-timing td { padding: 7px 10px; font-size: 10pt; }
      .pk-timing thead { display: table-header-group; }
      .pk-timing tr { page-break-inside: avoid; }
      .pk-timing td.pk-when { color: #d65800 !important; }

      .pk-mistake { padding: 10px 12px !important; }
      .pk-mistake h4 { font-size: 10.5pt; }
      .pk-mistake p { font-size: 9.5pt; }

      h2, h3, h4 { page-break-after: avoid; }
      section { page-break-inside: auto; }

      /* Links: keep readable, don't dump URLs after text. */
      a, a:link, a:visited {
        color: #2F2D56 !important;
        text-decoration: underline;
      }

      /* Checkbox rendering: empty square for print, ✓ if pre-ticked. */
      input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        width: 11px;
        height: 11px;
        border: 1.3px solid #333;
        border-radius: 2px;
        background: white;
        margin: 4px 4px 0 0;
        flex-shrink: 0;
      }
      input[type="checkbox"]:checked::after {
        content: "✓";
        display: block;
        text-align: center;
        line-height: 9px;
        color: #111;
        font-weight: bold;
        font-size: 8.5pt;
      }
    }