@media print {

  /* Everything that is not the dialog, not inside it, and not on the path down
     to it. Theme-agnostic on purpose: this is embedded in someone else's page
     and must not carry a list of that page's class names. */
  body:has(#grocery-dialog[open]) :not(:has(#grocery-dialog)):not(#grocery-dialog):not(#grocery-dialog *) {
    display: none !important;
  }
  body:has(#grocery-dialog[open]) { background: #fff !important; }

  /* The dialog stops being a window and becomes the document. */
  body:has(#grocery-dialog[open]) #grocery-dialog {
    position: static !important;
    display: block !important;
    width: auto !important;  max-width: none !important;
    height: auto !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    overflow: visible !important;
    background: #fff !important; color: #1B365D !important;
  }
  body:has(#grocery-dialog[open]) #grocery-dialog::backdrop {
    display: none !important; background: none !important;
  }

  /* Un-scroll the box and un-cap its parents. Necessary, and on its own not
     nearly sufficient — see the table above. */
  body:has(#grocery-dialog[open]) #grocery-dialog .dialog-content {
    display: block !important;
    height: auto !important; max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
  body:has(#grocery-dialog[open]) #grocery-items-container {
    overflow: visible !important;
    height: auto !important; max-height: none !important;
    flex: none !important;
    padding: 0.5rem 0 0 0 !important;
  }

  /* The header, in ink. */
  body:has(#grocery-dialog[open]) #grocery-dialog .dialog-header {
    background: #fff !important; color: #1B365D !important;
    border-bottom: 2px solid #C59B27 !important;
    padding: 0 0 0.35rem 0 !important;
    display: block !important;
  }
  body:has(#grocery-dialog[open]) #grocery-dialog-title {
    color: #1B365D !important; font-size: 1.4rem !important;
  }
  body:has(#grocery-dialog[open]) #grocery-portions-bar {
    background: #fff !important;
    border-bottom: 1px solid #C59B27 !important;
    padding: 0.35rem 0 !important;
  }
  body:has(#grocery-dialog[open]) #grocery-portions-label { color: #1B365D !important; }

  /* Screen furniture. A ✕ and a "Copy List" button mean nothing on paper.

     The join/sign-in pair goes with them, and only that pair: the sentence
     above it — "these recipes live in the Estate Vault, their ingredients join
     the Market List with membership" — is the reason the list is short, and a
     cook holding the paper needs it. What they do not need is a printed button
     reading "Already a member? Sign in". */
  body:has(#grocery-dialog[open]) #grocery-copy-btn,
  body:has(#grocery-dialog[open]) #grocery-dialog .dialog-close-btn,
  body:has(#grocery-dialog[open]) #grocery-items-container .gp-access-doors {
    display: none !important;
  }

  /* THE TICK BOXES ARE THE POINT OF A SHOPPING LIST, and a painted control
     disappears with background graphics off. Drawn as a border instead, which
     always prints. */
  body:has(#grocery-dialog[open]) #grocery-items-container input[type="checkbox"] {
    -webkit-appearance: none !important; appearance: none !important;
    width: 0.8rem !important; height: 0.8rem !important;
    border: 1px solid #1B365D !important; border-radius: 2px !important;
    background: #fff !important;
    opacity: 1 !important;
  }
  /* An item already ticked on screen prints ticked, or the paper contradicts
     the page it was printed from. */
  body:has(#grocery-dialog[open]) #grocery-items-container input[type="checkbox"]:checked {
    background: #1B365D !important;
    box-shadow: inset 0 0 0 2px #fff !important;
  }

  /* Do not break a purchase across two sheets, and never strand an aisle
     heading or a group total at the foot of one. */
  body:has(#grocery-dialog[open]) #grocery-items-container label {
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
  body:has(#grocery-dialog[open]) #grocery-items-container h4,
  body:has(#grocery-dialog[open]) #grocery-items-container [data-group-head] {
    break-after: avoid !important; page-break-after: avoid !important;
    color: #1B365D !important;
  }
  body:has(#grocery-dialog[open]) #grocery-items-container [role="group"] {
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
}