/* =============================================================================
   UORA print stylesheet
   web/assets/css/print.css

     <link rel="stylesheet" href="/assets/css/print.css" media="print">

   Two things get printed, and this file serves both:

     1. A case page. A party or a court clerk prints the case record — timeline,
        service log, documents list, deadlines. It must come out as a legible
        black-on-paper record with the case number and the print date on every
        page, and it must not carry any interface furniture that would be
        meaningless on paper.
     2. A document preview ([data-surface="document"]). Awards, procedural
        orders, certificates of service and receipts. These are filed with the
        Dubai Courts at ratification, so their printed form is the legally
        operative artefact.

   Puppeteer renders the PDF versions of the documents themselves through
   lib/pdf.js with its own page templates; this file governs what happens when a
   human presses Ctrl+P in the browser. The two must not disagree about
   substance, which is why nothing here adds, removes or reformats any content.
   ============================================================================= */

@page {
  size: A4;
  margin: 18mm 16mm 20mm;
}

/* The claim reference belongs in the running head of a court exhibit. Named
   pages let a document preview use a wider text block than a case page. */
@page :first {
  margin-top: 16mm;
}

/* ---------------------------------------------------------------- palette
   Paper is the background. Nothing paints a page-wide fill: a dark canvas would
   consume a cartridge and reads badly through a photocopier, and the light
   document palette is a screen palette, not an ink palette. Ink is the
   document-surface near-black. */
:root,
[data-surface="document"] {
  --bg: transparent;
  --bg-1: transparent;
  --bg-2: transparent;
  --bg-3: transparent;
  --bg-4: transparent;

  --text: #111111;
  --text2: #333333;
  --text3: #555555;
  --text3-quiet: #666666;
  --text-on-accent: #FFFFFF;

  --accent: #1F55AC;
  --accent-deep: #143D7E;
  --accent-fill: #1F55AC;
  --accent-soft: transparent;
  --accent-line: #1F55AC;
  --accent-shadow: transparent;

  --border: #B8B8B8;
  --border2: #8C8C8C;
  --border3: #5C5C5C;

  --ok: #0B5140;
  --warn: #63470F;
  --danger: #7A2121;
  --ok-soft: transparent;
  --warn-soft: transparent;
  --danger-soft: transparent;
  --neutral-soft: transparent;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --shadow-accent: none;
}

