/* Apex design system - the print stylesheet. Load it after apex.css on any screen:
     <link rel="stylesheet" href="/shared/print.css" media="print">
   What it does: white paper, no rail, no top-bar search, no buttons or overlays; cards keep a hairline instead
   of a shadow; the navy hero prints as ink on white; tables print with their header on every page; page breaks
   fall between cards and never inside a row, a fact or a timeline event. Colours are the system's tokens only.
   Classes a screen may add: .print-break (start a new page here), .no-print (left out of print), .print-only
   (shown only in print), .print-doc (a quote or invoice: a letterhead row, a lines table, a totals block).
   Everything is inside @media print, so loading it without the media attribute is harmless. */
@media print {
  /* ---- paper ---- */
  @page { margin: 14mm 12mm; }
  html, body { background: var(--card) !important; color: var(--ink); }
  body { font-size: 11.5pt; line-height: 1.4; }
  a { color: inherit; text-decoration: none; }
  * { box-shadow: none !important; text-shadow: none !important; }

  /* ---- chrome that has no meaning on paper ---- */
  .rail, .memenu, .cmdk, .peek, .scrim, .toast, .fab, .assign, .hovercard, .no-print,
  .topbar .search, .topbar .backslot, .topbar .tools, .topbar .help, .topbar .layout,
  .btn, button, .seg, .toolbar, .pills, .skel, .spinner,
  .card > footer, .hero .next .btn, .journey .k, [data-key]::after, kbd { display: none !important; }
  .print-only { display: block !important; }
  .table th .th-btn { display: inline !important; }        /* a sortable column header is a button on screen */
  .table th.sort::after { content: none; }
  .empty, .card:has(.empty:only-child) { display: none; }   /* "Nothing linked yet" says nothing on paper */
  .page a { color: var(--ink); }
  input, select, textarea { border: 0; background: transparent; padding: 0; appearance: none; }

  /* ---- layout: one column, no gutters that waste paper ---- */
  .app { display: block; min-height: 0; }
  .main { display: block; padding: 0; }
  .topbar { position: static; height: auto; border: 0; padding: 0 0 8pt; gap: 8pt; }
  .main:has(.hero) .topbar { display: none; }               /* a record's hero already names it */
  .topbar h1 { font-size: 16pt; max-width: none; white-space: normal; overflow: visible; }
  .topbar .crumb { display: inline; overflow: visible; }
  .page { padding: 0; gap: 12pt; display: block; }
  .page > * + * { margin-top: 12pt; }
  .cols, .cols.two { display: block; }
  .cols > .col + .col { margin-top: 12pt; }

  /* ---- cards and the record hero ---- */
  .card, .hero, .fact, .next, .banner, .row, .kv, .tl .ev { break-inside: avoid; page-break-inside: avoid; }
  .card { border: 1px solid var(--line); border-radius: 0; background: var(--card); }
  .card > header { border-bottom: 1px solid var(--line-soft); }
  .hero { background: var(--card); color: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 12pt; display: block; }
  .hero .kicker, .hero .meta, .hero .who small { color: var(--ink-soft); }
  .hero h2 { font-size: 18pt; color: var(--ink); }
  .hero .next { background: var(--card); border: 0; padding: 8pt 0 0; margin: 0; }
  .hero .next .k { color: var(--ink-soft); }
  .hero .next .v { color: var(--ink); }
  .tag, .chip, .pill { border: 1px solid var(--ink); background: var(--card) !important; color: var(--ink) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(40mm, 1fr)); gap: 8pt; }
  .fact { border: 1px solid var(--line); background: var(--card); }
  .journey { border: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fit, minmax(22mm, 1fr)); overflow: visible; }
  .journey a, .journey span { color: var(--ink); }
  .journey .now b, .journey .done b { color: var(--ink); }
  .disclose summary { list-style: none; font-weight: 600; }
  .disclose summary svg { display: none; }

  /* ---- tables and lists ---- */
  .tablewrap { overflow: visible; }
  .table { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
  .table thead { display: table-header-group; }             /* the header on every printed page */
  @media (max-width: 760px) { .table thead { display: none; } } /* a phone prints its stacked cards */
  .table th, .table td { border-bottom: 1px solid var(--line); padding: 4pt 6pt; vertical-align: top; color: var(--ink); background: var(--card); }
  .table th { border-bottom: 1px solid var(--ink); text-transform: none; letter-spacing: 0; }
  .table tr { break-inside: avoid; page-break-inside: avoid; }
  .table .sub { color: var(--ink-soft); }
  .rows .row { border-color: var(--line-soft); }
  .tl .ev { border-color: var(--line-soft); }
  .tl .more { display: none; }

  /* ---- explicit breaks ---- */
  .print-break { break-before: page; page-break-before: always; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* ---- a quote or invoice: a document, not a screen ---- */
  .print-doc { max-width: none; border: 0; padding: 0; }
  .print-doc .letterhead { display: flex; justify-content: space-between; gap: 12pt; padding-bottom: 8pt; margin-bottom: 12pt; border-bottom: 2px solid var(--ink); }
  .print-doc .letterhead h1 { font-size: 20pt; }
  .print-doc .lines { width: 100%; border-collapse: collapse; }
  .print-doc .lines th { text-align: left; border-bottom: 1px solid var(--ink); padding: 4pt 0; }
  .print-doc .lines td { border-bottom: 1px solid var(--line-soft); padding: 5pt 0; vertical-align: top; }
  .print-doc .lines .num, .print-doc .totals .num { text-align: right; font-variant-numeric: tabular-nums; }
  .print-doc .totals { margin-left: auto; width: 45%; margin-top: 8pt; }
  .print-doc .totals .row { display: flex; justify-content: space-between; padding: 3pt 0; border: 0; }
  .print-doc .totals .due { border-top: 1px solid var(--ink); font-weight: 700; font-size: 12.5pt; }
  .print-doc .terms { margin-top: 14pt; font-size: 9.5pt; color: var(--ink-soft); }
  .print-doc .sig { margin-top: 24pt; display: flex; gap: 24pt; }
  .print-doc .sig > * { flex: 1; border-top: 1px solid var(--ink); padding-top: 4pt; font-size: 9.5pt; }
}