/* carbium.sh/docs (src/views/docs.js): the TERMINAL reference layout ported to the cui token system. */

.cw-docs { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; overflow: hidden; background: var(--c-bg); }
.cw-docs-main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); }
.cw-docs-main::-webkit-scrollbar { width: 9px; }
.cw-docs-main::-webkit-scrollbar-thumb { background: var(--c-line-2); }

.cw-docs-doc { width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--c-s-10) var(--c-s-10) var(--c-s-12); }

.cw-docs-head { display: flex; align-items: baseline; gap: var(--c-s-7); flex-wrap: wrap; padding: var(--c-s-8) 0 var(--c-s-6); border-bottom: 1px solid var(--c-line-soft); }
.cw-docs-h1 { margin: 0; font-family: var(--c-font-display); font-weight: 700; font-size: clamp(30px, 4vw, 42px); line-height: 1.05; letter-spacing: -.03em; color: var(--c-text); }

.cw-kick { display: block; font-family: var(--c-font-mono); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: lowercase; color: var(--c-faint); }
.cw-kick b { color: var(--c-brand); font-weight: 500; }
.cw-kick.red b { color: var(--c-stream); }

.cw-docs-grid { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: var(--c-s-12); padding-top: var(--c-s-10); align-items: start; }
.cw-docs-aside { position: sticky; top: var(--c-s-8); align-self: start; }
.cw-dx-t { font-family: var(--c-font-mono); font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--c-faint); margin: 0 0 var(--c-s-6); padding-bottom: var(--c-s-5); border-bottom: 1px solid var(--c-line-soft); }
.cw-dx { display: flex; flex-direction: column; gap: 1px; }
.cw-dx-a { display: flex; align-items: baseline; gap: var(--c-s-4); font-family: var(--c-font-mono); font-size: 12px; line-height: 1; color: var(--c-muted); padding: var(--c-s-3) var(--c-s-4); border-radius: var(--c-r-ctl); border-left: 2px solid transparent; text-decoration: none; transition: color var(--c-dur-2) var(--c-ease), border-color var(--c-dur-2) var(--c-ease), background var(--c-dur-2) var(--c-ease); }
/* faint, not ghost: the # / > sigil is rendered text and owes 4.5:1 like any content */
.cw-dx-a .cw-dx-h { color: var(--c-faint); font-weight: 600; }
.cw-dx-a:hover { color: var(--c-text); background: var(--c-row-hover); }
.cw-dx-a:hover .cw-dx-h { color: var(--c-brand); }
.cw-dx-a.is-active { color: var(--c-text); background: var(--c-raised); border-left-color: var(--c-line); }
.cw-dx-a.is-active .cw-dx-h { color: var(--c-text); }
.cw-dx-a.red.is-active { border-left-color: var(--c-stream); }
.cw-dx-a.red.is-active .cw-dx-h, .cw-dx-a.red:hover .cw-dx-h { color: var(--c-stream); }
.cw-dx-a:focus-visible { outline: none; box-shadow: var(--c-focus); }
.cw-dxr { margin-top: var(--c-s-8); padding-top: var(--c-s-7); border-top: 1px solid var(--c-line-soft); }
.cw-dx-cta { margin-top: var(--c-s-6); width: 100%; }

.cw-docs-body { min-width: 0; }
.cw-sec { padding-top: var(--c-s-9); margin-bottom: var(--c-s-12); scroll-margin-top: var(--c-s-6); }
.cw-sec:last-child { margin-bottom: 0; }
.cw-sec-h { display: flex; align-items: flex-end; gap: var(--c-s-7); flex-wrap: wrap; margin-bottom: var(--c-s-9); }
.cw-sec-h .cw-kick, .cw-docs-head .cw-kick { flex: none; }
.cw-h2 { flex: none; margin: 0; font-family: var(--c-font-display); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; color: var(--c-text); }
.cw-sh-note { font-family: var(--c-font-body); font-size: 12.5px; line-height: 1.5; color: var(--c-muted); margin: 0 0 3px; }
.cw-sec-lead { color: var(--c-muted); font-size: 13.5px; line-height: 1.6; max-width: 66ch; margin: 0 0 var(--c-s-9); }

