/* ============================================================================
   guide7.css — PROTOTYPE ONLY, not production
   Guide 7: ERP Integrations, Data Portability & Post-Go-Live Support

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

   buyer-guide.css is NOT modified. The Buyer Guide visual system is frozen
   across Guides 1-6, so every shared component is reused verbatim and only
   Guide 7's own components live here under a .g7-* prefix. Guide 7 loads none
   of guide2-6.css: the prototypes stay independent.

   Reused from buyer-guide.css unchanged:
     .bga-hero .bga-doc .bga-band          brand-aligned shell + bands
     .bg-rail .bg-toc .bg-toc-m            contents, desktop and mobile
     .bg-answer .bg-tag                    direct answer + hero label
     .bg-signoff                           the two-column semantic table, used
                                           for all four Guide 7 records
     .bg-show .bg-ask                      SHOW ME + the prominent question
     .bg-check                             checklist
     .bg-principle .bg-vendor              emphasis + restrained Exactlly band
     .bg-cta .bg-sr h2.bg-rule             CTA, a11y, section rhythm
     .kn-def .kn-note .kn-next             knowledge-article idioms
     #main-content:focus                   skip-target ring suppression

   Guide 7 is an operating-model guide, which creates a specific risk: it must
   never imply that a mechanism exists where the approved copy only tells the
   buyer to ask. Several rules below exist to keep that honest. Nothing in this
   file carries an alarm or a success colour, the two halves of every contrast
   are styled identically, and no set is numbered or ranked.
   ============================================================================ */

/* ── Quotations ────────────────────────────────────────────────────────────
   The approved copy sets roughly fifty questions and statements as
   blockquotes — more than any other guide in the programme. Nothing in
   main.css or knowledge-article.css styles <blockquote>. */

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

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

/* ── Two equally weighted panels ───────────────────────────────────────────
   Guide 7 turns on three distinctions: synchronous against asynchronous,
   recovery against portability, response against resolution. The approved copy
   is explicit that none of these has a universally correct side, so both
   halves always take identical chrome — same border, same ground, same weight.
   A reader must not be able to infer a recommendation from the styling. */

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

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

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

/* ── Equal sets ────────────────────────────────────────────────────────────
   Three sets share this treatment because all three are classifications
   rather than sequences:

     is-control  the six failure control areas
     is-concept  access / export / portability / archive / exit
     is-class    incident / user support / enhancement

   None is numbered. Detection is not step one and Exit is not a final stage —
   they are areas a buyer must be able to answer for. Numbering them would
   assert an order the approved copy does not contain. */

.g7-set {
  display: grid;
  gap: 12px;
  margin: 4px 0 22px;
}

.g7-set.is-control { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g7-set.is-concept { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.g7-set.is-class   { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

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

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

/* ── The three-party conversation ──────────────────────────────────────────
   ERP vendor, third-party vendor and internal IT each report that their own
   component is fine. The approved copy's point is that all three can be true
   at once, so the three are styled identically: no party is the culprit. */

.g7-parties {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 22px;
}

.g7-party {
  border: 1px solid var(--br);
  border-left: 3px solid var(--b-bd);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--bg-s);
  padding: 14px 16px;
}

.kn-article .g7-party-k {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--t-l);
  margin-bottom: 6px;
}

.kn-article .g7-party p {
  font-size: 15px !important;
  color: var(--t) !important;
  font-weight: 500;
  margin: 0 !important;
}

/* ── Process chains ────────────────────────────────────────────────────────
   Three flows: a customer order across the warehouse boundary, a payment
   instruction across the banking boundary, and the post-go-live change path.

   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, where chains silently stacked one stage per line.
   flex-wrap:wrap is retained so the chain still wraps on narrow screens rather
   than being forced onto one line or overflowing the page. */

.kn-article .g7-chain {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 4px 0 22px;
  padding: 0;
}

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

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

.kn-article .g7-chain li > span:last-child {
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--w);
  padding: 8px 13px;
  font-weight: 600;
}

.g7-chain-a { color: var(--t-l); font-weight: 700; }

/* ── Red flags ─────────────────────────────────────────────────────────────
   Sixteen of them, the most in the programme. Restrained: a hairline and a
   heading, no alarm colour and no icon. The approved copy is diagnostic, not
   accusatory, and red-on-white would change its register. */

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

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

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

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

     .g7-quote   var(--bg-s)  #FAFBFC on #F7F8FA — no reading
     .g7-party   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. Borders
   and border colours are untouched, so the .is-key distinction and the
   three-party equality both survive.

   Surfaces already white on either ground — .g7-vs-c, .g7-set-i and the chain
   stages — need nothing.

   NOTE ON THE SELECTOR. It must not read
   `.bga-band.is-alt .kn-article .g7-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, never a descendant — a selector written that way
   matches nothing at all. Verified by measurement: with the wrong selector the
   quote still rendered var(--bg-s) on an alt band. */

.bga-band.is-alt .g7-quote,
.bga-band.is-alt .g7-party {
  background: var(--w);
}

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

@media (max-width: 860px) {
  /* Six control areas and three request classes stop being readable at three
     across once the column narrows. */
  .g7-set.is-control { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g7-set.is-class,
  .g7-parties { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .g7-vs { grid-template-columns: 1fr; }
  .g7-set.is-control { grid-template-columns: 1fr; }
  .g7-set.is-concept { grid-template-columns: 1fr; }
}

@media print {
  .g7-quote, .g7-vs-c, .g7-set-i, .g7-party { box-shadow: none; break-inside: avoid; }
  .g7-flag { break-inside: avoid; }
  .g7-vs, .g7-set.is-control { grid-template-columns: repeat(2, 1fr); }
  /* The chain reads as a sequence on paper without its boxes. */
  .kn-article .g7-chain li > span:last-child { border: 0; padding: 0 2px; background: none; }
}