/* MetaCoder Docs — layout on top of styles.css design tokens */
.docs-shell { display: grid; grid-template-columns: 268px 1fr; max-width: 1280px; margin: 0 auto; }

/* sidebar */
.docs-side {
  position: sticky; top: 66px; align-self: start; height: calc(100vh - 66px);
  overflow-y: auto; padding: 28px 18px 60px; border-right: 1px solid var(--border);
}
.docs-side .side-group { margin-bottom: 22px; }
.docs-side .side-title { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-dim); padding: 0 10px 8px; }
.docs-side a { display: block; font-size: 13.5px; color: var(--gray-light); padding: 7px 10px; border-radius: 7px; line-height: 1.4; }
.docs-side a:hover { background: var(--card); color: var(--cyan); }
.docs-side a.active { background: var(--card-2); color: var(--cyan); font-weight: 600; }
.docs-side a code { font-family: var(--mono); font-size: 12.5px; }

/* main content */
.docs-main { padding: 34px 48px 100px; min-width: 0; }
.docs-main h1 { font-size: 38px; font-weight: 800; color: var(--white); letter-spacing: -.5px; margin-bottom: 10px; }
.docs-lead { font-size: 17px; color: var(--gray); margin-bottom: 18px; max-width: 760px; }
.docs-main h2 { font-size: 26px; font-weight: 800; color: var(--white); margin: 56px 0 14px; padding-top: 14px; border-top: 1px solid var(--border); letter-spacing: -.3px; scroll-margin-top: 80px; }
.docs-main h2:first-of-type { border-top: none; }
.docs-main h3 { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--cyan); margin: 36px 0 12px; scroll-margin-top: 80px; }
.docs-main h4 { font-size: 15px; font-weight: 700; color: var(--white); margin: 22px 0 8px; }
.docs-main p { font-size: 15px; color: var(--gray-light); margin-bottom: 12px; max-width: 820px; }
.docs-main ul, .docs-main ol { margin: 0 0 14px 22px; }
.docs-main li { font-size: 15px; color: var(--gray-light); margin-bottom: 6px; }
.docs-main a.inline { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.docs-main strong { color: var(--white); }

/* code block */
.code {
  position: relative; font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
  background: var(--bg-darker); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; margin: 0 0 16px; color: var(--gray-light); max-width: 820px;
}
.code .tk-prompt { color: var(--green); } .code .tk-cmd { color: var(--cyan); } .code .tk-flag { color: var(--gold); } .code .tk-dim { color: var(--gray-dim); }
.code .copy-btn { position: absolute; top: 8px; right: 8px; background: var(--card-2); border: 1px solid var(--border); color: var(--gray-light); font-size: 11px; padding: 4px 9px; border-radius: 6px; cursor: pointer; font-family: var(--font); opacity: 0; transition: opacity .15s; }
.code:hover .copy-btn { opacity: 1; }
.code .copy-btn:hover { border-color: var(--cyan); color: var(--cyan); }
p code, li code, td code { font-family: var(--mono); font-size: 12.8px; background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--cyan); }

/* tables */
.docs-table { width: 100%; max-width: 820px; border-collapse: collapse; margin: 0 0 18px; font-size: 13.5px; }
.docs-table th, .docs-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.docs-table th { color: var(--gray-dim); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); }
.docs-table td { color: var(--gray-light); }
.docs-table td:first-child code { white-space: nowrap; }

/* callouts */
.note { border-left: 3px solid var(--cyan); background: rgba(0,229,255,.06); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; color: var(--gray-light); max-width: 820px; }
.note.warn { border-left-color: var(--gold); background: rgba(255,215,0,.06); }
.note.tip { border-left-color: var(--green); background: rgba(0,255,148,.06); }
.note strong { color: var(--white); }

/* command card meta line */
.cmd-meta { font-size: 13.5px; color: var(--gray); margin: 2px 0 10px; max-width: 820px; }
.cmd-meta b { color: var(--gray-dim); font-weight: 700; }

/* phase flow chips */
.flowline { font-family: var(--mono); font-size: 12.5px; line-height: 1.9; color: var(--gray-light); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; max-width: 820px; }

/* group divider in content */
.grp-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--magenta); margin: 10px 0 0; }

/* docs top bar tweaks reuse header.nav from styles.css */
.docs-back { font-size: 13.5px; color: var(--gray); }
.docs-back:hover { color: var(--cyan); }

/* docs language switcher */
.docs-lang { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.docs-lang a { font-size: 13px; color: var(--gray-light); padding: 5px 11px; border-radius: 6px; line-height: 1; }
.docs-lang a:hover { color: var(--cyan); }
.docs-lang a.active { background: var(--card-2); color: var(--cyan); font-weight: 700; }
@media (max-width: 920px) { .docs-back { display: none; } .docs-lang a { padding: 5px 9px; } }

/* mobile */
.docs-side-toggle { display: none; }
@media (max-width: 920px) {
  .docs-shell { grid-template-columns: 1fr; }
  .docs-side {
    position: fixed; top: 66px; left: 0; right: 0; bottom: 0; height: auto; z-index: 50;
    background: var(--bg-darker); border-right: none; border-bottom: 1px solid var(--border);
    transform: translateX(-100%); transition: transform .2s ease; width: 280px;
  }
  .docs-side.open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .docs-main { padding: 26px 22px 80px; }
  .docs-side-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--card); border: 1px solid var(--border); color: var(--gray-light);
    padding: 8px 14px; border-radius: 9px; font-size: 14px; font-family: var(--font);
    position: sticky; top: 78px; z-index: 40; margin: 16px 0 0 16px;
  }
}