/* COMPASS developer docs — additions on top of compass-kit.css (unchanged).
   Prefix ck- is the kit's; doc-specific rules use ck-doc- to stay out of the
   kit's own namespace. No external fonts/scripts — everything here reuses
   kit tokens (--ck-*) so it follows the kit's light/dark themes for free. */

body{background:var(--ck-bg)}

.ck-doc-shell{display:grid;grid-template-columns:var(--ck-sidew) minmax(0,1fr);min-height:100vh;background:var(--ck-bg)}
.ck-doc-main{min-width:0;display:flex;flex-direction:column}
.ck-doc-content{padding:var(--ck-s8) var(--ck-s6);max-width:820px;width:100%;margin:0 auto}
.ck-doc-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--ck-s3);height:var(--ck-topbarh);padding:0 var(--ck-s6);background:color-mix(in srgb,var(--ck-bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--ck-hair)}
.ck-doc-topbar .sp{flex:1}

.ck-doc-lang{display:inline-flex;border:1px solid var(--ck-border);border-radius:var(--ck-r-pill);overflow:hidden}
.ck-doc-lang a{display:inline-flex;align-items:center;padding:5px 12px;font:500 12px/1 var(--ck-font-mono);letter-spacing:.04em;color:var(--ck-t3);text-decoration:none;text-transform:uppercase}
.ck-doc-lang a:hover{color:var(--ck-t0);text-decoration:none;background:var(--ck-sunken)}
.ck-doc-lang a.is-active{color:var(--ck-ac-ink);background:var(--ck-ac)}

.ck-nav-group{margin-top:var(--ck-s2)}

/* Prose: headings/body come from compass-kit's .ck-prose; add code blocks,
   table wrapping and the inline concept diagram, none of which the kit's
   product UI needed. */
.ck-prose{max-width:none}
.ck-prose h1{font:600 clamp(26px,3vw,32px)/1.2 var(--ck-font-display);letter-spacing:-.02em;color:var(--ck-t0);margin:0 0 var(--ck-s2)}
.ck-prose h1:first-child{margin-top:0}
.ck-prose code{font-family:var(--ck-font-mono)}
.ck-prose pre{background:var(--ck-sunken);border:1px solid var(--ck-hair);border-radius:var(--ck-r-md);padding:var(--ck-s4);overflow-x:auto;margin:0}
.ck-prose pre code{background:none;padding:0;font-size:13px;line-height:1.55;color:var(--ck-t1)}
.ck-prose a{text-underline-offset:2px}

.ck-table-wrap{margin:var(--ck-s2) 0}
.ck-prose .ck-table-wrap table{margin:0}
.ck-prose .ck-table-wrap th,.ck-prose .ck-table-wrap td{text-align:left}
.ck-prose .ck-table-wrap code{white-space:nowrap}

.ck-diagram{background:var(--ck-bg-elev);border:1px solid var(--ck-hair);border-radius:var(--ck-r-md);padding:var(--ck-s4);overflow-x:auto}
.ck-diagram svg{min-width:640px;width:100%;height:auto;display:block;margin:0 auto}

.ck-doc-pager{display:flex;justify-content:space-between;gap:var(--ck-s4);margin-top:var(--ck-s8);padding-top:var(--ck-s4);border-top:1px solid var(--ck-hair)}
.ck-doc-pager a{max-width:48%}
.ck-doc-pager .dir{display:block;font:500 10.5px/1 var(--ck-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ck-t4);margin-bottom:4px}
.ck-doc-pager .next{text-align:right;margin-left:auto}

.ck-doc-scope{margin-top:var(--ck-s2)}

@media (max-width:860px){
  .ck-doc-shell{grid-template-columns:1fr}
  .ck-sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--ck-hair)}
  .ck-doc-content{padding:var(--ck-s6) var(--ck-s4)}
}