/*
 * The control system: every button, text field and toggle on the site.
 *
 * This file exists because they had drifted. The search submit was a pill with
 * `--space-m` of padding, the range Apply was a 7px rounded rect with
 * `--space-s`, and there were three different text inputs: the search bar at
 * `--radius-full` and `--text-s`, the range boxes at `--radius-s` and
 * `--text-s`, and the search-within-a-facet box at `--radius-s` and `--text-xs`.
 * Five controls, five shapes, no reason for any of it beyond the order they
 * were written in.
 *
 * So the rule is: an element never styles a control. It picks one.
 *
 *   .oview-btn            + --primary | --secondary | --ghost
 *   .oview-field          a text input, a number input, a select
 *   .oview-segmented      a group of mutually exclusive icon buttons
 *
 * with `--s` on any of them for the compact size. Anything that needs a shape
 * this file does not have is a new variant here, not a local override there,
 * because a local override is how the five shapes happened.
 *
 * Every value is a token. The two that matter, --control-h and --control-px,
 * are in the Variable Manager under Controls: change the height once and every
 * button, field and toggle moves together.
 */

/* --- shared box --------------------------------------------------------- */

/*
 * Buttons and fields share a box so they line up when they sit on one row,
 * which they almost always do. Splitting this into two copies is how the
 * search bar ended up 4px taller than the button next to it.
 */
/*
 * ⚠️ BRICKS' FORM ELEMENT RENDERS RAW INPUTS, AND THEY ARE ADDED TO THESE
 * SELECTOR LISTS RATHER THAN RESTYLED SOMEWHERE ELSE.
 *
 * The sign-in and join pages use Bricks' native Form element, which emits plain
 * `input` and `button` with none of this. They came out square and flat beside a
 * search bar and facet fields that have a radius, a hover border and one focus
 * ring - two control languages on one site, which is exactly what
 * `check-controls.js` exists to prevent.
 *
 * Writing the values again in auth.css would have fixed the look and kept the
 * problem: two definitions that agree today. Adding the selectors here means
 * there is still ONE box, one radius and one focus ring, and changing the token
 * moves everything.
 */
.oview-btn,
.oview-field,
.brxe-form button[type="submit"],
.brxe-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.brxe-form textarea,
.brxe-form select,
.oview-comments input[type="submit"],
.oview-comments input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.oview-comments textarea {
	min-height: var(--control-h);
	padding: 0 var(--control-px);
	border: 1px solid transparent;
	/*
	 * ⚠️ --radius-m-2, not --radius-s. Six pixels was the platform's own guess
	 * and twelve is the design's, and the two lived side by side: every control
	 * on a real page was squarer than the same control on the page the design
	 * was signed off on.
	 */
	border-radius: var(--radius-m-2);
	font-family: inherit;
	/*
	 * ⚠️ THE DEFAULT CONTROL AND THE SMALL ONE WERE THE SAME SIZE.
	 *
	 * This was --text-s and `--s` below is --text-xs, and tokens.css says in as
	 * many words that those two are now one value: "the bottom of the scale had
	 * a step nobody could see". So a search box and the show-more link inside a
	 * facet set their type identically, and the only thing separating a default
	 * control from a small one was its height.
	 *
	 * --text-m gives the step back at the end that is being read rather than
	 * glanced at. It moves EVERY control on the site together, which is the
	 * point: a sort dropdown that wanted 13px could not have it on its own -
	 * `check-controls.js` measures one type size across every control on eight
	 * pages, and one field with its own is the thing that check exists to
	 * refuse.
	 */
	/*
	 * ⚠️ THE BAND'S OWN STEP, WHICH IS ACSS'S TOO. This read --text-l while the
	 * paragraph above it said --text-m, so a field was a step louder than the
	 * button a drawing put beside it and than the body copy around it. A band
	 * is its type step and the box that step makes (D224).
	 */
	font-size: var(--text-m);
	line-height: 1.2;
}

