/* layouts/tool.html — host and space tools: side menu on desktop, a tab strip on phones. */
.tool { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h)); }
.tool > * { min-width: 0; }      /* the tab strip scrolls inside the screen instead of widening the page */
@media (min-width: 992px) { .tool { grid-template-columns: 248px minmax(0, 1fr); } }
.tool-nav { border-bottom: 1px solid var(--line); background: var(--surface); }
.tool-nav ul { list-style: none; margin: 0; padding: 6px var(--space-4); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.tool-nav ul::-webkit-scrollbar { display: none; }
.tool-nav li { flex: none; }
@media (max-width: 991.98px) { .tool-nav { position: sticky; top: var(--topbar-h); z-index: 1010; } }
.tool-nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text-muted); text-decoration: none; font-weight: 600; white-space: nowrap; }
.tool-nav a:hover { background: var(--tint); color: var(--text); }
.tool-nav a[aria-current="page"] { background: var(--tint); color: var(--text); }
@media (min-width: 992px) {
  .tool-nav { border-bottom: 0; border-right: 1px solid var(--line); }
  .tool-nav ul { flex-direction: column; padding: var(--space-4) 12px; position: sticky; top: var(--topbar-h);
    -webkit-mask-image: none; mask-image: none; }
}
.tool-main { padding: var(--space-5) var(--space-4) var(--space-7); max-width: 1000px; width: 100%; }
@media (min-width: 992px) { .tool-main { padding: var(--space-6) var(--space-6) var(--space-8); } }