/* Pocket Guide print stylesheet — styles ONLY #pocket-guide-print (see
   js/modules/pocketGuide.js), a plain agenda view built fresh from trip
   data on export. Loaded via <link media="print"> so it's inert outside
   printing. Deliberately independent of the live app's theme system
   (base.css tokens, css/themes/*) — a printed page shouldn't inherit
   whichever theme happens to be active on screen. Typography is pinned to
   Roadtrip's typeface (Overpass — see css/themes/roadtrip.css) on purpose,
   not just "whatever the default happens to be", so the guide has one
   consistent look no matter which theme a viewer has picked. */

@page {
  size: letter;
  margin: 0.6in;
}

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

html,
body {
  /* base.css pins these to 100vh with overflow:hidden for the app shell —
     that would clip the guide to one screen height. */
  height: auto !important;
  overflow: visible !important;
  background: #ffffff !important;
}

/* #pocket-guide-preview-banner (the options toolbar — see
   openPocketGuidePreview() in app.js) is a screen-only affordance, but needs
   to survive this same hiding rule when the on-screen preview flips this
   stylesheet's media to 'all'. It's hidden again, explicitly, further down
   for the actual print/PDF output (@media print), since @media rules keep
   evaluating against the real output device regardless of the media flip. */
body > *:not(#pocket-guide-print):not(#pocket-guide-preview-banner) {
  display: none !important;
}

@media print {
  #pocket-guide-preview-banner {
    display: none !important;
  }
}

/* base.css's `body:not(.view-only) #app-layout { display: grid !important }`
   outranks the blanket rule above on specificity (ID + class + type beats
   ID + type), so #app-layout survived it and the live editor/timeline kept
   printing right alongside the guide. Matched here so the print rule wins
   the tie on cascade order (this file loads after base.css) regardless of
   view-only state. */
body:not(.view-only) #app-layout,
body.view-only #app-layout,
#app-layout {
  display: none !important;
}

/* On-screen preview (every Pocket Guide export routes through this now —
   see openPocketGuidePreview() in app.js): renders #pocket-guide-print as an
   actual 8.5x11in sheet — capped width, page margins as real padding, and a
   line every 11in of page height marking where a physical page break would
   fall. This is a continuous scroll with markers, not separately paginated
   sheets (that needs JS-measured pagination to do properly) — good enough to
   see "does this fit" without the complexity of the real thing. None of this
   applies during an actual print/PDF export: @page's own `margin: 0.6in`
   (above) handles real pagination, and applying padding here too would
   double it. Top padding leaves room for the fixed toolbar — its height
   varies (it wraps to more lines on narrow viewports), so it's synced into
   --pg-toolbar-height by app.js rather than guessed here. */
body.pocket-guide-previewing {
  background: #6b7280 !important;
  padding: calc(var(--pg-toolbar-height, 48px) + 24px) 0 40px;
}

body.pocket-guide-previewing #pocket-guide-print {
  box-sizing: border-box;
  width: 8.5in;
  min-height: 11in;
  margin: 0 auto;
  padding: 0.6in;
  background-color: #ffffff;
  /* 11in page height minus the 0.6in top+bottom margins above = 9.8in of
     content per page; content-box origin starts the pattern at the margin
     edge (not the sheet edge), so the first line lands where page 1 of the
     real printout would actually end. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(9.8in - 1px),
    rgba(220, 38, 38, 0.5) 9.8in
  );
  background-origin: content-box;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

/* Preview EXIT animation (see exitPocketGuidePreview() in app.js): the
   element is already stably visible when this class is added, so a plain
   transition to this faded/offset state works reliably — nothing else is
   changing at the same moment. Entrance uses the Web Animations API
   (element.animate() in openPocketGuidePreview()) instead of a CSS class —
   see the comment there for why. */
body.pocket-guide-previewing #pocket-guide-print.pg-anim-hidden {
  opacity: 0;
  transform: translateY(10px) scale(0.99);
}

.pg-toolbar.pg-anim-hidden {
  opacity: 0;
  transform: translateY(-12px);
}

/* Defense-in-depth alongside the :not() exclusions added to each theme's
   blanket body-descendant selectors (css/themes/*.css) — see those files
   for why the exclusions are the primary fix. This pins font-family on
   every descendant directly (not just inherited from #pocket-guide-print
   below), so a future theme rule that targets individual elements rather
   than a `body *` sweep still can't slip a different family past the ID
   selector's specificity. */
#pocket-guide-print,
#pocket-guide-print *,
#pocket-guide-preview-banner,
#pocket-guide-preview-banner * {
  font-family: 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#pocket-guide-print {
  display: block !important;
  color: #14161c;
  max-width: 100%;
}

