/* ============================================================================
   guide6.css — PROTOTYPE ONLY, not production
   Guide 6: ERP Demo & Vendor Evaluation Checklist

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

   buyer-guide.css is NOT modified. The Buyer Guide page system is frozen, so
   every shared component is reused verbatim and everything Guide 6 needs on its
   own lives here under a .g6-* prefix. All ten Guide 1-5 files are asserted by
   SHA-256 in this guide's QA, so a shared regression cannot pass unnoticed.

   Guide 6 loads none of guide2/3/4/5.css. A little CSS is duplicated across
   them (blockquote treatment, the red-flag list, the two-panel contrast) as the
   deliberate price of keeping six prototypes independent: a change to one must
   never be able to move another.

   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-pair                               the three question contrasts
     .bg-show .bg-ask                       SHOW ME + the prominent questions
     .bg-signoff                            BOTH evidence tables
     .bg-check                              the ten-group checklist
     .bg-principle .bg-record               emphasis + chip set
     .bg-vendor                             restrained Exactlly band
     .bg-future .bg-cta .bg-sr h2.bg-rule   series list, CTA, a11y, rhythm
     .kn-note .kn-next                      knowledge-article idioms
     #main-content:focus                    skip-target ring suppression

   NO wide-table containment is needed. Both of Guide 6's evidence tables are
   two columns, so they use the shared .bg-signoff responsive table and reflow to
   labelled cards below 720px. Guide 4's .kn-article width fix is therefore not
   required here and is deliberately not copied.

   Guide 6 is about judging vendors, which creates a specific risk: the page
   could imply a ranking where the source insists on none. Several rules below
   prevent that. Nothing in this file carries a red, amber or green colour, the
   five delivery classifications are styled identically and carry no index, and
   the two fit dimensions are styled identically.
   ============================================================================ */

/* ── Contents rail overflow ────────────────────────────────────────────────
   Guide 6 has 30 sections. At the shared 196px rail width the list runs far
   past a laptop viewport, so a sticky rail would clip its own tail with no way
   to reach it.

   Scoped to this page only, following the proven Guide 3/4/5 pattern:
   buyer-guide.css is untouched and Guides 1 and 2 keep the shared behaviour. */

/* ── Contents rail overflow — NOW SHARED ───────────────────────────────────
   This guide previously carried its own scoped rail scroll box because
   buyer-guide.css was frozen. The brand-aligned shell provides it for the
   whole family on .bga-doc > .bg-rail, so the duplicate here is removed:
   four guides were maintaining the same four declarations. Nothing about the
   behaviour changes — the shared rule is the same scroll box, and the rail is
   display:none below 1199px, so the media override went with it. */

/* ── Quotations ────────────────────────────────────────────────────────────
   The approved copy quotes what vendors say and what buyers should ask roughly
   forty times: it is the most quotation-dense guide in the programme. Nothing
   in main.css or knowledge-article.css styles <blockquote>. */

.kn-article .g6-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 .g6-quote p {
  font-size: 16.5px !important;
  line-height: 1.6;
  color: var(--t) !important;
  font-weight: 500;
  margin: 0 !important;
}

/* The question that decides something, rather than one being set aside. */
.kn-article .g6-quote.is-key { background: var(--b-lt); border-left-color: var(--b); }

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

/* ── Two-part distinction ──────────────────────────────────────────────────
   Product tour against buyer-led evaluation, must-prove against verify-another-
   way, and product fit against delivery fit.

   Both halves always get identical chrome. This matters most for must-prove
   against verify-another-way: the brief is explicit that written evidence must
   not look weaker by default, and colour or weight would say otherwise. */

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

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

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

/* ── Delivery classification ───────────────────────────────────────────────
   Standard / Configuration / Extension or additional application / Custom
   development / Not demonstrated.

   Deliberately UNNUMBERED and flat-ruled. Five columns at a 760px measure
   would leave about 140px each, and any index would imply an order the source
   explicitly rejects: Standard is not "first" or "best", and Custom
   development is not "last" or "worst". Every state therefore gets the same
   rule, the same type and the same weight. What differs is the ownership
   consequence, which is text. */

.g6-class { margin: 4px 0 22px; border-top: 1px solid var(--br); }

.g6-class-i {
  padding: 16px 0 16px 20px;
  border-bottom: 1px solid var(--br);
  border-left: 2px solid var(--b-bd);
}

.kn-article .g6-class-h {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--t);
  margin: 0 0 8px;
}

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

/* ── Scenario anatomy ──────────────────────────────────────────────────────
   Trigger → operating flow → financial consequence → management consequence.

   A clean four-stage flow, not an architecture diagram and not an Exactlly
   feature flow. Its only job is to teach how a demonstration scenario is
   constructed, so there are no icons, no product names and no styling that
   suggests a system boundary. */

.g6-anat { margin: 4px 0 22px; border: 1px solid var(--b-bd); border-radius: var(--r); background: var(--w); }

.g6-anat-i {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 8px 20px;
  padding: 16px 20px;
  align-items: baseline;
}

.g6-anat-i + .g6-anat-i { border-top: 1px solid var(--br); }

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

/* ── Arrow chains ──────────────────────────────────────────────────────────
   Used inside the scenario anatomy and for the general method chain. Arrows
   are correct here: these are real sequences in the source. Wraps rather than
   scrolls, and the arrows are decorative so a screen reader hears the stage
   names as a plain list. */

