/* Choosing an AI app (owner, 2026-11-12). Built by tools/custom-connectors/build.py; behaviour in js/connect-picker.js.

   The picker is one sentence: "I want to add Humble to [Claude ▾]", then "Show me how". The pill shows the chosen app
   in its own colours (--cc-bg, --cc-fg, set per app in build.py, 14:1 or more) with its logo on a white circle. It opens
   a list of every AI app; choosing one changes the pill and the button, never the page. Without JavaScript the pill is
   hidden and the list shows as plain links.

   The chips are small logo links on the /mcp/connect/ hero, straight to an app's guide: off-white with ink text (15:1). */

.cc-logo { flex-shrink: 0; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #FFFFFF; }
.cc-logo img { width: 1.125rem; height: 1.125rem; object-fit: contain; }

/* The sentence */
.cc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.cc-pick-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; font-family: 'Lexend', sans-serif; font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 700; line-height: 1.3; color: #1E085D; }
.cc-pick--on-dark .cc-pick-line { color: #FDFCFA; }
.cc-pick-wrap { position: relative; display: inline-block; }

/* The branded pill */
.cc-pill { display: none; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 10px; border: 2px solid var(--cc-fg); border-radius: 999px; background: var(--cc-bg); color: var(--cc-fg); font: inherit; cursor: pointer; box-shadow: 4px 4px 0 #141413; transition: transform .12s ease, box-shadow .12s ease; }
.cc-pick--on-dark .cc-pill { box-shadow: 4px 4px 0 #FEBBCC; }
.cc-pill:hover, .cc-pill[aria-expanded="true"] { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #141413; }
.cc-pick--on-dark .cc-pill:hover, .cc-pick--on-dark .cc-pill[aria-expanded="true"] { box-shadow: 2px 2px 0 #FEBBCC; }
.cc-pill:focus-visible { outline: 3px solid #4705D0; outline-offset: 4px; }
.cc-pick--on-dark .cc-pill:focus-visible { outline-color: #FEBBCC; }
.cc-pill-caret { transform: rotate(-90deg); transition: transform .2s ease; }
.cc-pill[aria-expanded="true"] .cc-pill-caret { transform: rotate(0deg); }
.cc-pill .cc-logo { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }

/* The list of apps: plain links without JavaScript, a menu under the pill with it */
.cc-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 1rem; font-weight: 400; }
.cc-pick-list a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; color: #1E085D; text-decoration: none; }
.cc-pick-list a:hover { background: #F4F2EC; }
.cc-pick--on-dark .cc-pick-list a:hover { background: rgba(253, 252, 250, .12); }
html.cc-js .cc-pick--on-dark .cc-pick-list a:hover { background: #F4F2EC; }
.cc-pick-list a:focus-visible { outline: 2px solid #1E085D; outline-offset: -2px; }
html.cc-js .cc-pick-list a[aria-current="true"] { background: #EEE9FB; }
.cc-opt-text { display: grid; gap: 1px; }
.cc-opt-text b { font-size: 1rem; line-height: 1.3; }
.cc-opt-text small { font-size: 0.8125rem; line-height: 1.3; color: #4A4458; }
.cc-pick-list .cc-logo { background: #F4F2EC; }
.cc-pick--on-dark .cc-pick-list a { color: #FDFCFA; }
.cc-pick--on-dark .cc-pick-list small { color: rgba(253, 252, 250, .8); }

html.cc-js .cc-pill { display: inline-flex; }
html.cc-js .cc-pick-list { position: absolute; top: calc(100% + 10px); left: 0; z-index: 20; width: max-content; min-width: 16rem; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid #E2DED4; border-radius: 16px; background: #FFFFFF; box-shadow: 0 18px 40px -18px rgba(30, 8, 93, .5); }
html.cc-js .cc-pick-list[hidden] { display: none; }
html.cc-js .cc-pick--on-dark .cc-pick-list a { color: #1E085D; }
html.cc-js .cc-pick--on-dark .cc-pick-list small { color: #4A4458; }
html:not(.cc-js) .cc-go { display: none; }

/* Chips on the /mcp/connect/ hero */
.cc-chips { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 4px; vertical-align: middle; }
.cc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 6px; border: 2px solid transparent; border-radius: 999px; background: #FDFCFA; color: #1E085D; font-size: 0.9375rem; font-weight: 700; text-decoration: none; }
.cc-chip .cc-logo { width: 1.75rem; height: 1.75rem; background: #F4F2EC; }
.cc-chip:hover { border-color: #FEBBCC; }
.cc-chip:focus-visible { outline: 3px solid #FEBBCC; outline-offset: 2px; }
.cc-chip--more { padding-left: 14px; background: transparent; border-color: rgba(254, 187, 204, .6); color: #FDFCFA; }

@media (prefers-reduced-motion: reduce) { .cc-pill, .cc-pill-caret { transition: none; } .cc-pill:hover, .cc-pill[aria-expanded="true"] { transform: none; } }
/* Keep an open list above the sections that follow */
.cc-pick { position: relative; z-index: 5; }
/* Sections that fade in as you scroll form their own layers; lift the one holding the picker above the next */
.mc-section:has(.cc-pick), .su-ai-card:has(.cc-pick) { position: relative; z-index: 2; }
/* Without JavaScript: the sentence, then the apps as a list of links under it */
html:not(.cc-js) .cc-pick-line { display: block; }
html:not(.cc-js) .cc-pick-wrap { display: block; margin-top: 12px; }