/*
 * print.css -- the page as a browser prints it, or saves it as a PDF.
 *
 * Linked from base.html with media="print", after every other stylesheet,
 * so nothing loaded later takes a rule of it back. THE ONLY PRINT
 * STYLESHEET: test_print refuses a second one, or an @media print block
 * anywhere, so that what prints is decided in one place. Ben chose this over
 * a server-rendered PDF on 2026-09-23 (HANDOFF question 28): no dependency,
 * no second rendering path, and the page IS the printout, so whatever the
 * money sweeps in test_money_display cover on the screen they cover on
 * paper. That is not the quote builder's customer copy, one {{ quote_text }}
 * they do not read. (This said they "cover the paper as they cover the
 * screen" until 2026-09-30.)
 *
 * What prints: the heading, the results and the "How this works" prose,
 * which holds the caveats a reader of paper needs more than a reader of the
 * screen, who can click. What does not: the navigation, the footer, every
 * form and button, and the mileage meter (Ben, 2026-09-23).
 *
 * PAPER IS A THIRD SURFACE, and a browser paints no backgrounds on it unless
 * asked. Chromium keeps the device's prefers-color-scheme while printing, so
 * a dark page prints its dark palette onto white: measured on 2026-09-23
 * before this file existed, 3,999 of the 4,197 text elements on the 73
 * rendered pages were below 4.5:1 on white, headings at 1.30:1 and muted
 * text at 1.22:1. So the first rule below redefines Bootstrap's root variables for
 * paper, for both themes at once, and everything Bootstrap derives from
 * them -- table text, card fills, alert borders -- follows. The site's own
 * --ftk-* variables are left alone: they belong to the two screen themes
 * (test_contrast.ThemeSurfaceTests). The toolkit.css rules that read them
 * are each answered here: the page, the card, a tool's results block, its
 * "How this works" note and the routing caption are given their paper
 * values directly below, the tab before a result is taken off, and the
 * "Result" label beside it with it, a link's coloured underline prints in
 * the link's own black, the navbar, the footer and every form are hidden,
 * and with them the form's card, the rule beside the product's name and
 * the current link's underline, and the focus outline is removed. (This
 * said "Four toolkit.css rules read them" until 2026-10-03, when the brand
 * gave the results, the note, the tab and the underline their own, and
 * the caption, the form's card, the product's rule and the current link
 * came later that day.)
 *
 * Figures against white, WCAG 2.x: text and headings #000 at 21:1; muted
 * text #444 at 9.74:1; the semantic text colours are Bootstrap's own
 * light-theme values, 7.99:1 and above; borders #888 at 3.5:1, the 3:1 that
 * WCAG 1.4.11 asks of a boundary. test_print pins each, and
 * tools/audits/print_audit.js measures the rendered pages.
 */

/* The paper palette. `:root` is the <html> element and `[data-bs-theme]`
   matches it in either theme; both tie with Bootstrap's own theme blocks on
   specificity and win by loading later. The -rgb twins matter as much as
   the colours: Bootstrap builds links, table tints and card caps from them.
   The subtle backgrounds are the light theme's, so an alert prints as a
   pale tint if the person turns background graphics on, and as nothing if
   not; the subtle borders are the dark theme's, the darker of the two. */
:root,
[data-bs-theme] {
  color-scheme: light;
  --bs-body-color: #000000;
  --bs-body-color-rgb: 0, 0, 0;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: #444444;
  --bs-secondary-color-rgb: 68, 68, 68;
  --bs-secondary-bg: #ffffff;
  --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-color: #444444;
  --bs-tertiary-color-rgb: 68, 68, 68;
  --bs-tertiary-bg: #ffffff;
  --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-heading-color: #000000;
  --bs-link-color: #000000;
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color: #000000;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-code-color: #000000;
  --bs-border-color: #888888;
  --bs-border-color-translucent: #888888;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
}

/* toolkit.css reads the site's own surface variables on these two. Each
   gets its paper value directly rather than a screen theme's variable
   redefined here. The card's rule, Rail in light and Steel in dark, is
   1.53:1 and 6.25:1 on white, so it prints in this file's grey instead.
   (This said "white at 8% or black at 17.5%" until 2026-10-03.) */
body {
  color: #000000;
  background-color: #ffffff;
}

.card {
  background-color: #ffffff;
  border-color: #888888;
}

/* The brand's screen surfaces, flattened. A tool's results block, its
   "How this works" note and the routing caption print as they did before
   the brand: no fill, no rule, no inset, so the paper layout is the one
   16e measured. The orange tab before a result is decoration, and would
   print as a stray shape with background graphics on, and the "Result"
   label beside it would sit over the heading once the tab was gone;
   `content: none` takes each off without the hiding rule below, which is
   for what a reader cannot use. */
[id$="-results"] {
  padding: 0;
  background-color: #ffffff;
  border: 0;
}

[id$="-results"] > h2:first-of-type::before {
  content: none;
}

[id$="-results"] > h2:first-of-type::after {
  content: none;
}

.ftk-note {
  padding: 0;
  background-color: #ffffff;
  border: 0;
}