.kn-article .g6-chain {
  list-style: none;
  display: flex;
  /* REQUIRED. knowledge-article.css:107 sets flex-direction:column on
     .kn-article ul/ol, and that wins unless it is overridden here: without it
     the chain stacks one stage per line and align-items:center drifts them into
     a centred column. Measured before the fix: the four-stage operating flow
     rendered as four stacked lines. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 !important;
  padding: 0 !important;
}

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

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

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

/* The general method chain stands alone rather than inside the anatomy panel. */
.kn-article .g6-chain.is-method {
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-radius: var(--r);
  padding: 16px 18px !important;
  margin: 4px 0 22px !important;
}

/* ── Exception framework ───────────────────────────────────────────────────
   Five functional areas, each with the untidy thing that actually happens.
   Compact ruled rows: the brief warns against giant cards, and each entry is
   one or two short sentences. */

.g6-exc { margin: 4px 0 22px; border-top: 1px solid var(--br); }

.g6-exc-i {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 6px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--br);
}

.kn-article .g6-exc-h { font-size: 14.5px; font-weight: 700; color: var(--t); margin: 0; }
.kn-article .g6-exc-i p { font-size: 14.5px !important; }
.kn-article .g6-exc-i > div > :last-child { margin-bottom: 0 !important; }

/* ── Role chips ────────────────────────────────────────────────────────────
   The five realistic roles a demonstration should run through, and the final
   evidence pack's thirteen fields. Chips, because both are short parallel sets
   whose members carry no ranking. */

.g6-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }

.g6-chip {
  font-size: 14px;
  font-weight: 600;
  color: var(--t);
  background: var(--w);
  border: 1px solid var(--b-bd);
  border-radius: var(--r);
  padding: 9px 14px;
}

/* ── Numbered framework ────────────────────────────────────────────────────
   The seven-step demonstration script. Numbered here because the script IS a
   sequence, unlike the delivery classification above.

   A ruled list rather than an accordion: the brief is explicit that this must
   stay open, and a buyer should be able to print it and carry it in. */

.g6-frame { margin: 4px 0 22px; }

.g6-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--br);
}

.g6-item:last-child { border-bottom: 1px solid var(--br); }

.g6-item-n {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  color: var(--b);
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}

.kn-article .g6-item-h { font-size: 15.5px; font-weight: 700; color: var(--t); margin: 0 0 8px; }
.kn-article .g6-item p { font-size: 14.5px !important; }
.kn-article .g6-item li { font-size: 14.5px !important; }
.kn-article .g6-item ul { margin-bottom: 0 !important; }
.kn-article .g6-item > div > :last-child { margin-bottom: 0 !important; }

/* ── Reconciliation targets ────────────────────────────────────────────────
   The five places a demonstrated component must also appear. A compact
   definition set: each is a heading plus one question. */

.g6-recon { margin: 4px 0 18px; border-top: 1px solid var(--br); }

.g6-recon-i {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 6px 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--br);
  align-items: baseline;
}

.kn-article .g6-recon-h { font-size: 14.5px; font-weight: 700; color: var(--t); margin: 0; }
.g6-recon-v { font-size: 14.5px; line-height: 1.55; color: var(--t-m); }

/* ── Red flags ─────────────────────────────────────────────────────────────
   Fourteen flags, the most in the programme. The same restrained treatment
   proven in Guides 2 to 5: a left rule, no red, no icon. A guide about vendor
   behaviour is an easy place to slip into cynicism, so the styling gives it
   none of that vocabulary. */

.g6-flagset { margin: 4px 0 26px; }

.g6-flag { border-left: 2px solid var(--b-bd); padding: 2px 0 2px 20px; }
.g6-flag + .g6-flag { margin-top: 18px; }

.kn-article .g6-flag-h {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--t);
  margin: 0 0 7px;
}

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

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

@media (max-width: 1199px) {
}

@media (max-width: 860px) {
  .g6-vs { grid-template-columns: minmax(0, 1fr); }
  .g6-anat-i, .g6-exc-i, .g6-recon-i { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .kn-article .g6-quote { padding: 14px 16px; }
  .kn-article .g6-quote p { font-size: 15.5px !important; }
  .g6-flag { padding-left: 16px; }
  .g6-class-i { padding-left: 16px; }
  .g6-item { gap: 12px; }
  .kn-article .g6-chain.is-method { padding: 14px 16px !important; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .bg-rail { display: none !important; }
  .g6-vs-c, .g6-class-i, .g6-anat-i, .g6-exc-i, .g6-item, .g6-flag,
  .g6-recon-i { break-inside: avoid; }
  .g6-vs { grid-template-columns: repeat(2, 1fr); }
  /* The demonstration script is the page a buyer takes into the meeting. */
  .g6-frame { break-before: page; }
}


/* ── Ground-aware surfaces on alternate bands ────────────────────────────────
   The brand-aligned shell alternates the body ground between white and
   var(--bg). One Guide 6 surface was designed against white:

     .g6-quote  var(--bg-s)  no reading on an alt band

   Lifted to var(--w) on an alt band. Guide 6 quotes what vendors say and what
   buyers should ask roughly forty times, so this is the most frequently
   repeated surface in the family and the one where a lost tint would be most
   visible. Kept here rather than in buyer-guide.css because .g6-quote is a
   Guide 6 component. */

/* GUARDED. Guide 6 carries 31 quotations on alt bands: six directly in the band
   column, 21 in a transparent .g6-quotes wrapper, and four intentionally blue
   .is-key quotations. The child combinator lifts the 27 whose ground really is
   the band and :not(.is-key) leaves the four blue ones exactly as they are. */
.bga-band.is-alt > .bga-col > .g6-quote:not(.is-key),
.bga-band.is-alt > .bga-col > .g6-quotes > .g6-quote:not(.is-key) {
  background: var(--w);
}