/* The job report, drawn like the workbook Janine prints. Paper in both modes. */

.tieout {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-5);
  padding: var(--s-5); border-radius: var(--r-l); background: var(--bg-elevated);
  box-shadow: var(--shadow-1); margin-bottom: var(--s-5);
}
.tieout__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.tieout__icon svg { width: 22px; height: 22px; }
.tieout[data-ok="true"] .tieout__icon { background: var(--ok-soft); color: var(--ok); }
.tieout[data-ok="false"] .tieout__icon { background: var(--fail-soft); color: var(--fail); }
.tieout[data-ok="unknown"] .tieout__icon { background: var(--review-soft); color: var(--review); }
.tieout__title { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; }
.tieout__sub { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.tieout__nums { display: flex; gap: var(--s-5); align-items: flex-end; }
.tieout__num { text-align: right; }
.tieout__num > span { display: block; font-size: 11px; color: var(--text-2); font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase; }
.tieout__num b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-top: 2px; }
.tieout__eq { color: var(--text-3); font-size: 20px; padding-bottom: 2px; }

/* headline figures */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--hairline); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-1);
  margin-bottom: var(--s-5); }
.figure { background: var(--bg-elevated); padding: 14px 16px; min-width: 0; }
.figure > span { display: block; font-size: 12px; color: var(--text-2); }
.figure b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin-top: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── the paper ─────────────────────────────────────────────────────── */
.paper-frame { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-m);
  box-shadow: var(--shadow-2); --scroll-bg: var(--paper); }
.paper { min-width: 940px; padding: 28px 36px 40px; color: var(--paper-ink); background: transparent;
  font-family: var(--font-sheet); }

.paper__header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; margin-bottom: 22px;
  font-family: Calibri, Carlito, var(--font-text); font-weight: 700; font-size: 13px; line-height: 1.35; }
.paper__header .c { text-align: center; }
.paper__header .field-unknown { font-weight: 600; }

.sheet { width: 100%; font-size: 12.5px; line-height: 1.25; table-layout: auto; }
.sheet th, .sheet td { padding: 3px 7px; white-space: nowrap; border-bottom: 1px solid transparent; }
.sheet thead th { font-family: Calibri, Carlito, var(--font-text); font-weight: 700; font-size: 12px;
  text-align: center; border-bottom: 1px solid var(--paper-ink); padding-bottom: 5px; }
.sheet thead tr.letters th { font-family: var(--font-text); font-weight: 500; font-size: 10px; color: #8a8a8e;
  border-bottom: 0; padding: 0 7px 4px; letter-spacing: 0.04em; }
.sheet td.m { text-align: right; font-variant-numeric: tabular-nums; }
.sheet td.name { max-width: 330px; overflow: hidden; text-overflow: ellipsis; }
.sheet tbody tr:hover td { box-shadow: inset 0 -1px 0 var(--paper-rule); }
.sheet .fill-labor { background: var(--paper-labor); }
.sheet .fill-pack { background: var(--paper-pack); }
.sheet .blank td { height: 18px; }
.sheet .tot td { font-weight: 700; }
.sheet .tot td.tk { border-top: 1px solid var(--paper-ink); border-bottom: 3px double var(--paper-ink); }
.sheet .lbl td { font-weight: 700; }
.sheet .ratio td { font-weight: 700; }
.sheet .je td:first-child { font-weight: 700; }
.sheet .zero { color: #b0b0b4; }
.sheet .unknown { font-size: 10px; height: 17px; color: #9a4a00; box-shadow: inset 0 0 0 1px #d99b5a; }

.scroll-hint { display: none; font-size: 12px; color: var(--text-3); margin: 0 2px 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 2px 0; font-size: 12px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.2); }
.legend .l-labor { background: var(--paper-labor); }
.legend .l-pack { background: var(--paper-pack); }
.legend .l-mdf { background: var(--paper); }

.paper-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: var(--s-4); flex-wrap: wrap; }

@media (max-width: 760px) {
  .tieout { grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-4); }
  .tieout__nums { grid-column: 1 / -1; justify-content: space-between; }
  .tieout__num { text-align: left; }
  .tieout__num b { font-size: 19px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper { padding: 20px 20px 28px; }
  .scroll-hint { display: block; }
}

@media print {
  .topbar, .mock-ribbon, .foot, .paper-actions, .run-head, .legend, .tieout, .figures { display: none !important; }
  .main { padding: 0; }
  .paper-frame { box-shadow: none; overflow: visible; }
  .paper { min-width: 0; padding: 0; }
}

.stack > .tieout, .stack > .figures { margin-bottom: 0; }