/* ============================================================
   pages/hooks-doc.css — developer hooks reference template
   (sticky TOC + search/filter + hook entries with code)
   Also covers shared developer-doc bits used by api-doc.css.
   ============================================================ */

/* ---- Doc hero ---- */
.doc-hero{position:relative;overflow:hidden;padding-block:var(--s7) var(--s6);border-bottom:1px solid var(--border)}
.doc-hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(640px 300px at 88% -30%,var(--primary-soft),transparent 60%)}
.doc-hero__in{position:relative}
.doc-hero .back-link{margin-bottom:var(--s4)}
.doc-hero h1{font-size:clamp(1.9rem,4vw,var(--t-4xl));display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.doc-hero .count-badge{font-family:var(--font-mono);font-size:var(--t-sm);font-weight:var(--fw-semibold);padding:6px 14px;border-radius:var(--r-full);background:var(--primary);color:var(--on-primary)}
.doc-hero .tagline{font-size:var(--t-lg);color:var(--text-muted);margin-top:var(--s4);max-width:62ch}
.doc-hero .doc-meta{display:flex;gap:var(--s4);margin-top:var(--s5);flex-wrap:wrap;font-size:var(--t-sm);color:var(--text-muted)}
.doc-hero .doc-meta span{display:inline-flex;align-items:center;gap:7px}
.doc-hero .doc-meta a{font-weight:var(--fw-semibold)}

/* ---- Layout ---- */
.hooks-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--s7);align-items:start;padding-block:var(--s7)}
@media (max-width:900px){.hooks-layout{grid-template-columns:1fr;gap:var(--s5)}}
/* grid/flex children must be allowed to shrink below content width so code
   blocks and tables scroll internally instead of overflowing the page */
.hooks-content{min-width:0}
.hook-entry,.hook-category{min-width:0}

/* ---- TOC sidebar ---- */
.hooks-toc{position:sticky;top:calc(var(--header-h) + 12px);max-height:calc(100vh - var(--header-h) - 32px);overflow-y:auto;padding-right:var(--s3)}
.hooks-toc h2{font-family:var(--font-mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-subtle);margin-bottom:var(--s3)}
.toc-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:1px}
.toc-list a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 10px;border-radius:var(--r-md);color:var(--text-muted);font-size:var(--t-sm);font-weight:var(--fw-medium)}
.toc-list a:hover{background:var(--bg-sunken);color:var(--text);text-decoration:none}
.toc-list a.is-active{background:var(--primary-soft);color:var(--primary)}
.toc-list a .c{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-subtle)}
.toc-list a.is-active .c{color:var(--primary)}

@media (max-width:900px){
  .hooks-toc{position:relative;top:0;max-height:none;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;padding:0}
  .hooks-toc .toc-inner{max-height:0;overflow:hidden;transition:max-height var(--normal);padding:0 var(--s4)}
  .hooks-toc.is-open .toc-inner{max-height:60vh;overflow-y:auto;padding:var(--s4)}
}
.toc-toggle{display:none;width:100%;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;padding:14px var(--s4);font-family:var(--font-body);font-weight:var(--fw-semibold);color:var(--text);cursor:pointer}
.toc-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--normal)}
.hooks-toc.is-open .toc-toggle svg{transform:rotate(180deg)}
@media (max-width:900px){.toc-toggle{display:flex}.hooks-toc h2{display:none}}

/* ---- Search + filter bar ---- */
.hooks-controls{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-bottom:var(--s5)}
.search-box{position:relative;flex:1;min-width:160px}
.search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--text-subtle);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.search-box input{width:100%;padding:12px 14px 12px 42px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:var(--t-base);transition:var(--fast)}
.search-box input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
.search-box input::placeholder{color:var(--text-subtle)}
.result-count{font-size:var(--t-sm);color:var(--text-muted);white-space:nowrap}
.result-count b{color:var(--text);font-family:var(--font-mono)}
.cat-chips{display:flex;gap:8px;flex-wrap:wrap}
.cat-chips button{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);font-size:var(--t-xs);font-weight:var(--fw-medium);padding:6px 12px;border-radius:var(--r-full);cursor:pointer;font-family:var(--font-body);transition:var(--fast)}
.cat-chips button:hover{border-color:var(--border-strong);color:var(--text)}
.cat-chips button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}

/* ---- Category + hook entries ---- */
.hook-category{margin-bottom:var(--s7);scroll-margin-top:calc(var(--header-h) + 16px)}
.hook-category > h2{font-size:var(--t-2xl);margin-bottom:var(--s2);display:flex;align-items:center;gap:12px}
.hook-category > h2 .cat-count{font-family:var(--font-mono);font-size:var(--t-sm);font-weight:var(--fw-regular);color:var(--text-subtle)}
.hook-category > .cat-desc{color:var(--text-muted);font-size:var(--t-sm);margin-bottom:var(--s5)}

.hook-entry{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--s5);margin-bottom:var(--s4);scroll-margin-top:calc(var(--header-h) + 16px)}
.hook-entry__head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.hook-entry__name{font-family:var(--font-mono);font-size:var(--t-base);font-weight:var(--fw-semibold);color:var(--text);word-break:break-word}
.badge--action{background:var(--primary-soft);color:var(--primary)}
.badge--filter{background:var(--accent-soft);color:var(--accent)}
.hook-entry__desc{color:var(--text-muted);font-size:var(--t-sm);overflow-wrap:anywhere}
.hook-entry__desc p+p{margin-top:10px}
.hook-sub{font-family:var(--font-mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle);margin:var(--s4) 0 10px}
.param-table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.param-table th,.param-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);font-size:var(--t-sm);vertical-align:top;overflow-wrap:anywhere}
.param-table thead th{background:var(--bg-sunken);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle);font-weight:var(--fw-semibold)}
.param-table tbody tr:last-child td{border-bottom:0}
.param-table code{font-family:var(--font-mono);font-size:.85em;color:var(--primary)}
.param-table .ptype{font-family:var(--font-mono);font-size:.8em;color:var(--text-subtle)}
.hook-source{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-subtle);margin-top:12px;overflow-wrap:anywhere;word-break:break-word}
.hook-source code{background:var(--code-inline-bg);color:var(--code-inline-text);padding:2px 6px;border-radius:var(--r-sm)}
.hook-entry .codeblock{margin-top:var(--s4)}
.no-results{padding:var(--s7);text-align:center;color:var(--text-muted);border:1px dashed var(--border-strong);border-radius:var(--r-lg)}