/* bluep.ca additions on top of Closiq's shared.css (copied unchanged; same three bands, same faces).
   Only what a documentation site needs that the firm site does not: code, tables, a docs sidebar. */

:root { --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --code-bg: #f6f6f4; }

code, pre { font-family: var(--font-mono); }
:not(pre) > code { font-size: 0.82em; background: var(--code-bg); padding: 0.08em 0.32em; border-radius: 2px; }
pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 2px; padding: 1.1rem 1.25rem;
      overflow-x: auto; font-size: 0.8rem; line-height: 1.6; margin: 1.4rem 0; color: var(--text-primary); }

.table-wrap { overflow-x: auto; margin: 1.6rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
th, td { text-align: left; padding: 0.6rem 0.9rem 0.6rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
     color: var(--text-muted); }

/* Model and DDL side by side on the home page. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.pair > div { background: #fff; padding: 2rem 2rem 1.5rem; min-width: 0; }
.pair pre { border: none; background: none; padding: 0; margin: 1rem 0 0; }

/* Docs: sidebar, article, on-page contents. */
.docs { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem 6rem; display: grid;
        grid-template-columns: 14rem minmax(0, 1fr) 12rem; gap: 3.5rem; }
.side, .toc { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
.side summary { display: none; }
.side .meta, .toc .meta { display: block; margin: 1.8rem 0 0.6rem; }
.side .meta:first-of-type { margin-top: 0; }
.side a, .toc a { display: block; font-family: var(--font-ui); font-size: 0.82rem; line-height: 1.45; padding: 0.28rem 0;
                  color: var(--text-secondary); text-decoration: none; }
.side a:hover, .toc a:hover { color: var(--text-primary); }
.side a[aria-current="page"] { color: var(--text-primary); font-weight: 500; }
.docs .prose { max-width: 72ch; }
.docs .prose h1 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); margin-bottom: 2rem; color: var(--text-primary); }
.docs .prose h2 { color: var(--text-primary); }
.docs .prose h3 { color: var(--text-primary); }
.docs .prose p { margin-top: 1.1rem; }
.docs .prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border); }
.docs .prose a:hover { text-decoration-color: currentColor; }
.prose h2 a.anchor, .prose h3 a.anchor { text-decoration: none; color: inherit; }

.doc-index { columns: 2; column-gap: 3rem; list-style: none; margin: 0 !important; }
.doc-index a { color: var(--text-primary); text-decoration: none; }
.doc-index a:hover { text-decoration: underline; text-underline-offset: 2px; }
.example a, .lede a { color: inherit; }

/* Examples */
.example { display: grid; grid-template-columns: 22rem 1fr; gap: 2.5rem; padding: 3.5rem 0; border-top: 1px solid var(--border); }
.example:last-child { border-bottom: 1px solid var(--border); }
.example .shot { display: block; border: 1px solid var(--border); }
.example .shot img { display: block; width: 100%; height: 15rem; object-fit: contain; background: #fff; }
.example p { color: var(--text-secondary); font-size: 1.05rem; }
.example .ddl { margin-top: 1rem; font-family: var(--font-ui); font-size: 0.78rem; line-height: 2; }
.example .ddl a { color: var(--text-secondary); margin-right: 0.9rem; }
.example .links { margin-top: 0.8rem; }

@media (max-width: 1100px) { .docs { grid-template-columns: 13rem minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 768px) {
    .docs { display: block; padding: 2rem 1.5rem 4rem; }
    .side { position: static; max-height: none; margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
    .side summary { display: block; cursor: pointer; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500;
                    letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4rem 0; }
    .side details[open] summary { margin-bottom: 1rem; }
    .pair { grid-template-columns: 1fr; }
    .pair > div { padding: 1.5rem 1.25rem; }
    .example { grid-template-columns: 1fr; gap: 1.5rem; }
    .doc-index { columns: 1; }
}