/* ============================================================================
   guide5.css — PROTOTYPE ONLY, not production
   Guide 5: ERP Implementation, Data Migration & Go-Live

   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 5 needs on its
   own lives here under a .g5-* prefix. All eight Guide 1-4 files are asserted by
   SHA-256 in this guide's QA, so a shared regression cannot pass unnoticed.

   Guide 5 loads none of guide2.css / guide3.css / guide4.css. A little CSS is
   duplicated across them (blockquote treatment, the red-flag list) as the
   deliberate price of keeping five 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-role(s)                            the three ownership roles
     .bg-pair                               the two question contrasts
     .bg-show .bg-ask                       SHOW ME + the evidence challenge
     .bg-signoff                            the 16-row readiness gate
     .bg-check                              readiness 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. The readiness gate is two columns, so it
   uses the shared .bg-signoff responsive table and reflows to labelled cards
   below 720px. Guide 4's .kn-article width fix is therefore not required here
   and is deliberately not copied.

   Guide 5 is about a transition that can go wrong, which creates a specific
   risk: the content drifts easily into alarm. Several rules below prevent that.
   Nothing in this file carries a red, amber or green colour, the three UAT
   severities are styled identically, the three go/no-go states are styled
   identically, and parallel running is styled identically to hard cutover.
   ============================================================================ */

/* ── Contents rail overflow ────────────────────────────────────────────────
   Guide 5 has 30 sections, the most in the programme. 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 and Guide 4 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 the questions a project should ask itself roughly
   thirty times. Nothing in main.css or knowledge-article.css styles
   <blockquote>. */

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

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

/* ── Two-part distinction ──────────────────────────────────────────────────
   Used six times, always for two things the guide refuses to rank: dates
   against evidence, who executes migration against who owns its correctness,
   training completion against user readiness, parallel running against hard
   cutover, and the before/after go-live question.

   Both halves always get identical chrome. Guide 5's whole argument is that
   these pairs are DIFFERENT, not that one is the winner. .bg-pair is reserved
   for the two genuine "do not ask X, ask Y" replacements, where one really does
   supersede the other. */

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

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

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

/* ── Three-part neutral sets ───────────────────────────────────────────────
   Day-1 / soon-after / future scope, the three UAT severities, the three
   go/no-go states, and the three kinds of post-go-live work.

   Identical chrome across all three members in every case. This matters most
   for the UAT severities and the go/no-go states: the brief is explicit that
   they must NOT be a traffic light, and that "significant but manageable" must
   not read as automatically acceptable. Colour would say otherwise, so no
   member of any set carries one. */

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

.g5-three-c {
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: var(--w);
  box-shadow: var(--sh-xs);
  padding: 18px 18px 16px;
}

.kn-article .g5-three-k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--b);
  margin: 0 0 10px;
}

.kn-article .g5-three-c p { font-size: 14.5px !important; margin-bottom: 0 !important; }

/* ── Numbered framework ────────────────────────────────────────────────────
   The five migration data categories, the five validation controls and the
   thirteen cutover activities.

   A compact ruled list rather than cards. Five and thirteen equal cards at a
   760px measure would add several screens and read as a feature grid; the
   brief asks specifically for a compact framework in both places. */

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

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

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

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

/* The cutover sequence is long and its members are short, so it drops the
   description column and runs tighter than the other frameworks. */
.g5-frame.is-seq .g5-item { padding: 11px 0; align-items: center; }
.g5-frame.is-seq .g5-item-n { margin-top: 0; }
.kn-article .g5-frame.is-seq .g5-item-h { margin: 0; font-weight: 600; font-size: 15px; }

/* ── Operating chains ──────────────────────────────────────────────────────
   order → credit control → … → reporting, and demand → … → costing.

   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.

   Deliberately plain. The brief is explicit that this must not look like a
   product feature diagram: it is a testing principle, so there are no icons,
   no gradient and no numbered "steps to success". */

.kn-article .g5-chain {
  list-style: none;
  display: flex;
  /* REQUIRED. knowledge-article.css:107 sets flex-direction:column on
     .kn-article ul/ol and wins unless overridden here. Without it the chain
     stacked one stage per line and align-items:center drifted the stages into a
     centred column. flex-wrap:wrap below is retained, so the chain still wraps
     on narrow screens rather than being forced onto one line. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 14px !important;
  padding: 16px 18px !important;
  background: var(--bg-s);
  border: 1px solid var(--br);
  border-radius: var(--r);
}

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

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

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

.g5-chain-k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-l);
  margin: 0 0 8px;
}

/* ── Role chips ────────────────────────────────────────────────────────────
   The eight UAT participants. Chips, not persona cards: the brief is explicit
   that this must not become a persona landing page. The point is only that
   these are the people who perform the workflow. */

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

.g5-role {
  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;
}

/* ── Role practice rows ────────────────────────────────────────────────────
   Warehouse / Accounts / Production / Manager, each with the verbs that role
   actually performs. A compact two-column definition, not a curriculum. */

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

.g5-tr-i {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 6px 22px;
  padding: 13px 0;
  border-bottom: 1px solid var(--br);
  align-items: baseline;
}

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

/* ── Per-activity attributes ───────────────────────────────────────────────
   The six things every cutover activity needs. A chip set: they are one short
   parallel list and the brief warns against building a fake timeline, so this
   deliberately carries no sequencing or duration of its own. */

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

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

/* ── Implementation red flags ──────────────────────────────────────────────
   Twelve flags. The same restrained treatment proven in Guides 2, 3 and 4: a
   left rule, no red, no icon. An implementation guide is an easy place to slip
   into fear, so the styling gives it none of that vocabulary. */

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

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

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

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

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

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

@media (max-width: 860px) {
  .g5-vs, .g5-three { grid-template-columns: minmax(0, 1fr); }
  .g5-tr-i { grid-template-columns: minmax(0, 1fr); }
}

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

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

@media print {
  .bg-rail { display: none !important; }
  .g5-vs-c, .g5-three-c, .g5-item, .g5-flag, .g5-tr-i { break-inside: avoid; }
  .g5-three-c { box-shadow: none; }
  .g5-vs, .g5-three { grid-template-columns: repeat(2, 1fr); }
  .g5-three { grid-template-columns: repeat(3, 1fr); }
}


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

     .g5-quote     var(--bg-s)  no reading on an alt band
     .g5-chain li  var(--bg-s)  no reading

   Lifted to var(--w) on an alt band. The chain's approved row direction and its
   wrapping behaviour are untouched — only the fill changes.

   GUARDED. Two corrections were needed beyond removing the impossible
   .kn-article prefix:

   1. The chain rule named .g5-chain li, but the li carries no background — the
      var(--bg-s) surface is the .g5-chain container. Un-prefixing alone would
      have painted sixteen stages white and left the panel unlifted.

   2. Of the ten .g5-quote instances on alt bands, eight sit in a transparent
      .g5-quotes wrapper and take the band as their ground, but two are nested
      inside a painted white .g5-vs-c panel. Lifting those two to var(--w) would
      have made them white-on-white. The child combinator admits only quotes
      whose ground really is the band column, directly or through the
      transparent wrapper, and :not(.is-key) leaves an intentionally blue key
      quotation alone. */

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