/* ============================================================================
   knowledge-article.css — canonical practitioner knowledge surfaces
   Used by /knowledge/erp/*.html

   These pages are long-form reference articles, not product pages and not
   blog posts. The layout is a single readable column built from main.css
   tokens, so the pages stay in the Exactlly visual language without
   borrowing blog chrome (author, read time, share, category tags) that
   would misrepresent what they are.
   ============================================================================ */

/* ── Hero ──────────────────────────────────────────────────────────────── */

.kn-hero {
  background: var(--b-lt);
  border-bottom: 1px solid var(--b-bd);
  padding: 44px 0 40px;
}

/* Centred reading column, the same idiom main.css already uses for .sec-hd-p.
   Hero and article share one width so their left edges align down the page. */
.kn-hero-inner { max-width: 760px; margin-left: auto; margin-right: auto; }

.kn-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--b);
  background: var(--w);
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--b-bd);
  margin-bottom: 16px;
}

.kn-hero .h1 { margin-bottom: 16px; }

.kn-deck {
  font-size: 17px;
  line-height: 1.65;
  color: var(--t-m);
  max-width: 760px;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */

.kn-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.kn-crumb li { display: flex; align-items: center; gap: 8px; }
.kn-crumb a { font-size: 12px; color: var(--t-m); font-weight: 500; transition: color .15s; }
.kn-crumb a:hover { color: var(--b); }
.kn-crumb span[aria-current] { font-size: 12px; color: var(--b); font-weight: 600; }
.kn-crumb .kn-crumb-sep { color: var(--t-l); font-size: 12px; }

/* ── Article body ──────────────────────────────────────────────────────── */

.kn-body { padding: 56px 0 72px; }
.kn-article { max-width: 760px; margin-left: auto; margin-right: auto; }

.kn-article h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--t);
  margin: 44px 0 16px;
  scroll-margin-top: 90px;
}

.kn-article h2:first-child { margin-top: 0; }

.kn-article h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--t);
  margin: 30px 0 10px;
}

.kn-article p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--t-m);
  margin-bottom: 18px;
}

.kn-article a { color: var(--b); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.kn-article a:hover { color: var(--b-dk); }

.kn-article strong { color: var(--t); font-weight: 650; }

.kn-article ul, .kn-article ol {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kn-article ul li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--t-m);
}

.kn-article ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--b);
}

.kn-article ol { counter-reset: kn-ol; }

.kn-article ol li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--t-m);
  counter-increment: kn-ol;
}

.kn-article ol li::before {
  content: counter(kn-ol) ".";
  position: absolute;
  left: 2px;
  top: 0;
  font-weight: 700;
  color: var(--b);
  font-size: 15px;
}

/* ── Lead-in paragraph ─────────────────────────────────────────────────── */

.kn-lead {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--t) !important;
}

/* ── Callout ───────────────────────────────────────────────────────────── */

.kn-note {
  background: var(--bg-s);
  border: 1px solid var(--br);
  border-left: 3px solid var(--b);
  border-radius: var(--r);
  padding: 18px 22px;
  margin: 0 0 24px;
}

.kn-note p { margin-bottom: 0; font-size: 15px; }
.kn-note p + p { margin-top: 12px; }

.kn-note-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--b);
  margin-bottom: 8px;
}

/* ── Definition / key-term block ───────────────────────────────────────── */

.kn-def {
  background: var(--b-lt);
  border: 1px solid var(--b-bd);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 0 0 26px;
}

.kn-def p { margin-bottom: 0; color: var(--t); font-size: 16px; }

/* ── Table ─────────────────────────────────────────────────────────────── */

/* The wrapper is a bordered panel, not a bare overflow box. On narrow screens a
   wide table clips at the panel edge, which reads as a scrollable region rather
   than a broken layout, and the thin scrollbar confirms it. */
.kn-table-wrap {
  overflow-x: auto;
  margin: 0 0 26px;
  border: 1px solid var(--br);
  border-radius: var(--r);
  scrollbar-width: thin;
}

.kn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 520px;
}

.kn-table th, .kn-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--br);
  vertical-align: top;
  line-height: 1.6;
}

.kn-table tr:last-child td { border-bottom: 0; }

.kn-table th {
  font-weight: 700;
  color: var(--t);
  background: var(--bg);
  font-size: 13px;
  letter-spacing: .01em;
}

.kn-table td { color: var(--t-m); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.kn-faq { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }

.kn-faq-item {
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 20px 24px;
  box-shadow: var(--sh-xs);
}

.kn-faq-item h3 { margin: 0 0 8px; font-size: 16px; }
.kn-faq-item p { margin-bottom: 0; font-size: 15px; }

/* ── Related / next reading ────────────────────────────────────────────── */

.kn-next {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--br);
}

.kn-next h2 { margin-top: 0; font-size: 20px; }

.kn-next-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
}

.kn-next-card {
  display: block;
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: var(--r);
  padding: 20px 22px;
  text-decoration: none !important;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}

.kn-next-card:hover { box-shadow: var(--sh-m); transform: translateY(-1px); border-color: var(--b-bd); }

.kn-next-card .kn-next-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--t);
  margin-bottom: 6px;
}

.kn-next-card .kn-next-desc {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--t-m);
}

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

@media (max-width: 760px) {
  .kn-hero { padding: 32px 0 30px; }
  .kn-body { padding: 40px 0 56px; }
  .kn-article h2 { margin-top: 36px; }
  .kn-next-grid { grid-template-columns: 1fr; }
  .kn-article p, .kn-article ul li, .kn-article ol li { font-size: 15px; }
}