/* ─────────────────────────────────────────────────────────────────────────────
   Executive City Travel — print.

   SOURCE OF TRUTH: DESIGN-BRIEF.md §9 — "Print: day sheet at A4 portrait, 11pt,
   repeating table header, page breaks between events, no navy fills (ink)."
   §4, Print sheet — "black on white, no chrome, page breaks between events."
   §3.5 — "Print is a first-class output. The day sheet and booking
   confirmations are printed and handed to drivers."

   LINK THIS SHEET SEPARATELY, WITH media="print":

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

   It is deliberately NOT imported by app.css. A media="print" link is fetched
   at a lower priority and never blocks the first render of a booking form,
   which is the one page where a slow render costs a conversion.

   Everything is still wrapped in @media print so the file is harmless if
   someone later links it without the attribute.

   TOKENS. Custom properties inherit through the DOM regardless of which
   stylesheet declared them, so app.css's :root values are available here. Every
   var() below nonetheless carries a literal fallback, so this sheet still
   produces a correct A4 page if it is ever printed on its own.

   ONE THING THIS SHEET DELIBERATELY DOES NOT DO: expand link URLs. The usual
   print trick of `a::after { content: " (" attr(href) ")" }` would print the
   token out of /b/{token} or /d/{token} onto paper. §3.3 — the link is the key.
   A day sheet is handed to a driver and a confirmation is left on a desk;
   neither should carry a working credential in plain sight.
   ──────────────────────────────────────────────────────────────────────────── */

