/* ============================================================================
   steel-guide.css — PROTOTYPE ONLY, not production
   Pack 2, Industry Buyer Guides: Iron & Steel 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 was
   permanently frozen after Pack 1 and Seeds joined it without changing it, so
   the industry guide adapts to the system rather than the system adapting to
   the guide. Steel loads none of guide2-7.css and not seed-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 — .g2-quote through .g7-quote and .sd-quote all
   coexist as separate per-guide definitions.

   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 genuine "X is not Y" contrasts
     .bg-show                              the eight SHOW ME scenarios
     .bg-ask .bg-principle                 the prominent question + key principle
     .bg-signoff                           the evaluation record
     .bg-check                             the eighteen-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 material chains, the two
   EQUAL two-panel treatments, the weight-reconciliation framework, the five
   delivery classifications and the red flags.

   A steel guide carries two specific risks. It must never imply that one steel
   operating route is universal — a reroller or service centre that does not
   melt steel is as much the reader as an integrated mill. And it must never
   rank created heat identity above inherited supplier heat identity, or
   forward traceability above backward. Nothing below ranks, numbers or colours
   any member of a set.
   ============================================================================ */

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

.kn-article .st-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 .st-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 .st-quote.is-key { background: var(--b-lt); border-left-color: var(--b); }

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

/* ── Material chains ───────────────────────────────────────────────────────
   Four chains: the melt-and-roll route, the reroller/downstream route,
   FOLLOW THE HEAT, and the backward path from dispatch to source.

   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 and in Seeds.
   flex-wrap:wrap is retained so an eleven-stage chain wraps on a narrow screen
   rather than being forced onto one line or overflowing the page. */

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

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

/* ── The two EQUAL two-panel treatments ────────────────────────────────────
   Used twice: created versus inherited heat identity, and forward versus
   backward genealogy.

   Deliberately not .bg-pair. That component's three-track grid places a symbol
   between the halves and offers .is-strong to emphasise one of them, which is
   correct for a real inequality ("available stock is not eligible stock") and
   wrong here. A business that buys billet and inherits the supplier's heat is
   not running a lesser version of a melt shop, and backward traceability is
   not a lesser version of forward traceability. 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 the other. */

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

.st-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 .st-dual-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b);
  margin: 0 0 12px;
}

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

/* ── RECONCILE THE WEIGHT ──────────────────────────────────────────────────
   The seven questions the approved copy sets for a material balance. This is
   one of the two signature sections, so it is a framework rather than a run of
   loose blockquotes — but every cell carries identical weight.

   auto-fit rather than a fixed track count: seven is a prime number, so any
   fixed grid leaves an orphan cell that reads as emphasis. Nothing here is
   numbered, because the copy sets these as parallel questions about one
   balance, not as a sequence of steps. */

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

.st-weigh-i {
  border: 1px solid var(--br);
  border-left: 3px solid var(--b-bd);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--w);
  padding: 16px 18px;
}

.kn-article .st-weigh-i p {
  font-size: 15.5px !important;
  line-height: 1.5;
  font-weight: 600;
  color: var(--t) !important;
  margin: 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, so nothing here may imply that Standard
   is safe or Custom is a warning. */

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

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

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

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

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

.kn-article .st-flag p { font-size: 15px !important; }
.kn-article .st-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 Steel surfaces are designed against white:

     .st-quote   var(--bg-s)  #FAFBFC on #F7F8FA — no reading
     .st-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 .st-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 .st-quotes wrapper; a quotation nested inside a painted
      .st-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 > .st-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .st-quotes > .st-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .st-chain {
  background: var(--w);
}

/* CTA label containment used to live here as a Steel-local override of
   .bg-cta-in a.btn. It has been promoted into the shared system —
   buyer-guide.css now carries white-space: normal on .bg-cta-in .btn-p, beside
   the max-width: 100% that was already there — because the defect was never
   Steel-specific: any Buyer Guide CTA label longer than the 720px container
   would have spilled. Nothing Steel-local remains for it, and steel-guide.css
   defines only Steel components again. */

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

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

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