.ftk-caveat {
  padding: 0;
  background-color: #ffffff;
  border: 0;
}

/* The partners' logo, wherever a printed page carries it: the full colour
   version, the one drawn for white, whichever theme printed. The reversed
   one has white letters, which paper would lose, and the hiding rule below
   takes it off. Only the landing page's logo can print; the navbar's goes
   with the navbar. */
.ftk-on-light {
  display: block !important;
}

/* A link prints black, from the palette above; its underline would keep
   the screen's orange without this. */
a {
  text-decoration-color: currentColor;
}

/* Nothing a reader of paper can use. `!important` because Bootstrap's
   display utilities, `.d-flex` on the organization switcher's form among
   them, are `!important` at one class and would otherwise win. The meter
   is the user's own Routes allowance, a fact about today rather than about
   the result. The "Related tools" sentence of the "How this works" prose is
   links, and a link on paper is a name pointing nowhere; each template keeps
   that sentence in a paragraph of its own carrying `ftk-related`, so the
   caveats around it still print (Ben, 2026-09-23). The reversed logo is
   white letters for a navy ground, which on paper would print as an orange
   bar alone. */
nav,
footer,
form,
button,
.btn,
.btn-close,
.alert-dismissible,
.ftk-meter,
.ftk-related,
.ftk-on-dark,
.visually-hidden-focusable {
  display: none !important;
}

/* Use the whole width of the page. The container's breakpoints were chosen
   for screens: a Letter page inside half-inch margins is 720px, where the
   container would stop at 540px. Its padding stays, because the row inside
   it relies on it. */
.container {
  max-width: none !important;
}

/* The page ends where its content does. The padding under <main> sets
   the footer off on screen, and the footer is hidden here, so on paper the
   padding is blank space alone: on a page whose content ended within
   24 px of a sheet's foot it made a second sheet holding nothing. The
   cost per mile result printed one, and the member's company defaults
   did once the brand's 32 px title had made it taller on 2026-10-03,
   until this rule on 2026-10-04. The id and `!important` are
   load-bearing: Bootstrap's `.py-4` is `!important` at one class. */
#main-content {
  padding-bottom: 0 !important;
}

/* Bootstrap's grid is sized to the viewport, and a Letter page inside
   half-inch margins is 720px, below the md breakpoint, so every results page
   printed in its phone layout: cards stacked one to a row, a page longer.
   These are Bootstrap 5.3.3's own md column widths, given unconditionally,
   so a printout is laid out as a desktop screen shows it. The sm columns
   already apply at that width, and the lg wrappers rightly do not. */
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8 {
  flex: 0 0 auto;
}

.col-md-3 { width: 25%; }
.col-md-4 { width: 33.33333333%; }
.col-md-5 { width: 41.66666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.33333333%; }
.col-md-8 { width: 66.66666667%; }

/* A table wider than the page loses columns whichever way it overflows;
   let it show what it can rather than scroll, which paper cannot. Tables
   are set at 14px, a printed table's size: the bid sheet's nine lane
   columns measured 700px at 16px against the 696px inside the container,
   and fit at 14px. */
.table-responsive {
  overflow: visible !important;
}

.table {
  font-size: 0.875rem;
}

/* Keep a card, a row, an alert or the customer copy on one page, and a
   heading with what follows it. */
.card,
tr,
.alert,
pre {
  break-inside: avoid;
}

h1,
h2,
h3 {
  break-after: avoid;
}

/* Nothing has keyboard focus on paper, but the element that had it when
   the dialog opened keeps its outline in Chromium's output: the pricing
   stance's result heading, which its own script then focused on load,
   printed inside a blue box until this rule. base.html's landing script now
   focuses every tool's result heading, or the first refused field, on load.
   test_contrast's outline sweep exempts this file for it, and test_print
   pins the rule. */
:focus,
:focus-visible {
  outline: none !important;
}

/* A badge is white text on a coloured fill, and the fill does not print:
   outline it and print its words in black. Both of Bootstrap's declarations
   are `!important`, so these must be too. */
.badge {
  color: #000000 !important;
  background-color: transparent !important;
  border: 1px solid #000000;
}

/* ── Spot market pricing stance ────────────────────────────────────────────
   Its verdict tones, meters and matrix are the one place a template's own
   stylesheet paints colours (pricing_stance.css). On paper every one of
   them is flattened
   to black on white: keep the numbers, drop the colour, the approach
   bencritt.net's sibling freight tools take. These rules lived in
   pricing_stance.css until 2026-09-23 and moved here whole, less its hide of
   the form and the explainer, which the shared rule above and Ben's
   decision to print the prose replaced. */
#stance-results,
#stance-results * {
  color: #000 !important;
  background: #fff !important;
  border-color: #666 !important;
  box-shadow: none !important;
}

#stance-results .meter-track,
#stance-results .meter-fill {
  background-color: #fff !important;
  border: 1px solid #000 !important;
}

#stance-results .matrix-active {
  box-shadow: none !important;
  border: 2px solid #000 !important;
}

#stance-results .badge {
  border: 1px solid #000 !important;
}