html,
body {
  background: none;
  color: var(--text);
  font-size: 10.5pt;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Print in the same faces as the screen and the PDF, so a printed page and a
   generated PDF of the same document are visually comparable side by side —
   which is exactly what the legal acceptance review does. */
body {
  font-family: 'Inter', 'SF Pro Text', -apple-system, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* -------------------------------------------------------- what disappears
   Interface furniture with no meaning on paper. A printed record must not
   contain a control that cannot be operated, nor a transient message. */
.site-header,
.site-nav,
.site-header__actions,
.skip-link,
.toasts,
.toast,
.modal,
dialog.modal,
.dropzone,
.tabs,
.table-toolbar,
.btn,
.btn-group,
.form-actions,
.link-action,
.modal__close,
.skeleton,
.progress,
[data-print="hide"],
nav[aria-label="Pagination"],
button {
  display: none !important;
}

/* Tab panels: every panel prints, because the reader wants the whole record, not
   whichever tab happened to be open. The tab strip itself is hidden above. */
.tabpanel[hidden] {
  display: block !important;
}

.tabpanel + .tabpanel {
  margin-block-start: 8mm;
  padding-block-start: 6mm;
  border-block-start: 0.5pt solid var(--border);
}

/* A panel that only makes sense with script (a live countdown widget, an upload
   queue) is marked in the markup and drops out. */
[data-print="hide"] + [data-print="fallback"] {
  display: block !important;
}

/* ------------------------------------------------------------- structure */
.page,
.page__main,
.shell,
.shell--wide,
.shell--narrow {
  display: block;
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.split,
.split--rail-start,
.grid,
.grid--2,
.grid--3,
.grid--4 {
  display: block;
}

.split > * + *,
.grid > * + * {
  margin-block-start: 6mm;
}

.card,
.card--compact,
.card--action,
.notice,
.document-view,
.table-wrap,
.empty {
  background: none;
  border: 0.5pt solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 4mm;
  break-inside: avoid;
}

.card--action {
  border-color: var(--border2);
}

/* ------------------------------------------------------------ typography */
h1, h2, h3, h4,
.pt, .st, .ct,
.card__title,
.modal__title,
.empty__title {
  color: #000000;
  break-after: avoid;
  page-break-after: avoid;
}

h1, .pt { font-size: 16pt; }
h2, .st { font-size: 12.5pt; }
h3, .ct, .card__title { font-size: 11pt; }

p, li, blockquote, .kv, .timeline__item {
  orphans: 3;
  widows: 3;
}

.fl,
.eyebrow,
.kv dt {
  color: var(--text3);
  letter-spacing: 0.04em;
}

.prose {
  max-width: none;
  color: var(--text);
}

/* Reveal the destination of a link, since a printed page cannot be clicked. In
   a filed exhibit the verification URL is part of the evidence. */
.prose a[href^="http"]::after,
.document-view a[href^="http"]::after,
a.print-url::after {
  content: ' (' attr(href) ')';
  font-size: 8.5pt;
  color: var(--text3);
  word-break: break-all;
}

/* A hash is quoted in full on paper; truncating it would defeat verification. */
.mono,
.badge,
[data-sha256] {
  font-family: 'Cascadia Mono', Consolas, monospace;
  font-size: 8.5pt;
  letter-spacing: 0;
  word-break: break-all;
  white-space: normal;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text2);
}

/* --------------------------------------------------------------- tables */
.table-wrap {
  overflow: visible;
  padding: 0;
}

.table {
  width: 100%;
  font-size: 9.5pt;
  break-inside: auto;
}

/* Column headings repeat on every sheet of a long service log. */
.table thead {
  display: table-header-group;
}

.table tfoot {
  display: table-footer-group;
}

.table thead th {
  position: static;
  background: none;
  color: #000000;
  border-block-end: 0.75pt solid var(--border3);
  font-size: 8.5pt;
}

.table th,
.table td {
  padding: 1.6mm 2mm;
  border-block-end: 0.4pt solid var(--border);
}

.table tbody tr {
  background: none;
  break-inside: avoid;
  page-break-inside: avoid;
}

.table td.actions,
.table th.actions {
  display: none;
}

/* ---------------------------------------------------------------- chips
   Tints do not survive a monochrome printer, so a chip prints as its word in
   brackets with a hairline box. The word alone carries the state, which is why
   the system never encodes state in colour in the first place. */
.chip {
  border: 0.4pt solid var(--border2);
  border-radius: 2pt;
  background: none;
  color: var(--text);
  padding: 0.4mm 1.4mm;
  font-size: 8.5pt;
}

.chip--ok     { border-color: var(--ok);     color: var(--ok); }
.chip--warn   { border-color: var(--warn);   color: var(--warn); }
.chip--danger { border-color: var(--danger); color: var(--danger); }
.chip--accent { border-color: var(--accent); color: var(--accent); }

.chip svg,
.dot {
  display: none;
}

/* ------------------------------------------------------------- timeline */
.timeline {
  padding-inline-start: 6mm;
}

.timeline::before {
  background: var(--border);
}

.timeline__item {
  break-inside: avoid;
  page-break-inside: avoid;
}

.timeline__item::before {
  background: var(--text3);
  border-color: var(--text3);
}

.timeline__when {
  color: var(--text3);
}

/* ------------------------------------------------------------ countdown
   A relative countdown is meaningless once the sheet leaves the printer. The
   absolute Dubai-time deadline is authoritative, so the printed form shows that
   and drops the ticking value. */
.countdown__value {
  display: none;
}

.countdown__absolute {
  font-size: 10pt;
  color: var(--text);
}

.countdown::after {
  content: attr(data-absolute);
  font-size: 10pt;
  color: var(--text);
}

.countdown[data-absolute] .countdown__absolute {
  display: none;
}

/* --------------------------------------------------- document previews
   A document preview prints as the document, not as a panel inside a page. */
.document-view {
  border: 0;
  padding: 0;
  font-size: 10.5pt;
}

.document-view .lang-break {
  break-before: page;
  page-break-before: always;
  border: 0;
  margin: 0;
}

.document-view h1 {
  text-align: center;
  font-size: 14pt;
  margin-block-end: 6mm;
}

.document-view [dir="rtl"] {
  text-align: right;
}

/* Signature blocks, certification pages and exhibit sheets stay whole. */
.signature-block,
.certification,
.exhibit,
.cos {
  break-inside: avoid;
  page-break-inside: avoid;
}

.certification,
.cos {
  break-before: page;
  page-break-before: always;
}

/* ------------------------------------------------------- print-only marks
   Elements carrying the running identification of the printed record. They are
   hidden on screen by base.css [hidden] handling or by .print-only. */
.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }

  .print-head {
    margin-block-end: 6mm;
    padding-block-end: 3mm;
    border-block-end: 1pt solid var(--accent-line);
    font-size: 9pt;
    color: var(--text2);
  }

  .print-head__case {
    font-weight: 700;
    color: #000000;
    font-variant-numeric: tabular-nums;
  }

  /* The operator must be identifiable on any sheet that leaves the building. */
  .print-foot {
    margin-block-start: 8mm;
    padding-block-start: 3mm;
    border-block-start: 0.5pt solid var(--border);
    font-size: 8pt;
    color: var(--text3);
  }
}