.oview-btn--s,
.oview-field--s {
	min-height: var(--control-h-s);
	padding-inline: var(--control-px-s);
	/*
	 * ⚠️ ITS OWN RADIUS, STATED. It used to inherit the base, and the base was
	 * 6px, so the two agreed by accident. The moment the default moved to 12px
	 * the small band was a mix of both - a band that agrees only while nothing
	 * changes is not a band.
	 */
	border-radius: var(--radius-s);
	font-size: var(--text-s);
}

/*
 * The large band, for the control a page is ABOUT.
 *
 * ⚠️ A THIRD SIZE, NOT A SPECIAL CASE. An archive's search bar is the thing the
 * page is for, and the brands design drew it at 50px against 30px buttons. With
 * two bands the only options were to shrink it or to grow every button on the
 * site with it, so the search bar quietly kept a size of its own in a drawing's
 * stylesheet - which is how the mockup page and the promoted page came to
 * disagree about how tall a search box is.
 *
 * Named, tokenised and measured like the other two.
 */
.oview-btn--l,
.oview-field--l {
	min-height: var(--control-h-l);
	padding-inline: var(--control-px-l);
	border-radius: var(--radius-m-2);
	/*
	 * ⚠️ THE BAND IS TALLER, NOT LOUDER. This spent --text-xl, which on site
	 * one's compressed ladder was 15px and read as ordinary. On an ordinary
	 * ladder it is 19px, and an archive's search box shouted its placeholder
	 * at the page it sits on (D224). The height is what makes it the large
	 * band; the type is one step over the body.
	 */
	font-size: var(--text-l);
}

/*
 * ⚠️ THE SUBMIT DOES NOT KEEP ITS OWN TYPE SIZE. The drawing had the input at
 * 16px and the button beside it at 14.5px, which is a real and defensible
 * difference - and it is one size per band or it is not a band. A button and
 * the field it submits sit on the same line at the same size.
 */
.oview-btn--l {
	font-weight: 700;
}

/*
 * One focus ring for everything, on :focus-visible so a mouse click does not
 * draw it. Keyboard-only is the whole point of the distinction.
 */
.oview-btn:focus-visible,
.oview-field:focus-visible,
.oview-segmented__item:focus-visible,
.brxe-form :is( input, textarea, select, button ):focus-visible,
.oview-comments :is( input, textarea, button ):focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

/* --- buttons ------------------------------------------------------------ */

.oview-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	/* Buttons are the one place BuddyBoss leaves the body weight. */
	font-weight: 500;
}

/*
 * ⚠️ `-ink` AND NO BORDER, which is the design's primary rather than the
 * platform's first guess at one.
 *
 * `--color-accent` is the lighter blue and it was carrying white type at 3.1:1.
 * `--color-accent-ink` is the same hue at 4.9:1, and it is what the drawing used
 * - so the mockup page had a readable primary button and every real page had a
 * slightly unreadable one, on the same site, in the same week.
 *
 * The border goes because a filled button does not need an outline of its own
 * colour: it was there so the box measured the same as a secondary's, and the
 * `1px solid transparent` on the base rule already does that.
 */
.oview-btn--primary,
.brxe-form button[type="submit"],
.oview-comments input[type="submit"] {
	background: var(--color-accent-ink);
	border-color: transparent;
	color: var(--color-on-accent);
	font-weight: 700;
}

/*
 * ⚠️ --color-accent-ink-hover, NOT --color-accent-hover. The resting
 * background here is --color-accent-ink, and --color-accent-hover holds the
 * same value, so hovering changed nothing. The colour is restated because
 * `a:hover` outranks this rule's 0-1-0 and would otherwise repaint the label.
 */
.oview-btn--primary:hover,
.oview-btn--primary:focus-visible,
.brxe-form button[type="submit"]:hover,
.brxe-form button[type="submit"]:focus-visible,
.oview-comments input[type="submit"]:hover,
.oview-comments input[type="submit"]:focus-visible {
	background: var(--color-accent-ink-hover);
	border-color: transparent;
	color: var(--color-on-accent);
}