.cw-inl { font-family: var(--c-font-mono); font-size: 12px; color: var(--c-brand-tint); background: var(--c-surface-2); border: 1px solid var(--c-line-soft); border-radius: var(--c-r-ctl); padding: 2px 6px; }
.cw-inl.r { color: var(--c-stream); }
.cw-inl.b { color: var(--c-info); }
.cw-alink { color: var(--c-brand-tint); text-decoration: none; }
.cw-alink:hover { text-decoration: underline; text-underline-offset: 3px; }
.cw-alink:focus-visible { outline: none; box-shadow: var(--c-focus); border-radius: var(--c-r-ctl); }
.cw-alink.red { color: var(--c-stream); }
.cw-subh { font-family: var(--c-font-mono); font-weight: 500; font-size: 10.5px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); margin: var(--c-s-10) 0 var(--c-s-6); }

.cw-win { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-r-well); overflow: hidden; }
.cw-win-bar { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 var(--c-s-6); background: var(--c-raised); border-bottom: 1px solid var(--c-line); }
.cw-win-path { font-family: var(--c-font-mono); font-weight: 500; font-size: 11px; letter-spacing: .06em; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-win-path b { color: var(--c-muted); font-weight: 500; }
.cw-win.is-rpc .cw-win-path b { color: var(--c-brand-tint); }
.cw-win.is-ws .cw-win-path b { color: var(--c-ws); }
.cw-win.is-stream .cw-win-path b { color: var(--c-stream); }
.cw-win.is-quote .cw-win-path b { color: var(--c-quote-tint); }
.cw-win-sq { display: flex; gap: 5px; flex: none; margin-left: var(--c-s-6); }
.cw-win-sq i { width: 7px; height: 7px; border: 1px solid var(--c-ghost); display: block; }
.cw-win-body { padding: var(--c-s-10); }

.cw-eplist { display: flex; flex-direction: column; gap: var(--c-s-5); }
/* scoped: dashboard.css declares its own .cw-eprow and docs.css loads last */
.cw-eplist .cw-eprow { display: flex; align-items: center; gap: var(--c-s-7); background: var(--c-surface-2); border: 1px solid var(--c-line-soft); border-radius: var(--c-r-well); padding: var(--c-s-5) var(--c-s-6); }
.cw-ep-dot { width: 7px; height: 7px; flex: none; }
.cw-eprow.is-rpc .cw-ep-dot { background: var(--c-brand); }
.cw-eprow.is-ws .cw-ep-dot { background: var(--c-ws); }
.cw-eprow.is-stream .cw-ep-dot { background: var(--c-stream); }
.cw-eprow.is-quote .cw-ep-dot { background: var(--c-quote); }
.cw-ep-lbl { font-family: var(--c-font-mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); width: 130px; flex: none; }
.cw-ep-val { flex: 1; font-family: var(--c-font-mono); font-size: 13px; word-break: break-all; }
.cw-eprow.is-rpc .cw-ep-val { color: var(--c-brand-tint); }
.cw-eprow.is-ws .cw-ep-val { color: var(--c-ws); }
.cw-eprow.is-stream .cw-ep-val { color: var(--c-stream); }
/* the dot fills with the identity gold; text takes the tint, the split every plane row keeps */
.cw-eprow.is-quote .cw-ep-val { color: var(--c-quote-tint); }
.cw-eplist .cw-eprow .c-copy { flex: none; margin-left: auto; }

.cw-tt-wrap { overflow-x: auto; }
.cw-tt { width: 100%; border-collapse: collapse; font-family: var(--c-font-mono); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.cw-tt th { font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); text-align: right; padding: var(--c-s-5) var(--c-s-7); background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.cw-tt td { padding: var(--c-s-5) var(--c-s-7); text-align: right; border-bottom: 1px solid var(--c-line-soft); color: var(--c-muted); }
.cw-tt th:first-child, .cw-tt td:first-child { text-align: left; }
.cw-tt.lft th, .cw-tt.lft td { text-align: left; }
.cw-tt td.k { color: var(--c-text); }
.cw-tt td.m { color: var(--c-brand-tint); }
.cw-tt td.m.r { color: var(--c-stream); }
.cw-tt td.none { color: var(--c-ghost); }
.cw-tt td.wk { color: var(--c-faint); }
.cw-tt td.pro { color: var(--c-brand-tint); }
.cw-tt td .cw-tt-n { color: var(--c-text); }
.cw-tt td .cw-tt-n.r { color: var(--c-stream); }
.cw-tt td .cw-tt-sub { display: block; margin-top: 2px; font-size: 10px; letter-spacing: .02em; color: var(--c-muted); white-space: nowrap; }
.cw-tt td.cw-faint, .cw-tt .cw-faint { color: var(--c-faint); }
.cw-tt tr:hover td { background: var(--c-row-hover); }
.cw-tt tr.cw-tt-grp td { color: var(--c-brand-tint); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; padding-top: var(--c-s-8); border-bottom: none; }
.cw-tt tr.cw-tt-grp.red td { color: var(--c-stream); }
.cw-tt tr.cw-tt-grp:hover td { background: none; }

.cw-bdg { display: inline-flex; align-items: center; font-family: var(--c-font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--c-r-chip); border: 1px solid var(--c-line); background: var(--c-surface); }
.cw-bdg.tier-free { color: var(--c-faint); }
.cw-bdg.tier-dev { color: var(--c-muted); }
.cw-bdg.tier-buss { color: var(--c-info); }
.cw-bdg.tier-pro { color: var(--c-brand-tint); }
.cw-bdg.is-code { color: var(--c-danger-tint); border-color: var(--c-danger-line); background: var(--c-danger-wash); }

.cw-note { display: flex; gap: var(--c-s-6); background: var(--c-surface); border: 1px solid var(--c-line); border-left: 2px solid var(--c-line-2); border-radius: var(--c-r-well); padding: var(--c-s-6) var(--c-s-7); font-family: var(--c-font-mono); font-size: 12.5px; line-height: 1.6; color: var(--c-muted); margin-top: var(--c-s-8); }
.cw-note-g { color: var(--c-faint); font-weight: 600; flex: none; }
/* a flex item never shrinks under its longest token: an inline JSON or URL would widen the page on a phone */
.cw-note > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cw-note a { color: var(--c-brand-tint); text-decoration: none; }
.cw-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cw-note.warn { border-left-color: var(--c-warn); } .cw-note.warn .cw-note-g { color: var(--c-warn); }
.cw-note.purple { border-left-color: var(--c-brand); } .cw-note.purple .cw-note-g { color: var(--c-brand); }
.cw-note.red { border-left-color: var(--c-stream); } .cw-note.red .cw-note-g { color: var(--c-stream); }

.cw-code2 { position: relative; background: var(--c-surface-2); padding: var(--c-s-7) var(--c-s-8); overflow: auto; }
.cw-code2.doc { height: 186px; padding: var(--c-s-8) var(--c-s-9); }
/* the SKILL.md window carries ~124 lines: a taller well, still capped inside the viewport */
.cw-code2.doc.is-tall { height: min(58vh, 560px); }
.cw-code2 pre { margin: 0; font-family: var(--c-font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre; text-transform: none; color: var(--c-muted); }
.cw-code2 .cw-codeln { display: block; text-transform: none; letter-spacing: 0; }
.cw-code2 .cw-st { color: var(--c-brand-tint); }
.cw-code2 .cw-sr { color: var(--c-stream); }
.cw-code2 .cw-sw { color: var(--c-info); }
.cw-code2 .cw-sq { color: var(--c-quote-tint); }
.cw-code2 .cw-fl { color: var(--c-info); }
.cw-code2 .cw-cm { color: var(--c-faint); }
.cw-code2 .c-copy { position: absolute; top: var(--c-s-4); right: var(--c-s-4); }
@media (prefers-reduced-motion: no-preference) {
  .cw-code2 .cw-codeln { opacity: 0; animation: c-linein 500ms var(--c-ease-out) forwards; }
  .cw-code2 .cw-codeln:nth-child(1) { animation-delay: 50ms; }
  .cw-code2 .cw-codeln:nth-child(2) { animation-delay: 130ms; }
  .cw-code2 .cw-codeln:nth-child(3) { animation-delay: 210ms; }
  .cw-code2 .cw-codeln:nth-child(4) { animation-delay: 290ms; }
  .cw-code2 .cw-codeln:nth-child(5) { animation-delay: 370ms; }
  .cw-code2 .cw-codeln:nth-child(6) { animation-delay: 450ms; }
  .cw-code2 .cw-codeln:nth-child(7) { animation-delay: 530ms; }
  .cw-code2 .cw-codeln:nth-child(n+8) { animation-delay: 610ms; }
}

.cw-caps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c-s-5); margin-top: var(--c-s-8); }
.cw-cap { display: inline-flex; align-items: center; gap: var(--c-s-4); height: 28px; padding: 0 var(--c-s-6); border: 1px solid var(--c-line); border-radius: var(--c-r-chip); background: var(--c-surface); }
.cw-cap-dot { width: 6px; height: 6px; flex: none; }
.cw-cap-dot.is-p { background: var(--c-brand); }
.cw-cap-dot.is-ws { background: var(--c-ws); }
.cw-cap-dot.is-data { background: var(--c-info); }
.cw-cap-k { font-family: var(--c-font-mono); font-weight: 500; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); }
.cw-cap-v { font-family: var(--c-font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-text); }

