/*
 * print.css — site fixes that must apply on every page, plus the print sheet.
 * Linked from BaseLayout (source) and injected live by the netism.org nginx sub_filter.
 * Bump ?v= on every change: /styles/*.css is cached hard at Cloudflare.
 */

/* 1. "Listen to this page" is sticky but its offset ignored the sticky site header, so it slid
   underneath the menu. Sit it just below the header instead (the contents column uses the same
   offset). Phones have a shorter header. */
.sep-article .listen { top: calc(var(--header-h, 5.5rem) + 1.25rem) !important; }
@media (max-width: 1000px) { .sep-article .listen { top: 4.35rem !important; } }

/* 2. The hero explainer button ("Walk the whole of it") is scrolled past unseen: a soft ring
   pulses out of its play glyph a few times after the page settles (the study script adds the
   class; the explainer itself is untouched). */
.nh-pulse { position: relative; }
.nh-pulse::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(244, 200, 120, .75); opacity: 0;
  animation: nhPulse 2.6s ease-out 1.4s 5;
}
@keyframes nhPulse { 0% { transform: scale(.94); opacity: .9; } 70% { transform: scale(1.12); opacity: 0; } 100% { transform: scale(1.12); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nh-pulse::after { animation: none; } }

/* 3. Study layer: highlights on screen */
mark.nh { background: rgba(212, 160, 60, .34); color: inherit; border-radius: 2px; padding: 0 .04em; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.nh:hover { background: rgba(212, 160, 60, .5); }
.nh-print, .nh-print-head { display: none; }

/* 4. PRINT: the reading only, black on white, nothing else. */
@media print {
  @page { margin: 18mm 16mm; }
  html, body { background: #fff !important; color: #000 !important; }
  /* everything that is not the text */
  .top-utility-bar, .site-header, header.site-header, .sep-hero, .sep-toc, .sep-tools, .listen,
  .app-tabbar, #np-bar, .np-full, footer, .site-footer, .ptutor-launch, .ptutor-echo, .ptutor-panel,
  .nsup-close, .nsup-bridge, .woot-widget-holder, dialog[data-nml], .nh-pill, [data-net-bg],
  .sep-hero canvas, .ptutor-lit::before, .mobile-drawer, .skip-link, .newsletter,
  .sep-related, .sep-next, .sep-nav, .sep-further, .sep-see-also, .related-entries, .nh-tools { display: none !important; }
  .sep-shell { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .sep-article { max-width: none !important; width: auto !important; margin: 0 !important; font-size: 11.5pt !important; line-height: 1.55 !important; }
  .sep-article, .sep-article * { color: #000 !important; background: transparent !important; text-shadow: none !important; box-shadow: none !important; }
  .sep-article > section { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; margin: 0 0 1.4em !important; }
  .sep-article h2, .sep-article h3, .sep-article h4 { break-after: avoid; page-break-after: avoid; }
  .sep-article p, .sep-article li, .sep-article blockquote { orphans: 3; widows: 3; }
  .sep-article a { text-decoration: none !important; border-bottom: 0 !important; }
  .sep-article .gloss-term { border: 0 !important; text-decoration: none !important; }
  .sep-article img, .sep-article video, .sep-article iframe, .sep-article figure, .sep-article canvas, .sep-article svg { display: none !important; }
  /* the reader's highlights, in black and white */
  mark.nh { background: #e2e2e2 !important; color: #000 !important; font-weight: 600; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* a plain title block (the hero, which carries the title on screen, is not printed) */
  .nh-print-head { display: block !important; margin: 0 0 1.4em; padding: 0 0 .7em; border-bottom: 1px solid #000; }
  .nh-print-head h1 { font-size: 20pt; line-height: 1.2; margin: 0 0 .25em; font-weight: 600; }
  .nh-print-head p { margin: 0; font-size: 9.5pt; }
  /* "print my highlights": only the compiled highlights are shown */
  body.nh-printing .sep-shell, body.nh-printing main, body.nh-printing .nh-print-head { display: none !important; }
  body.nh-printing .nh-print { display: block !important; color: #000; font-size: 11.5pt; line-height: 1.55; }
  .nh-print h1 { font-size: 20pt; margin: 0 0 .2em; font-weight: 600; }
  .nh-print .nh-print-meta { margin: 0 0 1.4em; padding-bottom: .7em; border-bottom: 1px solid #000; font-size: 9.5pt; }
  .nh-print h2 { font-size: 13pt; margin: 1.4em 0 .5em; break-after: avoid; page-break-after: avoid; }
  .nh-print p { margin: 0 0 .7em; padding-left: .8em; border-left: 2px solid #000; }
}

/* 5. Phones: the sticky Listen bar stacked three rows (~130px) and ate the reading screen.
   One compact row: Listen + Playlist, hint dropped; very narrow phones show the playlist "+" alone. */
@media (max-width: 640px) {
  .sep-article .listen { flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 10px !important; margin: 0 0 20px !important; align-items: center !important; }
  .sep-article .listen .listen-hint { display: none !important; }
  .sep-article .listen .listen-btn { font-size: 10.5px !important; padding: 8px 11px !important; white-space: nowrap; }
  .sep-article .listen .listen-add { font-size: 10.5px !important; padding: 7px 10px !important; white-space: nowrap; }
}
@media (max-width: 400px) { .sep-article .listen [data-listen-add-label] { display: none !important; } }

/* 6. While THIS page's reading is playing, the sticky Listen bar is redundant (the player bar has
   the controls): it fades, then folds away; it returns when the reading pauses or stops. */
.sep-article .listen { transition: opacity .35s ease; }
.sep-article .listen.nh-fading { opacity: 0; pointer-events: none; }
.sep-article .listen.nh-away { display: none !important; }