/* ============================================================
   Ada Security — Knowledge Base
   Help-center layout: topic tree left, one topic per page,
   "On this page" rail right. Builds on /assets/css/style.css tokens.
   ============================================================ */

.kb-page { --kb-top: 72px; background: var(--white); }
.kb-page .site-header { background: rgba(255, 255, 255, 0.97); }
.kb-rule { height: 3px; background: linear-gradient(90deg, var(--navy-900), var(--blue-700) 45%, var(--blue-500)); }

.kb-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr) 250px; max-width: 1560px; margin: 0 auto; min-height: calc(100vh - var(--kb-top)); }
.kb-shell.kb-solo { grid-template-columns: minmax(0, 1fr); max-width: var(--container); }

/* left tree */
.kb-nav { position: sticky; top: var(--kb-top); height: calc(100vh - var(--kb-top)); display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--white); }
.kb-navhead { padding: 20px 18px 14px 22px; border-bottom: 1px solid var(--line); }
.kb-product { display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--navy-900); }
.kb-product:hover { color: var(--blue-700); }
.kb-lbl { margin-top: 12px; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); }
.kb-verbox { margin-top: 4px; display: flex; gap: 6px; font-size: .88rem; color: var(--ink-700); border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 10px; }
.kb-verbox .dot { color: var(--ink-400); }
.kb-filter { margin-top: 10px; width: 100%; font: inherit; font-size: .88rem; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 7px; color: var(--ink-900); background: var(--white); }
.kb-filter:focus, .kb-search input:focus { outline: 2px solid var(--blue-500); outline-offset: 0; }
.kb-navscroll { flex: 1; overflow-y: auto; padding-bottom: 24px; }
.kb-tree, .kb-tree ul { list-style: none; margin: 0; padding: 0; }
.kb-tree > li { border-bottom: 1px solid var(--line); }
.kb-tree .row { display: flex; align-items: stretch; }
.kb-tree a { display: block; color: var(--ink-900); }
.kb-tree a.n1 { flex: 1; padding: 11px 8px 11px 22px; font-weight: 600; font-size: .88rem; line-height: 1.35; border-left: 3px solid transparent; }
.kb-tree li.kb-ov a.n1 { font-size: 1rem; font-weight: 700; }
.kb-tree .num { display: inline-block; min-width: 1.7em; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.kb-tree a:hover { background: var(--bg-soft); color: var(--navy-900); }
.kb-tree .tog { width: 40px; border: 0; background: none; cursor: pointer; color: var(--ink-500); display: grid; place-items: center; }
.kb-tree .tog::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.kb-tree .tog[aria-expanded="true"]::before { transform: rotate(-135deg) translate(-2px, -2px); }
.kb-tree .tog:hover { background: var(--bg-soft); }
.kb-tree .sub { display: none; padding: 2px 0 10px; }
.kb-tree li.open > .sub { display: block; }
.kb-tree a.n2 { font-size: .84rem; color: var(--ink-700); padding: 5px 14px 5px 29px; line-height: 1.35; border-left: 3px solid transparent; }
.kb-tree li.cur > .row a.n1 { background: var(--blue-50); border-left-color: var(--blue-700); color: var(--blue-700); }
.kb-tree a.n2.on { background: var(--blue-50); border-left-color: var(--blue-700); color: var(--blue-700); font-weight: 600; }
.kb-tree [hidden] { display: none !important; }

/* document column */
.kb-doc { min-width: 0; padding: 22px 44px 56px; }
.kb-solo .kb-doc { padding-left: 24px; padding-right: 24px; }
.kb-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kb-crumbs { font-size: .86rem; color: var(--ink-500); display: flex; flex-wrap: wrap; gap: 6px; }
.kb-crumbs a { color: var(--ink-700); }
.kb-crumbs a:hover { color: var(--blue-700); text-decoration: underline; }
.kb-crumbs .sep { color: var(--ink-400); }
.kb-menu { display: none; font: inherit; font-size: .88rem; font-weight: 600; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--white); color: var(--navy-900); cursor: pointer; }
.kb-tools { display: flex; justify-content: flex-end; margin: 10px 0 0; }
.kb-search { display: flex; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; width: min(100%, 320px); background: var(--white); margin: 0 0 18px; }
.kb-topic > .kb-search { width: min(100%, 520px); }
.kb-search input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: .9rem; padding: 8px 12px; color: var(--ink-900); background: transparent; }
.kb-search button { border: 0; border-left: 1px solid var(--line-2); background: var(--bg-soft); color: var(--ink-700); width: 42px; cursor: pointer; display: grid; place-items: center; }
.kb-search button svg { display: inline; }

