/* ============================================================================
   cement-guide.css — PROTOTYPE ONLY, not production
   Pack 2, Industry Buyer Guides: Cement ERP Buyer's Guide — the eighth and
   final industry guide.

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

   buyer-guide.css is NOT modified. The Buyer Guide visual system is permanently
   frozen, and THREE shared corrections are part of that frozen baseline:

     .bg-cta-in .btn-p   white-space: normal        long CTA labels wrap
     .bg-signoff td      overflow-wrap: break-word  unbreakable table tokens wrap
     .bg-check-l label   overflow-wrap: break-word  unbreakable checklist tokens wrap

   All three are relied on here and none is touched or duplicated. This guide
   carries NO CTA rule, NO sign-off table rule and NO checklist rule;
   family-qa.js asserts that no guide-specific stylesheet re-privatises any of
   those behaviours.

   Cement loads none of guide2-7.css, seed-guide.css, steel-guide.css,
   transport-guide.css, manufacturing-guide.css, chemical-guide.css,
   fmcg-guide.css or edible-oil-guide.css: the prototypes stay independent,
   which is why a component that also exists in another guide's stylesheet is
   redefined here. That is the established family pattern.

   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 set
     .bg-show                              the eight SHOW ME scenarios
     .bg-principle                         the key principles
     .bg-signoff                           the 83-row evaluation record
     .bg-check                             the thirty-three-group checklist
     .bg-vendor .bg-cta .bg-sr h2.bg-rule  Exactlly band, CTA, a11y, rhythm
     .kn-note .kn-next                     knowledge-article idioms

   .bg-proof is NOT used, and that absence is the point: there is no approved
   named Cement customer, so there is no proof panel to render. The approved
   source says so itself, and the page states that product truth should be
   demonstrated directly instead. Every other industry guide in this family has
   at least one .bg-proof; Cement is the first with none, and inventing one
   would have been the single worst thing this build could do.

   .bg-qlist is not used either: every question set in this source is stated as
   its own blockquote, so every one is .cm-quotes.

   SIX components are defined here, each because the shared set cannot express
   it: a blockquote (nothing styles <blockquote>), the material and commercial
   chains, the three signature statements, the product-truth blocks, the five
   delivery classifications and the red flags.

   THE DEFINING EDITORIAL CONSTRAINT.

   This guide has to hold FOUR capability standings apart — the same count as
   Edible Oil, but a different shape:

     operating   the 40 confirmed Cement operating capabilities
     scheme      the 16 confirmed Cement SCHEME capabilities, which the brief
                 treats as a full governing pillar rather than a sub-topic
     api         ONE confirmed weighbridge API integration — a real capability,
                 stated separately, and carrying its own boundary: it must be
                 demonstrated against the customer's actual weighbridge
                 environment, and universal support for every make and interface
                 must not be claimed
     broader     the 15 relevant broader Exactlly capabilities

   The API standing is the subtle one here. Unlike Chemical's unsupported
   potency balancing or Edible Oil's unsupported hedge management, this
   capability IS real — so the risk runs the other way. A reader who stops at
   "confirmed API integration" would conclude something the source does not
   say. So .is-api reads as a confirmed capability, and its two boundary lines
   sit inside the same block at qualifier weight, where they cannot be
   separated from the claim they qualify.

   Second constraint: operating-model neutrality. Quarry, clinker production,
   grinding, bag packing, bulk, rake dispatch and consumer schemes are each
   conditional in the approved copy. Nothing here ranks, numbers or colours any
   member of a set.
   ============================================================================ */

/* ── 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 .cm-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 .cm-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 .cm-quote.is-key { background: var(--b-lt); border-left-color: var(--b); }

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

/* ── The three signature statements ────────────────────────────────────────
   CONTROL THE GRADE · RECONCILE THE TONNE · SETTLE THE SCHEME.

   The approved source states each twice: once as the section heading, and once
   as its own emphasised standalone line after "The Nth Cement signature
   principle is:". That standalone line is neither a quotation nor a heading, so
   neither .cm-quote nor an <h*> is right — an <h*> would corrupt the document
   outline and put three duplicate entries in the contents rail.

   Deliberately restrained: centred, uppercase-as-written, brand colour, a
   hairline top and bottom, no box, no fill, no icon. The brief is explicit that
   these must not become decorative slogans. */

.kn-article p.cm-sig {
  margin: 4px 0 22px !important;
  padding: 18px 16px !important;
  border-top: 1px solid var(--b-bd);
  border-bottom: 1px solid var(--b-bd);
  text-align: center;
  font-size: 20px !important;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--b) !important;
}

