/* SQLLens.AI Product Docs — shared template (zinc neutrals, single blue accent, calm docs chrome) */
:root{
  --bg:#fafafa; --bg-soft:#f4f4f5; --bg-sunken:#e4e4e7;
  --fg:#18181b; --fg-muted:#52525b; --fg-dim:#71717a;
  --border:#e4e4e7; --border-strong:#d4d4d8;
  --accent:#2563eb; --accent-soft:rgba(37,99,235,.08); --accent-fg:#1d4ed8;
  --code-bg:#18181b; --code-fg:#e4e4e7;
  --warn-bg:#fff7ed; --warn-fg:#9a3412; --warn-bd:#fed7aa;
  --tip-bg:#ecfdf5; --tip-fg:#065f46; --tip-bd:#a7f3d0;
  --note-bg:#eff6ff; --note-fg:#1e3a8a; --note-bd:#bfdbfe;
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --radius:8px; --radius-sm:6px;
  --sidebar-w:280px; --toc-w:220px; --header-h:56px;
  --prose-max:45rem;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#09090b; --bg-soft:#18181b; --bg-sunken:#27272a;
  --fg:#fafafa; --fg-muted:#a1a1aa; --fg-dim:#71717a;
  --border:#27272a; --border-strong:#3f3f46;
  --accent:#3b82f6; --accent-soft:rgba(59,130,246,.14); --accent-fg:#93c5fd;
  --code-bg:#09090b; --code-fg:#e4e4e7;
  --warn-bg:#291708; --warn-fg:#fdba74; --warn-bd:#7c2d12;
  --tip-bg:#052e23; --tip-fg:#6ee7b7; --tip-bd:#065f46;
  --note-bg:#1e1b4b; --note-fg:#c7d2fe; --note-bd:#3730a3;
  --shadow:0 1px 2px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code,pre,kbd{font-family:var(--mono);font-size:.9em}
kbd{background:var(--bg-sunken);border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:1px 6px;font-size:.85em}
hr{border:0;border-top:1px solid var(--border);margin:2rem 0}

/* Header */
.doc-header{position:sticky;top:0;z-index:40;height:var(--header-h);display:flex;align-items:center;gap:.75rem;padding:0 1rem;background:var(--bg);border-bottom:1px solid var(--border);backdrop-filter:saturate(180%) blur(8px)}
.doc-header .brand{font-weight:700;color:var(--fg);font-size:15px;display:flex;align-items:center;gap:.5rem}
.doc-header .brand .dot{width:10px;height:10px;border-radius:3px;background:var(--accent)}
.doc-header .grow{flex:1}
.doc-search{position:relative;flex:1;max-width:520px}
.doc-search input{width:100%;padding:.55rem .85rem .55rem 2.2rem;background:var(--bg-soft);border:1px solid var(--border);color:var(--fg);border-radius:8px;font-size:14px;outline:none}
.doc-search input:focus{border-color:var(--accent);background:var(--bg)}
.doc-search .icon{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--fg-dim);font-size:14px}
.doc-search .kbd-hint{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);color:var(--fg-dim);font-size:11px;border:1px solid var(--border);padding:1px 5px;border-radius:4px}
.doc-search .results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);max-height:60vh;overflow:auto;display:none;z-index:50}
.doc-search.open .results{display:block}
.doc-search .results a{display:block;padding:.55rem .8rem;color:var(--fg);border-bottom:1px solid var(--border);font-size:14px}
.doc-search .results a:last-child{border-bottom:0}
.doc-search .results a:hover,.doc-search .results a.active{background:var(--accent-soft);color:var(--accent-fg);text-decoration:none}
.doc-search .results .group{font-size:11px;text-transform:uppercase;color:var(--fg-dim);letter-spacing:.05em}
.doc-search .results .empty{padding:1rem;color:var(--fg-dim);font-size:13px;text-align:center}

.icon-btn{background:transparent;border:1px solid var(--border);color:var(--fg-muted);width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px}
.icon-btn:hover{background:var(--bg-soft);color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border:1px solid var(--border);background:var(--bg-soft);color:var(--fg);border-radius:8px;font-size:13px;cursor:pointer}
.btn:hover{background:var(--bg-sunken);text-decoration:none}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{filter:brightness(.95)}

/* Layout */
.doc-shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);max-width:1480px;margin:0 auto;min-height:calc(100vh - var(--header-h))}
@media(max-width:1100px){.doc-shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}.doc-toc{display:none}}
/* mobile overrides moved to end of file to win specificity */
.menu-toggle{display:none}

