/*
 * Navigation chrome, the one definition for every page.
 *
 * Lifted from nine byte-identical inline copies. The markup these style is
 * generated by /js/nav.js.
 *
 * The media nesting below is load-bearing and was got wrong once already:
 * flattening these into a single list puts `.tabs-row{display:none}` at every
 * width, which hides the entire navigation on desktop. Anything that collapses
 * the bar belongs inside the 768px query, never outside it.
 *
 * Known page-local survivor: refunds.html hides tab icons below 560px and no
 * other page does. Left where it is rather than imposed on eight pages or
 * silently dropped from one.
 */
.tabs{border-bottom:1px solid var(--border);background:var(--background);position:sticky;top:0;z-index:20}
.tabs-row{display:flex;flex-wrap:wrap;gap:2px;padding:0}
.nav-toggle{display:none;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'Figtree',sans-serif;font-weight:600;font-size:14px;color:var(--foreground);padding:13px 2px}
.nav-toggle[aria-expanded="true"] .ico-menu{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:inline}
.tab{display:inline-flex;align-items:center;gap:8px;padding:14px 14px;font-size:14px;font-weight:500;color:var(--muted-foreground);text-decoration:none;border-bottom:2px solid transparent;transition:color .2s ease-out,border-color .2s ease-out}
.tab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab:hover{color:var(--foreground)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
@media (max-width:768px){
    .tabs-row{display:none;flex-direction:column;flex-wrap:nowrap;gap:0;width:100%;padding-bottom:6px}
    .nav-toggle{display:inline-flex}
    .tabs-row .tab{width:100%;padding:13px 4px 13px 12px;border-bottom:1px solid var(--border);border-left:3px solid transparent}
    .tabs-row .tab.active{border-bottom-color:var(--border);border-left-color:var(--primary)}
    .tabs-row .tab:last-child{border-bottom:none}
}
@media (max-width:560px){
    .tab{padding:12px 9px;font-size:13px;gap:6px}
}