/* ============================================================
   JIGGER, PRINT
   A shelf printed is a shopping list. Chrome goes, the whole
   inventory comes, and what needs buying announces itself.

   COLOUR IS ADDITIVE, NEVER LOAD-BEARING.
   Half of these come out of a mono laser printer, and a status
   you can only read in colour is a status you cannot read. So
   every distinction is carried twice: the word is there, the
   "buy" cue is there, and colour is a third layer for whoever
   has a colour printer.

   Values come from tokens.css, which is loaded without a media
   attribute and therefore applies here too. Nothing in this
   file invents a colour.
   ============================================================ */

@page { margin: 15mm; }

body {
  background: #fff;                 /* paper, not a token: this is the sheet */
  color: var(--text-primary);
  padding: 0;
  font-size: 10pt;
  line-height: 1.4;
  /* Chrome and Edge drop backgrounds when printing unless told otherwise.
     Only the buy-cue rules depend on this, and they degrade to plain text. */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Interface disappears. None of it means anything on paper. */
.header,
.search-row,
.control-strip,
.bottom-nav,
.hotkeys,
.skip-link,
.sheet,
.scrim,
.to-top,
.toast,
.cat-select,
.fav,
.unlock { display: none !important; }

/* A printed page needs a title, and the screen one has just been hidden. */
.shelf::before {
  content: "Jigger, shelf";
  display: block;
  font-size: 18pt;
  font-weight: 700;
  color: var(--action-primary);
  border-bottom: 0.4mm solid var(--action-primary);
  padding-bottom: 1.5mm;
  margin-bottom: 3mm;
}
.shelf::after {
  content: "Printed from the Jigger prototype";
  display: block;
  margin-top: 6mm;
  font-size: 8pt;
  color: var(--text-muted);
}

.shelf { padding: 0; max-width: none; }

/* Cards collapse to rows. Two columns of cards is a poor use of paper. */
.items,
.items.is-list,
.items.is-cards {
  display: block !important;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 10mm;
}

.item {
  break-inside: avoid;
  display: block !important;
  padding: 1.5mm 0;
  margin: 0;
  border: 0;
  border-bottom: 0.2mm solid var(--border-hairline);
  border-radius: 0;
  box-shadow: none;
  background: none;
  /* the faded out-of-stock state is the whole point on a shopping list */
  opacity: 1 !important;
}
.item-thumb,
.row-actions,
.swipe-pane { display: none !important; }

.item-name { font-size: 10pt; font-weight: 600; }
.item-category,
.item-sub,
.item-measure { color: var(--text-muted); font-size: 8pt; }
.item-qty { font-size: 9pt; color: var(--text-secondary); }

/* Status survives as a word, because a printed pill is an empty rounded box.
   The ink is the same one the screen uses, so the page and the app agree
   rather than being two vocabularies. */
.pill {
  border: 0;
  background: none !important;
  padding: 0;
  font-size: 8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pill::before { display: none; }

.pill.is-good   { color: var(--state-good-ink); }
.pill.is-sealed { color: var(--text-secondary); }
.pill.is-low    { color: var(--state-low-ink); }
.pill.is-out    { color: var(--state-out-ink); }

/* The cue that makes this a shopping list rather than a stocktake. Text, so it
   survives a mono printer; coloured, so it finds you on a colour one. */
.pill.is-low::after,
.pill.is-out::after {
  content: "  \2190 buy";
  font-weight: 400;
  letter-spacing: 0;
}

/* Anything to buy gets a rule down its left edge. Forty rows is hard to scan
   for two words and easy to scan for four marks. */
.item:has(.pill.is-out) {
  border-left: 1mm solid var(--state-out-ink);
  padding-left: 2mm;
}
.item:has(.pill.is-low) {
  border-left: 1mm solid var(--state-low-ink);
  padding-left: 2mm;
}

/* Empty states are a screen idea. On paper, an empty list is just short. */
.empty .actions,
.empty-glyph { display: none !important; }

/* Links print with their destination, which is useless for in-app anchors. */
a[href^="#"]::after { content: ""; }