/* ============================================================
   HAVI sub-pages — docs · integrations · blog
   Extends havi_public.css + havi_landing.css with the few
   layout primitives those base sheets don't already provide.
   Same tokens, same vocabulary (amber accent, tight radii,
   Space Grotesk + JetBrains Mono, flat / no shadow).
   Drop this alongside the other two sheets and add it to the
   page_stylesheets list for /docs, /integrations/*, /blog*.
   ============================================================ */

/* ---------- page header (compact hero for sub-pages) ---------- */
.subhero { padding: 56px 0 0; }
.subhero--band { background: var(--secondary-50); border-bottom: 1px solid var(--border); padding-bottom: 56px; }
.subhero__inner { max-width: 760px; }

.breadcrumb { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 22px; }
.breadcrumb a { text-decoration: none; color: var(--muted); transition: color .15s; }
.breadcrumb a:hover { color: var(--accent-strong); }
.breadcrumb .sep { color: var(--border); }
.breadcrumb .cur { color: var(--fg); }

/* ---------- docs two-column layout ---------- */
.docs { display: grid; grid-template-columns: 232px 1fr; gap: 64px; align-items: start; padding: 56px 0 96px; }
.docs__aside { position: sticky; top: 88px; align-self: start; }
.docs__navgroup { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 22px 0 8px; }
.docs__navgroup:first-child { margin-top: 0; }
.docs__navlist { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.docs__navlink { display: block; text-decoration: none; color: var(--muted-2); font-size: 14px; line-height: 1.3; padding: 7px 12px; border-left: 2px solid var(--border); transition: color .15s, border-color .15s, background .15s; }
.docs__navlink:hover { color: var(--fg); background: var(--secondary-50); }
.docs__navlink[aria-current="true"] { color: var(--accent-strong); border-left-color: var(--accent); background: var(--accent-12); font-weight: 500; }
.docs__aside-cta { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.docs__main { min-width: 0; max-width: 760px; }
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; gap: 0; padding-top: 40px; } .docs__aside { display: none; } }

/* ---------- doc prose ---------- */
.doc-prose h2 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin: 3.25rem 0 1rem; scroll-margin-top: 88px; }
.doc-prose h2:first-child { margin-top: 0; }
.doc-prose h3 { font-size: 18px; font-weight: 600; margin: 2rem 0 .75rem; }
.doc-prose p { color: var(--muted-2); line-height: 1.75; margin: 0 0 1rem; }
.doc-prose p.doc-lead { font-size: 18px; color: var(--muted); line-height: 1.65; }
.doc-prose a:not(.btn):not(.toollink) { color: var(--accent-strong); text-decoration: none; border-bottom: 1px solid var(--accent-30); transition: border-color .15s; }
.doc-prose a:not(.btn):not(.toollink):hover { border-bottom-color: var(--accent); }
.doc-prose strong { color: var(--fg); font-weight: 600; }
.doc-section + .doc-section { margin-top: 0; }

/* ---------- SDK page: code blocks, inline code, lists, config table ---------- */
.doc-prose :not(pre) > code { background: var(--secondary-50); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 5px; font-family: var(--font-mono); font-size: 0.86em; color: var(--fg); }
.doc-prose pre { background: var(--dark); color: #e8e8e8; border: 1px solid var(--on-dark-border); border-radius: var(--radius-md); padding: 16px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; margin: 1.25rem 0; }
.doc-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 13px; }
.doc-prose ul { margin: 1rem 0; padding-left: 1.2rem; color: var(--muted-2); line-height: 1.75; }
.doc-prose ul li { margin: 0 0 .4rem; }
.doc-prose ul li code { font-size: 0.86em; }
.sdk-config { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 13.5px; }
.sdk-config th, .sdk-config td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.sdk-config th { color: var(--fg); font-weight: 600; }
.sdk-config td { color: var(--muted); line-height: 1.55; }
.sdk-config td code, .sdk-config th code { font-family: var(--font-mono); font-size: 0.9em; color: var(--accent-strong); }

