/* ============================================================================
   guide3.css — PROTOTYPE ONLY, not production
   Guide 3: Cloud ERP vs On-Premise ERP

   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 3 needs on its
   own lives here under a .g3-* prefix. Guide 1 and Guide 2 are asserted by
   SHA-256 in this guide's QA, so a shared regression cannot pass unnoticed.

   Guide 3 does NOT load guide2.css. A few treatments here resemble Guide 2's
   (quotations, the balanced red-flag pair). Duplicating a small amount of CSS is
   the right trade against coupling two independent prototypes: a change to
   Guide 2 must never be able to move Guide 3.

   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)                            long-form flat ruled sections
     .bg-show .bg-ask                       SHOW ME + the recurring question
     .bg-signoff                            responsive two-column table
     .bg-check                              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-def .kn-note .kn-next              knowledge-article idioms
     #main-content:focus                    skip-target ring suppression

   Guide 3's editorial position is that deployment is a RESPONSIBILITY
   ALLOCATION, not a winner. Several rules below exist specifically to keep the
   two options visually equal: the responsibility matrix, the decision matrix
   and the two red-flag sets give cloud and on-premise identical treatment, and
   nothing in this file carries a success or warning colour.
   ============================================================================ */

/* ── Contents rail overflow ────────────────────────────────────────────────
   Guide 3 has 24 sections. At the shared 196px rail width most labels wrap to
   two lines, so the full list runs past the bottom of a laptop viewport and a
   sticky rail would clip its own tail with no way to reach it.

   Scoped to this page only: buyer-guide.css is untouched, and Guides 1 and 2
   (15 and 19 entries) keep the shared behaviour, which is correct for them. */

/* ── 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 buyer should and should not ask,
   roughly twenty times. Nothing in main.css or knowledge-article.css styles
   <blockquote>, so this is a new component rather than a restyle. */

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

/* The question a buyer should ask instead, given more weight than the ones
   being set aside. */
.kn-article .g3-quote.is-key {
  background: var(--b-lt);
  border-left-color: var(--b);
}

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

/* ── Paired panels ─────────────────────────────────────────────────────────
   Used four times, always for two things the guide refuses to rank: deployment
   against commercial model, the cloud data questions against the on-premise
   ones, the two cost-category lists, and RTO against RPO. Both halves always
   get identical chrome. */

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

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

.kn-article .g3-two-c p { font-size: 14.5px !important; }
.kn-article .g3-two-c li { font-size: 14.5px !important; }
.kn-article .g3-two-c ul,
.kn-article .g3-two-c ol { margin-bottom: 0 !important; }
.kn-article .g3-two-c > :last-child { margin-bottom: 0 !important; }

/* The two assumptions the guide explicitly tells the buyer not to make. Set
   apart from the panels above so they cannot be misread as definitions. */
.g3-assume { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }

.g3-assume-i {
  flex: 1 1 240px;
  border: 1px dashed var(--br);
  border-radius: var(--r);
  background: var(--bg-s);
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--t-m);
  text-align: center;
}

/* ── Three-column comparison table ─────────────────────────────────────────
   The responsibility matrix (14 rows) and the decision matrix (10 rows).

   The two option columns are styled IDENTICALLY: same width, same background,
   same type, no tick/cross glyphs, no colour. Neither column is a
   recommendation, and the table must not read as a scorecard.

   Below 720px each row becomes a card headed by the row label, with the two
   option cells stacked and named from data-label, so the same markup and the
   same semantics carry the mobile layout. */

.g3-rt { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 4px 0 22px; }

.g3-rt th, .g3-rt td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--br);
  vertical-align: top;
  line-height: 1.55;
}

.g3-rt thead th {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t);
  background: var(--bg);
}

.g3-rt tbody th {
  font-size: 14px;
  font-weight: 700;
  color: var(--t);
  width: 30%;
}

.g3-rt td { color: var(--t-m); width: 35%; }
.g3-rt tr:last-child th, .g3-rt tr:last-child td { border-bottom: 0; }

/* ── IT capability self-assessment ─────────────────────────────────────────
   Nine capabilities, each answered Yes or No by the buyer. Deliberately not
   styled as data: it is a form the reader fills in mentally, and "No" is not a
   failure state, so the answer column stays neutral. */

.g3-cap { width: 100%; border-collapse: collapse; font-size: 15px; margin: 4px 0 22px; }

.g3-cap th, .g3-cap td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--br);
  line-height: 1.55;
}

.g3-cap thead th { font-size: 12.5px; font-weight: 700; color: var(--t); background: var(--bg); }
.g3-cap tbody th { font-size: 14.5px; font-weight: 600; color: var(--t); }

.g3-cap td {
  width: 150px;
  white-space: nowrap;
  color: var(--t-l);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.g3-cap tr:last-child th, .g3-cap tr:last-child td { border-bottom: 0; }

/* ── Operating locations ───────────────────────────────────────────────────
   Where ERP has to work. A plain set of named places, not an illustration:
   the point is for the reader to recognise their own sites and then ask the
   connectivity question about each one. */

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

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

/* ── Outage continuity exercise ────────────────────────────────────────────
   Warehouse, Factory, Sales, Finance, each with the questions that decide what
   must keep working.

   Explicitly NOT alarm-styled. This is a planning exercise, so it uses the
   same neutral panel language as the rest of the guide: no red, no warning
   icon, no siren. */

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

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

.kn-article .g3-out-h {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--b);
  margin: 0 0 10px;
}