/*
 * The bordered white button: BuddyBoss's Send Message. Its border is the same
 * one the fields use, so a secondary button beside a text field reads as one
 * row of controls rather than two competing boxes.
 */
.oview-btn--secondary {
	background: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-text-body);
	font-weight: 600;
}

.oview-btn--secondary:hover,
.oview-btn--secondary:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent-ink);
}

/*
 * No box until you touch it: "Show more", "Clear all filters".
 *
 * It keeps the system's padding rather than a tighter one of its own. The
 * tighter version looked fine in isolation and wrong the moment it sat next to
 * a chip: the hover well hugged the text while everything beside it had 16px,
 * so the row had one control that looked smaller than it was.
 */
.oview-btn--ghost {
	background: transparent;
	border-color: transparent;

	/*
	 * ⚠️ THE INK, NOT THE FILL. `--color-accent` on white is 3.72:1 and
	 * needs 4.5, and a ghost button is nothing BUT accent-coloured words on the
	 * page background.
	 */
	color: var(--color-accent-ink);
}

.oview-btn--ghost:hover,
.oview-btn--ghost:focus-visible {
	background: var(--color-surface-sunk);
}

/* Square, for a button whose whole content is one icon. */
.oview-btn--icon {
	padding-inline: 0;
	aspect-ratio: 1;
}

/* --- fields ------------------------------------------------------------- */

.oview-field,
.brxe-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.brxe-form textarea,
.oview-comments input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.oview-comments textarea,
.brxe-form select {
	display: block;
	width: 100%;
	min-width: 0;
	/*
	 * ⚠️ SUNK, NOT WHITE. A field on a white card that is also white is a field
	 * defined entirely by its border, and the design drew it as a recessed well
	 * instead. Both existed side by side: white on every real page, sunk on the
	 * page the design was reviewed on.
	 */
	background: var(--color-surface-sunk);
	border-color: var(--color-border);
	color: var(--color-text);
	/* A number input is content-width by default and ignores width:100%
	   without this; a search input carries a UA appearance on Safari. */
	appearance: none;
}

/*
 * ⚠️ A TEXTAREA IS THE ONE FIELD THAT IS NOT ONE LINE.
 *
 * The shared rule above sets `padding: 0 var(--control-px)` and a min-height of
 * one control, which is exactly right for an input and wrong for a box someone
 * types a paragraph into: the first character sits against the top edge and the
 * box is one line tall until it is dragged.
 */
.brxe-form textarea,
.oview-comments textarea {
	min-height: calc(var(--control-h) * 3);
	padding: var(--control-px-s) var(--control-px);
	line-height: 1.5;
	resize: vertical;
}

.oview-field::placeholder,
.brxe-form :is( input, textarea )::placeholder,
.oview-comments :is( input, textarea )::placeholder {
	color: var(--color-text-muted);
}

.oview-field:hover,
.brxe-form :is( input, textarea, select ):hover,
.oview-comments :is( input, textarea ):hover {
	border-color: var(--color-border-strong);
}

.oview-field:focus-visible,
.brxe-form :is( input, textarea, select ):focus-visible {
	border-color: var(--color-accent);
}

/*
 * A field and its label. Used wherever the label is visible; a hidden label
 * still uses .oview-visually-hidden and needs no wrapper.
 */
.oview-control-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	min-width: 0;
}

.oview-control-group__label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* --- segmented control -------------------------------------------------- */

/*
 * Mutually exclusive icon buttons in one bordered box: the grid/list view
 * switcher. One box with a border, not two adjacent buttons, because the
 * grouping is the message. The state lives on aria-current rather than a
 * class, so the styling and what a screen reader announces cannot drift, and
 * it is aria-current and not aria-pressed because these are links: they load a
 * URL, which is what makes a view shareable and the back button work.
 */
/*
 * ⚠️ IT SITS BESIDE THE SEARCH BAR, SO IT IS THE SAME HEIGHT AS ONE.
 *
 * This was built to `--control-h` back when the search bar was 30px too. The
 * control scale grew a large band and the search bar moved to it; the switch
 * stayed behind, so a 50px field and a 50px Search button sat next to a 30px
 * toggle with two 18px icons squeezed into it. Nothing was broken and the row
 * simply looked wrong, which is the hardest kind of wrong to file a bug about.
 *
 * `--control-h-l`, the same token the field beside it reads, so the row cannot
 * come apart again the next time the scale moves.
 */
