/* ==========================================================================
   Print stylesheet for hsp-blueprint

   Two layouts:
   - Portrait  → plan grid full-width, requirements compact horizontal block below
   - Landscape → plan grid takes ~80% of width, narrow requirements column right
   ========================================================================== */

@page { margin: 0.4in; }

@media print {
  /* JS marks non-ancestor elements with data-cp-print-hidden on beforeprint.
     This drops them out of page flow entirely so we don't get blank pages
     above/below the planner from WP theme headers/nav/sidebars/footers. */
  [data-cp-print-hidden] { display: none !important; }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }

  /* Override WP block theme content-width CSS variables so the planner
     isn't capped at the theme's content-size (~700px). */
  :root {
    --wp--style--global--content-size: 100% !important;
    --wp--style--global--wide-size: 100% !important;
    --wp--preset--spacing--20: 0 !important;
    --wp--preset--spacing--30: 0 !important;
    --wp--preset--spacing--40: 0 !important;
    --wp--preset--spacing--50: 0 !important;
    --wp--preset--spacing--60: 0 !important;
    --wp--preset--spacing--70: 0 !important;
    --wp--preset--spacing--80: 0 !important;
  }

  /* Neutralize WP theme ancestor wrappers (header bar, content max-width,
     section padding, etc.) so the planner spans the page edge-to-edge. JS
     marks each ancestor of #cp-app on beforeprint. */
  [data-cp-print-ancestor] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
    position: static !important;
    transform: none !important;
  }

  /* Pull the planner out of any theme container so it fills the page area. */
  #cp-app {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
  .cp-planner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    page-break-inside: auto;
  }

  /* Hide non-print UI inside the planner */
  .cp-toolbar,
  .cp-add-course,
  .cp-add-summer,
  .cp-summer-hide,
  .cp-add-elective-btn,
  .cp-modal,
  .cp-banner,
  .cp-toast,
  .cp-sidebar h4 small,
  .cp-sidebar > h4:nth-of-type(2),
  .cp-sidebar > button                  { display: none !important; }

  /* Collapsed Summer cells: hidden entirely. With cell-border separators
     (rather than gap-as-line), empty grid areas show as plain white — no
     gray bleed-through. */
  .cp-summer-collapsed { display: none !important; }

  /* Pre-HS row prints with the plan; interactive controls suppressed. */
  .cp-pre-hs-pill,
  .cp-pre-hs-hide,
  .cp-pre-hs .cp-add-course { display: none !important; }
  .cp-pre-hs { break-inside: avoid; padding: 8px 12px; }
  .cp-pre-hs-meta { flex: 0 0 auto; max-width: 200px; }

  /* Plan title (student name + class of) at the top — compact */
  #cp-app::before {
    content: attr(data-print-title);
    display: block;
    font-size: 11pt;
    font-weight: bold;
    margin: 0 0 4pt;
    text-align: center;
    color: #000;
  }

  /* Tiles: very compact, never split mid-tile */
  .cp-tile {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    box-shadow: none !important;
    border: 0.5pt solid #888 !important;
    background: #fff !important;
    transform: none !important;
    opacity: 1 !important;
    padding: 2pt 4pt !important;
    margin-bottom: 1.5pt !important;
  }
  .cp-tile-year-long { background: #fff !important; padding-right: 4pt !important; }
  .cp-tile-year-long::after { display: none !important; }
  .cp-tile-just-added,
  .cp-tile-highlighted,
  .cp-tile-dimmed { box-shadow: none !important; transform: none !important; opacity: 1 !important; animation: none !important; }

  /* Grid: cell-borders for separators (not gap-as-bg-line) so empty grid
     areas — like row 3 columns where a year has no Summer — show as white
     instead of leaking the gray gap color through.
     allow row-level page breaks if the grid is too tall for one page. */
  .cp-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: #fff !important;
    border: 0.5pt solid #888 !important;
    break-inside: auto;
    page-break-inside: auto;
  }
  .cp-year-header,
  .cp-year-header[data-year] {
    background: #f0f0f0 !important;
    color: #000 !important;
    padding: 3pt 5pt !important;
    font-size: 9pt !important;
    border-right: 0.5pt solid #888 !important;
    border-bottom: 0.5pt solid #888 !important;
    break-inside: avoid;
  }
  .cp-year-header small { font-size: 6.5pt !important; color: #444 !important; margin-top: 1pt !important; }

  .cp-semester,
  .cp-semester[data-year] {
    padding: 3pt !important;
    min-height: 0 !important;
    background: #fff !important;
    border-right: 0.5pt solid #888 !important;
    border-bottom: 0.5pt solid #888 !important;
    break-inside: avoid;
  }
  .cp-semester-label { font-size: 5.5pt !important; margin-bottom: 2pt !important; color: #666 !important; letter-spacing: 0.4pt !important; }
  .cp-tile-name { font-size: 7.5pt !important; line-height: 1.15 !important; color: #000 !important; font-weight: 600 !important; }
  .cp-tile-meta { font-size: 6pt !important; margin-top: 0pt !important; color: #555 !important; gap: 3pt !important; }
  /* Flatten the on-screen credits pill for the compact print tile. */
  .cp-tile-credits { background: transparent !important; padding: 0 !important; color: #000 !important; font-weight: 600 !important; }
  .cp-tile-duration { margin-left: 0 !important; font-style: normal !important; }
  /* Per-year credit badge isn't needed on paper. */
  .cp-year-credits { display: none !important; }
  /* Empty-cell hint adds noise on a printed plan. */
  .cp-cell-empty-hint { display: none !important; }
  .cp-summer .cp-semester-label { color: #b45309 !important; }

  /* Requirements section: very compact strip */
  .cp-sidebar {
    border-left: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 6pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
    color: #000 !important;
  }
  .cp-sidebar h4 {
    font-size: 8pt !important;
    margin: 0 0 2pt !important;
    border-bottom: 0.5pt solid #888;
    padding-bottom: 1pt;
    color: #000 !important;
    text-transform: none;
    letter-spacing: 0;
  }
  .cp-req-row {
    padding: 1pt 0 !important;
    border-bottom: 0.25pt dotted #ccc !important;
    cursor: default !important;
    background: transparent !important;
    font-size: 7.5pt !important;
  }
  .cp-req-row, .cp-req-row .cp-req-name, .cp-req-row .cp-req-progress { color: #000 !important; }
  .cp-req-progress.complete { color: #000 !important; }
  .cp-req-progress.short    { color: #000 !important; font-weight: bold !important; }
  .cp-req-progress.short::after { content: " *"; }
  /* Per-row progress bars add height; hide them in the compact print strip —
     the have/need numbers carry the same information. */
  .cp-req-row .cp-req-bar { display: none !important; }
  /* Overall completion hero: keep, but tighten for print. */
  .cp-req-summary {
    border-bottom: 0.75pt solid #000 !important;
    padding: 0 0 3pt !important;
    margin-bottom: 3pt !important;
  }
  .cp-req-summary-num strong { font-size: 9.5pt !important; }
  .cp-req-summary-num, .cp-req-summary-pct { font-size: 8pt !important; color: #000 !important; }
  .cp-req-summary .cp-req-bar { height: 3pt !important; background: #ddd !important; }
  .cp-req-summary .cp-req-bar-fill { background: #555 !important; }
}

/* ============== Color print mode (toolbar's Print → Color) ============== */
@media print {
  html.cp-print-color { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html.cp-print-color body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Year tints — restore the on-screen pastel washes (text unified to the
     Year-4 gray to match the on-screen headers). */
  html.cp-print-color .cp-year-header[data-year="1"]    { background: #dbeafe !important; color: #313042 !important; }
  html.cp-print-color .cp-year-header[data-year="2"]    { background: #dcfce7 !important; color: #313042 !important; }
  html.cp-print-color .cp-year-header[data-year="3"]    { background: #fef3c7 !important; color: #313042 !important; }
  html.cp-print-color .cp-year-header[data-year="4"]    { background: #fce7f3 !important; color: #313042 !important; }
  html.cp-print-color .cp-semester[data-year="1"]       { background: #f5f9ff !important; }
  html.cp-print-color .cp-semester[data-year="2"]       { background: #f5fbf6 !important; }
  html.cp-print-color .cp-semester[data-year="3"]       { background: #fffbf0 !important; }
  html.cp-print-color .cp-semester[data-year="4"]       { background: #fdf4f8 !important; }

  /* Subject color border on tiles — sourced from the same --cp-subject-<key>
     custom properties as the screen (see CP_Data::standard_subjects()). */
  html.cp-print-color .cp-tile { border: 0.5pt solid #ccc !important; }
  html.cp-print-color .cp-subject-english         { border-left: 2pt solid var(--cp-subject-english) !important; }
  html.cp-print-color .cp-subject-math            { border-left: 2pt solid var(--cp-subject-math) !important; }
  html.cp-print-color .cp-subject-science         { border-left: 2pt solid var(--cp-subject-science) !important; }
  html.cp-print-color .cp-subject-social_studies  { border-left: 2pt solid var(--cp-subject-social_studies) !important; }
  html.cp-print-color .cp-subject-world_languages { border-left: 2pt solid var(--cp-subject-world_languages) !important; }
  html.cp-print-color .cp-subject-fine_arts       { border-left: 2pt solid var(--cp-subject-fine_arts) !important; }
  html.cp-print-color .cp-subject-pe_health       { border-left: 2pt solid var(--cp-subject-pe_health) !important; }
  html.cp-print-color .cp-subject-electives       { border-left: 2pt solid var(--cp-subject-electives) !important; }

  /* Year-long tile gets the gradient back */
  html.cp-print-color .cp-tile-year-long { background: linear-gradient(180deg, #fff 70%, #f3f4f6 100%) !important; }

  /* Summer label keeps its sun-tinted accent */
  html.cp-print-color .cp-summer .cp-semester-label { color: #b45309 !important; }

  /* Requirements progress colors — match the on-screen scheme
     (green complete, amber short) so a color printout is consistent. */
  html.cp-print-color .cp-req-progress.complete { color: #059669 !important; font-weight: 600 !important; }
  html.cp-print-color .cp-req-progress.short    { color: #b45309 !important; }
  html.cp-print-color .cp-req-progress.short::after { content: "" !important; }
  html.cp-print-color .cp-req-summary .cp-req-bar-fill          { background: #f59e0b !important; }
  html.cp-print-color .cp-req-summary .cp-req-bar-fill.complete { background: #059669 !important; }
}

/* ============== Both orientations: plan on top, requirements as 4-col block ============== */
@media print {
  .cp-body { display: block !important; }
  .cp-sidebar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 16pt;
    row-gap: 0;
  }
  .cp-sidebar h4 { grid-column: 1 / -1; }
  .cp-req-summary { grid-column: 1 / -1; }

  /* State reference + legal disclaimer are intentionally not printed. */
  .cp-state-note { display: none !important; }
  .cp-disclaimer { display: none !important; }
}

/* === Transcript chips in print === */
@media print {
  .cp-tile-grade { background: transparent !important; color: #000 !important; border: 1px solid #999; padding: 0 4px; }
  .cp-tile-level { background: transparent !important; color: #000 !important; border: 1px solid #999; }
  .cp-tile-completed::after { color: #000 !important; }
  .cp-tile-in-progress::after { color: #000 !important; }
}

/* ============== Landscape: 8-column layout (Fall+Spring side-by-side per year) ============== */
@media print and (orientation: landscape) {
  /* Tighter page margins on landscape so the plan can claim more width */
  @page { margin: 0.25in; }

  /* Plan = first page (full sheet); requirements moved to page 2. */
  .cp-sidebar {
    page-break-before: always;
    break-before: page;
    margin-top: 0 !important;
  }

  /* Restructure the flat grid into 8 columns: each year claims 2 columns
     (Fall on the left, Spring on the right). Year headers span both columns
     above their pair. Summer spans both columns below in row 3. */
  .cp-grid {
    grid-template-columns: repeat(8, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }
  .cp-year-header[data-year="1"] { grid-column: 1 / span 2; grid-row: 1; }
  .cp-year-header[data-year="2"] { grid-column: 3 / span 2; grid-row: 1; }
  .cp-year-header[data-year="3"] { grid-column: 5 / span 2; grid-row: 1; }
  .cp-year-header[data-year="4"] { grid-column: 7 / span 2; grid-row: 1; }

  .cp-fall[data-year="1"]   { grid-column: 1; grid-row: 2; }
  .cp-spring[data-year="1"] { grid-column: 2; grid-row: 2; }
  .cp-fall[data-year="2"]   { grid-column: 3; grid-row: 2; }
  .cp-spring[data-year="2"] { grid-column: 4; grid-row: 2; }
  .cp-fall[data-year="3"]   { grid-column: 5; grid-row: 2; }
  .cp-spring[data-year="3"] { grid-column: 6; grid-row: 2; }
  .cp-fall[data-year="4"]   { grid-column: 7; grid-row: 2; }
  .cp-spring[data-year="4"] { grid-column: 8; grid-row: 2; }

  /* Row 3: Summer per year (each spans the year's two columns).
     Years without summer (cp-summer-collapsed) are already hidden by the
     base print CSS, so they don't claim a row slot. */
  .cp-summer[data-year="1"] { grid-column: 1 / span 2; grid-row: 3; }
  .cp-summer[data-year="2"] { grid-column: 3 / span 2; grid-row: 3; }
  .cp-summer[data-year="3"] { grid-column: 5 / span 2; grid-row: 3; }
  .cp-summer[data-year="4"] { grid-column: 7 / span 2; grid-row: 3; }

  /* With the wider page area + larger tile padding/fonts, tiles fill their
     cells better and feel less cramped. */
  .cp-year-header,
  .cp-year-header[data-year] {
    padding: 6pt 8pt !important;
    font-size: 10pt !important;
  }
  .cp-year-header small { font-size: 7.5pt !important; margin-top: 2pt !important; }

  .cp-semester,
  .cp-semester[data-year] {
    padding: 5pt !important;
  }
  .cp-semester-label { font-size: 7pt !important; margin-bottom: 4pt !important; }

  .cp-tile { padding: 5pt 7pt !important; margin-bottom: 3pt !important; }
  .cp-tile-name { font-size: 9pt !important; line-height: 1.25 !important; }
  .cp-tile-meta { font-size: 7pt !important; margin-top: 2pt !important; gap: 6pt !important; }

  /* Title at the top of the landscape page */
  #cp-app::before {
    font-size: 13pt;
    margin-bottom: 8pt;
  }
}

/* ====================================================================
   Transcript print view (gated on html.cp-print-transcript class added
   transiently by the toolbar's Print → Transcript menu). When this
   class is present, the regular planner is hidden and only the
   .cp-transcript section renders.
   ==================================================================== */

html.cp-print-transcript .cp-banner,
html.cp-print-transcript .cp-toast,
html.cp-print-transcript .cp-toolbar,
html.cp-print-transcript .cp-body,
html.cp-print-transcript .cp-pre-hs { display: none !important; }
html.cp-print-transcript .cp-planner { border: none !important; box-shadow: none !important; padding: 0; background: #fff !important; width: auto !important; max-width: none !important; margin: 0 !important; overflow: visible !important; }
html.cp-print-transcript .cp-transcript { display: block !important; }
html.cp-print-transcript #cp-app { background: #fff !important; }

/* Document styling — applies whenever .cp-transcript is rendered, which is
   only ever in print (display:none on screen is set in course-plan.css). */
.cp-transcript {
  font-family: Georgia, "Times New Roman", serif;
  color: #000;
  background: #fff;
  padding: 0.5in 0.5in;
  font-size: 12pt;
  line-height: 1.35;
}
.cp-transcript-header { text-align: center; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 14px; }
.cp-transcript-header h1 { margin: 0; font-size: 20pt; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.cp-transcript-school { font-size: 14pt; font-weight: 700; margin-top: 4px; }
.cp-transcript-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; text-align: left; margin-top: 12px; font-size: 11pt; }
.cp-transcript-issued { text-align: right; font-style: italic; }

.cp-transcript-section { margin: 0 0 14px 0; }
.cp-transcript-section h2 {
  font-size: 11pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid #000; padding-bottom: 2px; margin: 0 0 6px 0;
  /* Critical: never split a year header from its table. */
  break-after: avoid-page; page-break-after: avoid;
  break-inside: avoid;     page-break-inside: avoid;
}
.cp-transcript-table { break-before: avoid-page; page-break-before: avoid; }
.cp-transcript-table thead { display: table-header-group; }   /* repeat header on page break */
.cp-transcript-table tr { break-inside: avoid; page-break-inside: avoid; }

.cp-transcript-table { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
.cp-transcript-table th { text-align: left; font-weight: 700; border-bottom: 1px solid #000; padding: 4px 6px; }
.cp-transcript-table td { padding: 3px 6px; border-bottom: 1px dotted #aaa; vertical-align: top; }
.cp-transcript-table th:nth-child(3), .cp-transcript-table td:nth-child(3),
.cp-transcript-table th:nth-child(4), .cp-transcript-table td:nth-child(4),
.cp-transcript-table th:nth-child(5), .cp-transcript-table td:nth-child(5) { text-align: center; width: 14%; }
.cp-transcript-table th:nth-child(2), .cp-transcript-table td:nth-child(2) { width: 18%; }

.cp-transcript-year-summary { margin-top: 4px; padding-top: 2px; font-size: 10.5pt; display: flex; gap: 24px; justify-content: flex-end; }

.cp-transcript-empty { text-align: center; font-style: italic; color: #555; margin: 40px 0; }

.cp-transcript-footer { margin-top: 18px; }
/* Cumulative summary + grading scale are glued together: wherever the
   summary lands, the scale follows directly, even across page breaks. */
.cp-transcript-end-block { break-inside: avoid; page-break-inside: avoid; display: block; }
.cp-transcript-scale { display: block !important; }
.cp-transcript-signature { break-inside: avoid; page-break-inside: avoid; }
.cp-transcript-summary { border-top: 2px solid #000; padding-top: 8px; break-inside: avoid; page-break-inside: avoid; }
.cp-transcript-summary h2 { font-size: 11pt; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 6px 0; }
.cp-transcript-summary-grid { display: block; max-width: 60%; }
.cp-transcript-summary-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; font-size: 11pt; }
.cp-transcript-summary-row strong { font-weight: 700; }

.cp-transcript-scale { margin-top: 14px; font-size: 9.5pt; line-height: 1.3; }
.cp-transcript-scale h2 { font-size: 10.5pt; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 4px 0; }
.cp-transcript-scale p { margin: 2px 0; }

.cp-transcript-signature { margin-top: 28px; display: grid; grid-template-columns: 2fr 1fr; gap: 28px; }
.cp-sig-box { display: flex; flex-direction: column; }
.cp-sig-line { border-bottom: 1px solid #000; height: 22px; }
.cp-sig-label { font-size: 9pt; margin-top: 4px; }

.cp-transcript-generated { font-size: 8.5pt; color: #555; text-align: right; margin-top: 18px; font-style: italic; }