/*
 * Shared tab navigation — clean underline style.
 *
 * Pattern:
 *   <div class="tabs">
 *     <button class="tab active" data-tab="x">Foo</button>
 *     <button class="tab" data-tab="y">Bar</button>
 *     <button class="tab locked" data-tab="z" disabled>
 *       <span class="tab-lock"><svg .../></span> Baz
 *     </button>
 *   </div>
 *   <div class="tab-panel active" id="panel-x">…</div>
 *   <div class="tab-panel" id="panel-y">…</div>
 *
 * Pages may override .tab-panel.active locally if the panel needs a
 * different layout (e.g. flex column with gap).
 */
.tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid #1f1f1f;
}
.tab {
    padding: 10px 2px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #777;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s, border-color .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tab.active { color: #fff; border-bottom-color: #fff; }
.tab:hover:not(.active):not(.locked) { color: #ccc; }
.tab.locked {
    color: #3d3d3d;
    cursor: not-allowed;
}
.tab.locked:hover { color: #3d3d3d; }
.tab-lock { display: inline-flex; }
.tab-lock svg { width: 11px; height: 11px; opacity: .8; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }