/* The gaps around the connected browser tab reveal the page underneath. */
.tb-palette { --search-surface:#292929; --search-inactive:rgb(95 95 102 / .18); --search-muted:#b8b8b8; --search-text:#fff; }
:root:not([data-theme=dark]) .tb-palette { --search-surface:#fff; --search-inactive:rgb(225 225 229 / .6); --search-muted:#57575c; --search-text:#141414; }
html:root .tb-palette { box-shadow:none!important; }
html:root .tb-palette [data-part="paletteGrid"],
html:root:not([data-theme=dark]) .tb-palette [data-part="paletteGrid"] {
  background:transparent!important; box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
}
.tb-palette .tb-search-tabs {
  --search-tab-gap:6px; --search-tab-inset:24px;
  position:relative; isolation:isolate; gap:var(--search-tab-gap);
  padding:10px var(--search-tab-inset) 0; background:transparent;
}
html:root .tb-palette .tb-search-tabs .tb-kind[aria-selected=true] { background:transparent; color:var(--search-text)!important; }
html:root .tb-palette .tb-search-tabs .tb-kind[aria-selected=false] { background:var(--search-inactive); }
.tb-palette .tb-tab-shape {
  position:absolute; left:0; bottom:0;
  width:0;
  height:44px; border-radius:12px 12px 0 0; background:var(--search-surface);
  pointer-events:none; transition:transform 220ms cubic-bezier(.23,1,.32,1),width 220ms cubic-bezier(.23,1,.32,1);
}
.tb-palette .tb-search-tabs[data-motion=false] .tb-tab-shape { transition:none; }
@media(prefers-reduced-motion:reduce) { .tb-palette .tb-tab-shape { transition:none; } }
@media(max-width:600px) {
  .tb-palette .tb-search-tabs { --search-tab-gap:4px; --search-tab-inset:24px; }
}

/* Follow the connected tab silhouette while separating white surfaces. */
html:root:not([data-theme=dark]) .tb-palette [data-part="paletteGrid"] {
  filter:drop-shadow(0 4px 10px rgb(0 0 0 / .10)) drop-shadow(0 20px 40px rgb(0 0 0 / .16))!important;
}
/* Center pending content in the visible results area, below the search field. */
.tb-palette [data-part="paletteMain"]:has(.tb-palette-loading),
.tb-palette [data-part="paletteScroll"]:has(>.tb-palette-loading) { height:100%!important; }
.tb-palette .tb-palette-loading {
  display:grid; place-items:center; box-sizing:border-box;
  width:100%; height:100%; margin:0; padding:24px;
  color:var(--search-muted);
}

/* Shared geometry for light and dark search surfaces. */
html:root .tb-palette .tb-search-panel { border-radius:24px; overflow:hidden; }
.tb-palette .tb-kind::before,.tb-palette .tb-kind::after,
.tb-palette .tb-tab-shape::before,.tb-palette .tb-tab-shape::after { content:none!important; }

/* Size each tab around its label; keep the rail scrollable on small screens. */
.tb-palette .tb-search-tabs { overflow-x:auto; scrollbar-width:none; }
.tb-palette .tb-search-tabs .tb-kind {
 flex:1 0 auto; min-width:max-content; max-width:none;
 padding-inline:12px; font-size:12px; white-space:nowrap; line-height:1.25;
}
.tb-palette .tb-font-sample {
 display:inline-grid; place-items:center; flex-shrink:0; font-size:24px;
 font-style:normal; font-synthesis:none; line-height:1;
}
.tb-palette .tb-font-sample:not([data-font-ready]) { color:transparent; }
.tb-palette .tb-font-tile {
 width:64px; height:64px; border-radius:12px;
 background:var(--search-inactive); color:var(--search-text); font-size:40px;
}
.tb-palette .tb-chip .tb-font-sample { width:24px; height:24px; margin-inline-end:6px; }

/* Font names are specimens too, including the hover label. */
.tb-palette .tb-font-name { font-synthesis:none; }

/* The tab rail and search field share the viewport with the scrollable body. */
html:root .tb-palette [data-part="paletteGrid"] {
 display:flex!important; flex-direction:column!important;
 max-height:calc(100dvh - 140px)!important;
}
/* Enlarge the desktop workspace, keeping type at its normal readable size. */
@media(min-width:901px) {
 html:root .tb-palette {
  width:min(1224px,calc(100vw - 48px))!important;
  height:min(951px,calc(100dvh - 140px))!important;
 }
 html:root .tb-palette [data-part="paletteGrid"] { height:100%!important; }
}
.tb-palette .tb-search-tabs { flex-shrink:0; }
html:root .tb-palette .tb-search-panel {
 display:flex; flex-direction:column; flex:1; min-height:0;
}
.tb-palette [data-part="paletteHead"] { flex-shrink:0!important; }
.tb-palette [data-part="paletteBody"] { flex:1!important; min-height:0; }
.tb-palette [data-part="paletteMain"],
.tb-palette [data-part="paletteAside"] { height:100%!important; min-height:0; }
.tb-palette [data-part="paletteScroll"] {
 height:100%!important; min-height:0; overscroll-behavior:contain;
}
/* Let the actual screens fill the cards; labels sit below, without a panel. */
.tb-palette [data-part="cardGrid"] {
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-template-rows:auto!important; gap:20px 14px!important;
}
.tb-palette .tb-category-card {
 display:flex; flex-direction:column; gap:8px; min-width:0; padding:0;
 border:0; border-radius:0; background:none; box-shadow:none;
 color:var(--search-text); text-align:left; font:inherit; cursor:pointer;
}
.tb-palette .tb-category-image,
.tb-palette .tb-interface-image {
 display:block; width:100%; aspect-ratio:8/5; overflow:hidden; border-radius:8px;
}
.tb-palette .tb-category-image img,
.tb-palette .tb-interface-image img {
 display:block; width:100%; height:100%; object-fit:cover; object-position:top;
}
.tb-palette .tb-category-label {
 display:flex; align-items:baseline; gap:6px; font-size:13px; line-height:1.5;
 font-weight:500; overflow-wrap:anywhere;
}
.tb-palette .tb-category-card[aria-pressed="true"] .tb-category-label::after { content:'✓'; }
/* Full rows keep the rightmost preview and its title inside the popup. */
.tb-palette .tb-tiles:has(.tb-interface-result) {
 display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr));
 gap:16px 12px!important; margin:0!important; padding:4px!important;
 overflow:visible!important;
}
.tb-palette .tb-interface-result { display:flex; flex-direction:column; gap:7px; min-width:0; color:var(--search-text); }
.tb-palette .tb-interface-title { font-size:12px; line-height:1.5; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tb-palette :is(.tb-category-card,.tb-interface-result) {
 text-decoration:none; transition:transform 180ms cubic-bezier(.2,.8,.2,1);
}
.tb-palette :is(.tb-category-label,.tb-interface-title) { text-decoration:none; }
.tb-palette :is(.tb-category-card,.tb-interface-result):hover { transform:translateY(-3px); }
/* While the palette scrolls, cards slide under a still pointer: each one lifted and dropped as it passed and was
   repainted, which read as flicker (2026-10-18). Hover waits until scrolling stops (topbar.js sets .is-scrolling). */
.tb-palette.is-scrolling :is(.tb-category-card,.tb-interface-result,.tb-category-term) { pointer-events:none; }
.tb-palette.is-scrolling :is(.tb-category-card,.tb-interface-result):hover { transform:none; }
@media(prefers-reduced-motion:reduce) {
 .tb-palette :is(.tb-category-card,.tb-interface-result) { transition:none; }
 .tb-palette :is(.tb-category-card,.tb-interface-result):hover { transform:none; }
}
.tb-palette [data-interface-preview] {
 object-position:center!important; transform:scale(var(--interface-preview-zoom,1));
}
@media(max-width:599px) {
 .tb-palette .tb-tiles:has(.tb-interface-result) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
 html:root .tb-palette [data-part="paletteGrid"] { max-height:100dvh!important; }
}
@media(max-width:839px) {
 .tb-palette [data-part="paletteAside"] { height:auto!important; flex-shrink:0; }
 .tb-palette [data-part="paletteMain"] { flex:1!important; height:auto!important; }
}

/* Component sources belong with the palette's browse navigation. */
.tb-palette [data-part="paletteAside"]:has(.tb-component-sources) { justify-content:flex-start!important; }
.tb-palette .tb-component-sources {
 display:flex; flex-direction:column; gap:2px; padding-top:16px;
}
.tb-palette .tb-component-sources a {
 display:flex; align-items:center; min-height:40px; padding:8px 12px 8px 40px;
 border-radius:12px; color:var(--search-text); font-size:16px; font-weight:600;
 line-height:1.5; text-decoration:none; white-space:nowrap;
}
.tb-palette .tb-component-sources a:hover { background:var(--search-inactive); }
.tb-palette .tb-component-sources a:focus-visible {
 outline:2px solid var(--search-text); outline-offset:-2px;
}
@media(max-width:839px) {
 .tb-palette .tb-component-sources { flex-direction:row; width:max-content; padding-top:6px; }
 .tb-palette .tb-component-sources a { padding-inline:12px; flex-shrink:0; }
}

/* Every library uses the component menu's three-column, 16:9 preview geometry. */
.tb-palette { --search-preview-gap:12px; }
.tb-palette .tb-preview-grid,
.tb-palette .tb-tiles:has(.tb-interface-result),
.tb-palette [data-part="cardGrid"] {
 display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:16px var(--search-preview-gap)!important; padding:0!important; margin:0!important;
}
.tb-palette .tb-search-media {
 position:relative; display:block; width:100%; aspect-ratio:16/9;
 overflow:hidden; border-radius:12px;
}
.tb-palette .tb-search-media img,.tb-palette .tb-search-media video {
 position:absolute; inset:0; display:block; width:100%; height:100%;
 object-fit:contain; object-position:center;
}
.tb-palette .tb-search-media video { opacity:0; }
.tb-palette .tb-search-media video.is-playing { opacity:1; }
/* A contained video leaves letterboxing; do not show its poster through those gaps. */
@media(prefers-reduced-motion:no-preference) {
 .tb-palette .tb-search-media:has(video.is-playing) img { opacity:0; }
}
.tb-palette .tb-category-label,.tb-palette .tb-interface-title { font-size:12px; line-height:1.45; }
.tb-palette .tb-logo-tiles { width:100%; box-sizing:border-box; gap:8px!important; margin:0!important; padding:0 0 12px!important; }
.tb-palette .tb-logo-tiles .tb-tile { flex:1 0 56px; min-width:56px; }
.tb-palette .tb-logo-tiles .tb-tile [data-part="trendingImgBox"] { margin-inline:auto; }
.tb-palette .tb-overview-categories { display:flex; flex-wrap:wrap; gap:8px; }
.tb-palette .tb-overview-categories small { margin-inline-start:6px; opacity:.6; font-size:11px; }
.tb-palette .tb-browse-kind { align-self:flex-start; color:var(--search-muted); background:none; border:0; padding:4px 0; font:inherit; font-size:12px; cursor:pointer; }
/* Reuse the font listing's specimen markup; only its layout scales to a menu card. */
.tb-palette .fl-brand-card { min-width:0; }
.tb-palette .fl-brand-open {
 aspect-ratio:16/9; min-height:0; height:auto; padding:12px; border:0; border-radius:12px;
 overflow:hidden; gap:6px;
}
.tb-palette .fl-brand-top { min-height:0; gap:6px; }
.tb-palette .fl-brand-name { font-size:11px; gap:5px; min-width:0; }
.tb-palette .fl-brand-logo { width:16px; height:16px; }
.tb-palette .fl-brand-top>span:last-child { display:none; }
.tb-palette .fl-brand-sample,.tb-palette .fl-brand-sample[data-reference] {
 font-size:clamp(15px,1.7vw,27px); line-height:1.15; padding:0; min-height:0;
}
.tb-palette .fl-brand-bottom,.tb-palette .fl-brand-reference-note { font-size:9px!important; line-height:1.25!important; }
.tb-palette .fl-brand-bottom>span:first-child { max-width:100%; }
.tb-palette .fl-brand-bottom>span:last-child,.tb-palette .fl-brand-reference-note { display:none; }
@media(max-width:600px) {
 .tb-palette .tb-preview-grid,.tb-palette .tb-tiles:has(.tb-interface-result),.tb-palette [data-part="cardGrid"] {
  grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px 10px!important;
 }
 .tb-palette .fl-brand-open { padding:9px; }
 .tb-palette .fl-brand-sample,.tb-palette .fl-brand-sample[data-reference] { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { .tb-palette .tb-search-media video { display:none; } }