/* numbered quick-start steps */
.qsteps { list-style: none; margin: 1.25rem 0 0; padding: 0; counter-reset: qs; display: flex; flex-direction: column; gap: 12px; }
.qsteps > li { counter-increment: qs; display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color .15s; }
.qsteps > li:hover { border-color: var(--accent-30); }
.qsteps > li::before { content: counter(qs, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-strong); background: var(--accent-12); border: 1px solid var(--accent-30); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.qsteps__t { font-weight: 600; font-size: 15.5px; color: var(--fg); }
.qsteps__d { color: var(--muted); font-size: 14px; line-height: 1.6; margin-top: 5px; }
.qsteps__d code { font-size: 0.84em; }

/* feature / capture grid */
.capgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 1.25rem 0 0; }
.capgrid__item { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.capgrid__h { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; color: var(--fg); }
.capgrid__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.capgrid__d { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }
@media (max-width: 560px) { .capgrid { grid-template-columns: 1fr; } }

/* tool links (supported integrations) */
.toolgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 1.25rem 0 0; }
.toollink { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--fg); font-weight: 500; font-size: 14.5px; transition: border-color .15s, color .15s, background .15s; }
.toollink:hover { border-color: var(--accent-30); color: var(--accent-strong); background: var(--accent-12); }
.toollink__r { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; }
.toollink .arrow { transition: transform .15s var(--ease); }
.toollink:hover .arrow { transform: translateX(3px); color: var(--accent); }
@media (max-width: 560px) { .toolgrid { grid-template-columns: 1fr; } }

/* callout */
.callout { display: flex; gap: 14px; padding: 18px 20px; border: 1px solid var(--accent-30); background: var(--accent-12); border-radius: var(--radius-lg); margin: 1.25rem 0 0; }
.callout__icon { color: var(--accent-strong); flex-shrink: 0; margin-top: 1px; }
.callout__body { font-size: 14px; line-height: 1.65; color: var(--muted-2); margin: 0; }
.callout__body strong { color: var(--fg); }
.callout__body a { color: var(--accent-strong); border-bottom: 1px solid var(--accent-30); text-decoration: none; }

/* ---------- connect: reused install-tabs widget ---------- */
/* Driven by initInstallTabs() in havi_landing.js (loaded on /docs).
   Mirrors the landing install tabs so the docs sheet is self-contained. */
.install { margin: 1.25rem 0 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.install__tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--secondary-50); }
.install__tab { flex: 1; appearance: none; background: none; border: none; cursor: pointer; padding: 14px 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--muted); position: relative; transition: color .15s; }
.install__tab:hover { color: var(--fg); }
.install__tab[data-active="true"] { color: var(--fg); }
.install__tab[data-active="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--accent); }
.install__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.install__panel { padding: 22px; background: #fff; }
.install__panel-item { display: none; }
.install__panel-item[data-active="true"] { display: block; }

.doc-path-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 18px 0 8px; }
.install__panel-item > .doc-path-label:first-child { margin-top: 0; }
.doc-code-meta { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.55; color: var(--muted); margin: 10px 0 0; }
.doc-code-meta strong { color: var(--fg); font-weight: 600; }
.doc-code-meta code { font-size: 0.86em; }
.doc-code-meta a { color: var(--accent-strong); border-bottom: 1px solid var(--accent-30); text-decoration: none; }

/* ---------- API reference ---------- */
.doc-apispec { margin: 1.25rem 0 0; font-family: var(--font-mono); font-size: 13.5px; }
.apilist { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 1.25rem; }
.apilist__item { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; transition: border-color .15s; }
.apilist__item:hover { border-color: var(--accent-30); }
.apilist__ep { display: flex; align-items: center; gap: 10px; }
.apilist__method { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--accent-12); color: var(--accent-strong); border: 1px solid var(--accent-30); }
.apilist__method--get { background: var(--secondary-50); color: var(--muted); border-color: var(--border); }
.apilist__path { font-family: var(--font-mono); font-size: 13.5px; color: var(--fg); }
.apilist__d p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 9px 0 0; }
.apilist__d code { font-size: 0.86em; }