@media print {

  /* ═══ Page ════════════════════════════════════════════════════════════════
     A4 portrait at 11pt (§9). The margins are set for a domestic laser printer:
     14mm top and bottom, 12mm sides, comfortably inside the unprintable edge of
     every A4 device while still giving nine columns room on the day sheet. */

  @page {
    size: A4 portrait;
    margin: 14mm 12mm;
  }

  /* A repeated running header would be nice, but @page margin boxes with
     `content: element()` are not implemented in any browser the owner will
     use. The event name therefore repeats via the table's own <thead>
     instead — see the table rules below. */

  html,
  body {
    /* pt, not px: a print stylesheet measured in px is at the mercy of the
       browser's assumed DPI. §9 says 11pt, so say 11pt. */
    font-size: 11pt;
    line-height: 1.35;
    background: #fff !important;
    color: #000 !important;
  }

  body {
    /* Undo the shells' min-height: 100dvh, which forces a mostly-blank second
       page on a short confirmation. */
    min-height: 0 !important;
    display: block !important;
    font-family: var(--font-sans, system-ui, sans-serif);
  }

  /* ═══ Ink only ════════════════════════════════════════════════════════════
     §9: "no navy fills (ink)". Everything is black on white. Two reasons
     beyond the brief's word: a navy fill on a mono laser prints as a grey wash
     that swallows the text on it, and on an inkjet it costs the owner a
     cartridge per event day.

     NOTE ON §2.2 vs §9: the colour table gives --navy-900 the job of "print
     headers", which reads as a colour-printed letterhead or the 600px email
     header of §4. §9's rule is specific to the day sheet and confirmations —
     the pages that actually come out of the office printer — so §9 wins here.
     If the owner later wants a colour-printed letterhead, that is a separate
     sheet, not an exception in this one.

     The universal selector is heavy-handed and that is the point: it catches
     every card, callout, pill, sidebar and tint without this file needing to
     know they exist. */

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    /* Do not let the browser "helpfully" reinstate our backgrounds. */
    print-color-adjust: economy;
    -webkit-print-color-adjust: economy;
  }

  /* Borders stay, but in ink. They are what carries structure once the fills
     are gone — the callout's left rule, the table's row lines, the pill's
     outline are now the only thing distinguishing those elements. */
  .ect-card,
  .ect-callout,
  .ect-pill,
  .ect-table,
  .ect-table th,
  .ect-table td,
  .ect-daysheet__event,
  .ect-daysheet__event-head,
  .ect-total,
  .ect-contact-block {
    border-color: #000 !important;
  }

  /* ═══ No chrome ═══════════════════════════════════════════════════════════
     §4: "no chrome". Navigation, actions and anything interactive are removed:
     none of it means anything on paper, and all of it costs a driver's page.

     Hidden here rather than with a .ect-no-print class on each element, so a
     new component cannot forget to opt in. Anything that genuinely must print
     and happens to match one of these gets .ect-print-only, below. */

  .ect-skip,
  .ect-header,
  .ect-nav,
  .ect-navtoggle,
  .ect-sidebar,
  .ect-sidebartoggle,
  .ect-shell__topbar,
  .ect-footer,
  .ect-portal-header,
  .ect-tabs,
  .ect-breadcrumb,
  .ect-btn,
  .ect-actions,
  .ect-menu,
  .ect-ownermenu,
  .ect-table__actions,
  .ect-table__sort::after,
  .ect-pagehead__actions,
  .ect-stepper,
  .ect-empty,
  .ect-honeypot,
  .ect-no-print,
  form .ect-field__help,
  [role='search'],
  [hidden] {
    display: none !important;
  }

  /* The escape hatch: a print-only line — the sheet's date, a signature strip,
     the operator licence number on a confirmation (§11, OQ-5). Hidden on
     screen with [hidden] in markup, revealed here. */
  .ect-print-only,
  [hidden].ect-print-only {
    display: block !important;
  }

  /* ═══ Layout ══════════════════════════════════════════════════════════════
     Undo the shells. A printed page has one column and no containers. */

  .ect-shell,
  .ect-shell--admin,
  .ect-shell--public,
  .ect-shell--portal {
    display: block !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
  }

  .ect-container,
  .ect-container--narrow,
  .ect-container--wide,
  .ect-admin-content,
  .ect-shell__main {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ect-card,
  .ect-callout,
  .ect-contact-block,
  .ect-total {
    border-radius: 0 !important;
    padding: 6pt 8pt !important;
  }

  .ect-section { padding-block: 0 !important; }

  /* ═══ Type ════════════════════════════════════════════════════════════════
     Scaled from the 11pt base. Playfair is kept for the sheet title only —
     it identifies the company at a glance on a desk — and everything a driver
     has to read quickly is the sans. */

  h1, .ect-pagehead__title {
    font-family: var(--font-display, Georgia, serif);
    font-size: 18pt;
    line-height: 1.2;
    margin-bottom: 4pt;
  }

  h2 { font-size: 14pt; line-height: 1.2; }
  h3 { font-size: 12pt; }
  h4, h5, h6 { font-size: 11pt; }

  .ect-lead,
  .ect-pagehead__subtitle { font-size: 11pt; }

  /* Links print as plain text — see the note at the top of this file about
     never printing a token. Underlines are dropped because on paper there is
     nothing to click and the underline only adds noise. */
  a,
  a:visited {
    text-decoration: none !important;
    color: #000 !important;
  }

  /* Never strand a single line of a paragraph across a page break. */
  p, li, blockquote {
    orphans: 3;
    widows: 3;
  }

  h1, h2, h3, h4, .ect-daysheet__event-name {
    break-after: avoid-page;
    page-break-after: avoid; /* legacy alias for older engines */
  }

  /* ═══ Tables ══════════════════════════════════════════════════════════════
     §9: "repeating table header".

     The stacked-card layout from components.css must be undone first. A print
     canvas is around 794px wide at 96dpi, so the 720px media query usually
     matches and the table form is already in force — but "usually" is not good
     enough for the one output that gets handed to a driver, so it is forced
     here regardless of how the browser sizes the print viewport. */

  .ect-table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 10pt;
  }

  .ect-table thead {
    /* This is the line that makes the header repeat on every page. */
    display: table-header-group !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
  }

  .ect-table tbody { display: table-row-group !important; }
  .ect-table tr { display: table-row !important; }

  .ect-table th,
  .ect-table td {
    display: table-cell !important;
    padding: 4pt 5pt !important;
    border: 0 !important;
    border-bottom: 0.5pt solid #000 !important;
    vertical-align: top;
  }

  /* The data-label prefixes belong to the card layout only. */
  .ect-table td::before { content: none !important; }

  .ect-table thead th {
    border-bottom: 1pt solid #000 !important;
    font-size: 9pt;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* A row must not be split across two pages: half a passenger's details at
     the foot of page one is worse than a slightly short page. */
  .ect-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .ect-table-scroll {
    overflow: visible !important;
    border: 0 !important;
  }

  /* ═══ Status pills ════════════════════════════════════════════════════════
     The tint is gone, so the pill is now an outlined word. It still reads
     correctly because §9 never let colour carry the meaning in the first
     place — the text was always the signal and it survives untouched. */

  .ect-pill {
    border: 0.5pt solid #000 !important;
    border-radius: 2pt !important;
    padding: 0 3pt !important;
    font-size: 9pt;
    font-weight: 600;
  }

  .ect-pill__icon { display: none !important; }

  /* ═══ Day sheet ═══════════════════════════════════════════════════════════
     §9 and §4: "page breaks between events."

     break-before on every event AFTER the first — not break-after on every
     event, which would leave a blank final page. Both the modern property and
     the legacy alias are set: older print engines still only understand
     page-break-before. */

  .ect-daysheet { display: block !important; }

  .ect-daysheet__event {
    border: 0 !important;
    margin: 0 0 6pt !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .ect-daysheet__event + .ect-daysheet__event {
    break-before: page;
    page-break-before: always;
    padding-top: 0 !important;
  }

  .ect-daysheet__event-head {
    padding: 0 0 3pt !important;
    border: 0 !important;
    border-bottom: 1pt solid #000 !important;
    margin-bottom: 5pt !important;
  }

  .ect-daysheet__event-name { font-size: 13pt; font-weight: 600; }

  /* The pickup time is what the owner and the driver scan for. */
  .ect-daysheet__time {
    font-size: 12pt;
    font-weight: 600;
    white-space: nowrap;
  }

  .ect-daysheet__flight { white-space: nowrap; }

  /* A confirmation should not break mid-booking. */
  .ect-card,
  .ect-callout,
  .ect-datalist {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ═══ Forms ═══════════════════════════════════════════════════════════════
     A printed form is a record, not an input. Controls keep their value and
     lose their chrome. */

  .ect-field__input {
    border: 0 !important;
    border-bottom: 0.5pt solid #000 !important;
    border-radius: 0 !important;
    padding: 1pt 0 !important;
    min-height: 0 !important;
  }

  select.ect-field__input { background-image: none !important; }

  /* ═══ Images ══════════════════════════════════════════════════════════════
     The public site's photographs (§2.5) are context, not information. They
     cost a driver's ink and tell him nothing. */

  .ect-shell--public img,
  .ect-hero img {
    display: none !important;
  }

  /* The wordmark is the exception: it identifies whose sheet this is. */
  .ect-logo,
  .ect-logo__mark,
  .ect-logo__text {
    display: block !important;
    color: #000 !important;
  }

  .ect-logo { display: flex !important; margin-bottom: 6pt; }
}