{% extends "base.html" %}
{% block content %}
<div class="phead" style="padding-bottom:0;border-bottom:0">
  <div class="kicker">Settings</div>
  <h1>{% block heading %}Settings{% endblock %}</h1>
  <p class="lede">{% block lede %}{% endblock %}</p>
</div>
<div class="subnav">
  <a href="/console/settings"        data-sub="org">organization</a>
  <a href="/console/settings/tokens" data-sub="tokens">tokens</a>
  <a href="/console/settings/mcp"    data-sub="mcp">mcp</a>
</div>
{% block settings %}{% endblock %}
<style>
  /* Same quiet voice as the top-bar nav: no tabs, no rules — the active item
     simply carries the ink weight while the others stay muted. */
  .subnav{display:flex; gap:20px; margin:var(--s5) 0 var(--s5);}
  .subnav a{font-size:14px; text-decoration:none; color:var(--muted);
            transition:color .15s ease;}
  .subnav a:hover{color:var(--ink)}
  .subnav a.active{color:var(--ink); font-weight:500;}
</style>
<script>
document.querySelectorAll(".subnav a").forEach(a => {
  if (a.dataset.sub === "{{ subnav }}") a.classList.add("active");
});
</script>
{% endblock %}