.kn-article .g3-out ul { margin-bottom: 0 !important; }
.kn-article .g3-out li { font-size: 14.5px !important; }

/* ── Operational responsibility questions ──────────────────────────────────
   The on-premise "who will…" list. Two columns on desktop because §10 asks for
   it to be highly scannable and eleven single-clause questions in one file
   reads as a wall. */

.kn-article .g3-ops {
  columns: 2;
  column-gap: 34px;
  margin: 4px 0 22px !important;
  padding: 0 !important;
  display: block;
}

.kn-article .g3-ops li {
  break-inside: avoid;
  margin-bottom: 9px;
  font-size: 15px !important;
}

/* ── Recovery objectives ───────────────────────────────────────────────────
   RTO and RPO, defined in the buyer's language. No numbers, no targets and no
   implied commitment: the approved copy is explicit that the answers come from
   the business. */

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

.g3-rto-c {
  border: 1px solid var(--b-bd);
  border-radius: var(--r-l);
  background: var(--w);
  box-shadow: var(--sh-xs);
  padding: 20px 22px 18px;
}

.g3-rto-k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--b);
  margin-bottom: 4px;
}

.kn-article .g3-rto-h { font-size: 16px; font-weight: 700; color: var(--t); margin: 0 0 10px; }
.kn-article .g3-rto-c p { font-size: 15px !important; margin-bottom: 0 !important; font-weight: 500; }

/* ── Red flags, both sides ─────────────────────────────────────────────────
   Two sets, six each. One class between them, so neither can drift into
   looking more alarming than the other. No red anywhere. */

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

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

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

.kn-article .g3-flag p { font-size: 15px !important; margin-bottom: 0 !important; }

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

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

@media (max-width: 860px) {
  .g3-two, .g3-outage, .g3-rto { grid-template-columns: minmax(0, 1fr); }
  .kn-article .g3-ops { columns: 1; }
}

@media (max-width: 720px) {
  /* Both three-column tables reflow to cards. Same markup, same semantics:
     each option cell announces its column from data-label. */
  .g3-rt, .g3-rt tbody, .g3-rt tr, .g3-rt th, .g3-rt td { display: block; }
  .g3-rt thead { display: none; }
  .g3-rt tbody tr {
    border: 1px solid var(--br);
    border-radius: var(--r);
    margin-bottom: 12px;
    background: var(--w);
  }
  .g3-rt tbody tr:last-child { margin-bottom: 0; }
  .g3-rt tbody th { width: auto; border-bottom: 1px solid var(--br); background: var(--bg); }
  .g3-rt td { width: auto; border-bottom: 0; padding-top: 12px; }
  .g3-rt td + td { border-top: 1px solid var(--br); }
  .g3-rt td::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-l);
    margin-bottom: 5px;
  }
  /* The capability table keeps two columns: the answer is two words and the
     row stays readable at 342px. */
  .g3-cap th, .g3-cap td { padding: 11px 10px; }
  .g3-cap td { width: 88px; font-size: 12.5px; }
  .g3-cap tbody th { font-size: 14px; }
  .kn-article .g3-quote { padding: 14px 16px; }
  .kn-article .g3-quote p { font-size: 15.5px !important; }
  .g3-flag { padding-left: 16px; }
  .g3-assume-i { flex: 1 1 100%; }
}

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

@media print {
  .bg-rail { display: none !important; }
  .g3-two-c, .g3-out, .g3-rto-c, .g3-flag, .g3-rt tr, .g3-cap tr { break-inside: avoid; }
  .g3-rto-c { box-shadow: none; }
  .g3-two, .g3-outage, .g3-rto { grid-template-columns: repeat(2, 1fr); }
  .kn-article .g3-ops { columns: 2; }
}


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

     .g3-quote          var(--bg-s)  no reading on an alt band
     .g3-assume-i       var(--bg-s)  no reading
     .g3-out            var(--bg-s)  no reading
     .g3-rt thead th    var(--bg)    identical to the band — invisible
     .g3-cap thead th   var(--bg)    identical to the band — invisible

   Lifted to var(--w) on an alt band, keeping the panel lighter than its ground.

   .g3-rt tbody th is deliberately excluded. Below 720px the responsibility
   table reflows and each row becomes a white card, so that cell's ground is the
   row, not the band; its var(--bg) fill is what separates the row's header cell
   from its body cells. This is the same trap that .bg-signoff tbody th sprang
   during the alignment prototype. */

/* GUARDED. Of the six .g3-quote instances on alt bands, two are nested inside a
   painted white .g3-two-c panel — lifting those to var(--w) would make them
   white-on-white — and three are intentionally blue .is-key quotations whose
   var(--b-lt) this rule would otherwise override. Only one takes the band as
   its ground, so the child combinator admits exactly that one and
   :not(.is-key) protects the rest. */
.bga-band.is-alt > .bga-col > .g3-quote:not(.is-key),
.bga-band.is-alt .g3-assume-i,
.bga-band.is-alt .g3-out,
.bga-band.is-alt .g3-rt thead th,
.bga-band.is-alt .g3-cap thead th {
  background: var(--w);
}