/* ===========================================================
   Tools hub page — outer tool-switcher tabs
   =========================================================== */

.tl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-light);
}
.tl-tab {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tl-tab:hover { border-color: var(--maroon); }
.tl-tab.active { background: var(--black); border-color: var(--black); color: var(--bg-yellow); }

.tl-panel { display: none; margin-top: 34px; }
.tl-panel.active { display: block; }

.tl-panel-head { margin-bottom: 22px; }
.tl-panel-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: var(--black);
}
.tl-panel-intro {
  font-family: var(--font-body);
  color: var(--gray-dark);
  margin-top: 8px;
  max-width: 70ch;
}