/* ============================================================
   Client portal Knowledge Base (.ckb-*) — "Plain" direction.

   Loaded before p1-foundation.css, which owns the tokens. This
   file only shapes the KB's own structures; everything visual
   comes from the --p-* tokens so the KB and the rest of the
   portal cannot drift apart.

   The KB has no hero of its own: the portal's search band sits
   above every panel, and two search fields on one screen is two
   things asking the same question.
   ============================================================ */

/* ── layout ───────────────────────────────────────────────────
   The rail comes FIRST in the DOM but belongs on the RIGHT. Left
   to source order it took the 1fr column and squeezed the article
   into the 216px one — a two-word-per-line column of body text.
   Columns are assigned explicitly, so DOM order cannot decide it.

   .ckb-has-side is set by client-kb.js rather than inferred with
   :has(), so the layout does not depend on selector support and
   cannot disagree with what the JS actually rendered. */
.ckb-layout{ display:block; }
.ckb-rail:empty{ display:none; }

/* ONE sticky element in the side column, never two. The rail and the table of
   contents are both pinned lists; as separate sticky siblings they stuck at
   different offsets and overlapped as soon as the page scrolled. They now sit
   in a single sticky wrapper and flow inside it. */
.ckb-side{ display:flex; flex-direction:column; gap:28px; }
.ckb-side > .ckb-rail,
.ckb-side > .ckb-toc{
  position:static;
  max-height:none;
  overflow:visible;
  top:auto;
}

@media (min-width:860px){
  .ckb-layout.ckb-has-side{
    display:grid;
    grid-template-columns:minmax(0,1fr) 216px;
    gap:40px;
    align-items:start;
  }
  .ckb-layout.ckb-has-side > .ckb-main{ grid-column:1; min-width:0; }
  .ckb-layout.ckb-has-side > .ckb-side{
    grid-column:2;
    position:sticky;
    top:20px;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}
@media (max-width:859px){
  /* Below the breakpoint the base sheet hides the TOC; the sections list drops
     to a horizontal strip above the article rather than a column beside it. */
  .ckb-side{ gap:0; }
}

/* Reading measure. Without it an article stretches the full column and the
   line length runs past what anyone tracks comfortably. */
.ckb-main{ min-width:0; }
.ckb-article-body,
.ckb-cat-desc{ max-width:72ch; }

/* ── section index ────────────────────────────────────────── */
.ckb-rail-rule{ display:none; }
.ckb-rail-item{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center;
  width:100%; padding:8px 10px; background:transparent; border:0;
  border-left:2px solid transparent; cursor:pointer; font-family:inherit; text-align:left;
  color:var(--p-dim); font-size:13.5px;
}
.ckb-rail-item:hover{ background:var(--p-sunk); color:var(--p-ink); }
.ckb-rail-item.is-active{ border-left-color:var(--p-mark); color:var(--p-ink); font-weight:600; background:var(--p-wash); }
.ckb-rail-item.is-empty{ opacity:.5; }
.ckb-rail-code{ display:none; }        /* codes belong on a console, not here */
.ckb-rail-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ckb-rail-count{
  font-family:var(--p-mono); font-size:11px; color:var(--p-mute); font-variant-numeric:tabular-nums;
}

@media (max-width:859px){
  .ckb-rail{ display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; margin-bottom:18px; }
  .ckb-rail-item{
    width:auto; flex:none; border-left:0; border:1px solid var(--p-line);
    border-radius:var(--p-r); padding:7px 12px; background:var(--p-page);
  }
  .ckb-rail-item.is-active{ border-color:var(--p-mark); }
}

/* ── sections grid (home) ─────────────────────────────────── */
.ckb-sections{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:12px; }
.ckb-sec-card{
  border:1px solid var(--p-line); border-radius:var(--p-r); padding:15px 16px;
  background:var(--p-page); text-align:left; cursor:pointer; font-family:inherit; display:block; width:100%;
}
.ckb-sec-card:hover{ border-color:var(--p-line-strong); background:var(--p-sunk); }
.ckb-sec-card .n{
  font-family:var(--p-mono); font-size:10.5px; color:var(--p-mute);
  letter-spacing:.1em; text-transform:uppercase;
}
.ckb-sec-card .t{ font-size:14.5px; font-weight:600; margin-top:5px; color:var(--p-ink); }
.ckb-sec-card .d{ font-size:12.5px; color:var(--p-mute); margin-top:4px; line-height:1.5; }

/* ── section headings ─────────────────────────────────────── */
.ckb-section-title{
  font-family:var(--p-mono); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--p-ink); margin:40px 0 3px; padding:0; border:0;
}
.ckb-section-title:first-child{ margin-top:0; }
.ckb-section-title::after{
  content:""; display:block; width:34px; height:2px; background:var(--p-mark); margin-top:5px;
}

