/* ═══════════════════════════════════════════════════════════════════════
   gd-print.css — shared print stylesheet
   grow, dammit · Orchard Sites

   Used by BOTH:
     admin.grow-dammit.com/index.php   (map + pins + edit tools)
     maps.grow-dammit.com/index.html   (map + pins, read-only)

   Link it LAST in <head>, after gd-tokens.css and gd-components.css and
   after the page's own inline <style> block, so it wins ties on cascade
   order:

     <link rel="stylesheet" href="gd-print.css" media="print">

   Goal: printing produces the planting map and its title, and nothing
   else. Navigation, toggles, the overview box, the selector chevron,
   dropdowns, tooltips and the mobile view are all suppressed. Only
   #map-title-strip and .app-body survive.

   ── Why so many !important declarations ──
   Two things fight us on print and both need overriding by force:

   1. #map-inner carries INLINE left/top/width/height in pixels, written
      by positionInnerAndDraw() from the on-screen viewport. Inline styles
      beat any stylesheet rule that isn't !important, and those pixel
      values are meaningless on paper.

   2. Both pages carry a `@media (max-width: 719px)` block that hides
      #map-title-strip and .app-body outright to swap in the mobile view.
      A print canvas can report a narrow CSS width, which would blank the
      entire printout. So the rules that RESTORE those two elements are
      both !important and given extra specificity (html body …) to beat
      that breakpoint regardless of source order.
   ═══════════════════════════════════════════════════════════════════════ */

@media print {

  /* ── Page setup ──
     Landscape by default: planting maps are wider than they are tall, so
     portrait wastes most of the sheet. */
  @page {
    size: landscape;
    margin: 10mm;
  }

  /* ── Colour fidelity ──
     Browsers drop background fills when printing unless told otherwise.
     Without this the pins keep their strokes but lose their fill, and
     dead trees become indistinguishable from living ones. */
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ── Document shell ──
     The screen layout is a locked 100vh flex column with overflow hidden.
     On paper the content has to be free to flow and grow. */
  html,
  body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    display: block !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     SUPPRESSED — everything that is screen furniture
     ═══════════════════════════════════════════════════════════════════ */

  /* Global navigation, drawer and its overlay */
  .gd-nav,
  .gd-nav__bar,
  .gd-drawer,
  .gd-drawer-overlay,
  .gd-nav__hamburger,

  /* Map-picker affordances — the title text stays, the control does not */
  .map-selector-chevron,
  #map-dropdown,

  /* Edit / label toggles and their status readout (admin only) */
  #edit-controls,
  #edit-toggle-btn,
  #names-toggle-btn,
  #tag-toggle-btn,
  #save-pins-btn,
  #edit-status,

  /* Data panels and transient UI */
  #overview-box,
  #tooltip,
  #error-banner,

  /* The mobile field view never prints — the map does */
  #mobile-view,
  .mv-bar,
  #mv-content,

  /* Pre-selection placeholder */
  .welcome-screen,
  #welcome {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════════════
     RETAINED — title strip + map area
     ═══════════════════════════════════════════════════════════════════ */

  /* Title strip. Extra specificity (html body …) so it survives the
     mobile breakpoint's display:none !important. */
  html body #map-title-strip {
    display: block !important;
    position: static !important;
    padding: 0 0 6mm 0 !important;
    background: transparent !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The selector button is a button on screen and a heading on paper. */
  html body #map-selector-btn {
    display: block !important;
    cursor: default !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }
  #map-title-strip .map-eyebrow {
    font-size: 9pt !important;
    color: #555 !important;
  }
  #map-title-strip .map-title-heading {
    font-size: 16pt !important;
    color: #08192D !important;
  }

  /* Map area. Same specificity trick as the title strip. */
  html body .app-body {
    display: block !important;
    position: static !important;
    flex: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  html body #main {
    display: block !important;
    position: static !important;
    flex: none !important;
    overflow: visible !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* #map-container is display:none until .visible is added by JS. Leave
     that alone — printing with no map selected should print no map. */
  html body #map-container.visible {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* ── The critical override ──
     positionInnerAndDraw() writes inline position/left/top/width/height
     in screen pixels. Strip all of it and let the block size itself to
     the page width; the image's own aspect ratio then sets the height.
     #svg-overlay is 100%/100% of this box and carries a viewBox, so the
     pins and their labels scale with it. */
  html body #map-inner {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    outline: none !important;   /* kill the edit-mode dashed frame */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  html body #map-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  html body #svg-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Pin labels: keep the plate opaque so tags stay legible over the map,
     and drop the translucency that reads as grey mush on paper. */
  #tag-labels rect {
    fill: #ffffff !important;
    stroke: #08192D !important;
    stroke-width: .6 !important;
  }
  #tag-labels line {
    stroke: #08192D !important;
  }

  /* Never print a link's href in brackets — the map is full of them. */
  a[href]::after {
    content: "" !important;
  }
}
