/* Portal Search front end: search field (page hero / breadcrumb bar) and results page.
   Uses the theme's custom properties, with fallbacks. */

/* ---- Field ---- */
.cmpp-sx-form{display:flex;align-items:center;gap:8px;margin:0}
.cmpp-sx-field{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.cmpp-sx-field svg{position:absolute;left:16px;width:18px;height:18px;fill:none;stroke:var(--muted,#6b7088);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.cmpp-sx-field input[type=search]{width:100%;min-height:48px;padding:10px 16px 10px 44px;border:1px solid var(--line,#e3e6ee);border-radius:999px;background:var(--white,#fff);color:var(--ink,#0E1230);font:inherit;font-size:1rem;box-shadow:var(--shadow-sm,0 2px 10px rgba(14,18,48,.06));-webkit-appearance:none;appearance:none}
.cmpp-sx-field input[type=search]::placeholder{color:var(--muted,#6b7088);opacity:1}
.cmpp-sx-field input[type=search]:focus{outline:2px solid var(--blue-text,#3463D0);outline-offset:2px;border-color:transparent}
.cmpp-sx-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;min-width:48px;padding:10px 24px;border:0;border-radius:999px;background:var(--grad-ui,linear-gradient(105deg,#3463D0,#7A33C9));color:#fff;font:600 1rem/1 inherit;cursor:pointer}
.cmpp-sx-go:hover{filter:brightness(1.08)}
.cmpp-sx-go:focus-visible{outline:2px solid var(--ink,#0E1230);outline-offset:2px}
.cmpp-sx-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- In the page hero (user guide index, FAQ) ---- */
.cmpp-sx-herobox{margin-top:24px;max-width:680px}
.cmpp-sx-form--hero .cmpp-sx-field input[type=search]{min-height:56px;font-size:1.05rem}
.cmpp-sx-form--hero .cmpp-sx-go{min-height:56px;padding:10px 28px}
.cmpp-sx-page .page-hero .cmpp-sx-form{max-width:680px;margin-top:24px}

/* ---- Beside the breadcrumbs (guide articles have no hero) ---- */
.cmpp-crumbbar:has(.cmpp-sx-form--bar){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.cmpp-sx-form--bar{flex:0 1 360px;min-width:220px}
.cmpp-sx-form--bar .cmpp-sx-field input[type=search]{min-height:44px;padding-top:8px;padding-bottom:8px}
.cmpp-sx-form--bar .cmpp-sx-go{min-height:44px;min-width:44px;padding:8px}
@media(max-width:640px){.cmpp-sx-form--bar{flex:1 1 100%}.cmpp-sx-form--hero .cmpp-sx-go{padding:10px 18px}}

/* ---- Results page ---- */
.article .cmpp-sx-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.article .cmpp-sx-layout>.prose.cmpp-sx{max-width:none;margin:0}
.cmpp-sx-side{position:sticky;top:96px}
.cmpp-card .cmpp-sx-fh{margin:14px 0 8px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#6b7088)}
.cmpp-sx-chips{display:flex;flex-wrap:wrap;gap:8px}
.cmpp-sx-chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--line,#e3e6ee);border-radius:999px;background:var(--white,#fff);color:var(--ink,#0E1230);font-size:.95rem;text-decoration:none}
.cmpp-sx-chip:hover{border-color:var(--violet,#7A33C9);color:var(--violet,#7A33C9)}
.cmpp-sx-chip.is-active{background:var(--ink,#0E1230);border-color:var(--ink,#0E1230);color:#fff}
.cmpp-sx-chip:focus-visible{outline:2px solid var(--blue-text,#3463D0);outline-offset:2px}
@media(max-width:980px){.article .cmpp-sx-layout{grid-template-columns:minmax(0,1fr);gap:24px}.cmpp-sx-side{position:static}}
.cmpp-sx .cmpp-sx-note{margin:0 0 20px;padding:12px 16px;border-radius:14px;background:var(--grad-soft,#eef0f5);border:1px solid var(--line,#e3e6ee)}
.cmpp-sx .cmpp-sx-count{margin:0 0 16px;color:var(--muted,#6b7088);font-size:.95rem}
.cmpp-sx .cmpp-sx-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cmpp-sx .cmpp-sx-item{margin:0;padding:20px 24px;background:var(--white,#fff);border:1px solid var(--line,#e3e6ee);border-radius:var(--r,18px);box-shadow:var(--shadow-sm,0 2px 10px rgba(14,18,48,.06))}
.cmpp-sx .cmpp-sx-item h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px;font-size:1.15rem;line-height:1.35}
.cmpp-sx .cmpp-sx-item h3 a{color:var(--ink,#0E1230);text-decoration:underline;text-decoration-color:var(--line,#e3e6ee);text-underline-offset:4px;text-decoration-thickness:2px}
.cmpp-sx .cmpp-sx-item h3 a:hover{color:var(--violet,#7A33C9);text-decoration-color:currentColor}
.cmpp-sx .cmpp-sx-item p{margin:6px 0 0}
.cmpp-sx .cmpp-sx-section{color:var(--ink,#0E1230);font-weight:600;font-size:.95rem}
.cmpp-sx .cmpp-sx-snippet{color:var(--ink-soft,#3a3f5c)}
.cmpp-sx .cmpp-sx-also{color:var(--muted,#6b7088);font-size:.95rem}
.cmpp-sx .cmpp-sx-also a{color:var(--violet,#7A33C9);text-decoration:underline}
.cmpp-sx .cmpp-sx-meta{color:var(--muted,#6b7088);font-size:.9rem;margin-top:10px}
/* FAQ result: a card that opens to the answer */
.cmpp-sx .cmpp-sx-faq summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:700;font-size:1.05rem;line-height:1.35;list-style:none}
.cmpp-sx .cmpp-sx-faq summary::-webkit-details-marker{display:none}
.cmpp-sx .cmpp-sx-faq summary::after{content:"";flex:none;margin-left:auto;width:10px;height:10px;border-right:2px solid var(--muted,#6b7088);border-bottom:2px solid var(--muted,#6b7088);transform:rotate(45deg);transition:transform .15s}
.cmpp-sx .cmpp-sx-faq[open] summary::after{transform:rotate(-135deg)}
.cmpp-sx .cmpp-sx-faq summary:focus-visible{outline:2px solid var(--blue-text,#3463D0);outline-offset:4px;border-radius:8px}
.cmpp-sx .cmpp-sx-faq p{margin:8px 0 0;color:var(--ink-soft,#3a3f5c)}
.cmpp-sx .cmpp-sx-faq summary .cmpp-pill{margin-left:0}
/* The preview line shows while the card is closed */
.cmpp-sx .cmpp-sx-faq[open] ~ .cmpp-sx-preview{display:none}
@media(prefers-reduced-motion:reduce){.cmpp-sx .cmpp-sx-faq summary::after{transition:none}}