/********************/
/* Styles for print */
/********************/

/* Default @page margins set here (loaded globally). Menu and grocery
   pages override via page-specific stylesheets loaded after this one
   via content_for(:head). Keep margins ≤ 0.75in — Safari misrenders
   larger @page margins as blank space at the top of page 1. */
@media print {
  @page {
    margin: 0.5in 0.75in;
  }

  html {
    font-size: 12pt;
    margin: 0;
    padding: 0;
    background: white;
  }

  body {
    margin: 0;
    padding: 0;
    background: white;
    color: black;
  }

  /* The crosshatch lives on body::before (base.css, #5034) — a pseudo-element
     whose background the `background: white` shorthands above cannot reach, so
     it must be hidden here explicitly or it tiles across every printed page. */
  body::before {
    display: none;
  }

  /* --- Global hides: interactive chrome --- */
  nav,
  .notify-stack,
  .dialog, /* hig-ok: print-media hide, not re-styling component chrome */
  .editor-dialog,
  .search-overlay,
  .app-version,
  [data-open-editor] {
    display: none !important;
  }

  /* The ingredient name rides a [data-open-editor] button (#1554) — it's content,
     not interactive chrome, so keep it on paper (as plain inline text). */
  .ingredient-name-button {
    display: inline !important;
  }

  /* --- Main content card: strip decoration --- */
  main {
    margin: 0;
    padding: 0;
    border: none;
    background: white;
    box-shadow: none;
    max-width: none;
    min-height: 0;
  }

  main::before {
    display: none;
  }

  /* --- Links: plain black text --- */
  a {
    color: black;
    text-decoration: none;
  }

  /* --- Recipe-specific print styles --- */

  article.recipe {
    font-size: 11pt;
  }

  /* Kill blank space: header margins and decorative rule */
  article.recipe header {
    margin-bottom: 0.5rem;
  }

  article.recipe header::after {
    display: none;
  }

  article.recipe header h1 {
    font-size: 2rem;
    margin: 0 0 0.25rem;
  }

  article.recipe header p {
    font-size: 1rem;
    margin-top: 0;
  }

  /* Hide interactive elements and screen-only content */
  .history-strip,
  .scale-bar,
  .recipe-actions,
  .recipe-tags,
  .recipe-photo,
  .nutrition-label,
  .nutrition-footnote,
  /* The rail's catalog-detail trigger and its panel: interactive chrome, and
     the checkbox pseudo-element below is pinned into the very cell the trigger
     occupies, so leaving it on paper would print the two on top of each other. */
  .ing-rail__trigger,
  .ing-rail__pop {
    display: none !important;
  }

  /* --- Compact spacing --- */
  article.recipe section {
    margin-top: 1.5rem;
  }

  article.recipe section h2 {
    margin-bottom: 0.5rem;
  }

  article.recipe .instructions p {
    line-height: var(--leading-relaxed);
  }

  article.recipe footer {
    margin-top: 2rem;
    padding-top: 1rem;
  }

  article.recipe footer::after {
    display: none;
  }

  /* --- Checkbox bullets on ingredients ---
     ingredient_row.css's .ing-row is display:grid, and it's not media-gated,
     so it's already active here — this file carries NO row geometry of its
     own and never did (#4292: it is a rendering surface, not a copy). Without
     an explicit position, the ::before pseudo
     becomes its own auto-placed grid item and drops onto an implicit second
     row above the zones (2026-08-11 ingredient-line-convergence, print
     round 1). Pinning it into the .ing-rail cell (column 1, row 1) puts the
     checkbox back where it visually belongs — at the row's leading edge —
     rather than reserving a column of its own. That cell is NOT empty on
     screen: it holds the catalog-detail trigger, which is why the hide list
     above takes it off paper — the two would otherwise share this cell. */
  .ingredients li::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border: 1px solid black;
    border-radius: 1px;
    margin-right: 0.4rem;
    vertical-align: middle;
    position: relative;
    top: -0.05em;
    grid-row: 1;
    grid-column: 1;
  }

  /* --- Checkbox bullets on instruction paragraphs --- */
  .instructions p::before {
    content: "";
    float: left;
    width: 0.7rem;
    height: 0.7rem;
    border: 1px solid black;
    border-radius: 1px;
    margin: 0.25em 0.4rem 0 0;
  }

  /* --- Checkbox bullets on section headings --- */
  article.recipe section h2::before,
  article.recipe section h3::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border: 1px solid black;
    border-radius: 1px;
    margin-right: 0.4rem;
    vertical-align: middle;
    position: relative;
    top: -0.05em;
  }

  /* --- Pagination: keep headings with following content --- */
  article.recipe section h2,
  article.recipe section h3 {
    break-after: avoid;
  }

  .embedded-recipe {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }

  /* Embedded recipe headings are informational, not actionable steps */
  .embedded-recipe :is(h2, h3, h4)::before {
    content: none;
  }

  /* Hide "go to recipe" links on embedded recipes */
  .embedded-recipe-link {
    display: none;
  }

  /* Scaled quantity highlight: transparent in print */
  .scalable.scaled {
    background-color: transparent;
  }
}