/* ============================================================================
   transport-guide.css — PROTOTYPE ONLY, not production
   Pack 2, Industry Buyer Guides: Transport & Logistics ERP Buyer's Guide

   Layered on main.css + pages/knowledge-article.css + buyer-guide.css.

   buyer-guide.css is NOT modified. The Buyer Guide visual system — including
   the shared CTA wrapping correction, which is now part of the frozen family
   baseline — is permanently frozen, so this guide adapts to the system rather
   than the system adapting to the guide. Transport loads none of guide2-7.css,
   not seed-guide.css and not steel-guide.css: the prototypes stay independent,
   which is why a component that also exists in another guide's stylesheet is
   redefined here rather than shared. That is the established family pattern.

   NO guide-local CTA rule of any kind. The long-label wrap is handled by
   buyer-guide.css's .bg-cta-in .btn-p, and family-qa.js asserts that no
   guide-specific stylesheet carries a CTA-button or CTA-wrapping rule.

   Reused from the frozen buyer-guide.css, unchanged:
     .bga-hero .bga-doc .bga-band          brand-aligned shell + semantic bands
     .bg-rail .bg-toc .bg-toc-m            contents, desktop and mobile
     .bg-answer .bg-tag                    direct answer + hero label
     .bg-record                            every flat equal-weight attribute set
     .bg-qlist                             the long operational question sets
     .bg-pair                              the one genuine "X is not Y" contrast
     .bg-show                              the eight SHOW ME scenarios
     .bg-ask .bg-principle                 the prominent question + key principle
     .bg-signoff                           the evaluation record
     .bg-proof                             the Al Mashaweer evidence, no logo
     .bg-check                             the twenty-group checklist
     .bg-vendor .bg-cta .bg-sr h2.bg-rule  Exactlly band, CTA, a11y, rhythm
     .kn-note .kn-next                     knowledge-article idioms

   Six components are defined here, each because the shared set cannot express
   it: a blockquote (nothing styles <blockquote>), the movement chains, the
   THREE equal two-sided treatments, the five delivery classifications, the red
   flags, and the confirmed-versus-partially-supported capability distinction.

   Two editorial risks shape everything below.

   The first is operating-model neutrality. The guide must read equally for an
   owned-fleet transporter, a hired-fleet operator, a forwarder, a C&F operator
   and a coordinator who owns no vehicles at all. Nothing here ranks, numbers or
   colours any member of a set — owned capacity is not styled as the real
   business and hired capacity as the compromise.

   The second is product truth. The approved copy carries twenty-nine confirmed
   current capabilities and eleven that are partially supported and may require
   configuration or development. Those two groups must stay visibly distinct
   without the partial group being dressed as a warning: .tr-cap differentiates
   them by label and border weight, never by alarm colour.
   ============================================================================ */

/* ── Quotations ────────────────────────────────────────────────────────────
   The approved copy sets a large number of questions and statements as
   blockquotes. Nothing in main.css or knowledge-article.css styles
   <blockquote>. */

.kn-article .tr-quote {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--bg-s);
  border-left: 3px solid var(--b-bd);
  border-radius: 0 var(--r) var(--r) 0;
}

.kn-article .tr-quote p {
  font-size: 16.5px !important;
  line-height: 1.6;
  color: var(--t) !important;
  font-weight: 500;
  margin: 0 !important;
}

/* The question the buyer should ask instead of the one being set aside. */
.kn-article .tr-quote.is-key { background: var(--b-lt); border-left-color: var(--b); }

.tr-quotes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.tr-quotes .tr-quote { margin: 0; }

/* ── Movement chains ───────────────────────────────────────────────────────
   Six chains: the short answer's movement chain and its wider-logistics
   extension, the trip spine, FOLLOW THE TRIP, the trip-economics relationship
   and the transport-to-final-delivery sequence.

   flex-direction:row is REQUIRED and explicit. knowledge-article.css:107 sets
   flex-direction:column on .kn-article ul/ol and wins otherwise — the defect
   found in Guides 2, 5 and 6, guarded against in Guide 7, Seeds and Steel.
   flex-wrap:wrap is retained so a thirteen-stage chain wraps on a narrow
   screen rather than being forced onto one line or overflowing the page.

   Text only. No SVG, no map metaphor, no vehicle iconography, no animation. */

.kn-article .tr-chain {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 4px 0 22px !important;
  padding: 16px 18px !important;
  background: var(--bg-s);
  border: 1px solid var(--br);
  border-radius: var(--r);
}

.kn-article .tr-chain li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  margin: 0;
  font-size: 14.5px !important;
  font-weight: 600;
  color: var(--t) !important;
  line-height: 1.4;
}

.kn-article .tr-chain li::before { content: none; }

.tr-chain-a { color: var(--b); font-weight: 700; }

/* ── The three EQUAL two-sided treatments ──────────────────────────────────
   Used three times, and this is the guide's most-reused component:

     owned capacity      ↔ hired capacity
     TRIP VIEW           ↔ VEHICLE VIEW
     SELL SIDE           ↔ BUY SIDE

   Deliberately not .bg-pair. That component's three-track grid places a symbol
   between the halves and offers .is-strong to emphasise one, which is correct
   for a real inequality and wrong for all three of these. An operator who hires
   every vehicle is not running a lesser transport business; the vehicle view is
   not a lesser trip view; and the carrier payable is not a lesser version of
   customer revenue. One rule styles both panels, so neither half can read as
   the primary one, and there is no connector between them to imply that one
   leads to or outranks the other. */

