/* ============================================================
   convoup docs — developer portal shell, code blocks, tabs, callouts
   Depends on /styles.css (loaded first) for design tokens + .prose
   ============================================================ */

/* ---------- docs header (slim, docs-specific — not the marketing nav) ---------- */
.docs-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:0.0625rem solid var(--hair);
}
.docs-header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:0.875rem;
  padding:0.75rem clamp(1rem,2vw,1.5rem);
}
.docs-header-tag{
  font-family:"JetBrains Mono",monospace;
  font-size:0.6875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green-teal);
  background:var(--surface);
  padding:0.25rem 0.5rem;
  border-radius:0.375rem;
}
.docs-header-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:1.25rem;
}
.docs-header-link{
  font-weight:500;
  font-size:0.9375rem;
  color:var(--body);
  transition:.15s;
}
.docs-header-link:hover{color:var(--ink)}
.docs-header-cta{padding:0.5rem 1rem;font-size:0.875rem}

/* ---------- docs 3-column shell ---------- */
.docs-shell{
  display:grid;
  grid-template-columns:minmax(13.75rem,15rem) 1fr minmax(11.25rem,12.5rem);
  gap:clamp(1rem,3vw,2.25rem);
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  padding:3rem clamp(1rem,2vw,1.5rem) 5rem;
  box-sizing:border-box;
}

/* ---------- sidebar ---------- */
.docs-sidebar{
  position:sticky;
  top:3.75rem;
  align-self:start;
  max-height:calc(100vh - 4.75rem);
  overflow-y:auto;
  padding-right:0.75rem;
  scrollbar-width:thin;
  scrollbar-color:var(--hair) transparent;
}
.docs-sidebar::-webkit-scrollbar{width:0.25rem}
.docs-sidebar::-webkit-scrollbar-thumb{background:var(--hair);border-radius:0.25rem}
.docs-sidebar .sidebar-section{margin-bottom:1.5rem}
.docs-sidebar .sidebar-section h4{
  font-family:"JetBrains Mono",monospace;
  font-size:0.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--body);
  margin-bottom:0.5rem;
  padding-left:0.75rem;
}
.docs-sidebar a{
  display:block;
  padding:0.4375rem 0.75rem;
  border-radius:0.5rem;
  font-size:0.875rem;
  font-weight:500;
  color:var(--body);
  transition:.15s;
  border-left:0.125rem solid transparent;
}
.docs-sidebar a:hover{
  color:var(--ink);
  background:var(--surface-2);
}
.docs-sidebar a.active{
  color:var(--green-deep);
  background:var(--surface-2);
  border-left-color:var(--green);
  font-weight:600;
}

/* mobile sidebar toggle */
.docs-sidebar-toggle{
  display:none;
  align-items:center;
  gap:0.5rem;
  background:var(--surface-2);
  border:0.0625rem solid var(--hair);
  border-radius:0.625rem;
  padding:0.625rem 1rem;
  font-weight:600;
  font-size:0.875rem;
  color:var(--ink);
  cursor:pointer;
  margin-bottom:1.25rem;
}
.docs-sidebar-toggle svg{width:1.125rem;height:1.125rem}

/* ---------- article area ---------- */
.docs-article{
  width:100%;
  max-width:100%;
  min-width:0;
  padding-bottom:2.5rem;
  box-sizing:border-box;
}
.docs-article .lead{
  font-size:1.125rem;
  margin-top:0.625rem;
  margin-bottom:1.75rem;
}
.docs-article h1{
  font-size:clamp(2rem,4.2vw,3.25rem);
  margin-bottom:0.375rem;
}

