/* ═══════════════════════════════════════════════════════════════
   Boost View page — sub-nav tab strip (Tasks · Logs · Settings)
   and the shared .page / .subtab-pane visibility primitives.
   ═══════════════════════════════════════════════════════════════ */

/* Top-level page sections — only the active one is visible. */
.page { display: none; animation: page-fade .15s ease; }
.page.active { display: block; }
@keyframes page-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Per-page sub-tab panes — only the active one is visible. */
.subtab-pane { display: none; }
.subtab-pane.active { display: block; }

/* Sub-nav strip used by Boost View (and reusable by future pages). */
.page-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--gray-200);
}
.page-subnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    margin-bottom: -1px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    border-bottom: 2px solid transparent;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .12s, border-color .12s;
}
.page-subnav-btn svg { opacity: .6; transition: opacity .12s; }
.page-subnav-btn:hover { color: var(--gray-800); }
.page-subnav-btn:hover svg { opacity: .85; }
.page-subnav-btn.active {
    color: var(--primary, #ef4444);
    border-bottom-color: var(--primary, #ef4444);
    font-weight: 600;
}
.page-subnav-btn.active svg { opacity: 1; color: var(--primary, #ef4444); }