/* NEUTRAL: a reserved capability is not the quote plane */
.cw-rsv { display: inline-flex; align-items: center; font-family: var(--c-font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--c-r-chip); color: var(--c-faint); border: 1px solid var(--c-line-2); background: var(--c-surface); }

.cw-docs-doc.cw-doc-embed { max-width: 100%; padding: 0; }
.cw-docs-doc.cw-doc-embed .cw-docs-aside { top: 0; }

@media (max-width: 860px) {
  .cw-docs { height: auto; min-height: 100dvh; overflow: visible; }
  .cw-docs-main { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .cw-docs-doc { padding: var(--c-s-8); }
  /* minmax(0,...), not 1fr: 1fr's auto minimum takes the nowrap chip row and blows the track */
  .cw-docs-grid { grid-template-columns: minmax(0, 1fr); gap: var(--c-s-8); padding-top: var(--c-s-8); }
  .cw-docs-aside { position: sticky; top: 0; z-index: 5; background: var(--c-bg); border-bottom: 1px solid var(--c-line-soft); padding: var(--c-s-3) 0; }
  .cw-dx-t, .cw-dxr, .cw-dx-cta { display: none; }
  .cw-dx { flex-direction: row; overflow-x: auto; gap: var(--c-s-4); }
  .cw-dx-a { flex-shrink: 0; white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; min-height: 44px; align-items: center; }
  .cw-dx-a.is-active { border-left: none; border-bottom-color: var(--c-line-2); }
  .cw-dx-a.red.is-active { border-bottom-color: var(--c-stream); }
  .cw-sec { scroll-margin-top: 56px; } /* the aside is sticky here: 44px control + 12px padding */
}
@media (max-width: 560px) {
  .cw-eplist .cw-eprow { flex-wrap: wrap; }
  .cw-ep-lbl { width: auto; }
  .cw-eplist .cw-eprow .c-copy { margin-left: 0; }
}

/* quote try it: the form beside the request and response wells, one column under 860px */
.cw-try { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--c-s-8); padding: var(--c-s-8); }
.cw-try-form, .cw-try-io { display: flex; flex-direction: column; gap: var(--c-s-6); min-width: 0; }
.cw-try-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--c-s-6); }
.cw-try-row:first-child { grid-template-columns: minmax(0, 1fr); }
.cw-try-help { font-size: 11.5px; color: var(--c-faint); }
.cw-try-venues { display: flex; flex-direction: column; gap: var(--c-s-5); margin: 0; min-width: 0; padding: var(--c-s-5) var(--c-s-6) var(--c-s-6); border: 1px solid var(--c-line-soft); border-radius: var(--c-r-ctl); }
.cw-try-venues legend, .cw-try-cap { padding: 0 var(--c-s-2); margin: 0; font-family: var(--c-font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.cw-try-chips { display: flex; flex-wrap: wrap; gap: var(--c-s-4); }
.cw-try-chips .c-chip { min-height: 32px; text-transform: none; letter-spacing: .02em; }
.cw-try-act, .cw-try-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c-s-6); }
.cw-try-status { margin: 0; min-height: 1.6em; font-size: 12.5px; color: var(--c-muted); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .cw-try { grid-template-columns: minmax(0, 1fr); padding: var(--c-s-6); }
}
@media (max-width: 560px) {
  .cw-try-row { grid-template-columns: minmax(0, 1fr); }
  .cw-try-chips .c-chip, .cw-try-act .c-btn { min-height: 44px; }
}

/* Intelligent Agents: the SKILL.md copy is the page's largest control (cui primary button, scaled up; full width on a phone). */
.cw-skill-cta { margin: var(--c-s-8) 0 var(--c-s-10); }
.cw-skill-copy { height: 56px; padding: 0 var(--c-s-12); gap: var(--c-s-6); font-size: 16px; font-weight: 600; }
.cw-skill-copy svg { width: 20px; height: 20px; }
.cw-skill-size { font-family: var(--c-font-mono); font-size: 12px; font-weight: 500; color: var(--c-muted); }
.cw-skill-copy.is-copied { border-color: var(--c-brand); background: var(--c-brand-wash); }
@media (max-width: 560px) { .cw-skill-copy { width: 100%; } }