/*
 * The composer's type picker (1.24.0): the pinned quick types as a segmented control, and "More types" as a popover
 * with search, a rail of groups and described items. Dark by default and light from the kit's tokens; logical
 * properties throughout, so RTL needs no extra rules. Without scripts the panel opens under the trigger as a list.
 */

/* The network's accent (R-076: :root --nx-accent through the kit bridge). The soft tint is mixed from it, so a network
   that sets only --nx-accent still gets a matching tint; the kit's own tint where color-mix is missing. */
#nxc-member:not(#nx-shield):not(#nx-shield) { --nxe-soft: var(--nx-accent-soft); --nxe-soft: color-mix(in srgb, var(--nx-accent) 14%, transparent); }

/* Pinned quick types: one segmented control. */
#nxc-member .nxe-seg:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: stretch; padding: 2px; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-surface); gap: 2px; }
#nxc-member .nxe-seg .nxp-kind__chip.nxe-seg__item:not(#nx-shield):not(#nx-shield) { min-block-size: 1.875rem; padding: 0 0.75rem; border: 0; border-radius: var(--nx-radius, 5px); background: transparent; color: var(--nx-text-secondary); }
#nxc-member .nxe-seg .nxp-kind__chip.nxe-seg__item:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); color: var(--nx-text-primary); }
#nxc-member .nxc-composer:has(#nxp-kind-update:checked) .nxe-seg__item[data-kind="update"]:not(#nx-shield):not(#nx-shield),
#nxc-member .nxc-composer:has(#nxp-kind-publication:checked) .nxe-seg__item[data-kind="publication"]:not(#nx-shield):not(#nx-shield),
#nxc-member .nxc-composer:has(#nxp-kind-job:checked) .nxe-seg__item[data-kind="job"]:not(#nx-shield):not(#nx-shield),
#nxc-member .nxc-composer:has(#nxp-kind-event:checked) .nxe-seg__item[data-kind="event"]:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-elevated); color: var(--nx-text-primary); box-shadow: inset 0 0 0 1px var(--nx-border-strong), var(--nx-shadow-sm); }

/* With the script on, the chosen type shows as a removable chip instead of its plain label. */
#nxc-member .nxc-composer[data-nxe-pick-on] .nxp-kind__chip--extra:not(#nx-shield):not(#nx-shield) { display: none !important; }

/* The trigger. */
#nxc-member .nxe-pick:not(#nx-shield):not(#nx-shield) { position: relative; display: inline-block; }
#nxc-member .nxe-pick > summary:not(#nx-shield):not(#nx-shield) { list-style: none; }
#nxc-member .nxe-pick > summary:not(#nx-shield):not(#nx-shield)::-webkit-details-marker { display: none; }
#nxc-member .nxe-pick__open:not(#nx-shield):not(#nx-shield) { gap: 0.375rem; }
#nxc-member .nxe-pick__open > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield) { opacity: 0.7; transform: rotate(90deg); transition: transform var(--nx-motion-fast, 120ms) var(--nx-ease-standard, ease); }
#nxc-member .nxe-pick[open] > .nxe-pick__open:not(#nx-shield):not(#nx-shield) { color: var(--nx-text-primary); border-color: var(--nx-accent); background: var(--nxe-soft); }
#nxc-member .nxe-pick[open] > .nxe-pick__open > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield) { transform: rotate(-90deg); }
#nxc-member .nxe-pick__open:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: 2px; }