.kb-topic { max-width: 900px; }
.kb-topic h1 { font-size: 2.05rem; line-height: 1.2; margin: 8px 0 16px; letter-spacing: -0.02em; color: var(--navy-900); text-wrap: balance; }
.kb-lead { font-size: 1.08rem; color: var(--ink-700); max-width: 72ch; margin: 0 0 26px; }
.kb-body h2, .kb-intopic { font-size: 1.4rem; line-height: 1.25; margin: 38px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--navy-900); scroll-margin-top: calc(var(--kb-top) + 16px); }
.kb-body h3 { font-size: 1.1rem; margin: 28px 0 8px; color: var(--navy-900); scroll-margin-top: calc(var(--kb-top) + 16px); }
.kb-body h4 { font-size: 1rem; margin: 22px 0 6px; }
.kb-body p, .kb-body ul, .kb-body ol { max-width: 78ch; }
.kb-body p { margin: 0 0 14px; }
.kb-body ul, .kb-body ol { margin: 0 0 16px; padding-left: 1.4em; }
.kb-body ul { list-style: disc; }
.kb-body ol { list-style: decimal; }
.kb-body li + li { margin-top: 4px; }
.kb-body a { text-decoration: underline; text-decoration-color: rgba(30, 77, 140, .35); text-underline-offset: 2px; }
.kb-body a:hover { text-decoration-color: currentColor; }
.kb-body code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; background: var(--bg-soft); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.kb-body pre { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: .85rem; line-height: 1.5; margin: 0 0 18px; }
.kb-body pre code { background: none; border: 0; padding: 0; overflow-wrap: normal; }
.kb-body .tw { overflow-x: auto; margin: 14px 0 22px; border: 1px solid var(--line); border-radius: 8px; }
.kb-body table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.kb-body th, .kb-body td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.kb-body th { background: var(--bg-soft); color: var(--navy-900); font-weight: 700; font-size: .8rem; }
.kb-body tr:last-child td { border-bottom: 0; }
.kb-body td:first-child { min-width: 9rem; }
.kb-body .callout { margin: 18px 0; padding: 10px 16px; background: var(--blue-50); border-left: 4px solid var(--blue-700); border-radius: 0 8px 8px 0; max-width: 82ch; }
.kb-body .callout.tip { background: #ECFDF3; border-left-color: #15803D; }
.kb-body .callout.important { background: #FFF6E5; border-left-color: #B45309; }
.kb-body .callout p { margin: 4px 0; }
.kb-body figure { margin: 18px 0 26px; }
.kb-body figure img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); }
.kb-body figure img.narrow { max-width: min(100%, 560px); }
.kb-body figcaption { color: var(--ink-500); font-size: .85rem; margin-top: 8px; max-width: 78ch; }
.kb-body a.xref { white-space: nowrap; }

/* cards (KB home, product home) */
.kb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kb-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-900); background: var(--white); transition: box-shadow .15s, border-color .15s; }
.kb-card:hover { border-color: var(--blue-500); box-shadow: var(--shadow-md); color: var(--ink-900); }
.kb-ct { font-weight: 700; font-size: 1.02rem; color: var(--navy-900); }
.kb-ver { font-weight: 600; font-size: .78rem; color: var(--blue-700); background: var(--blue-50); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.kb-soon { font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #9A5B00; background: #FFF4DE; border-radius: 999px; padding: 3px 9px; margin-left: 6px; vertical-align: middle; }
.kb-card-soon { background: var(--bg-soft); }
.kb-cd { font-size: .9rem; color: var(--ink-500); line-height: 1.5; }

/* section children */
.kb-children { list-style: none; padding: 0; margin: 0; max-width: 80ch; }
.kb-children li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.kb-children a { font-weight: 600; font-size: 1rem; }
.kb-children p { margin: 4px 0 0; color: var(--ink-500); font-size: .9rem; }

/* search hits */
.kb-hit { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-900); max-width: 80ch; }
.kb-hit:hover .kb-ht { text-decoration: underline; }
.kb-pth { display: block; font-size: .8rem; color: var(--ink-500); }
.kb-ht { display: block; font-weight: 600; color: var(--blue-700); }
.kb-snip { display: block; font-size: .88rem; color: var(--ink-700); margin-top: 4px; }
.kb-hit mark { background: #FDE68A; color: inherit; border-radius: 2px; padding: 0 1px; }

/* pager */
.kb-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 52px; padding-top: 18px; border-top: 1px solid var(--line); }
.kb-pg { display: flex; flex-direction: column; font-weight: 600; max-width: 48%; }
.kb-pg small { color: var(--ink-500); font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.kb-pg.next { text-align: right; margin-left: auto; }

/* right rail */
.kb-rail { position: sticky; top: var(--kb-top); height: calc(100vh - var(--kb-top)); overflow-y: auto; border-left: 1px solid var(--line); padding: 24px 18px; font-size: .85rem; }
.kb-rail h2 { font-size: .95rem; margin: 0 0 8px; color: var(--navy-900); }
.kb-rail ul { list-style: none; margin: 0 0 22px; padding: 0; }
.kb-rail a { display: block; padding: 4px 0 4px 10px; color: var(--ink-700); border-left: 2px solid var(--line); line-height: 1.35; }
.kb-rail a:hover { color: var(--blue-700); }
.kb-rail a.on { color: var(--blue-700); border-left-color: var(--blue-700); font-weight: 600; }
.kb-upd { color: var(--ink-500); text-align: center; border-top: 1px solid var(--line); padding-top: 14px; }

.kb-footer { padding-top: 0; }
.kb-footer .footer-bottom { margin-top: 0; }
.kb-scrim { display: none; }

@media (max-width: 1180px) {
  .kb-shell { grid-template-columns: 280px minmax(0, 1fr); }
  .kb-rail { display: none; }
}
@media (max-width: 880px) {
  .kb-shell { grid-template-columns: minmax(0, 1fr); }
  .kb-menu { display: inline-block; }
  .kb-nav { position: fixed; z-index: 80; top: 0; left: 0; bottom: 0; height: auto; width: min(86vw, 320px); transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  body.kb-navopen .kb-nav { transform: none; }
  body.kb-navopen .kb-scrim { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(7, 26, 48, .45); }
  .kb-doc { padding: 16px 16px 40px; }
  .kb-cards { grid-template-columns: minmax(0, 1fr); }
  .kb-topic h1 { font-size: 1.6rem; }
  .kb-tools { justify-content: stretch; } .kb-tools .kb-search { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .kb-nav, .kb-tree .tog::before, .kb-card { transition: none; } }