.pg-cover {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 2px solid #14161c;
}

.pg-cover h1 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 700;
}

.pg-cover p {
  margin: 0;
  font-size: 13px;
  color: #45505f;
}

/* QR Code option (off by default) — see ensurePocketGuideQr() in app.js.
   The card (border + shadow + caption) is what makes it read as a
   deliberate, branded element on the page rather than a stray graphic —
   deliberately NOT an icon overlaid on the code itself, so nothing at this
   small print size can interfere with scanning it. Hidden via body.pg-hide-qr
   like the other toggles, but never removed from the DOM, so re-checking the
   box after unchecking it doesn't refetch. */
.pg-qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 10px 10px 8px;
  border: 1px solid #d8dce3;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(20, 22, 28, 0.12);
}

.pg-qr-card:has(.pg-qr-slot:empty) {
  display: none;
}

.pg-qr-caption {
  margin: 0;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #45505f;
  text-align: center;
}

/* Fixed square so the card's size doesn't jump when the skeleton spinner
   swaps for the fetched SVG. */
.pg-qr-slot {
  width: 84px;
  height: 84px;
}

.pg-qr-slot svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pg-qr-spinner {
  width: 100%;
  height: 100%;
}

.pg-qr-spinner::after {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 31px auto 0;
  border: 3px solid #d8dce3;
  border-top-color: #14161c;
  border-radius: 50%;
  animation: pg-qr-spin 0.8s linear infinite;
}

@keyframes pg-qr-spin {
  to {
    transform: rotate(360deg);
  }
}

.pg-qr-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 4px;
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
  color: #45505f;
}

body.pg-hide-qr .pg-qr-card {
  display: none;
}

/* Trip Map option (off by default) — see ensurePocketGuideMap() in app.js.
   Fixed-ratio box so the layout doesn't jump when the skeleton spinner
   swaps for the fetched image, same treatment as the QR card above but
   sized for a full-width standalone section rather than a corner badge. */
.pg-map-section:has(.pg-map-slot:empty) {
  display: none;
}

.pg-map-slot {
  width: 100%;
  height: 320px;
  border: 1px solid #d8dce3;
  border-radius: 8px;
  overflow: hidden;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pg-map-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-map-spinner {
  width: 100%;
  height: 100%;
}

.pg-map-spinner::after {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  margin: 146px auto 0;
  border: 3px solid #d8dce3;
  border-top-color: #14161c;
  border-radius: 50%;
  animation: pg-qr-spin 0.8s linear infinite;
}

.pg-map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  font-size: 11px;
  text-align: center;
  color: #45505f;
}

body.pg-hide-map .pg-map-section {
  display: none;
}

.pg-day {
  break-inside: avoid-page;
  page-break-inside: avoid;
  margin-bottom: 22px;
}

.pg-day-header {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #14161c;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* .pg-day's own break-inside: avoid-page only helps when the whole day
     fits on one page — for a day too long for that anyway, this keeps the
     header glued to at least its first item instead of printing alone at
     the bottom of a page with every event pushed to the next one. */
  break-after: avoid-page;
  page-break-after: avoid;
}

.pg-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #d8dce3;
  /* Best-effort: keep a single event from splitting across a page. Browser
     fragmentation support for `break-inside: avoid` on a grid container is
     less consistent than on plain block elements, so this can't be
     guaranteed in every print engine — page-break-inside is the legacy
     alias, kept for older engines that only honor it. */
  break-inside: avoid;
  page-break-inside: avoid;
}

/* A grid item's min-width defaults to `auto`, not 0 — it refuses to shrink
   narrower than its content's longest unbreakable token. A note or link
   (formatLinksBlock() in pocketGuide.js prints a raw URL, which has no
   spaces to wrap at) is exactly that kind of token, so without this the
   whole 1fr column — and everything in it — got pushed wider than the page
   instead of wrapping. */
.pg-item-body {
  min-width: 0;
}

.pg-item-time {
  font-size: 11.5px;
  font-weight: 700;
  color: #45505f;
}

.pg-item-duration {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 400;
  color: #45505f;
}

.pg-item-banner {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  padding: 5px 8px;
  border: 1px solid #14161c;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.pg-item-title {
  font-size: 13.5px;
  font-weight: 700;
}

