/*
Rules that change what a Bootstrap class does.

What belongs here:
The selector targets a Bootstrap class or fights one.

Anything that merely fills a gap Bootstrap left is ours,
because Bootstrap hasn't shipped a utility.
and lives in application.css or elsewhere instead.

This MUST be loaded AFTER vendor/bootstrap.css.
Most of these match Bootstrap's own specificity and several use !important,
so that the tiebreak is document order and nothing else.
The load order (manifest) is defined in `_head.html.erb`.
*/

/*
Bootstrap's display utilities (d-flex, d-block, ...) are `!important`,
which beats the `hidden` attribute's `display: none`.
Anything toggled via `element.hidden = true` would stay visible without this.
*/
[hidden] {
  display: none !important;
}

/*
Button-styled disclosure summaries: hide the default triangle marker.
The marker is a browser default rather than a Bootstrap one,
but the rule exists only because we put .btn on a <summary>.
*/
summary.btn {
  list-style: none;
}

summary.btn::-webkit-details-marker {
  display: none;
}

/* Green placeholder text, matching border-success fields */
.form-control.placeholder-success::placeholder {
  color: var(--bs-success);
  opacity: 0.65;
}

.form-control.placeholder-success:focus {
  border-color: var(--bs-success);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

/*
Segmented choice buttons (choice_buttons partial):
fill the column as one bar, every segment equal width.
Overrides .btn-group's inline-flex and the buttons' sizing.
And flex-fill is flex: 1 1 auto,
which sizes to content, so equal segments need flex-basis 0.
*/
.btn-group.choice-buttons {
  display: flex;
}

.btn-group.choice-buttons > .btn {
  flex: 1 1 0;
}