/* Area: tools-index. /tools/ toolbar, search, hub chips and hub sections. Hub pages may include it. */
/* ---------- Tools directory ---------- */
.tools-dir { position: relative; padding-bottom: clamp(48px, 6vw, 96px); }
.tool-bar { padding-block: 14px; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 20; }
@media (min-width: 1024px) { .tool-bar { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); } }
.tool-bar.is-static { position: static; }
.tool-bar .wrap { display: grid; gap: 12px; }
.tsearch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.tsearch-box { position: relative; flex: 1 1 320px; max-width: 560px; }
.tsearch-box .ic { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tsearch-box input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 400 1rem/1.3 var(--font-body); }
.tsearch-box input:hover { border-color: var(--muted); }
.tsearch-box input:focus { outline: none; border-color: var(--fg); background: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.tcount { font: 500 .8125rem/1.4 var(--font-mono); color: var(--muted); }
.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: 500 .875rem/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
@media (pointer: coarse) { .chip-btn { min-height: 44px; } }
.chip-btn:hover { border-color: var(--fg); }
.chip-btn .n { font: 500 .6875rem/1 var(--font-mono); color: var(--muted); }
.chip-btn[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.chip-btn[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.hub-sec { padding-top: clamp(40px, 5vw, 64px); scroll-margin-top: calc(var(--header-h) + 16px); }
@media (min-width: 1024px) { .hub-sec { scroll-margin-top: calc(var(--header-h) + var(--bar-h, 140px)); } }
.hub-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; margin-bottom: 20px; }
.hub-ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-ink); }
.hub-ic .ic { width: 22px; height: 22px; }
.hub-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); letter-spacing: -.035em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hub-head h2 .n { font: 500 .8125rem/1 var(--font-mono); color: var(--muted); letter-spacing: 0; }
.hub-head p { color: var(--muted); max-width: 52rem; font-size: 1rem; }
.tools-empty { margin-top: 40px; }