/* =====================================================================
   DEIMIX HUB - the Docs section (coder-hub-docs-02), on mock 2's list and
   detail template: the guides on the left, one open on the right, read
   with the article reader's styles (.article-read). Only what the Docs
   add: the hue, the list's one-line blurb, the Copy button on every code
   block, "On this page", and the CLI downloads. Every colour is a kit
   token or the Docs hue. No inline style anywhere (the page CSP).
   ===================================================================== */

/* ---- the Docs' hue: the band tile and the sidebar marker only ---- */
:root { --hue-docs: #79C2D0; }
.nav-item.hue-docs { --page-hue: var(--hue-docs); }
.page-docs { --page-hue: var(--hue-docs); display: flex; flex-direction: column; flex: 1; min-height: 0; }
@media (min-width: 761px) {
  .main.is-list .page-docs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .main.is-list .page-docs .library-split { flex: 1; min-height: 0; }
}

/* ---- the list: a guide's name, one line of what it is, its file ---- */
.docs-tile { color: var(--hue-docs); background: color-mix(in srgb, var(--hue-docs) 12%, var(--panel)); border-color: color-mix(in srgb, var(--hue-docs) 30%, transparent); }
.docs-row .row-blurb { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.page-docs .list-row[aria-selected="true"]::before { background: var(--hue-docs); }

/* ---- the open guide ---- */
.page-docs .detail-actions .tool-note { flex: 1; min-width: 0; }
.guide-read { max-width: 780px; }
.guide-read h1, .guide-read h2, .guide-read h3 { scroll-margin-top: 150px; }
.guide-read h3 code { font-size: .9em; }
.guide-read .md-link.is-in-the-hub { color: var(--text); text-decoration-color: var(--hue-docs); }

/* "On this page": a closed list until asked for, so the guide starts at once */
.guide-contents { max-width: 780px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.guide-contents summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; color: var(--text); font-size: 14px; font-weight: 600; }
.guide-contents summary::-webkit-details-marker { display: none; }
.guide-contents summary .svg-icon { width: 16px; height: 16px; color: var(--muted); transform: rotate(-90deg); transition: transform .16s var(--ease); }
.guide-contents[open] summary .svg-icon { transform: none; }
.guide-contents summary .count { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); font-weight: 400; }
.guide-contents nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.guide-contents nav a { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--soft-text); text-decoration: none; font-size: 13px; line-height: 1.3; }
.guide-contents nav a:hover { color: var(--text); border-color: var(--muted); background: var(--panel-2); }

/* every code block: the code, and its Copy button in the corner */
.guide-code { position: relative; margin: 0 0 16px; }
.guide-code pre { margin: 0; padding-right: 92px; }
/* Wrapped, not scrolled: a long line would otherwise slide under the Copy
   button, and a one-line install must be readable whole. */
.article-read .guide-code pre { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.guide-code .guide-copy { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 9px; font-size: 12.5px; }
.guide-code .guide-copy .svg-icon { width: 14px; height: 14px; }
.article-read .guide-code pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; white-space: inherit; }

/* a paragraph that is one command: the command, and a Copy button beside it */
.guide-command { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.guide-command code { overflow-wrap: anywhere; }
.guide-command .guide-copy-command { width: 30px; height: 30px; flex: none; }
.guide-command .guide-copy-command .svg-icon { width: 15px; height: 15px; }

/* ---- the CLI downloads, on the install page ---- */
.cli-downloads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 4px 0 26px; }
.cli-download { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px; min-width: 0; }
.cli-download.is-missing { background: var(--ink-deep); }
.cli-download-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cli-download-words { flex: 1 1 220px; min-width: 0; }
.cli-download-name { font-weight: 600; font-size: 15px; color: var(--text); }
.cli-download-which { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.cli-download-button .cli-size { color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; }
.cli-sha { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; min-width: 0; }
.article-read .cli-sha-value { flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-all; font-size: 12px; background: none; padding: 0; color: var(--soft-text); }
.cli-install-label { margin: 0 0 6px; }
.cli-download .guide-code { margin: 0; }
.cli-download-missing { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }

@media (max-width: 760px) {
  .main.is-list .page-docs .library-split.detail-is-open .list-pane { display: none; }
  .guide-code pre { padding-right: 14px; padding-top: 44px; }
  .cli-download { padding: 12px; }
  .cli-download-button { width: 100%; justify-content: center; }
}