/* Sidebar */
.doc-sidebar{border-right:1px solid var(--border);padding:1rem .25rem 2rem;position:sticky;top:var(--header-h);align-self:start;max-height:calc(100vh - var(--header-h));overflow:auto}
.doc-sidebar .nav-filter{margin:0 .75rem .75rem;padding:.4rem .65rem;font-size:13px;border:1px solid var(--border);background:var(--bg-soft);border-radius:6px;color:var(--fg);width:calc(100% - 1.5rem)}
.doc-nav{list-style:none;margin:0;padding:0}
.doc-nav .group{margin:.5rem 0}
.doc-nav .group-label{font-size:11px;text-transform:uppercase;color:var(--fg-dim);letter-spacing:.06em;font-weight:600;padding:.5rem .9rem .3rem;display:flex;align-items:center;gap:.4rem;cursor:pointer;user-select:none}
.doc-nav .group-label .chev{transition:transform .15s;color:var(--fg-dim)}
.doc-nav .group.collapsed .chev{transform:rotate(-90deg)}
.doc-nav .group.collapsed ul{display:none}
.doc-nav ul{list-style:none;margin:0;padding:0 .35rem}
.doc-nav li a{display:block;padding:.35rem .9rem;font-size:13.5px;color:var(--fg-muted);border-radius:6px;border-left:2px solid transparent;margin-left:1px;line-height:1.35}
.doc-nav li a:hover{background:var(--bg-soft);color:var(--fg);text-decoration:none}
.doc-nav li a.active{background:var(--accent-soft);color:var(--fg);border-left-color:var(--accent);font-weight:600}
:root[data-theme="dark"] .doc-nav li a.active{color:var(--fg)}
.doc-nav li.sub a{padding-left:1.6rem;font-size:13px}
.doc-nav li.hidden{display:none}

/* Main — narrow reading column; cards / prev-next / feedback span full main width */
.doc-main{padding:2rem clamp(1rem,4vw,3rem) 4rem;min-width:0}
.doc-main > *:not(.cards):not(.prev-next):not(.feedback):not(.doc-hero-media){max-width:var(--prose-max)}
.doc-main > .cards{max-width:none;width:100%}
.doc-crumbs{font-size:12.5px;color:var(--fg-dim);margin-bottom:1rem;display:flex;gap:.4rem;flex-wrap:wrap}
.doc-crumbs a{color:var(--fg-muted)}
.doc-hero{margin-bottom:2rem}
.doc-hero .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:600}
.doc-hero h1{font-size:clamp(1.7rem,2.4vw,2.4rem);line-height:1.15;margin:.4rem 0 .6rem;letter-spacing:-.01em}
.doc-hero .lede{color:var(--fg-muted);font-size:17px;max-width:62ch}
.doc-hero-media{margin:-.25rem 0 2.25rem;max-width:720px;width:100%}
.doc-hero-media img{max-width:100%}
.doc-main h2{margin:2.4rem 0 .75rem;font-size:1.4rem;letter-spacing:-.01em;scroll-margin-top:calc(var(--header-h) + 1rem)}
.doc-main h2::before{content:"";display:block;height:1px;background:var(--border);margin-bottom:1rem}
.doc-main h3{margin:1.8rem 0 .5rem;font-size:1.1rem;scroll-margin-top:calc(var(--header-h) + 1rem)}
.doc-main p{margin:.6rem 0}
.doc-main ul,.doc-main ol{padding-left:1.3rem}
.doc-main li{margin:.2rem 0}
.doc-main table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:14px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.doc-main th,.doc-main td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.doc-main th{background:var(--bg-soft);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted)}
.doc-main tr:last-child td{border-bottom:0}
.doc-main pre{background:var(--code-bg);color:var(--code-fg);padding:1rem;border-radius:var(--radius);overflow:auto;font-size:13px;line-height:1.5;margin:1rem 0}
.doc-main p code,.doc-main li code,.doc-main td code{background:var(--bg-sunken);padding:1px 6px;border-radius:4px;color:var(--accent-fg)}

