/* Print-only. Strips the app chrome so a recipe prints as a recipe.
 * Loaded with media="print", so none of this affects the screen view. */

@page { margin: 14mm; }

#topbar,
#tabbar,
.icon-btn,
button,
.no-print { display: none !important; }

html, body {
  background: #fff !important;
  color: #000 !important;
  font-size: 12pt;
}

#view {
  padding: 0 !important;
  max-width: none !important;
}

.card {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 8mm !important;
  background: none !important;
}

/* Recipe print layout: title, then ingredients beside steps on wide paper. */

.recipe-print h1 {
  font-size: 20pt;
  margin: 0 0 2mm;
  border-bottom: 1.5pt solid #000;
  padding-bottom: 2mm;
}

.recipe-print .meta {
  font-size: 10pt;
  margin: 0 0 6mm;
}

.recipe-print .body {
  display: grid;
  grid-template-columns: 62mm 1fr;
  gap: 8mm;
}

/* Long recipes fall back to one column rather than spilling onto page two. */
@media print and (max-width: 150mm) {
  .recipe-print .body { grid-template-columns: 1fr; }
}

.recipe-print h2 {
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 3mm;
}

.recipe-print ul,
.recipe-print ol { margin: 0; padding-left: 5mm; }
.recipe-print li { margin-bottom: 2.5mm; break-inside: avoid; }

.recipe-print .ingredients li { list-style: none; text-indent: -3mm; }
.recipe-print .ingredients li::before { content: "\25A1  "; }

.recipe-print .steps li { break-inside: avoid; }

a[href]::after { content: "" !important; }