/* ── article rows ─────────────────────────────────────────── */
.ckb-article-list{
  border:1px solid var(--p-line); border-radius:var(--p-r); overflow:hidden; margin-top:16px;
}
.ckb-article-row{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-bottom:1px solid var(--p-line); border-left:0; cursor:pointer; background:var(--p-page);
}
.ckb-article-row:last-child{ border-bottom:0; }
.ckb-article-row:hover{ background:var(--p-sunk); }
.ckb-article-row-pin{ color:var(--p-accent); font-size:12px; flex:none; }
.ckb-article-row-body{ flex:1; min-width:0; }
.ckb-article-row-title{ font-size:14.5px; font-weight:500; color:var(--p-ink); line-height:1.45; }
.ckb-article-row-meta{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:3px;
  font-size:12.5px; color:var(--p-mute); text-transform:none; letter-spacing:0; font-family:inherit;
}
.ckb-article-row-arrow{ color:var(--p-line-strong); flex:none; }
.ckb-article-row:hover .ckb-article-row-arrow{ color:var(--p-accent); }

/* ── bookmarks ────────────────────────────────────────────── */
.ckb-bookmarks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ckb-bookmark-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500;
  color:var(--p-dim); background:var(--p-page); border:1px solid var(--p-line);
  border-radius:var(--p-r); padding:7px 13px; cursor:pointer; font-family:inherit;
}
.ckb-bookmark-chip:hover{ color:var(--p-ink); background:var(--p-sunk); }
.ckb-bookmark-chip-star{ color:var(--p-accent); font-size:11px; }

/* ── category heading ─────────────────────────────────────── */
.ckb-cat-title{ font-size:1.4rem; font-weight:650; letter-spacing:-.025em; color:var(--p-ink); margin:0 0 8px; }
.ckb-cat-desc{ font-size:14.5px; line-height:1.65; color:var(--p-dim); margin:0; max-width:64ch; }

/* ── breadcrumb ───────────────────────────────────────────── */
.ckb-crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--p-mute); margin-bottom:18px; }
.ckb-crumb a{ color:var(--p-accent); text-decoration:none; }
.ckb-crumb a:hover{ text-decoration:underline; }
.ckb-crumb-sep{ color:var(--p-line-strong); }

/* ── empty state ──────────────────────────────────────────── */
.ckb-empty{ border:1px dashed var(--p-line-strong); border-radius:var(--p-r); padding:26px 20px; margin-top:16px; }
.ckb-empty-icon{ display:none; }
.ckb-empty h3{ font-size:14.5px; font-weight:650; color:var(--p-ink); margin:0 0 6px; }
.ckb-empty p{ font-size:14px; color:var(--p-dim); margin:0; line-height:1.6; max-width:60ch; }

/* ── table of contents ────────────────────────────────────── */
.ckb-toc{ border-left:0; padding-left:0; padding-top:22px; border-top:1px solid var(--p-line); }
.ckb-side > .ckb-rail:empty + .ckb-toc{ border-top:0; padding-top:0; }
.ckb-toc-title{
  font-family:var(--p-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--p-mute); margin-bottom:11px;
}
.ckb-toc-list{ list-style:none; margin:0; padding:0; }
.ckb-toc-list a{
  display:block; padding:5px 0 5px 11px; margin-left:-12px;
  border-left:2px solid transparent; font-size:13px; line-height:1.45;
  color:var(--p-mute); text-decoration:none;
}
.ckb-toc-list a:hover{ color:var(--p-dim); }
.ckb-toc-list a.is-active{ color:var(--p-accent); border-left-color:var(--p-mark); }

/* the KB's own hero is gone — the portal band above it does that job */
.ckb-hero, .ckb-header{ display:none; }