/* SQL sample blocks (highlight.js + chrome — matches productDoc/ref guides) */
.doc-main{
  --sql-panel-bg:#0d1117;
  --sql-chrome-bg:#21262d;
  --sql-chrome-border:#30363d;
  --sql-identifier:#e6edf3;
  --sql-keyword:#ff7b72;
  --sql-string:#7ee787;
  --sql-number:#79c0ff;
  --sql-comment:#8b949e;
}
.doc-main .sql-pre-wrap{margin:1rem 0;max-width:100%}
.doc-main .sql-block-chrome{border:1px solid var(--sql-chrome-border);border-radius:var(--radius);overflow:hidden;background:var(--sql-panel-bg);box-shadow:var(--shadow)}
.doc-main .sql-block-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem .55rem .45rem .75rem;background:var(--sql-chrome-bg);border-bottom:1px solid var(--sql-chrome-border)}
.doc-main .sql-block-label{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sql-identifier);user-select:none}
.doc-main .sql-block-icon{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--sql-comment)}
.doc-main .sql-copy-btn{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;padding:0;border:none;border-radius:6px;background:transparent;color:var(--sql-comment);cursor:pointer;flex-shrink:0;transition:color .15s,background .15s}
.doc-main .sql-copy-btn:hover{color:var(--sql-identifier);background:rgba(255,255,255,.06)}
.doc-main .sql-copy-btn:focus{outline:2px solid var(--accent);outline-offset:1px}
.doc-main .sql-copy-btn.is-done{color:var(--sql-string)}
.doc-main .sql-block-body{display:block}
.doc-main .sql-block-body>pre{margin:0;border:none;border-radius:0;padding:.85rem 1rem 1rem;background:var(--sql-panel-bg);overflow:auto;font-size:13px;line-height:1.5}
.doc-main .sql-block-body pre code.hljs,
.doc-main .sql-block-body pre code{color:var(--sql-identifier);background:transparent;padding:0;font-size:inherit}
.doc-main .sql-block-body .hljs-keyword,
.doc-main .sql-block-body .hljs-built_in,
.doc-main .sql-block-body .hljs-meta .hljs-keyword{color:var(--sql-keyword)!important}
.doc-main .sql-block-body .hljs-string,
.doc-main .sql-block-body .hljs-attr,
.doc-main .sql-block-body .hljs-addition{color:var(--sql-string)!important}
.doc-main .sql-block-body .hljs-number,
.doc-main .sql-block-body .hljs-literal{color:var(--sql-number)!important}
.doc-main .sql-block-body .hljs-comment{color:var(--sql-comment)!important;font-style:italic}
.doc-main .sql-block-body .hljs-function .hljs-title,
.doc-main .sql-block-body .hljs-title{color:var(--sql-identifier)!important}
.doc-main .sql-block-body.sql-pre--numbered{display:flex;flex-direction:row;align-items:stretch}
.doc-main .sql-block-body.sql-pre--numbered .sql-linenos-col{margin:0;padding:.85rem .65rem 1rem .85rem;background:#0a0e14;border-right:1px solid var(--sql-chrome-border);color:var(--sql-comment);font-family:var(--mono);font-size:.8rem;line-height:1.5;text-align:right;user-select:none;flex-shrink:0;min-width:2.25rem;border-radius:0;border:none}
.doc-main .sql-block-body.sql-pre--numbered>pre:not(.sql-linenos-col){flex:1;min-width:0}

/* Callouts */
.callout{border-left:3px solid var(--border-strong);background:var(--bg-soft);padding:.85rem 1rem;border-radius:0 var(--radius) var(--radius) 0;margin:1.2rem 0}
.callout .label{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.25rem}
.callout.tip{background:var(--tip-bg);border-color:var(--tip-bd);color:var(--tip-fg)}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn-fg)}
.callout.note{background:var(--note-bg);border-color:var(--note-bd);color:var(--note-fg)}
.callout p{margin:.2rem 0}

/* Demo media */
.doc-media{margin:1.2rem 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-soft)}
.doc-media .frame{aspect-ratio:16/9;width:100%;display:flex;align-items:center;justify-content:center;background:var(--bg-sunken);border-top:1px solid var(--border);color:var(--fg-dim);font-size:13px;text-align:center;padding:1rem}
.doc-media.doc-media--diagram img{width:100%;max-width:720px;height:auto;display:block;margin:0 auto;vertical-align:middle;background:var(--bg)}
.doc-media.doc-media--gif img{width:100%;max-width:720px;height:auto;display:block;margin:0 auto;background:var(--bg-sunken)}
@media(prefers-reduced-motion:reduce){.doc-media.doc-media--gif img{animation:none !important}}
.doc-media .caption{padding:.6rem .9rem;font-size:12.5px;color:var(--fg-muted);border-top:1px solid var(--border);background:var(--bg)}
.doc-media--video .frame::before{content:"▶  Add embed URL";font-size:14px;color:var(--fg-muted)}
.doc-media--video .frame{background:var(--bg-sunken)}

/* Cards on hub */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin:1.2rem 0}
.card{display:block;padding:1.1rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--fg);transition:border-color .12s,background .12s}
.card:hover{border-color:var(--border-strong);background:var(--bg-soft);text-decoration:none}
.card .eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.card h3{margin:.3rem 0 .35rem;font-size:1.05rem}
.card p{margin:0;color:var(--fg-muted);font-size:13.5px}

