/* Print: quick-reference itinerary only, no controls. */
@media print {
  @page { size: landscape; margin: 12mm; @bottom-left { content: "Travel Planner"; font: 9px system-ui, sans-serif; color: #000; } @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9px system-ui, sans-serif; color: #000; } } /* a footer so loose pages stay in order (browsers without page-margin boxes just skip it) */
  :root, [data-theme="dark"] {
    --bg: #fff; --surface: #fff; --surface-alt: #f3f4f6; --border: #e5e7eb;
    --text: #000; --text-muted: #000; --text-faint: #000; 
  }
  .sticky-top { position: static; }
  .add-day,
  .day-del,
  .day-toast,
  .app-header,
  .toolbar,
  .tabs,
  .view-toggle,
  .builder,
  .builder-error,
  .calendar-hint,
  .add,
  #drawing-board,
  #budget {
    display: none !important;
  }
  #itinerary { display: block !important; }
  main { padding: 0; max-width: none; }
  .days:not(.calendar) .day-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
  .days:not(.calendar) .day-grid.few-days { grid-template-columns: repeat(var(--days), minmax(0, 1fr)); } /* under seven days: the columns fill the page */
  #itinerary .days { zoom: var(--print-day-zoom, 1); } /* set by print.js when a Box would be taller than a page */
  .day { break-inside: avoid; min-height: 120px; }
  .day-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Every second day gets a pale blue Box and a slightly deeper blue Title Pane, to tell days apart. */
  .day:nth-child(even) { background: #eef5ff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .day:nth-child(even) .day-head { background: #dce9fb; }
  /* Darker grey outline on each Box and its Title Pane when printing. */
  .day, .day-head, .day .tile-notes { border-color: #000; }
  .day { border-width: 1px; } /* as thin as the printed panels on the Drawing Board and Budget */
}
.days:not(.calendar) .add-day-before .add-day-plus { font-size: 1rem; }

/* Print, pages 2 and 3: the Drawing Board and the Budget follow the itinerary, each starting on a new page. */
@media print {
  body.print-all #drawing-board, body.print-all #budget { display: block !important; break-before: page; }
  body.print-all #drawing-board .board-add, body.print-all .board-table .grp-strip { display: none !important; }
  /* Panel outlines print as thin as the other lines. */
  body.print-all .board-table thead tr.titles th { border-top-width: 1px; border-bottom-width: 1px; }
  body.print-all .board-table thead tr.titles th:first-child { border-left-width: 1px; }
  body.print-all .board-table thead tr.titles th:last-child { border-right-width: 1px; }
  body.print-all #drawing-board .board-table thead tr.titles th:last-child { border-left: 0; } /* no bar before the last (Notes) title */
  body.print-all .board-table tbody tr:not(.grp-gap) td:first-child, body.print-all .board-table tbody tr:not(.grp-gap) td.c-type { border-left-width: 1px; }
  body.print-all .board-table tbody tr:not(.grp-gap) td:last-child { border-right-width: 1px; }
  body.print-all .board-table tbody tr.grp-first td { border-top-width: 1px; }
  body.print-all .board-table tbody tr.grp-last td { border-bottom-width: 1px; }
  body.print-all #drawing-board, body.print-all #budget { --border: #000; } /* black lines, like the itinerary */
  body.print-all .board-table tbody tr:not(.grp-gap) td:not(.c-type):not(.c-main) {
    background: #fff;
  } /* plain white and light blue alternate, so they stay apart in black and white */
  body.print-all .board-table tbody tr.grp-alt td:not(.c-type):not(.c-main) { background: #eef5ff; }
  body.print-all .board-table thead tr.titles th { background: #eef5ff; }
  body.print-all .board-card { border: 0; padding: 0; margin: 0; }
  body.print-all .board-scroll { overflow: visible; }
  body.print-all #drawing-board .board-table { zoom: var(--print-fit, 1) !important; }
  body.print-all .board-table tbody tr { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-all .board-table th, body.print-all .board-table td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-all .board-table input,
  body.print-all .board-table select,
  body.print-all #budget input,
  body.print-all #budget select {
    appearance: none;
    -webkit-appearance: none;
  }
}
@media print { .board-table th, .board-table input::placeholder { color: #000; } }
@media print {
  body.print-all .budget-cats .cat-list,
  body.print-all .budget-cats .cat-total {
    border-width: 1px;
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.print-all .budget-cats .cat-total { border-width: 1px 0 0; }
  body.print-all .budget-cats .cat-row[class*="fill-"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media print {
  /* Scaled with a transform inside a box of the scaled size; CSS zoom draws rounded corners badly in print. */
  body.print-all #budget { width: var(--print-w); height: var(--print-h); overflow: hidden; }
  body.print-all #budget .budget-layout {
    zoom: 1 !important;
    transform: scale(var(--print-fit, 1));
    transform-origin: 0 0;
    display: grid;
    grid-template-columns: var(--print-cols);
    gap: 16px;
    width: var(--print-nat, max-content);
  }
  body.print-all #budget .budget-layout > .board-card { margin: 0; width: auto; min-width: 0; max-width: none; }
  body.print-all #drawing-board.print-xf { width: var(--print-w); height: var(--print-h); overflow: hidden; }
  body.print-all #drawing-board.print-xf .board-table { width: max-content; zoom: 1 !important; transform: scale(var(--print-fit, 1)); transform-origin: 0 0; }
  body.print-all #budget .budget-cats { zoom: 1 !important; }
  /* A table too tall for one page prints as scaled page-sized pieces (print-pages.js); the whole table is hidden then. */
  body.print-all #drawing-board.print-split > .board-card { display: none; }
  body.print-all #drawing-board .print-board-page .board-table { zoom: 1 !important; } /* scaled by its transform only */
  body.print-all .print-board-page { overflow: hidden; break-after: page; break-inside: avoid; }
  body.print-all .print-board-page:last-child { break-after: auto; }
  body.print-all #budget .budget-layout > .board-card { max-width: none; }
}
/* The plain-text stand-in for an entry box in the printout; it only exists while printing, and print.js measures it on screen, so it is styled everywhere. */
.print-val {
  display: inline-block;
  box-sizing: border-box;
  min-width: 56px;
  padding: 6px 8px;
  border: 1px solid #000;
  border-radius: var(--radius);
  background: #fff;
  color: #000;
  font: inherit;
  line-height: 1.2;
  min-height: 2.1em;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.board-table td.c-main .print-val { border-color: var(--edge); }
@media print { .day-content .tile-notes:not(:has(.tile-note-text)) { display: none !important; } } /* an empty Notes tile does not print */
body.print-measure #drawing-board, body.print-measure #budget { display: block; } /* only while print.js measures them */
@media print { body.print-all .budget-cats .cat-row[class*="fill-"] { border-width: 1px; } } /* as thin as the Total tile and the outer box */
/* Grayscale printing (chosen in the Print pop-up): every light blue fill becomes the Event tile purple, then the whole page is printed in grey. */
@media print {
  body.print-grey .day:nth-child(even),
  body.print-grey .board-table tbody tr.grp-alt td:not(.c-type):not(.c-main),
  body.print-grey .board-table thead tr.titles th,
  body.print-grey .day:nth-child(even) .day-head {
    background: #ded3ff;
  }
  html:has(body.print-grey) { filter: grayscale(1); }
}

/* Tighter on paper. These are not inside @media print: print.js measures the table (to scale it to the page) before the print layout applies, and body.print-all only exists while printing. */
body.print-all .board-table .print-val { white-space: normal; max-width: 13em; }
body.print-all .board-table th, body.print-all .board-table td { padding: 4px 3px; }
body.print-all .board-table thead tr th:not(.c-type):not(.grp-stub) { padding-left: 8px; }
body.print-all .board-table td.c-main { padding-right: 4px; }

/* Calendar view: weekday names at the top of every page after the first (print.js decides where pages start). */
.print-weekdays { grid-column: 1 / -1; break-before: page; }

/* Repeated weekday boxes take their columns and gap from the Day boxes below them (page 1 keeps its own bar, which already lines up). */
.print-weekdays > .weekday-row { gap: 8px; padding: 0; max-width: none; width: 100%; }

@media print { body.print-all.print-itinerary-only #drawing-board, body.print-all.print-itinerary-only #budget, body.print-all.print-no-costs #budget { display: none !important; } } /* the Print pop-up's Itinerary only tick */
.print-opt { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; font-size: 0.9rem; }

/* Printouts use straight corners everywhere: rounded corners under print scaling left artefacts. */
@media print { *, *::before, *::after { border-radius: 0 !important; } }

/* Greyscale prints cannot rely on colour, so Events get dashed outlines and Accommodation dotted ones (Transport stays solid); the left bar stays solid. */
@media print {
  body.print-grey .tile-flexible { border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; }
  body.print-grey .tile-stay { border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; }
}

/* The Location text starts where the other tiles' text does (their printed left padding is 8px). */
@media print { .day-loc { padding-left: 8px; } }

/* Weekday bars (page 1 and the repeated ones): scaled like the Day Boxes, the gap between weekday boxes is the Day Boxes' column gap (8px, scaled),
   and the gap under the bar is the same 8px (scaled) as the gap between Day Box rows. */
@media print {
  .weekday-bar { margin-bottom: 0; }
  .weekday-bar:not(.print-weekdays) { zoom: var(--print-day-zoom, 1); }
  .weekday-bar:not(.print-weekdays) .weekday-row { gap: 8px; padding: 0; max-width: none; width: 100%; }
  body:not(:has(#drawing-board:target)):not(:has(#budget:target)) main { padding-top: calc(8px * var(--print-day-zoom, 1)); }
}

/* The Trip at a glance strip exists only while printing; its rules sit outside @media print so it measures correctly before the browser switches to print. */
.print-glance { display: none; }
body.print-all .print-glance { display: block; border: 1px solid #000; padding: 10px 14px; margin: 0; font-size: 13px; line-height: 1.35; break-after: page; }
.print-glance > strong { display: block; font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid #000; }
.glance-line { display: flex; flex-wrap: wrap; gap: 12px 4px; align-items: center; padding: 10px 0; }
.glance-line + .glance-line { border-top: 1px solid #666; }
.glance-line:last-child { padding-bottom: 0; }
.glance-icon { flex: none; width: 18px; height: 18px; fill: #000; margin-right: 4px; }
.glance-chips { display: contents; } /* chips flow in the line itself, so wrapped rows start under the icon */
.glance-label { font-weight: 700; margin-right: 2px; }
.glance-chip { display: flex; align-items: center; box-sizing: border-box; height: 20px; border: 1px solid #666; padding: 0 7px; line-height: 1; }
.glance-label, .print-glance > strong { line-height: 1.2; }
.glance-chip:nth-of-type(even) { background: #e3edfb; }
.glance-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }