/* SD Plus site-chrome pill — loaded on every page (the header is global),
   kept in its own tiny file so the full membership stylesheet isn't a
   sitewide cost.
   Geometry is inherited from the theme's .sdk-pill so it matches RAFFLES
   exactly; only the fill changes. Outlined in the site's blue rather than
   a second red gradient, so the two pills read as a set instead of
   competing for the same attention. The outline is an inset shadow, not a
   border, so the pill's size still matches RAFFLES to the pixel. */
.sd-mem-pill {
	background: linear-gradient(90deg, #1c7fc4, var(--ccr-blue, #38aee8)) !important;
	color: #fff !important;
	box-shadow: 0 8px 26px rgba(56, 174, 232, 0.45) !important;
}
.sd-mem-pill:hover,
.sd-mem-pill:focus {
	color: #fff !important;
	filter: brightness(1.12);
}

/* Outlined alternative — swap the two blocks to use it. Same geometry,
   lets RAFFLES stay the single loudest control in the header.
.sd-mem-pill {
	background: transparent !important;
	color: var(--ccr-blue, #38aee8) !important;
	box-shadow: inset 0 0 0 1px rgba(56, 174, 232, 0.75) !important;
}
*/

/* Header bar: the two pills as one tight pair. Without this they are
   separate flex children of a space-between row, so the browser puts as
   much air between them as between the logo and the nav. */
.sd-mem-pills {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Drawer: the two pills as even halves of one row, aligned to the same
   edges as the nav links beneath them. The margin reset matters — the
   theme gives .sdk-pill `margin-left: auto` below 900px (to push the lone
   Raffles pill right in the header bar), and inside this row that would
   shove the pills right and blow the gap out to ~40px. */
.sd-mem-drawer-pills {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.sd-mem-drawer-pills .sdk-pill {
	margin: 0 !important;
	flex: 1 1 0;
	text-align: center;
}

@media (max-width: 900px) {
	/* The theme notes the phone header row is already at its width budget
	   (logo + pill + icons + burger must fit 360px), so the bar pill drops
	   out and SD Plus lives in the drawer at that size. */
	.sd-mem-pill--bar { display: none !important; }
	/* The theme pushes the lone Raffles pill right with margin-left:auto;
	   now that it sits in a wrapper, the wrapper carries that. */
	.sd-mem-pills { margin-left: auto; }
}