/* TOC */
.doc-toc{padding:2rem 1rem;position:sticky;top:var(--header-h);align-self:start;max-height:calc(100vh - var(--header-h));overflow:auto;font-size:13px}
.doc-toc .toc-label{font-size:11px;text-transform:uppercase;color:var(--fg-dim);letter-spacing:.06em;font-weight:600;margin-bottom:.5rem}
.doc-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
.doc-toc li a{display:block;padding:.25rem .75rem;color:var(--fg-muted);border-left:2px solid transparent;margin-left:-1px;line-height:1.3}
.doc-toc li a.h3{padding-left:1.5rem;font-size:12.5px}
.doc-toc li a:hover{color:var(--fg);text-decoration:none}
.doc-toc li a.active{color:var(--accent);border-left-color:var(--accent)}

/* Prev / Next */
.prev-next{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0 1.5rem}
@media(max-width:600px){.prev-next{grid-template-columns:1fr}}
.prev-next a{padding:1rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-soft);color:var(--fg);display:block;transition:border-color .12s}
.prev-next a:hover{border-color:var(--accent);text-decoration:none}
.prev-next .dir{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-dim);font-weight:600}
.prev-next .ttl{margin-top:.25rem;font-weight:600;font-size:14.5px}
.prev-next .next{text-align:right}

/* Feedback */
.feedback{margin:2rem 0 1rem;padding:1.1rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-soft)}
.feedback h4{margin:0 0 .5rem;font-size:14px}
.feedback .row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.feedback .row .btn{font-size:13px}
.feedback textarea{width:100%;margin-top:.65rem;min-height:80px;padding:.55rem .7rem;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:6px;font-family:inherit;font-size:13.5px;resize:vertical}
.feedback .thanks{color:var(--tip-fg);font-size:13px}

/* Print / PDF */
@media print{
  .doc-header,.doc-sidebar,.doc-toc,.prev-next,.feedback,.menu-toggle,.no-print,.doc-site-footer{display:none !important}
  .doc-shell{display:block;max-width:none}
  .doc-main{padding:0}
  a{color:inherit;text-decoration:none}
  .doc-media .frame{background:#f1f5f9 !important;color:#475569 !important}
  h1,h2,h3{break-after:avoid}
  pre,table,.callout,.doc-media{break-inside:avoid}
}

/* Mobile toggle */
.menu-toggle{font-size:18px}
.scrim{display:none;position:fixed;inset:var(--header-h) 0 0 0;background:rgba(0,0,0,.4);z-index:20}
.scrim.show{display:block}

/* Mobile overrides — placed last so they win cascade order */
/* Site footer — reference links (below doc-shell) */
.doc-site-footer{border-top:1px solid var(--border);background:var(--bg-soft);padding:2.25rem clamp(1rem,4vw,2rem) 1.5rem;margin-top:0;font-size:14px}
.doc-site-footer__inner{max-width:1480px;margin:0 auto}
.doc-site-footer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.doc-site-footer__heading{margin:0 0 .65rem;font-size:13px;font-weight:600;color:var(--fg)}
.doc-site-footer__muted{margin:0;font-size:13px;color:var(--fg-muted);line-height:1.55}
.doc-site-footer__list{list-style:none;margin:0;padding:0}
.doc-site-footer__list li{margin:0 0 .45rem}
.doc-site-footer__list a{color:var(--fg-muted)}
.doc-site-footer__list a:hover{color:var(--accent)}
.doc-site-footer code{font-size:12px;background:var(--bg);padding:2px 6px;border-radius:4px;border:1px solid var(--border);color:var(--fg-muted)}
.doc-site-footer__bottom{margin:2rem auto 0;padding-top:1.25rem;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--fg-dim)}
.support-links{font-size:14px;line-height:1.6}
@media(max-width:900px){.doc-site-footer__grid{grid-template-columns:1fr 1fr;gap:1.25rem}}
@media(max-width:520px){.doc-site-footer__grid{grid-template-columns:1fr}}

@media(max-width:820px){
  .doc-shell{display:block}
  .doc-main{padding:1.25rem 1rem 3rem}
  .doc-sidebar{position:fixed;inset:var(--header-h) 0 0 0;transform:translateX(-100%);transition:transform .2s;z-index:30;background:var(--bg);width:min(86vw,320px);max-height:none;border-right:1px solid var(--border)}
  .doc-sidebar.open{transform:none}
  .menu-toggle{display:inline-flex !important}
  .doc-search{max-width:none}
}