/* Symbol tabs, job symbol-tabs (the mockup he picked): the top row is one
   tray of big symbols, the lit one in a soft gold glow with a short line
   under its word; the row under it is pills with the symbol beside the
   word, scrolling sideways when they do not fit. Out of index.html for the
   page budget. Grid columns come from `--tabs`, set as the row is drawn. */
.page-tabs{display:grid;grid-template-columns:repeat(var(--tabs,3),minmax(0,1fr));gap:4px;margin:14px 0 8px;padding:5px;
  background:linear-gradient(180deg,#1b1a16,#141310);border:1px solid var(--line-soft);border-radius:20px}
.page-tabs[hidden]{display:none}
.page-tabs button{position:relative;min-width:0;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:0;border-radius:15px;background:none;color:#8f8b81;font:inherit;cursor:pointer}
.page-tabs button svg{width:24px;height:24px;flex:none}
.page-tabs button em{font-style:normal;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-tabs button[aria-current="page"]{color:var(--gold-hi);
  background:radial-gradient(120% 90% at 50% 0%,rgba(var(--gold-rgb),.22),rgba(var(--gold-rgb),.07));box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.35)}
.page-tabs button[aria-current="page"]::after{content:"";position:absolute;bottom:6px;width:16px;height:2px;border-radius:2px;background:var(--gold)}
.page-tabs.sub{display:flex;gap:8px;margin:0 0 8px;padding:0;background:none;border:0;border-radius:0;overflow-x:auto;scrollbar-width:none}
.page-tabs.sub::-webkit-scrollbar{display:none}
.page-tabs.sub button{flex:none;height:44px;flex-direction:row;gap:8px;padding:0 16px;border:1px solid var(--line-soft);border-radius:22px;font-size:15px}
.page-tabs.sub button svg{width:18px;height:18px}
.page-tabs.sub button[aria-current="page"]{background:rgba(var(--gold-rgb),.08);box-shadow:none;border-color:rgba(var(--gold-rgb),.5)}
.page-tabs.sub button[aria-current="page"]::after{content:none}