/* Receipt packet, on screen and in print. Sizes are in physical units so the
   screen shows what the page will look like. */

.packet {
  background: #fff;
  color: #000;
  padding: 0.25in;
  border-radius: 10px;
  font: 10pt/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: auto;
}
.packet-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; }

.packet-header h1 { font-size: 14pt; margin: 0; }
.packet-header p { font-size: 9.5pt; margin: 2px 0 0; white-space: pre-wrap; }

.packet-summary { width: auto; margin: 0.1in 0; font-size: 9pt; }
.packet-summary th, .packet-summary td { padding: 1px 8px 1px 0; }
.packet-summary td:nth-child(2), .packet-summary td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.packet-summary .ok { color: #2f6b3a; }
.packet-summary .bad, .packet-heading-total.bad { color: #9c0006; font-weight: 700; }

.packet-category { margin-top: 0.15in; }
.packet-category h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.2in; font-size: 11pt; margin: 0 0 0.06in; padding-bottom: 1px; border-bottom: 1.5px solid #000; break-after: avoid; }
.packet-heading-total { font-size: 9pt; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Items pack by their own width rather than sitting in equal columns: width
   is the real constraint on a receipt, so a narrow crop gets a narrow card
   and a full-page receipt gets the page (owner decision, 2026-09-20,
   superseding the fixed column). */
.packet-grid { display: block; }
/* Bands are a PRINT arrangement, like the combined block below. On screen
   every receipt gets a row of its own, one by one down the page in date
   order, because packing them is what makes the page fit and has no business
   in the viewer (owner decision, 2026-09-20). The bands and their columns
   step out of the way with display:contents, so the cards become items of
   the grid itself and sort back into date order, whatever order the printed
   arrangement left them in. */
.packet-grid { display: flex; flex-direction: column; }
.packet-band, .packet-column { display: contents; }
.packet-entry { order: var(--date-order, 0); }
.packet-entry {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin-bottom: 0.1in;
  border: 1px solid #bbb;
  padding: 0.05in;
  break-inside: avoid;
  box-sizing: border-box;
  /* The receipt sets the width; the text wraps to fit it, never the reverse. */
  overflow-wrap: break-word;
}
.packet-summary-total td { font-weight: 700; border-top: 1.5px solid #000; }
/* On a narrow card the date and amount stack rather than being squeezed on
   to one line, so the caption matches the width of its receipt. */
.packet-entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.12in; font-size: 9pt; font-weight: 600; }
.packet-amount { font-variant-numeric: tabular-nums; }
.packet-note { font-size: 8.5pt; margin: 1px 0 0; }
.packet-comment { font-size: 8.5pt; margin: 1px 0 0; }
.packet-empty { color: #777; font-style: italic; }

/* A value that can be corrected during review. The dotted rule is the only
   screen-only part: the value itself prints as plain text. */
.packet-editable { cursor: pointer; border-bottom: 1px dotted #999; }
.packet-input { font: inherit; width: 100%; box-sizing: border-box; padding: 2px 4px; }
.packet-entry-controls { display: flex; gap: 4px; margin-top: 4px; }
.packet-entry-controls button, .packet-entry-controls .button { min-height: 32px; padding: 2px 8px; font-size: 12px; }
/* Several receipts on one entry wrap to the right and widen the card with
   them. Stacking them made the card too tall to share a page, which is what
   left a page holding one small receipt (owner decision, 2026-09-20). */
.packet-images { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.06in; margin: 0 0 0.03in; align-items: flex-start; }
.packet-figure { margin: 0; }
/* No height cap here: printWidth has already held automatic sizing to the
   density cap, and a hand-set full-page receipt must be allowed its height. */
.packet-figure img { display: block; height: auto; max-width: 100%; }
.packet-controls { display: flex; gap: 4px; align-items: center; margin-top: 3px; font-size: 12px; }
.packet-controls button { min-height: 32px; padding: 2px 8px; font-size: 12px; }
/* The receipt opens the crop editor during review; screen-only affordance. */
.packet-tappable { cursor: pointer; }

/* On screen a receipt wider than the viewer is scaled to fit it rather than
   pushing the page sideways. The printed width is unaffected. */
.packet-figure img { width: var(--print-width); }

/* The categories that moved are named once, together, where the first of
   them would have stood: on the printed page only, and on one line, because
   a line apiece cost a row of receipts (owner, 2026-09-20). */
.packet-moved { font-size: 9.5pt; font-style: italic; margin: 0.08in 0 0.02in; }

/* The combined block is a PRINT arrangement only. On screen every category
   keeps its place in the accountant's column order at full width: gathered
   into shared rows at phone width they overlapped and their controls became
   unusable (owner report, 2026-09-20). The printed page holds the combined
   categories in a block at the foot of the packet, so the viewer hides that
   block's chrome and sorts every section back into column order, the same
   way the cards inside a category sort back into date order. */
.packet-body { display: flex; flex-direction: column; }
.packet-bottom, .packet-bottom-row { display: contents; }
.packet-category { order: var(--column-order, 0); }
.packet-moved { display: none; }

@media print {
  @page { size: letter; margin: 0.5in; }
  body { background: #fff; padding: 0; }
  body.packet-mode .topbar,
  body.packet-mode nav.tabs,
  body.packet-mode .banner,
  .no-print,
  .toast { display: none !important; }
  main { max-width: none; padding: 0; }
  .packet { padding: 0; border-radius: 0; overflow: visible; }
  /* Corrected values print as ordinary text, with no trace of the affordance. */
  .packet-editable { border-bottom: none; cursor: auto; }
  /* Only the printed page packs receipts, and it packs them into bands of
     columns rather than rows. A column holds one receipt hanging from the
     top caption band and one standing on the bottom one; the slack sits
     between them, so a long receipt pairs with a short one and the band is
     only as tall as its worst column. Two rows of receipts each reserving
     their own tallest is what used to fill a page with one row. */
  .packet-grid { display: block; }
  .packet-band {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.12in;
    margin-bottom: 0.14in;
    break-inside: avoid;
  }
  .packet-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    width: var(--column-width);
  }
  /* A column with nothing at the top stands its receipt on the bottom band:
     that is what a row slid sideways looks like, and it is how a long receipt
     comes to sit beside a short one rather than above it. */
  .packet-column-foot { justify-content: flex-end; }
  /* The upper card carries its caption above the receipt, so the receipts of
     the two rows face each other and the captions read as bands. */
  .packet-card-top { flex-direction: column-reverse; }
  .packet-entry { order: 0; flex: 0 0 auto; width: var(--card-width); margin-bottom: 0; }
  .packet-entry { flex: 0 0 auto; width: var(--card-width); margin-bottom: 0; }
  /* Only the printed page combines the small categories into shared rows.
     The combined categories sit in a block of their own at the foot of the
     packet, in plain block flow. Moving them there with flex order instead,
     across a wrapping flex container, cost a whole category on the printed
     page: the browser would not fragment it (owner report, 2026-09-20). */
  .packet-moved { display: block; }
  .packet-body { display: block; }
  .packet-bottom {
    display: block;
    margin-top: 0.2in;
    border-top: 1.5px solid #000;
    padding-top: 0.06in;
  }
  /* Half the gap on each side of the divider: the packer allows 0.12 in
     between two groups, so the gap and the divider's padding have to add up
     to that and no more, or a packed row will not hold. */
  .packet-bottom-row {
    display: flex;
    align-items: flex-start;
    column-gap: 0.06in;
    margin-bottom: 0.12in;
    break-inside: avoid;
  }
  /* The heading may wrap to let a group fit its share of the row, but the
     receipts never shrink: min-content is the width of the cards themselves,
     and shrinking past that is what made the groups overlap. */
  .packet-combined { flex: 0 1 auto; min-width: min-content; margin-top: 0; }
  .packet-combined h2 { flex-wrap: wrap; }
  .packet-combined:not(.packet-combined-first) { border-left: 1px solid #000; padding-left: 0.06in; }
}