/* The panel. Without scripts: under the trigger. With scripts: fixed, placed by type-picker.js (--nxe-x, --nxe-y). */
#nxc-member .nxe-pick__panel:not(#nx-shield):not(#nx-shield) { position: absolute; z-index: 40; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 0; display: flex; flex-direction: column; inline-size: min(40rem, calc(100vw - 2rem)); max-block-size: min(32rem, 75vh); overflow: hidden; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-elevated); color: var(--nx-text-primary); box-shadow: var(--nx-shadow-lg); font-family: var(--nx-font-sans, inherit); }
#nxc-member .nxe-pick[data-nxe-js] .nxe-pick__panel:not(#nx-shield):not(#nx-shield) { position: fixed; inset: auto; inset-block-start: var(--nxe-y, 0); left: var(--nxe-x, 0); inline-size: var(--nxe-w, 40rem); max-block-size: var(--nxe-h, 32rem); transform-origin: var(--nxe-origin, top left); animation: nxe-pick-in var(--nx-motion-fast, 120ms) var(--nx-ease-standard, ease); }
@keyframes nxe-pick-in { from { opacity: 0; transform: translateY(var(--nxe-from, -4px)) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #nxc-member .nxe-pick[data-nxe-js] .nxe-pick__panel:not(#nx-shield):not(#nx-shield) { animation: none; } #nxc-member .nxe-pick__open > .nxc-icon:last-child:not(#nx-shield):not(#nx-shield) { transition: none; } }

/* Sticky header: title, close and search. */
#nxc-member .nxe-pick__head:not(#nx-shield):not(#nx-shield) { flex: none; display: grid; gap: 0.625rem; padding: 0.875rem 0.875rem 0.75rem; border-block-end: 1px solid var(--nx-border-default); background: var(--nx-bg-elevated); }
#nxc-member .nxe-pick__top:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
#nxc-member .nxe-pick__title:not(#nx-shield):not(#nx-shield) { margin: 0; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; color: var(--nx-text-primary); }
#nxc-member .nxe-pick__close:not(#nx-shield):not(#nx-shield) { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; margin: -0.25rem; padding: 0; border: 0; border-radius: var(--nx-radius, 5px); background: transparent; color: var(--nx-text-muted); cursor: pointer; }
#nxc-member .nxe-pick__close[hidden]:not(#nx-shield):not(#nx-shield) { display: none; }
#nxc-member .nxe-pick__close:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); color: var(--nx-text-primary); }
#nxc-member .nxe-pick__close:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: 0; }
#nxc-member .nxe-pick__search:not(#nx-shield):not(#nx-shield) { position: relative; margin: 0; }
#nxc-member .nxe-pick__search[hidden]:not(#nx-shield):not(#nx-shield) { display: none; }
#nxc-member .nxe-pick__search > .nxc-icon:not(#nx-shield):not(#nx-shield) { position: absolute; inset-inline-start: 0.75rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--nx-text-muted); pointer-events: none; }
#nxc-member .nxe-pick__q:not(#nx-shield):not(#nx-shield) { box-sizing: border-box; inline-size: 100%; block-size: 2.5rem; margin: 0; padding: 0 0.75rem 0 2.375rem; padding-inline: 2.375rem 0.75rem; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-surface); color: var(--nx-text-primary); font: inherit; font-size: 0.875rem; line-height: 1; appearance: none; box-shadow: none; }
#nxc-member .nxe-pick__q:not(#nx-shield):not(#nx-shield)::placeholder { color: var(--nx-text-muted); opacity: 1; }
#nxc-member .nxe-pick__q:hover:not(#nx-shield):not(#nx-shield) { border-color: var(--nx-border-strong); }
#nxc-member .nxe-pick__q:focus:not(#nx-shield):not(#nx-shield) { outline: none; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nxe-soft); }

/* Body: the rail of groups, then the items; each scrolls on its own. */
#nxc-member .nxe-pick__body:not(#nx-shield):not(#nx-shield) { flex: 1 1 auto; display: grid; grid-template-columns: 11rem minmax(0, 1fr); min-block-size: 0; }
#nxc-member .nxe-pick__rail:not(#nx-shield):not(#nx-shield) { overflow: auto; padding: 0.5rem; border-inline-end: 1px solid var(--nx-border-default); background: var(--nx-bg-surface); overscroll-behavior: contain; }
#nxc-member .nxe-pick__rail ul:not(#nx-shield):not(#nx-shield) { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
#nxc-member .nxe-pick__rail li[hidden]:not(#nx-shield):not(#nx-shield) { display: none; }
#nxc-member .nxe-pick__rl:not(#nx-shield):not(#nx-shield) { display: flex; align-items: center; gap: 0.5rem; min-block-size: 2rem; padding: 0 0.625rem; border-radius: var(--nx-radius, 5px); color: var(--nx-text-secondary); font-size: 0.8125rem; text-decoration: none; }
#nxc-member .nxe-pick__rl:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); color: var(--nx-text-primary); text-decoration: none; }
#nxc-member .nxe-pick__rl[aria-current="true"]:not(#nx-shield):not(#nx-shield) { background: var(--nxe-soft); color: var(--nx-text-primary); box-shadow: inset 2px 0 0 var(--nx-accent); }
[dir="rtl"] #nxc-member .nxe-pick__rl[aria-current="true"]:not(#nx-shield):not(#nx-shield) { box-shadow: inset -2px 0 0 var(--nx-accent); }
#nxc-member .nxe-pick__rl:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: -2px; }
#nxc-member .nxe-pick__rl .nxc-icon:not(#nx-shield):not(#nx-shield) { flex: none; color: var(--nx-text-muted); }
#nxc-member .nxe-pick__list:not(#nx-shield):not(#nx-shield) { overflow: auto; padding: 0.25rem 0.5rem 0.75rem; overscroll-behavior: contain; scroll-padding-block: 2.5rem 0.5rem; }
#nxc-member .nxe-pick__groups:not(#nx-shield):not(#nx-shield), #nxc-member .nxe-pick__items:not(#nx-shield):not(#nx-shield) { margin: 0; padding: 0; list-style: none; }
#nxc-member .nxe-pick__group[hidden]:not(#nx-shield):not(#nx-shield), #nxc-member .nxe-pick__row[hidden]:not(#nx-shield):not(#nx-shield), #nxc-member .nxe-pick__none[hidden]:not(#nx-shield):not(#nx-shield) { display: none; }
#nxc-member .nxe-pick__gh:not(#nx-shield):not(#nx-shield) { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; gap: 0.375rem; margin: 0; padding: 0.75rem 0.5rem 0.375rem; background: var(--nx-bg-elevated); font: 600 0.6875rem/1 var(--nx-font-mono, monospace); letter-spacing: 0.1em; text-transform: uppercase; color: var(--nx-text-muted); }

/* Items: icon, name and line, chips, tick. */
#nxc-member .nxe-pick__item:not(#nx-shield):not(#nx-shield) { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto 1rem; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: var(--nx-radius, 5px); color: var(--nx-text-secondary); cursor: pointer; }
#nxc-member .nxe-pick__item:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); color: var(--nx-text-primary); }
#nxc-member .nxe-pick__item[data-active]:not(#nx-shield):not(#nx-shield) { background: var(--nxe-soft); color: var(--nx-text-primary); box-shadow: inset 0 0 0 1px var(--nx-accent); }
#nxc-member .nxe-pick__ic:not(#nx-shield):not(#nx-shield) { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius, 5px); background: var(--nx-bg-surface); color: var(--nx-text-primary); }
#nxc-member .nxe-pick__item[data-active] .nxe-pick__ic:not(#nx-shield):not(#nx-shield) { border-color: var(--nx-accent); color: var(--nx-accent-text, var(--nx-accent)); }
#nxc-member .nxe-pick__txt:not(#nx-shield):not(#nx-shield) { display: grid; gap: 0.125rem; min-inline-size: 0; }
#nxc-member .nxe-pick__name:not(#nx-shield):not(#nx-shield) { font-size: 0.875rem; font-weight: 600; color: var(--nx-text-primary); }
#nxc-member .nxe-pick__desc:not(#nx-shield):not(#nx-shield) { overflow: hidden; font-size: 0.8125rem; line-height: 1.35; color: var(--nx-text-muted); text-overflow: ellipsis; white-space: nowrap; }
#nxc-member .nxe-pick__badges:not(#nx-shield):not(#nx-shield) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
#nxc-member .nxe-pick__badge:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; min-block-size: 1.25rem; padding: 0 0.5rem; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius-sm, 2px); font-size: 0.6875rem; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--nx-text-secondary); }
#nxc-member .nxe-pick__badge[data-tone="review"]:not(#nx-shield):not(#nx-shield) { border-color: transparent; background: var(--nx-caution-soft); color: color-mix(in srgb, var(--nx-caution) 75%, var(--nx-text-primary)); } /* stronger caution ink: AA on its tint in both modes and after a runtime switch */
#nxc-member .nxe-pick__badge[data-tone="earn"]:not(#nx-shield):not(#nx-shield) { border-color: transparent; background: var(--nx-positive-soft); color: var(--nx-positive); }
#nxc-member .nxe-pick__badge[data-tone="members"]:not(#nx-shield):not(#nx-shield) { border-color: transparent; background: var(--nx-info-soft); color: var(--nx-info); }
#nxc-member .nxe-pick__tick:not(#nx-shield):not(#nx-shield) { display: grid; place-items: center; color: var(--nx-accent-text, var(--nx-accent)); visibility: hidden; }
#nxc-member .nxe-pick__item[aria-selected="true"] .nxe-pick__tick:not(#nx-shield):not(#nx-shield) { visibility: visible; }
#nxc-member .nxe-pick__none:not(#nx-shield):not(#nx-shield) { margin: 1.5rem 0.5rem; text-align: center; font-size: 0.875rem; color: var(--nx-text-muted); }

/* Footer: the keys. */
#nxc-member .nxe-pick__foot:not(#nx-shield):not(#nx-shield) { flex: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0.5rem 0.875rem; border-block-start: 1px solid var(--nx-border-default); background: var(--nx-bg-surface); font-size: 0.75rem; color: var(--nx-text-muted); }
#nxc-member .nxe-pick__foot[hidden]:not(#nx-shield):not(#nx-shield) { display: none; }
#nxc-member .nxe-pick__foot kbd:not(#nx-shield):not(#nx-shield) { display: inline-grid; place-items: center; min-inline-size: 1.25rem; block-size: 1.25rem; margin-inline-end: 0.125rem; padding: 0 0.25rem; border: 1px solid var(--nx-border-strong); border-block-end-width: 2px; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-bg-elevated); font: 500 0.6875rem/1 var(--nx-font-mono, monospace); color: var(--nx-text-secondary); }

/* The chosen type, removable. */
#nxc-member .nxe-pick__chosen:not(#nx-shield):not(#nx-shield) { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2rem; padding-inline: 0.625rem 0.25rem; border: 1px solid var(--nx-accent); border-radius: var(--nx-radius-sm, 2px); background: var(--nxe-soft); color: var(--nx-text-primary); font-size: 0.8125rem; font-weight: 500; }
#nxc-member .nxe-pick__chosen[hidden]:not(#nx-shield):not(#nx-shield) { display: none; }
#nxc-member .nxe-pick__chosen-ic:not(#nx-shield):not(#nx-shield) { display: inline-grid; color: var(--nx-accent-text, var(--nx-accent)); }
#nxc-member .nxe-pick__chosen-x:not(#nx-shield):not(#nx-shield) { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; padding: 0; border: 0; border-radius: var(--nx-radius-sm, 2px); background: transparent; color: var(--nx-text-secondary); cursor: pointer; }
#nxc-member .nxe-pick__chosen-x:hover:not(#nx-shield):not(#nx-shield) { background: var(--nx-bg-hover); color: var(--nx-text-primary); }
#nxc-member .nxe-pick__chosen-x:focus-visible:not(#nx-shield):not(#nx-shield) { outline: 2px solid var(--nx-focus); outline-offset: 1px; }

/* Phones: a bottom sheet with a grabber, the rail as a scrolling row of tabs, items without chips on the right. */
@media (max-width: 40em) {
	#nxc-member .nxe-pick .nxp-kind__chip span:not(#nx-shield):not(#nx-shield), #nxc-member .nxe-pick__chosen span:not(#nx-shield):not(#nx-shield) { position: static; inline-size: auto; block-size: auto; clip-path: none; overflow: visible; }
	#nxc-member .nxe-pick .nxp-kind__chip.nxe-pick__open:not(#nx-shield):not(#nx-shield) { inline-size: auto; padding: 0 0.75rem; }
	#nxc-member .nxe-pick__panel:not(#nx-shield):not(#nx-shield), #nxc-member .nxe-pick[data-nxe-js] .nxe-pick__panel:not(#nx-shield):not(#nx-shield) { position: fixed; z-index: var(--nx-z-dialog, 1000); inset: auto 0 0 0; inline-size: auto; max-block-size: 85vh; max-block-size: 85dvh; border-radius: var(--nx-radius, 5px) var(--nx-radius, 5px) 0 0; border-block-end: 0; animation-name: nxe-pick-up; }
	@keyframes nxe-pick-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
	#nxc-member .nxe-pick[open]:not(#nx-shield):not(#nx-shield)::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--nx-z-dialog, 1000) - 1); background: rgba(0, 0, 0, 0.56); }
	#nxc-member .nxe-pick__head:not(#nx-shield):not(#nx-shield) { padding-block-start: 1.25rem; position: relative; }
	#nxc-member .nxe-pick__head:not(#nx-shield):not(#nx-shield)::before { content: ""; position: absolute; inset-block-start: 0.5rem; inset-inline-start: 50%; inline-size: 2.25rem; block-size: 4px; margin-inline-start: -1.125rem; border-radius: var(--nx-radius-sm, 2px); background: var(--nx-border-strong); }
	#nxc-member .nxe-pick__body:not(#nx-shield):not(#nx-shield) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
	#nxc-member .nxe-pick__rail:not(#nx-shield):not(#nx-shield) { padding: 0.5rem 0.75rem; border-inline-end: 0; border-block-end: 1px solid var(--nx-border-default); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
	#nxc-member .nxe-pick__rail ul:not(#nx-shield):not(#nx-shield) { display: flex; gap: 0.375rem; inline-size: max-content; }
	#nxc-member .nxe-pick__rl:not(#nx-shield):not(#nx-shield) { min-block-size: 2.25rem; padding: 0 0.75rem; border: 1px solid var(--nx-border-default); border-radius: var(--nx-radius-sm, 2px); white-space: nowrap; }
	#nxc-member .nxe-pick__rl[aria-current="true"]:not(#nx-shield):not(#nx-shield), [dir="rtl"] #nxc-member .nxe-pick__rl[aria-current="true"]:not(#nx-shield):not(#nx-shield) { border-color: var(--nx-accent); box-shadow: none; }
	#nxc-member .nxe-pick__item:not(#nx-shield):not(#nx-shield) { grid-template-columns: 2.25rem minmax(0, 1fr) 1rem; padding-block: 0.625rem; }
	#nxc-member .nxe-pick__badges:not(#nx-shield):not(#nx-shield) { grid-column: 2; grid-row: 2; justify-content: flex-start; }
	#nxc-member .nxe-pick__desc:not(#nx-shield):not(#nx-shield) { white-space: normal; }
	#nxc-member .nxe-pick__foot:not(#nx-shield):not(#nx-shield) { display: none; }
	#nxc-member .nxe-seg .nxp-kind__chip.nxe-seg__item:not(#nx-shield):not(#nx-shield) { inline-size: 2.25rem; padding: 0; justify-content: center; }
}
@media (max-width: 40em) and (prefers-reduced-motion: reduce) { #nxc-member .nxe-pick__panel:not(#nx-shield):not(#nx-shield) { animation: none; } }

@media (forced-colors: active) {
	#nxc-member .nxe-pick__item[data-active]:not(#nx-shield):not(#nx-shield), #nxc-member .nxe-pick__rl[aria-current="true"]:not(#nx-shield):not(#nx-shield) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
	#nxc-member .nxe-pick__panel:not(#nx-shield):not(#nx-shield) { border-color: CanvasText; }
	#nxc-member .nxe-pick__badge:not(#nx-shield):not(#nx-shield) { border-color: CanvasText; }
}