/* ── Material and commercial chains ────────────────────────────────────────
   Eleven chains: the grade-to-market lifecycle (20 stages), the Manufacturing
   and FMCG chains it is contrasted with, the inward weighbridge link, CONTROL
   THE GRADE, the bag and bulk flows, RECONCILE THE TONNE, the trade and project
   flows, and the scheme chain (11 stages).

   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 and guarded against in every guide since.
   flex-wrap:wrap is retained so a 20-stage chain wraps rather than overflowing.

   Text only. No SVG, no kiln, plant, silo, truck or clinker artwork, no process
   diagram, no animation. */

.kn-article .cm-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 .cm-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 .cm-chain li::before { content: none; }

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

/* ── Two chains as an equal pair ───────────────────────────────────────────
   The approved treatment for BAG CEMENT ≠ BULK CEMENT and for TRADE SALE ≠
   PROJECT / NON-TRADE SALE. In both cases the source states each side as its
   own arrow chain with its own lead-in label — so the equal weight comes from
   two identical components side by side, and NO panel body is written.

   That is why Cement, like Chemical, FMCG and Edible Oil, defines no
   two-panel comparison component. The other five distinctions
   (RAW MATERIAL ≠ CLINKER ≠ CEMENT, CLINKER PRODUCED ≠ AVAILABLE, PRODUCED ≠
   DISPATCHABLE, GROSS ≠ SALEABLE PACKED OUTPUT, DEALER LIFTING ≠ SCHEME
   EARNING) are each a caps heading plus the source's own supporting copy and,
   where the source enumerates members, a shared .bg-record. Building panels for
   those would have meant writing the bodies — the invented prose the Chemical
   draft was caught committing.

   Two columns on desktop, stacked on mobile. The label is the source's own
   lead-in ("Bag flow", "Trade may involve"), never a heading of my own. */

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

.cm-chains-c { display: flex; flex-direction: column; }

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

/* Inside the pair the chain becomes a single column: two seven-stage chains
   wrapping independently in half the measure would read as noise. */
.kn-article .cm-chains .cm-chain {
  flex-direction: column;
  align-items: flex-start;
  margin: 0 !important;
  flex: 1;
}

.kn-article .cm-chains .cm-chain li { font-size: 14px !important; }

/* ── Product-truth blocks ──────────────────────────────────────────────────
   FOUR standings, which MUST stay distinguishable:

     .is-operating  40 confirmed Cement operating capabilities
     .is-scheme     16 confirmed Cement scheme capabilities
     .is-api         1 confirmed weighbridge API integration, with boundaries
     .is-broader    15 relevant broader Exactlly capabilities

   Differentiated by label, border weight and ground only:

     operating  solid brand rule, white     — the primary Cement truth set
     scheme     solid brand rule, white     — equally primary; schemes are a
                                              governing pillar, not a sub-topic,
                                              so this block is NOT demoted
     api        solid brand rule, tinted    — confirmed, and carrying its own
                                              demonstration boundary
     broader    lighter brand rule, tinted  — confirmed, not Cement-specific

   The scheme block deliberately gets the same chrome as the operating block.
   Every earlier guide had one primary confirmed set; Cement has two, because
   the approved source and the brief both treat scheme management as a full
   pillar. Styling it as a secondary list would have contradicted the copy.

   The qualifying sentence lives inside each block, so a qualifier can never be
   separated from the list it governs. */

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

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

.cm-truth-b.is-operating { border-left: 3px solid var(--b); }
.cm-truth-b.is-scheme    { border-left: 3px solid var(--b); }
.cm-truth-b.is-api       { border-left: 3px solid var(--b); background: var(--b-lt); }
.cm-truth-b.is-broader   { border-left: 3px solid var(--b-bd); background: var(--bg-s); }

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

/* The broader label takes the muted token: it is a scope note, not a Cement
   feature heading. The API label keeps brand blue, because the capability it
   heads genuinely is confirmed. */
.kn-article .cm-truth-b.is-broader .cm-truth-k { color: var(--t-m); }

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

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

/* The API capability statement reads at body weight in the primary text
   colour — the sentence a buyer is entitled to rely on. */
.kn-article .cm-truth-b p.cm-truth-s {
  font-size: 16px !important;
  line-height: 1.6;
  font-weight: 600;
  color: var(--t) !important;
  margin: 0 !important;
}

/* Its two boundary lines sit directly under it at qualifier weight, inside the
   same block, so the claim and its limits cannot be read apart. */
