/*
 * ---- One row of tabs, in a capsule, beside Muse (the Founder, 17 October 2026, 07:56, his iPhone) ----
 * "Match the top sliding bars that we have to look like the ones in Muse. Currently we have two types. We need to unify
 * them, make it like Muse with that same elliptic vibe." Every row of tabs in a page (a section's `nav.tabs`, Settings'
 * `nav.settings-menu`) is this one component: a rounded track (`.tab-strip`, made by terminal-layout.js), the chosen tab a
 * softly filled pill in it with fully rounded ends, the words in the page's own ink. No purple, no underline.
 * When the tabs fit, they share the track in equal segments. When they do not, the row scrolls inside the track, the
 * chosen pill kept in view, and an edge with more past it fades its words out (data-more-left / data-more-right).
 * Linked last, so these rules are the only ones that draw a tab row.
 */
/* Inverted to Muse (the Founder, 17 October 2026, 18:40, his iPhone: "you did a grey background and when you're on the thing it's white. It's supposed to be the opposite"):
   the track is the page's card surface with a hairline, the chosen segment a soft light-grey fill. */
body{--tab-track:var(--surface,#fff);--tab-track-line:#0000001a;--tab-pill:#f2f3f5;--tab-pill-shadow:none;--tab-ink:var(--ink,#24242c);--tab-ink-soft:color-mix(in srgb,var(--tab-ink) 70%,transparent)}
body[data-theme=dark]{--tab-track:var(--surface,#1e2028);--tab-track-line:#ffffff1f;--tab-pill:#2e313b;--tab-pill-shadow:none}

/* The track. */
.tab-strip,:not(.tab-strip)>:is(nav.tabs,nav.settings-menu){position:relative;box-sizing:border-box;min-width:0;max-width:100%;margin:0 0 22px;padding:3px;border:1px solid var(--tab-track-line);border-radius:999px;background:var(--tab-track)}
.tab-strip{display:block;overflow:hidden}

/* The row inside it: one line, scrolling sideways under a finger, no scrollbar of its own. */
:is(nav.tabs,nav.settings-menu){--tab-fade:32px;--fade-l:0px;--fade-r:0px;display:flex;flex-wrap:nowrap;align-items:stretch;gap:2px;overflow-x:auto;overflow-y:hidden;margin:0;padding:0;border:0;background:none;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;white-space:nowrap;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}
.tab-strip>:is(nav.tabs,nav.settings-menu){margin:0;padding:0;border:0;border-radius:999px;background:none}
:is(nav.tabs,nav.settings-menu)::-webkit-scrollbar{display:none;width:0;height:0}
:is(nav.tabs,nav.settings-menu)::after{content:none}
.tab-strip[data-more-left]>nav{--fade-l:var(--tab-fade)}
.tab-strip[data-more-right]>nav{--fade-r:var(--tab-fade)}

/* A tab: a segment of the track; equal segments when the row fits, each its own width when it scrolls. */
:is(nav.tabs,nav.settings-menu)>:is(a,button,.locked-tab){flex:1 1 0;min-width:max-content;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;margin:0;padding:0 16px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--tab-ink-soft);font:inherit;font-size:.875rem;font-weight:500;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;scroll-margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .18s,color .18s,box-shadow .18s}
:is(nav.tabs,nav.settings-menu)>.locked-tab{cursor:default;opacity:.55}
:is(nav.tabs,nav.settings-menu)>:is(a,button):is(.active,[aria-current=page],[aria-selected=true]){background:var(--tab-pill);box-shadow:var(--tab-pill-shadow);color:var(--tab-ink);font-weight:600}
@media (hover:hover){:is(nav.tabs,nav.settings-menu)>:is(a,button):hover{color:var(--tab-ink);background:color-mix(in srgb,var(--tab-pill) 45%,transparent)}
 :is(nav.tabs,nav.settings-menu)>:is(a,button):is(.active,[aria-current=page],[aria-selected=true]):hover{background:var(--tab-pill)}}
/* A tap leaves no ring; a key still shows where focus is. */
:is(nav.tabs,nav.settings-menu)>:is(a,button):focus{outline:none}
:is(nav.tabs,nav.settings-menu)>:is(a,button):focus-visible{outline:2px solid color-mix(in srgb,var(--tab-ink) 55%,transparent);outline-offset:-2px}
:is(nav.tabs,nav.settings-menu)>:is(a,button) .icon{width:16px;height:16px;color:currentColor}

/* Settings beside its page on a wide screen: the same track and pill, standing as a column. */
@media (min-width:701px){
 .settings-grid>.tab-strip.settings-strip{align-self:start;border-radius:22px;padding:4px}
 .settings-grid>.tab-strip.settings-strip>nav.settings-menu{flex-direction:column;overflow:visible;gap:2px;border-radius:18px;-webkit-mask-image:none;mask-image:none}
 .settings-grid>.tab-strip.settings-strip>nav.settings-menu>a{flex:none;justify-content:flex-start;min-width:0;text-align:start}
}
@media (max-width:700px){.tab-strip,:not(.tab-strip)>:is(nav.tabs,nav.settings-menu){margin-bottom:18px}}
@media print{.tab-strip{display:none!important}}

/* Permission choices reuse builder-24's capsule track and grey selected segment.
   These are grouped buttons, not page tabs; confirmation remains a separate action. */
.tab-strip.permission-choices{margin:8px 0 0}
nav.tabs.permission-capsule>button[aria-pressed=true],nav.tabs.permission-capsule>button[aria-pressed=true]:disabled{background:var(--tab-pill);box-shadow:var(--tab-pill-shadow);color:var(--tab-ink);font-weight:600}
nav.tabs.permission-capsule>button:disabled{opacity:1;cursor:default}
.activation-app .sym-segment>.permission-choices{grid-column:1/-1;grid-row:2}
@media print{.tab-strip.permission-choices{display:block!important}}