.tr-dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 22px;
}

.tr-dual-c {
  border: 1px solid var(--br);
  border-top: 3px solid var(--b-bd);
  border-radius: var(--r);
  background: var(--w);
  padding: 18px 20px 16px;
}

.kn-article .tr-dual-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b);
  margin: 0 0 12px;
}

.kn-article .tr-dual-c p { font-size: 15px !important; }
.kn-article .tr-dual-c .tr-quote { margin: 0 0 14px; padding: 12px 14px; }
.kn-article .tr-dual-c .tr-quote p { font-size: 15px !important; }
.kn-article .tr-dual-c ul { margin: 0 0 14px !important; }
.kn-article .tr-dual-c li { font-size: 15px !important; }
.kn-article .tr-dual-c > :last-child { margin-bottom: 0 !important; }

/* ── Confirmed versus partially supported capability ──────────────────────
   The one place in this guide where two blocks MUST be distinguished rather
   than balanced. The approved copy states twenty-nine confirmed current
   capabilities and eleven that are partially supported and can be configured or
   developed according to customer requirements, and a reader who skims must not
   come away believing all forty are standard.

   Differentiated by label and by border weight only. No alarm colour, no red,
   no icon: the partial group is a legitimate part of the product answer, not a
   warning, and the family has never used traffic-light colour. The qualifying
   sentence stays inside the partial block rather than in a footnote, so the
   qualification cannot be separated from the list it governs. */

.tr-cap { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 22px; }

.tr-cap-b {
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--w);
  padding: 18px 20px 14px;
}

/* Confirmed: the solid brand rule. Partial: the lighter border already on
   .tr-cap-b, so the two read as different standings without either being
   coloured as good or bad. */
.tr-cap-b.is-confirmed { border-left: 3px solid var(--b); }
.tr-cap-b.is-partial   { border-left: 3px solid var(--b-bd); }

.kn-article .tr-cap-k {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b);
  margin-bottom: 6px;
}

.kn-article .tr-cap-q {
  font-size: 14.5px !important;
  line-height: 1.6;
  color: var(--t-m) !important;
  margin: 0 0 12px !important;
}

.kn-article .tr-cap-b ul { margin: 0 !important; }
.kn-article .tr-cap-b li { font-size: 15px !important; }

/* ── Delivery classification ───────────────────────────────────────────────
   Five members, so neither .bg-trio nor .bg-prio — both three-track — fits.
   Unnumbered and identically styled: the approved copy states that none of the
   labels is automatically good or bad, so nothing here may imply that Standard
   is safe or Custom is a warning. */

.tr-class {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 4px 0 22px;
}

.tr-class-i {
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--w);
  box-shadow: var(--sh-xs);
  padding: 16px 18px 14px;
}

.kn-article .tr-class-k {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b);
  margin-bottom: 8px;
}

.kn-article .tr-class-i p {
  font-size: 14.5px !important;
  line-height: 1.6;
  margin: 0 !important;
}

/* ── Red flags ─────────────────────────────────────────────────────────────
   Twenty of them. Restrained, exactly as Pack 1, Seeds and Steel: a hairline
   and a heading, no alarm colour and no icon. The approved copy is diagnostic,
   not accusatory. */

.tr-flag {
  border-top: 1px solid var(--br);
  padding: 16px 0 0;
  margin: 0 0 18px;
}

.kn-article .tr-flag-h {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--t);
  margin: 0 0 6px;
}

.kn-article .tr-flag p { font-size: 15px !important; }
.kn-article .tr-flag > :last-child { margin-bottom: 0 !important; }

/* ── Ground-aware surfaces on alternate bands ──────────────────────────────
   The frozen shell alternates the body ground between white and var(--bg).
   Two Transport surfaces are designed against white:

     .tr-quote   var(--bg-s)  #FAFBFC on #F7F8FA — no reading
     .tr-chain   var(--bg-s)  no reading

   Lifted to var(--w) on an alt band, keeping the panel lighter than its ground,
   which is the production idiom of white cards on a .sec-alt section.

   GUARDED, following the Pack 1 closure. Two things this selector must not do:

   1. It must not read `.bga-band.is-alt .kn-article .tr-quote`. In the aligned
      shell .kn-article is the grid container and .bga-band sits inside it, so
      .kn-article is an ANCESTOR of the band — that shape matches nothing.

   2. It must not lift every instance. The direct child combinator admits only
      surfaces whose ground really is the band column, directly or through the
      transparent .tr-quotes wrapper; a quotation nested inside a painted
      .tr-dual-c panel keeps its own fill rather than becoming white-on-white.
      :not(.is-key) leaves the intentionally blue key quotations alone. */

.bga-band.is-alt > .bga-col > .tr-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .tr-quotes > .tr-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .tr-chain {
  background: var(--w);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .tr-dual { grid-template-columns: 1fr; }
  .tr-class { grid-template-columns: 1fr; }
}

@media print {
  .tr-quote, .tr-dual-c, .tr-class-i, .tr-cap-b { box-shadow: none; break-inside: avoid; }
  .tr-flag { break-inside: avoid; }
  .tr-dual { grid-template-columns: repeat(2, 1fr); }
  /* The chain reads as a sequence on paper without its box. */
  .kn-article .tr-chain { background: none; border: 0; padding: 0 !important; }
}