.kn-article .cm-truth-b p.cm-truth-t {
  font-size: 14.5px !important;
  line-height: 1.6;
  color: var(--t-m) !important;
  margin: 10px 0 0 !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, and NOT YET DEMONSTRATED gets exactly
   the same chrome as STANDARD. */

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

.cm-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 .cm-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 .cm-class-i p {
  font-size: 14.5px !important;
  line-height: 1.6;
  margin: 0 !important;
}

/* ── SHOW ME trailing note ─────────────────────────────────────────────────
   SHOW ME 1 is followed by a line that is NOT part of the scenario itself: the
   weighbridge API instruction. It is approved copy and must appear, so it
   renders as its own line INSIDE .bg-show-t, separated by a hairline and set
   slightly quieter, so it reads as a condition on the test rather than part of
   it.

   It must stay inside .bg-show-t. buyer-guide.css:677 gives .bg-show-i
   `grid-template-columns: auto minmax(0, 1fr)` — exactly two columns — and a
   third child sizes the auto column to the note's width, collapses the scenario
   text and overflows the document. That defect was found and fixed during the
   Edible Oil build; this guide inherits the correct shape. */

.kn-article .cm-show-n {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--br);
  font-size: 14px;
  line-height: 1.6;
  color: var(--t-m);
}

/* ── Red flags ─────────────────────────────────────────────────────────────
   Forty-three of them, the most in the programme. Restrained exactly as
   everywhere else in the family: a hairline and a heading, no alarm colour and
   no icon. The approved copy is diagnostic, not accusatory. */

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

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

.kn-article .cm-flag p { font-size: 15px !important; }
.kn-article .cm-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 Cement surfaces sit directly on that ground and are designed against
   white:

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

   Both are 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.

   No .cm-truth clause appears here, and that is deliberate rather than
   forgotten: every .cm-truth in this guide lives inside the shared .bg-vendor
   panel, whose ground is var(--b-lt), not the band's. An `.is-alt` clause for
   it would be dead CSS — the defect selector-audit.js exists to catch, and the
   one corrected in Guide 7, again in FMCG, and again in Edible Oil. Measured
   instead: the operating and scheme blocks read white on #E8F1FB, the broader
   block #FAFBFC on #E8F1FB, and the API block is handled by the vendor-panel
   lift below for exactly the reason Edible Oil's FIFO block needed one — its
   var(--b-lt) fill is the same colour the vendor panel paints.

   GUARDED, following the Pack 1 closure. Two things these selectors must not do:

   1. They must not read `.bga-band.is-alt .kn-article .cm-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. They must not lift every instance. The direct child combinator admits only
      surfaces whose ground really is the band column, directly or through the
      transparent .cm-quotes wrapper; a chain nested inside a painted panel keeps
      its own fill rather than becoming white-on-white. :not(.is-key) leaves the
      intentionally blue key quotations alone.

   A fourth clause was drafted for the chains inside .cm-chains pairs and
   REMOVED: selector-audit.js reported n=0 for it, because both pairs
   (BAG ≠ BULK at s24 and TRADE ≠ PROJECT at s36) fall in non-alt bands, and the
   band layout is fixed at freeze. Measured on their actual white ground those
   four chains read #FAFBFC on #FFFFFF with their 1px border carrying the
   separation — the family's normal reading for var(--bg-s) on white — and
   band-surface-check reports 0 invisible surfaces in both bands. Dead CSS is
   the defect selector-audit.js exists to catch, corrected in Guide 7 and again
   in FMCG and Edible Oil. */

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

/* The API block carries var(--b-lt), which is exactly what .bg-vendor paints,
   so inside that panel it would measure zero contrast against its own ground.
   Lifted to white there, where white on #E8F1FB separates clearly. .bg-vendor
   appears only as the CONTEXT of the selector: no shared rule is redefined. */
.bg-vendor .cm-truth > .cm-truth-b.is-api { background: var(--w); }

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

@media (max-width: 720px) {
  .cm-class { grid-template-columns: 1fr; }
  /* The two-chain pairs stack: half of a 342px measure is unreadable. */
  .cm-chains { grid-template-columns: 1fr; }
  /* The signature statements carry the most type on the page; at 390 the 20px
     setting would wrap RECONCILE THE TONNE to three lines. */
  .kn-article p.cm-sig { font-size: 17px !important; padding: 15px 12px !important; }
}

@media print {
  .cm-quote, .cm-class-i, .cm-truth-b { box-shadow: none; break-inside: avoid; }
  .cm-flag, .cm-sig, .cm-chains-c { break-inside: avoid; }
  /* The chain reads as a sequence on paper without its box. */
  .kn-article .cm-chain { background: none; border: 0; padding: 0 !important; }
}