/**
 * ERP Peers article comparison table component (2026-10-23).
 *
 * Reusable, fully scoped design for wide comparison tables inside blog
 * articles (.erpp-blog-article .single-contet). Markup contract:
 *
 *   <div class="erpp-ctable erpp-ctable--wide erpp-ctable--matrix">
 *     <div class="erpp-ctable__hint" aria-hidden="true">Swipe to compare</div>
 *     <div class="erpp-ctable__scroll" role="region" aria-label="..." tabindex="0">
 *       <table class="erpp-ctable__table"> ... th[scope] ... td[data-label]
 *
 * No generic table/th/td/a selectors are used; every rule starts at the
 * component class. Column proportions are set per modifier (--shortlist,
 * --matrix). The --wide modifier keeps a many-column table inside the article
 * column on desktop (never under the sticky contents column). A table wider
 * than the column, and every table below desktop, sits in a controlled
 * horizontal-scroll region and erpp-comparison-table.js shows a "Swipe to
 * compare" hint until the reader scrolls it.
 * The shared .erpp-blog-post-nav rules (FAQ-before-Previous/Next order,
 * single.php) live here too so no inline CSS is needed.
 */
.erpp-blog-article .single-contet .erpp-ctable{position:relative;margin:1.9rem 0 1.1rem}
.erpp-blog-article .single-contet div.erpp-ctable__hint{display:none;margin:0 0 .5rem;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--primary)}
.erpp-blog-article .single-contet div.erpp-ctable__hint::after{content:"\2192";margin-left:.4rem}
.erpp-blog-article .single-contet .erpp-ctable.is-scrollable:not(.has-scrolled) div.erpp-ctable__hint{display:block}
.erpp-blog-article .single-contet .erpp-ctable__scroll{max-width:100%;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--border);border-radius:14px}
.erpp-blog-article .single-contet .erpp-ctable__scroll:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.erpp-blog-article .single-contet table.erpp-ctable__table{display:table!important;table-layout:fixed!important;width:100%;min-width:0;margin:0;overflow:visible;border:0;border-radius:0;border-collapse:separate;border-spacing:0;font-size:.94rem;line-height:1.5;color:var(--body)}
.erpp-blog-article .single-contet .erpp-ctable__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.erpp-blog-article .single-contet .erpp-ctable__table th,
.erpp-blog-article .single-contet .erpp-ctable__table td{padding:.85rem 1rem;border:0;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;white-space:normal;overflow-wrap:break-word;word-break:normal;hyphens:none;font-size:.94rem;line-height:1.5}
.erpp-blog-article .single-contet .erpp-ctable__table thead th{background:var(--heading);color:#fff;border-bottom:0;font-size:.8rem;font-weight:700;letter-spacing:.06em;line-height:1.35;text-transform:uppercase}
.erpp-blog-article .single-contet .erpp-ctable__table thead th+th{border-left:1px solid rgba(255,255,255,.14)}
.erpp-blog-article .single-contet .erpp-ctable__table tbody th{background:var(--section-alt);color:var(--heading);font-size:.92rem;font-weight:700}
.erpp-blog-article .single-contet .erpp-ctable__table tbody td{background:#fff;color:var(--body)}
.erpp-blog-article .single-contet .erpp-ctable__table tbody td+td{border-left:1px solid #ebecf6}
.erpp-blog-article .single-contet .erpp-ctable__table tbody tr:nth-child(even) td{background:#fafafe}
.erpp-blog-article .single-contet .erpp-ctable__table tbody tr:nth-child(even) th{background:var(--primary-subtle)}
.erpp-blog-article .single-contet .erpp-ctable__table tbody tr:last-child th,
.erpp-blog-article .single-contet .erpp-ctable__table tbody tr:last-child td{border-bottom:0}
.erpp-blog-article .single-contet .erpp-ctable__table td strong{color:var(--heading);font-weight:700}
.erpp-blog-article .single-contet .erpp-ctable__tag{display:inline-block;margin-top:.4rem;padding:.1rem .5rem;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--primary-dark);font-size:.64rem;font-weight:700;letter-spacing:.05em;line-height:1.6;text-transform:uppercase;white-space:nowrap}
.erpp-blog-article .single-contet div.erpp-ctable__note{margin:.7rem 0 0;font-size:.82rem;line-height:1.6;color:var(--muted)}

/* Column proportions (desktop). Fixed layout: percentages are authoritative. */
.erpp-blog-article .single-contet .erpp-ctable--shortlist table.erpp-ctable__table{min-width:640px}
.erpp-blog-article .single-contet .erpp-ctable--shortlist thead th:nth-child(1){width:34%}
.erpp-blog-article .single-contet .erpp-ctable--shortlist thead th:nth-child(2){width:18%}
.erpp-blog-article .single-contet .erpp-ctable--shortlist thead th:nth-child(3){width:48%}
.erpp-blog-article .single-contet .erpp-ctable--matrix table.erpp-ctable__table{min-width:880px}
.erpp-blog-article .single-contet .erpp-ctable--matrix thead th:nth-child(1){width:21%}

/* Status table (6 columns: country, receiving, issuing, network or format, effective date, official source). */
.erpp-blog-article .single-contet .erpp-ctable--status table.erpp-ctable__table{min-width:940px}
.erpp-blog-article .single-contet .erpp-ctable--status thead th:nth-child(1){width:11%}
.erpp-blog-article .single-contet .erpp-ctable--status thead th:nth-child(2){width:17%}
.erpp-blog-article .single-contet .erpp-ctable--status thead th:nth-child(3){width:20%}
.erpp-blog-article .single-contet .erpp-ctable--status thead th:nth-child(4){width:20%}
.erpp-blog-article .single-contet .erpp-ctable--status thead th:nth-child(5){width:18%}
.erpp-blog-article .single-contet .erpp-ctable--status thead th:nth-child(6){width:14%}
/* Coverage table (4 columns: country, direction, format or network, documented limits and items to confirm). */
.erpp-blog-article .single-contet .erpp-ctable--coverage table.erpp-ctable__table{min-width:760px}
.erpp-blog-article .single-contet .erpp-ctable--coverage thead th:nth-child(1){width:13%}
.erpp-blog-article .single-contet .erpp-ctable--coverage thead th:nth-child(2){width:22%}
.erpp-blog-article .single-contet .erpp-ctable--coverage thead th:nth-child(3){width:20%}
.erpp-blog-article .single-contet .erpp-ctable--coverage thead th:nth-child(4){width:45%}
.erpp-blog-article .single-contet .erpp-ctable--status td a,
.erpp-blog-article .single-contet .erpp-ctable--coverage td a{overflow-wrap:anywhere}
/* No mid-word breaks: the floors below are the measured widths that keep the longest unbreakable word inside its column
   (coverage "COUNTRY" header 745px, Celigo signals "AppExchange" 746px) plus slack. The table scrolls inside its wrapper
   when the article column is narrower, and ordinary words are never split (links above still wrap). The extra class on
   the signals rule outranks that article's own inline floor, so the post content stays untouched. */
.erpp-blog-article .single-contet .erpp-ctable--cp.erpp-ctable--signals table.erpp-ctable__table{min-width:760px}
.erpp-blog-article .single-contet .erpp-ctable--coverage th,
.erpp-blog-article .single-contet .erpp-ctable--coverage td,
.erpp-blog-article .single-contet .erpp-ctable--cp.erpp-ctable--signals th,
.erpp-blog-article .single-contet .erpp-ctable--cp.erpp-ctable--signals td{overflow-wrap:normal}

/* Desktop: --wide tables stay inside the article column so the sticky contents column never sits under them.
   The 4-column matrix gets an 800px floor so it fills the 818px column at full desktop width. Tables that need more
   room (the 6-column status table keeps its own floor) and every table in the narrower column below about 1280px
   scroll inside the column and the swipe hint shows, so no word is ever broken to make a table fit. */
@media(min-width:1051px){
  .erpp-blog-article .single-contet .erpp-ctable--wide{width:100%;max-width:100%;min-width:0;margin-left:0}
  .erpp-blog-article .single-contet .erpp-ctable--wide.erpp-ctable--matrix table.erpp-ctable__table{min-width:800px}
  .erpp-blog-article .single-contet .erpp-ctable--wide .erpp-ctable__scroll{box-shadow:0 12px 32px rgba(30,27,75,.08)}
}
/* Phones: every vendor cell carries its own criterion label so context survives horizontal scrolling. */
@media(max-width:700px){
  .erpp-blog-article .single-contet .erpp-ctable__table th,
  .erpp-blog-article .single-contet .erpp-ctable__table td{padding:.75rem .85rem;font-size:.9rem}
  .erpp-blog-article .single-contet .erpp-ctable--matrix table.erpp-ctable__table{min-width:960px}
  .erpp-blog-article .single-contet .erpp-ctable--status table.erpp-ctable__table{min-width:1020px}
  .erpp-blog-article .single-contet .erpp-ctable--coverage table.erpp-ctable__table{min-width:760px}
  .erpp-blog-article .single-contet .erpp-ctable__table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:.35rem;color:var(--primary);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
}

/* Source notes: visually separate from editorial and commercial links. */
.erpp-blog-article .single-contet div.erpp-sources{margin:1.1rem 0 1.8rem;padding:.7rem 1rem .75rem;background:var(--section-alt);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:10px;font-size:.8rem;line-height:1.7;color:var(--muted)}
.erpp-blog-article .single-contet div.erpp-sources .erpp-sources__label{display:block;margin-bottom:.15rem;color:var(--heading);font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.erpp-blog-article .single-contet div.erpp-sources .erpp-sources__group{display:block}
.erpp-blog-article .single-contet div.erpp-sources .erpp-sources__group strong{margin-right:.4rem;color:var(--heading);font-weight:600}
.erpp-blog-article .single-contet div.erpp-sources .erpp-sources__item+.erpp-sources__item::before{content:"\00b7";margin:0 .45rem;color:#b3b6cf}
/* !important on colour only: design-system.css forces .erpp-rcs__body a{color:...!important} on article links. */
.erpp-blog-article .single-contet div.erpp-sources a{color:var(--muted)!important;font-size:inherit;font-weight:500;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px}
.erpp-blog-article .single-contet div.erpp-sources a:hover{color:var(--primary)!important;text-decoration-color:var(--primary)}

/* FAQ before Previous/Next (single.php): spacing and reading-width alignment. */
.erpp-blog-article .service-faq-section{padding:56px 0}
.erpp-blog-article .erpp-blog-post-nav{background:#fff;padding:0 0 56px}
.erpp-blog-article .erpp-blog-post-nav .container{width:min(calc(100% - 48px),var(--reading))}
.erpp-blog-article .erpp-blog-post-nav .blog-nav-single{margin-top:0}