.oview-segmented {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	padding: var(--space-3xs);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m-2);
	background: var(--color-surface);
}

.oview-segmented__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Sized so the group lands on exactly --control-h-l and lines up with the
	   field beside it: the track's padding and border on each side. */
	width: calc(var(--control-h-l) - var(--space-3xs) * 2 - 2px);
	height: calc(var(--control-h-l) - var(--space-3xs) * 2 - 2px);
	padding: 0;
	border: 0;
	border-radius: var(--radius-m-2);
	background: transparent;
	color: var(--color-text-muted);
	cursor: pointer;
}

.oview-segmented__item:hover {
	background: var(--color-surface-on);
	color: var(--color-text);
}

.oview-segmented__item[aria-current="true"] {
	background: var(--color-surface-on);
	color: var(--color-text);
}

.oview-segmented__item svg {
	/* The icon is the whole label, so it takes the room a label would. At 1.8rem
	   in a 40px tile it read as a small mark in a large box. */
	width: 2rem;
	height: 2rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- toolbar ------------------------------------------------------------ */

/*
 * The row above a result list: a count on the left, controls on the right.
 * Wraps rather than shrinking, because at 375px the count and a view switcher
 * do not fit on one line and a squashed switcher is worse than a second row.
 */
.oview-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
}

.oview-toolbar__end {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-inline-start: auto;
}

/* --- panel --------------------------------------------------------------- */

/*
 * A titled card in a sidebar: a facet, the sort control, and whatever comes
 * next. One class rather than each element carrying its own six properties,
 * because the copies are what drift - the sort was a bare form beside four
 * bordered cards and read as something that had been forgotten.
 */
.oview-panel {
	padding: var(--space-s);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-l-2);
	background: var(--color-surface);
	transition: border-color 150ms ease;
}

/*
 * The border lifts on hover, the way a field does. :focus-within as well, so
 * reaching the card with a keyboard says what reaching it with a mouse says -
 * and it fires when a search box or an option inside takes focus, which is the
 * case that matters.
 */
.oview-panel:hover,
.oview-panel:focus-within {
	border-color: var(--color-border-strong);
}

/*
 * A number input draws spinners, and they are wrong here twice over: a year is
 * not a quantity you nudge, and the arrows sit exactly where the eye goes for
 * the value. Both rules are needed - the pseudo-element for WebKit, and
 * appearance: textfield for Firefox, which ignores it.
 */
.oview-field[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

.oview-field[type="number"]::-webkit-outer-spin-button,
.oview-field[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* --- supporting text ---------------------------------------------------- */

/*
 * The muted line that explains a result set: "7,823 fragrances with 500+ votes,
 * best first", "Filtering by". One class, because there were two of these on
 * one page at two sizes and they were meant to be the same thing.
 *
 * --text-s and not --text-xs: this is a sentence someone reads, not a count
 * they glance at, and 12px is the legibility floor rather than a target.
 */
.oview-subtext {
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--color-text-muted);
}

/* --- shared utility ----------------------------------------------------- */

/*
 * Present for a screen reader, absent for everyone else. Not display:none,
 * which would hide it from both. check-mobile.js skips clipped elements for
 * tap size and contrast but still counts headings, which is the same rule.
 */
.oview-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * The submit button is a flex box like every other button here.
 *
 * Only the parts .oview-btn adds beyond the shared box: the shared rule above
 * already gave it the height, padding, radius and focus ring.
 */
.brxe-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	cursor: pointer;
	font-weight: 500;
	width: 100%;
}

/* Bricks stacks label and input; give the pair the same rhythm as ours. */
.brxe-form .form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin-block-end: var(--space-s);
}

.brxe-form label {
	font-size: var(--text-xs);
	color: var(--color-text-body);
}