/* ---------- integration page extras ---------- */
.integ-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.integ-pair { display: flex; align-items: center; gap: 18px; justify-content: center; }
.integ-chip { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.integ-chip__badge { width: 64px; height: 64px; border-radius: 14px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: #fff; }
.integ-chip__badge--dark { background: var(--dark); border-color: var(--on-dark-border); }
.integ-chip__name { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.integ-cross { color: var(--accent); }
@media (max-width: 820px) { .integ-hero { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- blog ---------- */
.bloglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.blogcard { display: block; text-decoration: none; color: inherit; padding: 30px 0; border-bottom: 1px solid var(--border); }
.bloglist > li:first-child .blogcard { padding-top: 0; }
.blogcard__meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.blogcard__tag { color: var(--accent-strong); }
.blogcard__title { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 11px 0 0; transition: color .15s; }
.blogcard:hover .blogcard__title { color: var(--accent-strong); }
.blogcard__desc { color: var(--muted); line-height: 1.6; margin: 9px 0 0; max-width: 62ch; }
.blogcard__more { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-strong); margin-top: 14px; }
.blogcard__more .arrow { transition: transform .15s var(--ease); }
.blogcard:hover .blogcard__more .arrow { transform: translateX(3px); }

/* featured first post */
.blogfeat { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 48px; text-decoration: none; color: inherit; transition: border-color .15s; }
.blogfeat:hover { border-color: var(--accent-30); }
.blogfeat__body { padding: 32px; display: flex; flex-direction: column; }
.blogfeat__side { background: var(--dark); color: var(--on-dark); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.blogfeat__title { font-size: 27px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 12px 0 0; transition: color .15s; }
.blogfeat:hover .blogfeat__title { color: var(--accent-strong); }
@media (max-width: 760px) { .blogfeat { grid-template-columns: 1fr; } .blogfeat__side { display: none; } }

.blog-empty, .blog-empty-state { padding: 48px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--muted); }

/* ---------- blog post (article) ---------- */
.post { max-width: 720px; margin: 0 auto; }
.post__head { padding-bottom: 28px; border-bottom: 1px solid var(--border); margin-bottom: 36px; }
.post__meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.post__title { font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 0; }
.post__desc { font-size: 19px; color: var(--muted); line-height: 1.55; margin: 16px 0 0; }
.post__author { display: flex; align-items: center; gap: 11px; margin-top: 22px; }
.post__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-12); border: 1px solid var(--accent-30); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-strong); }
.post__author-name { font-size: 13.5px; font-weight: 500; }
.post__author-role { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

.post__body { line-height: 1.8; color: var(--muted-2); }
.post__body > * + * { margin-top: 1.15rem; }
.post__body h2 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); margin: 2.75rem 0 0; }
.post__body h3 { font-size: 18.5px; font-weight: 600; color: var(--fg); margin: 2rem 0 0; }
.post__body p { margin: 0; }
.post__body a { color: var(--accent-strong); text-decoration: none; border-bottom: 1px solid var(--accent-30); }
.post__body a:hover { border-bottom-color: var(--accent); }
.post__body strong { color: var(--fg); font-weight: 600; }
.post__body ul, .post__body ol { padding-left: 1.3rem; }
.post__body li + li { margin-top: .5rem; }
.post__body code { font-size: 0.86em; }
.post__body pre { background: var(--dark); color: #e8e8e8; border: 1px solid var(--on-dark-border); border-radius: var(--radius-md); padding: 16px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.post__body pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 13px; }
.post__body blockquote { margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--fg); font-size: 18px; line-height: 1.6; }
.post__body img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.post__body hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

.post__cta { margin-top: 48px; padding: 28px 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--secondary-50); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.post__cta-text { font-size: 16px; font-weight: 500; }
.post__cta-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ---------- shared closing CTA band ---------- */
.endcta { text-align: center; }
.endcta__btns { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ---------- vs / comparison page ---------- */
.vs-pair { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.vs-chip { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.vs-chip__dot { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.vs-plus { font-family: var(--font-mono); color: var(--accent-strong); font-size: 16px; }

/* split "what each sees" cards */
.vs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.vs-col { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.vs-col--accent { border-color: var(--accent-30); background: var(--accent-12); }
.vs-col__h { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; margin-bottom: 16px; }
.vs-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.vs-col__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.vs-col__ic { margin-top: 1px; }
.vs-col__ic--yes { color: var(--accent-strong); }
.vs-col__ic--no { color: var(--muted); opacity: 0.5; }
@media (max-width: 640px) { .vs-split { grid-template-columns: 1fr; } }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 14.5px; }
.cmp th, .cmp td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.cmp thead th { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; padding-top: 0; }
.cmp thead th.cmp-havi { color: var(--accent-strong); }
.cmp tbody th { font-weight: 500; color: var(--fg); }
.cmp td { color: var(--muted-2); }
.cmp .cmp-havi { background: var(--accent-12); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp-yes { color: var(--accent-strong); font-weight: 600; }
.cmp-no { color: var(--muted); }
.cmp-mark { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 640px) { .cmp th, .cmp td { padding: 12px 12px; font-size: 13px; } }