/* src/styles/views/poster.css — the journey poster (#/poster).
   The sheet is always laid out at paper size (--po-w × --po-h, set in mm by views/poster.js) and scaled
   to the column on screen with --po-scale; on paper the scale is dropped. @page is injected by the view. */

.view-poster.page { max-width: calc(1120px + 2 * var(--gutter)); }

/* ── Screen chrome ──────────────────────────────────────────────────────────── */
.view-poster .po-chrome { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-2) var(--s-3); padding-bottom: var(--s-4); }
.view-poster .po-back {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap-min); margin-left: -6px; padding-right: var(--s-3);
  justify-self: start; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); text-decoration: none;
}
.view-poster .po-back:hover { color: var(--text); }
.view-poster .po-actions { display: flex; align-items: center; gap: var(--s-3); }
.view-poster .po-hint, .view-poster .po-status {
  grid-column: 1 / -1; margin: 0; font: var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-3);
}
.view-poster .po-status { color: var(--text-2); }

/* ── Stage: the scaled preview ──────────────────────────────────────────────── */
.view-poster .po-stage { position: relative; overflow: hidden; }
.view-poster .po-sheet {
  box-sizing: border-box; width: var(--po-w); height: calc(var(--po-h) - 1mm);   /* 1mm shy: never spills onto a second page */
  display: flex; flex-direction: column; gap: 4mm;
  color: var(--text);
  transform-origin: 0 0; transform: scale(var(--po-scale, 1));
}
.view-poster .po-sheet, .view-poster .po-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ── Title block ────────────────────────────────────────────────────────────── */
.view-poster .po-head {
  flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 8mm;
  padding-bottom: 3mm; border-bottom: 2px solid var(--text);
}
.view-poster .po-head-text { min-width: 0; display: flex; align-items: baseline; gap: 4mm; flex-wrap: wrap; }
.view-poster .po-title { margin: 0; font: 500 15mm/1 var(--font-serif); letter-spacing: -.015em; }
.view-poster .po-subtitle { margin: 0; font: italic 400 var(--fs-title-2)/1.1 var(--font-serif); color: var(--text-2); }
.view-poster .po-meta {
  flex: none; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1mm;
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
}
.view-poster .po-meta-tally { color: var(--text-3); }
.view-poster .po-sheet[data-paper="a3"] .po-title { font-size: 22mm; }
.view-poster .po-sheet[data-paper="a3"] .po-subtitle { font-size: calc(var(--fs-title-2) * 1.2); }

/* ── Map + legend ───────────────────────────────────────────────────────────── */
.view-poster .po-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 52mm; gap: 5mm; }
.view-poster .po-map { position: relative; min-height: 0; border: 1px solid var(--line-strong); }
.view-poster .po-map-canvas { position: absolute; inset: 0; background: var(--bg); isolation: isolate; outline: none; }
.view-poster .po-map .leaflet-control-attribution { display: none; }   /* printed in full under the map instead */
/* The frame is fitted at a fractional zoom, so tiles are scaled: a 1px overlap (drawn opaque, not with the blend Leaflet uses) closes the hairline seams. */
.view-poster .po-map .leaflet-tile-container img.leaflet-tile { width: 257px !important; height: 257px !important; mix-blend-mode: normal; }
.view-poster .po-map .leaflet-marker-icon, .view-poster .po-map .leaflet-interactive { cursor: default; }

.view-poster .po-legend { min-width: 0; overflow: hidden; }
.view-poster .po-legend .mk-legend { width: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: none; }
.view-poster .po-legend .mk-legend-summary { display: none; }
.view-poster .po-legend .mk-legend-body { max-height: none; overflow: visible; padding: 0; border-top: 0; gap: 4mm; }
.view-poster .po-legend .mk-legend-row { min-height: 6mm; }
/* The shared legend also explains place pins and visit stamps; the poster draws stays only, so its
   marker section keeps just the first row (the numbered stay). */
.view-poster .po-legend .mk-legend-section:last-child .mk-legend-row:nth-child(n+2) { display: none; }

/* ── Foot: route strip + credit ─────────────────────────────────────────────── */
.view-poster .po-foot { flex: none; display: flex; flex-direction: column; gap: 2mm; }
.view-poster .po-route .route-strip { --ring: var(--bg); }
.view-poster .po-credit {
  margin: 0; min-height: 3mm; font: 400 9px/1.3 var(--font-sans); color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Paper ──────────────────────────────────────────────────────────────────── */
@media print {
  .tabbar, .sidenav, .appbar, .toast-region, .view-poster .po-chrome { display: none !important; }
  .app, .view-host, .view-poster.page { display: block; padding: 0; margin: 0; max-width: none; }
  html, body { background: #fff !important; }
  .view-poster .po-stage { height: auto !important; overflow: visible; }
  .view-poster .po-sheet { transform: none; break-inside: avoid; page-break-inside: avoid; }
  .view-poster .po-route .route-strip { --ring: #fff; }
  .view-poster .po-map-canvas { background: #fff; }
}