/* Eclipse Maps — print stylesheet.
 * Linked with media="print"; the @media wrapper is kept as a second guard so
 * the rules stay inert on screen even if the link loses its media attribute.
 * Prints the eye-safety line and then the location panel (#panel), as
 * black-on-white, full width. The safety line is NOT optional: the printout
 * is the artifact people take outdoors, away from the screen that would
 * otherwise be carrying the warning.
 */
@media print {

  /* Kill the map UI, overlays and chrome. */
  #map,
  #hud,
  #legend,
  #timeline,
  #callout,
  #sim-full,
  #about,
  #support,
  #modes,
  #veil,
  #cursor-card,
  #search-results,
  /* archive mode: screen-only chrome, like #about above. The print target is
     still the location panel, not the model-vs-observed comparison. */
  #archive-bar,
  #archive {
    display: none !important;
  }

  /* ── EYE SAFETY ─────────────────────────────────────────────────────
     #safety used to be in the display:none list above, so the printed page —
     the sheet somebody folds into a pocket and carries into a field, with no
     screen in sight — carried NO eye-safety line at all. It is now the first
     thing on the page, in a heavy box, above the location panel.

     TWO LEVELS PRINT, because the sheet is read with no screen to fall back
     on and the two say different things:

       #safety     the ECLIPSE-LEVEL rule, written by applySafetyPill() as a
                   pure function of the eclipse type — "only totality is safe
                   without eclipse glasses" only for a total eclipse with a
                   catalogue-declared unfiltered window, the
                   filters-at-ALL-times warning otherwise;
       .p-safety   the note for THE POINT THIS SHEET IS ABOUT, which is the
                   one the reader standing there needs.

     applySafetyPill() also sets inline styles on the on-screen pill (colour,
     radius, white-space, and — while the phone bottom sheet covers it —
     visibility:hidden), which is why every rule here is !important: inline
     styles otherwise win, and the printed page would either be in the screen
     palette or, worse, carry no eye-safety box at all. */
  #safety {
    display: flex !important;
    /* the on-screen pill is HIDDEN while the details sheet covers it; on
       paper nothing covers anything and it must always be there */
    visibility: visible !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0 14pt 0 !important;
    padding: 8pt 10pt !important;
    gap: 8pt !important;
    align-items: flex-start !important;
    border: 2pt solid #000 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    font-size: 12pt !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    white-space: normal !important;   /* a safety line is never truncated */
    overflow: visible !important;
    text-overflow: clip !important;
    /* keep it whole, and keep it attached to the panel it belongs to */
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  #safety span {
    color: #000 !important;
    background: transparent !important;
  }

  /* The POINT-LEVEL note, inside the panel that is being printed. It is the
     sentence about the place on the sheet, so it prints as heavily as the
     eclipse-level box above it and is never allowed to break across pages. */
  .p-safety {
    display: flex !important;
    visibility: visible !important;
    margin: 0 0 12pt 0 !important;
    padding: 8pt 10pt !important;
    border: 1.5pt solid #000 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
    white-space: normal !important;   /* a safety line is never truncated */
    overflow: visible !important;
    text-overflow: clip !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .p-safety .ps-label {
    color: #000 !important;
    font-weight: 700 !important;
  }
  .p-safety > b { color: #000 !important; }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* The panel becomes the document: static, full-width, black on white.
     :not(.hidden) is load-bearing for EYE SAFETY: this id-specific
     display:block !important otherwise beats .hidden's display:none
     !important and resurrects a CLOSED panel's markup — including its
     point-level "totality is safe here" note — onto the printed page for a
     point the reader never selected. closePanel() also empties #panel-body
     as a second, independent guard. */
  #panel:not(.hidden) {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  #panel * {
    color: #000 !important;
    background: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  #panel-close,
  #panel button,
  #panel canvas,
  #panel input,
  #panel .p-share {
    display: none !important;
  }

  #panel a {
    color: #000 !important;
    text-decoration: none !important;
  }

  /* Contact-time rows: readable table-like lines. */
  .p-times {
    margin-top: 12pt !important;
    border-top: 1pt solid #000 !important;
  }

  .p-times div {
    display: flex !important;
    justify-content: space-between !important;
    padding: 4pt 0 !important;
    border-bottom: 0.5pt solid #999 !important;
    font-size: 11pt !important;
  }

  .p-times dt,
  .p-times dd {
    color: #000 !important;
  }

  .p-times .hl dt,
  .p-times .hl dd {
    font-weight: 700 !important;
  }

  /* Stat chips: bordered inline labels. */
  .p-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4pt !important;
    margin-top: 10pt !important;
  }

  .p-chips > * {
    border: 0.75pt solid #000 !important;
    border-radius: 3pt !important;
    padding: 3pt 6pt !important;
    font-size: 9.5pt !important;
    color: #000 !important;
    background: #fff !important;
  }

  /* Sensible page margins. */
  @page {
    margin: 1.5cm;
  }
}