/* The house tab bar (user, 2026-11-04, copied from Airtable's table tabs): a tinted strip, the open tab raised and
   flush with the page below, hairline dividers, a thin + at the end. First used on Graphs (#fch-tabs); Dashboards'
   own copy lives in dash-attio-draft.css (.ws-tabs). Markup: .tbx > .tbx-l > .tbx-t(.is-on) … + .tbx-add, then .tbx-r. */
.tbx { --tbx-tint:var(--ws-tint, #455DDC); --tbx-line:color-mix(in srgb, var(--tbx-tint) 16%, var(--a-ring, #E6E7EA)); --tbx-bed:var(--sh-bed, var(--a-page, #fff));
  display:flex; align-items:flex-end; height:36px; box-sizing:border-box; position:relative; background:color-mix(in srgb, var(--tbx-tint) 8%, var(--sh-bed, var(--a-card, #fff))); }
.tbx[hidden] { display:none; }
.tbx::after { content:''; position:absolute; left:0; right:0; bottom:0; height:var(--hair, 1px); background:var(--tbx-line); }
.tbx-l { display:flex; align-items:flex-end; flex:1; min-width:0; height:36px; overflow-x:auto; scrollbar-width:none; position:relative; z-index:1; }
.tbx-l::-webkit-scrollbar { display:none; }
.tbx .tbx-t:not(#_) { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; height:35px; margin-bottom:1px; padding:0 16px; font:400 14px/1.3 Inter, system-ui, sans-serif; color:color-mix(in srgb, var(--a-ink, #101112) 62%, transparent); cursor:pointer; white-space:nowrap; position:relative; flex:none; max-width:190px; }
.tbx .tbx-t .nm { overflow:hidden; text-overflow:ellipsis; line-height:1.35; padding-bottom:1px; }   /* line-height 1 sliced the descenders (g, p, y) */
.tbx .tbx-t:not(.is-on):hover { color:var(--a-ink, #101112); }
.tbx .tbx-t:not(.is-on)::after { content:''; position:absolute; right:0; top:11px; bottom:11px; width:1px; background:color-mix(in srgb, var(--tbx-tint) 22%, transparent); }
.tbx .tbx-t:has(+ .tbx-t.is-on)::after { display:none; }
.tbx .tbx-t.is-on:not(#_) { color:var(--a-ink, #101112); font-weight:500; background:var(--tbx-bed); border:1px solid var(--tbx-line); border-bottom:0; border-radius:4px 4px 0 0; height:35.5px; margin-bottom:0; margin-right:5px; padding:0 14px 0 16px; }
.tbx .tbx-t.is-on:not(:first-child) { margin-left:5px; }
.tbx .fl { position:absolute; bottom:0; width:5px; height:5px; overflow:visible; pointer-events:none; }
.tbx .fl-r { left:100%; } .tbx .fl-l { right:100%; transform:scaleX(-1); }
.tbx .fl .f { fill:var(--tbx-bed); } .tbx .fl .s { fill:none; stroke:var(--tbx-line); stroke-width:1; }
.tbx .tbx-add:not(#_) { all:unset; box-sizing:border-box; flex:none; width:32px; height:35px; margin:0 0 1px 8px; display:inline-flex; align-items:center; justify-content:center; color:color-mix(in srgb, var(--a-ink, #101112) 62%, transparent); cursor:pointer; }
.tbx .tbx-add:hover { color:var(--a-ink, #101112); }
.tbx .tbx-r { flex:none; display:flex; align-items:center; gap:6px; height:35px; padding:0 8px 0 12px; position:relative; z-index:1; }
/* the line over the row is the page bar's own bottom line carried on (user, 2026-11-04): none drawn here */
.tbx .tbx-t.is-on:not(#_) { border-top-color:var(--ws-topline, var(--sh-line, var(--tbx-line))); }
html.fch-open .at-pagebar:not(#_):not(#_) { border-bottom-color:var(--ws-topline, var(--sh-line)); }

.tbx .tbx-t .cv { font-size:11px; color:color-mix(in srgb, var(--a-ink, #101112) 62%, transparent); }
.tbx .ws-thin { display:block; flex:none; pointer-events:auto; }
/* the tab's menu + rename box */
.tbx-pop { position:fixed; z-index:200; min-width:170px; padding:6px; border-radius:10px; background:var(--sh-tile, var(--sh-bed, #fff)); border:1px solid var(--a-ring, #E6E7EA); box-shadow:0 8px 24px rgba(0,0,0,.18); font:400 14px/1.3 Inter, system-ui, sans-serif; color:var(--a-ink, #101112); }
.tbx-pop > button { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; height:32px; padding:0 10px; border-radius:7px; cursor:pointer; }
.tbx-pop > button:hover { background:rgba(128,128,128,.12); }
.tbx-pop > button i { font-size:15px; color:color-mix(in srgb, var(--a-ink, #101112) 62%, transparent); }
.tbx-rn { width:300px; padding:6px; box-sizing:border-box; }
.tbx-rn input { width:100%; box-sizing:border-box; height:36px; padding:0 10px; font:inherit; color:inherit; background:transparent; border:2px solid #455DDC; border-radius:8px; outline:0; }
.tbx-rn .f { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.tbx-rn .f button { all:unset; box-sizing:border-box; height:28px; padding:0 12px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; }
.tbx-rn .f button:hover { background:rgba(128,128,128,.12); }
.tbx-rn .f .s { background:#455DDC; color:#fff; } .tbx-rn .f .s:hover { background:#3B4FC0; }

/* the line over any tab bar is the page bar's own bottom line, in the sidebar logo row's colour (--ws-topline, measured by the page) */
html:has(.tbx:not([hidden])) .at-pagebar:not(#_):not(#_) { border-bottom-color: var(--ws-topline, var(--sh-line)) !important; background: var(--ws-sbbg, transparent) !important; }   /* and its colour is the sidebar's (user, 2026-11-04) */

/* the soft shade just above the bar's bottom line, as Airtable's: inside the strip, so the open tab (its own background) sits over it */
.tbx { box-shadow: inset 0 -3px 4px -3px rgba(40, 50, 110, .16); }
/* company search results inside a tab pop-up (Fundamental charts) */
.tbx-res { margin-top: 8px; display: flex; flex-direction: column; }
.tbx-res button { all: unset; box-sizing: border-box; display: flex; gap: 8px; align-items: center; height: 34px; padding: 0 10px; border-radius: 7px; cursor: pointer; font: 400 13px/1 Inter, system-ui, sans-serif; }
.tbx-res button:hover { background: rgba(128,128,128,.12); }
.tbx-res button b { font-weight: 600; }
.tbx-res button .nmx { color: color-mix(in srgb, var(--a-ink, #101112) 55%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* round company logo in a search result (letter tile behind it until / if the image doesn't load) */
.tbx-res .lg { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--a-ink, #101112) 8%, transparent); display: inline-grid; place-items: center; }
.tbx-res .lg i { font: 600 10px/1 Inter, system-ui, sans-serif; font-style: normal; color: color-mix(in srgb, var(--a-ink, #101112) 55%, transparent); }
.tbx-res .lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* Price charts + Graphs name row, as Fundamental charts (user, 2026-11-04): every name the same colour and size as My stocks (14px / 500),
   and "My charts" is a plain label, not a link back */
html:is(:has(#chh-tabs), :has(#fch-tabs)) .at-pagebar:not(#_):not(#_):not(#_) :is(.at-pb-name, .at-pb-crumb, .at-pb-up, .chh-crumb .l, .fch-crumb .l):not(#_) { color: var(--a-ink, #101112) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: -0.07px !important; line-height: 20px !important; }
html:is(:has(#chh-tabs), :has(#fch-tabs)) .at-pagebar:not(#_):not(#_) .at-pb-up:not(#_) { pointer-events: none !important; cursor: default !important; text-decoration: none !important; }

/* nothing in these name rows is a link (Price charts, Graphs, Fundamental charts): no hover tint, no pointer (user, 2026-11-04) */
html:is(:has(#chh-tabs), :has(#fch-tabs), :has(#fch2-tabs)) .at-pagebar:not(#_):not(#_):not(#_) :is(.at-pb-name, .at-pb-crumb, .at-pb-up, .chh-h1, .chh-crumb, .fch-crumb):not(#_) { pointer-events: none !important; cursor: default !important; background: none !important; text-decoration: none !important; }

/* Price charts' name row has no Share button and no ⋮ menu beside Upgrade (user, 2026-11-04: "they don't belong there") */
html:has(#chh-tabs) .at-pagebar:not(#_):not(#_) :is(.at-pb-tools, .cqa-acts):not(#_) { display: none !important; }
/* inside a workspace tab the name row already adds the open chart's name (at-pb-tabc): never name it twice */
.at-pagebar:has(.at-pb-tabc) .chh-crumb { display: none !important; }
/* × on a tab (Graphs, 2026-11-05: "an easier way to X out the tabs"): on hover, and always on the open tab */
.tbx .tbx-t .tbx-x { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-right:-6px; border-radius:4px; flex:none;
  color:color-mix(in srgb, var(--a-ink, #101112) 55%, transparent); opacity:0; }
.tbx .tbx-t:hover .tbx-x, .tbx .tbx-t.is-on .tbx-x, .tbx .tbx-t:focus-visible .tbx-x { opacity:1; }
.tbx .tbx-t .tbx-x:hover { background:color-mix(in srgb, var(--a-ink, #101112) 10%, transparent); color:var(--a-ink, #101112); }

/* Spacing pass (2026-11-07): every label in the strip shares one centre line, the strip's middle (18px down a 36px strip).
   Before, closed tabs sat 1.5px above the toolbar words on the right (35px box at the top + the name's 1px bottom pad),
   and the open tab 0.5px below them. */
.tbx .tbx-t .nm { padding-top:1px; }
.tbx .tbx-t:not(.is-on):not(#_) { padding-top:1px; }
.tbx .tbx-t.is-on:not(#_):not(#_) { padding-bottom:1.5px; }
.tbx .tbx-r { height:36px; }
/* no divider hanging after the last tab when nothing (no +) follows it */
.tbx .tbx-t:last-child::after { display:none; }
/* tabs that run out of room fade into the tools on the right instead of being sliced against them (Superinvestors at
   1024px: "Latest move|🔍"). The strip fills the free width, so the fade only ever lands on a tab that is cut. */
html.aiq-desk .tbx .tbx-l { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
html.aiq-desk .tbx > .tbx-l:not(:last-child) { margin-right: 8px; }   /* and never touch the first tool */