.pg-item-label {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border: 1px solid #14161c;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* Timezone-crossing badge (e.g. "+3h") next to a flight/transit route's
   title — see describeItem()'s tzBadge in pocketGuide.js. Matches the live
   card's tz-jump-badge, just monochrome. */
.pg-tz-badge {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid #45505f;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: #45505f;
  vertical-align: middle;
}

.pg-item-meta,
.pg-item-address,
.pg-item-confirmation,
.pg-item-links,
.pg-item-notes {
  margin: 3px 0 0;
  font-size: 12px;
  color: #45505f;
  font-family: inherit;
  white-space: normal;
  /* white-space:normal alone only wraps between words — a URL (no spaces)
     is a single word as far as wrapping is concerned, so it still needed
     somewhere to break mid-token once .pg-item-body's min-width:0 gave it
     room to. */
  overflow-wrap: anywhere;
}

/* Flight/transit origin & destination (see formatLocationBlock() in
   pocketGuide.js): each location gets its own block, spaced apart by
   margin-top rather than a blank line in the text so the label sits
   directly on the location name below it. */
.pg-location {
  break-inside: avoid;
  page-break-inside: avoid;
}

.pg-location + .pg-location {
  margin-top: 8px;
}

.pg-item-cost {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.pg-ideas-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
}

.pg-ideas-list li {
  margin-bottom: 4px;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* A day's untimed ideas (item.type === '?'), collected into one block
   instead of one pg-item row each (see renderDaySection() in
   pocketGuide.js). */
.pg-day-ideas {
  margin-top: 10px;
}

.pg-packing-list {
  margin: 0;
  padding-left: 4px;
  list-style: none;
  font-size: 12.5px;
}

.pg-packing-list li {
  margin-bottom: 4px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pg-packing-list li.pg-packing-checked {
  color: #45505f;
  text-decoration: line-through;
}

.pg-day-ideas-heading {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #45505f;
}

/* Preview toolbar (built in openPocketGuidePreview(), app.js): fixed bar
   with the show/hide options and Print/Close actions. Screen-only — see the
   @media print rule near the top of this file that hides it from the
   actual printed output. */
.pg-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  padding: 10px 16px;
  background: #14161c;
  color: #fff;
  font: 600 13px/1.4 'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.pg-toolbar:focus {
  outline: none;
}

.pg-toolbar-title {
  font-weight: 700;
  margin-right: 4px;
  white-space: nowrap;
}

.pg-toolbar-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

/* Chip-style toggles rather than bare checkboxes — bigger, easier tap
   targets on mobile, and the checked state reads clearly at a glance. */
.pg-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pg-toolbar-toggle:has(input:checked) {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.pg-toolbar-toggle input {
  cursor: pointer;
}

.pg-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.pg-toolbar-btn {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 6px 14px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.pg-toolbar-print {
  background: #fff;
  color: #14161c;
  border-color: #fff;
}

.pg-toolbar-btn-short {
  display: none;
}

/* Below ~640px: stack title+close on top, toggle chips wrap on their own
   row, and Print becomes a full-width primary action — the single-row
   layout gets cramped fast once the toggle count grows. */
@media (max-width: 640px) {
  .pg-toolbar {
    padding: 10px 14px;
  }

  .pg-toolbar-title {
    order: 1;
    flex: 1 1 100%;
    text-align: center;
    margin-right: 0;
  }

  .pg-toolbar-toggles {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
    gap: 8px;
  }

  .pg-toolbar-toggle {
    padding: 7px 12px 7px 10px;
    font-size: 13px;
  }

  .pg-toolbar-actions {
    order: 4;
    flex: 1 1 100%;
    margin-left: 0;
  }

  .pg-toolbar-print {
    flex: 1;
  }

  .pg-toolbar-close {
    flex: 0 0 auto;
  }

  .pg-toolbar-btn-full {
    display: none;
  }

  .pg-toolbar-btn-short {
    display: inline;
    font-size: 15px;
  }
}

/* Show/hide options — see POCKET_GUIDE_OPTION_DEFS in app.js. Toggled via
   body classes rather than re-rendering the guide, so flipping an option is
   instant and the same classes apply whether the user is looking at the
   on-screen preview or the actual print/PDF output. */
body.pg-hide-cost .pg-item-cost {
  display: none;
}

body.pg-hide-confirmation .pg-item-confirmation {
  display: none;
}

body.pg-hide-notes .pg-item-notes {
  display: none;
}

body.pg-hide-address .pg-item-address {
  display: none;
}

/* Hides both the per-day Ideas block (.pg-day-ideas, renderDaySection() in
   pocketGuide.js) and the trip-level sandbox Ideas section (.pg-ideas,
   renderIdeasSection()). */
body.pg-hide-ideas .pg-day-ideas,
body.pg-hide-ideas .pg-ideas {
  display: none;
}

body.pg-hide-packing .pg-packing {
  display: none;
}