/* ---------- table of contents (right rail) ---------- */
.docs-toc{
  position:sticky;
  top:3.75rem;
  align-self:start;
  max-height:calc(100vh - 4.75rem);
  overflow-y:auto;
}
.docs-toc h4{
  font-family:"JetBrains Mono",monospace;
  font-size:0.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--body);
  margin-bottom:0.625rem;
}
.docs-toc a{
  display:block;
  padding:0.25rem 0 0.25rem 0.75rem;
  font-size:0.8125rem;
  color:var(--body);
  border-left:0.125rem solid var(--hair);
  transition:.15s;
  text-decoration:none;
}
.docs-toc a:hover{color:var(--ink)}
.docs-toc a.active{
  color:var(--green-deep);
  border-left-color:var(--green);
  font-weight:600;
}
.docs-toc a[data-depth="3"]{padding-left:1.375rem;font-size:0.78125rem}

/* ---------- breadcrumbs ---------- */
.docs-breadcrumbs{
  font-size:0.8125rem;
  color:var(--body);
  margin-bottom:1.125rem;
}
.docs-breadcrumbs a{color:var(--body)}
.docs-breadcrumbs a:hover{color:var(--ink)}

/* ---------- prev/next pager ---------- */
.docs-pager{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem;
  margin-top:3rem;
  padding-top:1.75rem;
  border-top:0.0625rem solid var(--hair);
}
.docs-pager a{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  padding:1rem 1.125rem;
  border:0.0625rem solid var(--hair);
  border-radius:0.875rem;
  transition:.15s;
  text-decoration:none;
}
.docs-pager a:hover{
  border-color:var(--green);
  background:var(--surface-2);
}
.docs-pager .pager-label{
  font-size:0.75rem;
  font-weight:600;
  color:var(--body);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.docs-pager .pager-title{
  font-weight:600;
  font-size:0.9375rem;
  color:var(--ink);
}
.docs-pager a:last-child{text-align:right}

/* ---------- code blocks ---------- */
.code-block{
  margin:1.25rem 0;
  border:0.0625rem solid var(--hair);
  border-radius:0.75rem;
  overflow:hidden;
  background:var(--surface-2);
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.code-block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.5rem 0.875rem;
  background:var(--surface);
  border-bottom:0.0625rem solid var(--hair);
  font-size:0.75rem;
  font-weight:600;
  color:var(--body);
}
.code-block-header .lang-label{
  font-family:"JetBrains Mono",monospace;
  font-size:0.6875rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.code-block-header .copy-btn{
  display:inline-flex;
  align-items:center;
  gap:0.3125rem;
  background:none;
  border:none;
  font-size:0.75rem;
  font-weight:600;
  color:var(--body);
  cursor:pointer;
  padding:0.25rem 0.5rem;
  border-radius:0.375rem;
  transition:.15s;
}
.code-block-header .copy-btn:hover{background:var(--hair);color:var(--ink)}
.code-block-header .copy-btn svg{width:0.875rem;height:0.875rem}
.code-block pre{
  margin:0;
  padding:1rem 1.125rem;
  overflow-x:auto;
  font-size:0.84375rem;
  line-height:1.6;
}
.code-block pre code{
  font-family:"JetBrains Mono",monospace;
  background:none;
  padding:0;
  border:none;
  color:var(--ink);
  font-size:inherit;
}

/* inline code (extends prose) */
.docs-article code:not(.code-block code){
  background:var(--surface-2);
  border:0.0625rem solid var(--hair);
  padding:0.125rem 0.375rem;
  border-radius:0.3125rem;
  font-family:"JetBrains Mono",monospace;
  font-size:0.84375rem;
}

/* ---------- code tabs ---------- */
.code-tabs{
  margin:1.25rem 0;
  border:0.0625rem solid var(--hair);
  border-radius:0.75rem;
  overflow:hidden;
  background:#fff;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.code-tabs .tab-bar{
  display:flex;
  gap:0;
  background:var(--surface-2);
  border-bottom:0.0625rem solid var(--hair);
  padding:0 0.5rem;
  overflow-x:auto;
  scrollbar-width:none;
}
.code-tabs .tab-bar::-webkit-scrollbar{display:none}
.code-tabs .tab-bar button{
  background:none;
  border:none;
  padding:0.625rem 1rem;
  font-size:0.8125rem;
  font-weight:600;
  color:var(--body);
  cursor:pointer;
  position:relative;
  transition:.15s;
  white-space:nowrap;
}
.code-tabs .tab-bar button:hover{color:var(--ink)}
.code-tabs .tab-bar button[aria-selected="true"]{
  color:var(--green-deep);
}
.code-tabs .tab-bar button[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:0.75rem;right:0.75rem;bottom:0;
  height:0.125rem;
  background:var(--green);
  border-radius:0.125rem 0.125rem 0 0;
}
.code-tabs .tab-panel{
  display:none;
}
.code-tabs .tab-panel.active{
  display:block;
}
.code-tabs .tab-panel pre{
  margin:0;
  padding:1rem 1.125rem;
  overflow-x:auto;
  font-size:0.84375rem;
  line-height:1.6;
  background:var(--surface-2);
}
.code-tabs .tab-panel pre code{
  font-family:"JetBrains Mono",monospace;
  background:none;
  padding:0;
  border:none;
  color:var(--ink);
  font-size:inherit;
}

/* ---------- callout modifiers (extends .callout from styles.css) ---------- */
.callout{
  background:var(--surface-2);
  border:0.0625rem solid var(--hair);
  border-left:0.1875rem solid var(--amber);
  border-radius:0.75rem;
  padding:1rem 1.125rem;
  margin:1.25rem 0;
  font-size:0.9375rem;
}
.callout .callout-title{
  font-weight:700;
  font-size:0.875rem;
  margin-bottom:0.375rem;
  display:flex;
  align-items:center;
  gap:0.4375rem;
}
.callout-note{
  border-left-color:var(--green-teal);
  background:#f0faf7;
}
.callout-note .callout-title{color:var(--green-teal)}
.callout-tip{
  border-left-color:var(--green);
  background:#f2fbf6;
}
.callout-tip .callout-title{color:var(--green-deep)}
.callout-warning{
  border-left-color:#c0392b;
  background:#fdf2f2;
}
.callout-warning .callout-title{color:#c0392b}
.callout-unknown{
  border-left-color:var(--amber);
  background:var(--surface-2);
  border-style:dashed;
}
.callout-unknown .callout-title{color:#9a7b2a}

/* ---------- tables ---------- */
.docs-article table{
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:1.25rem 0;
  font-size:0.90625rem;
}
.docs-article table th,
.docs-article table td{
  padding:0.625rem 0.875rem;
  border-bottom:0.0625rem solid var(--hair);
  text-align:left;
  min-width:7.5rem;
}
.docs-article table thead th{
  font-weight:700;
  background:var(--surface-2);
  font-size:0.8125rem;
}
.docs-article table td:first-child{font-weight:500}

/* ---------- prose overrides for docs ---------- */
.docs-article .prose h2{
  font-size:1.75rem;
  margin:2.75rem 0 0.875rem;
  padding-top:1rem;
}
.docs-article .prose h3{
  font-size:1.25rem;
  margin:1.75rem 0 0.625rem;
}
.docs-article .prose p,
.docs-article .prose li{
  font-size:1rem;
  line-height:1.7;
}

/* ---------- mermaid container ---------- */
.mermaid{
  margin:1.5rem 0;
  text-align:center;
  padding:1.25rem;
  background:var(--surface-2);
  border:0.0625rem solid var(--hair);
  border-radius:0.75rem;
  overflow-x:auto;
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .docs-shell{
    grid-template-columns:1fr;
    gap:0;
  }
  .docs-sidebar{
    display:none;
    position:fixed;
    top:0;left:0;
    width:min(18.75rem,85vw);
    height:100vh;
    background:#fff;
    z-index:65;
    padding:4.25rem 1.25rem 1.25rem;
    box-shadow:var(--shadow-lg);
    max-height:none;
    overflow-y:auto;
  }
  .docs-sidebar.open{display:block}
  .docs-sidebar-toggle{display:flex}
  .docs-toc{display:none}
}
@media(max-width:480px){
  .docs-header-tag{display:none}
  .docs-header-link{display:none}
}