/**
 * [bd_int_sso_login_button] — front-end layout.
 *
 * Look comes from bd-core-shared: the buttons are `.bd-btn` and the directory picker
 * is a `.bd-form-field`, both in components.css, which this sheet names in its
 * $deps. What is left here is layout only — spacing, widths, wrapping — and
 * every value is a token, so nothing drifts from the rest of the platform.
 *
 * The usual home of the shortcode is a narrow column beside the Divi Login
 * module (8/24 on the Accedi page), so every rule has to hold at a third of a
 * desktop row as well as at 375px.
 */

.bd-int-sso-login {
	margin: var(--bd-space-md) 0 0;
}

.bd-int-sso-login__heading {
	margin: 0 0 var(--bd-space-sm);
	font-weight: var(--bd-fw-medium);
}

/* `.bd-btn` never wraps its text, which suits a toolbar but not a label such
   as "Log in with your institution (IDEM GARR)" or a long university name in a
   column this narrow: it would run out of the box. (0,2,0) beats the shared
   (0,1,0); padding is left alone on purpose, since components.css pins it with
   !important on hover against Divi. */
.bd-int-sso-login .bd-int-sso-login__button {
	max-width: 100%;
	white-space: normal;
	line-height: 1.3;
	text-align: center;
}

.bd-int-sso-login__note {
	margin: var(--bd-space-sm) 0 0;
	font-size: var(--bd-fs-sm);
	color: var(--bd-text-subtle);
}

/* `size="lg"`: the single button fills its column, the one primary action of
   the Accedi page at bd-core-shared's 52px. Height and type size come from
   `.bd-btn--lg` in components.css; only the width is decided here, border-box
   so the padding stays inside the column instead of overflowing it. */
.bd-int-sso-login--lg.bd-int-sso-login--single .bd-int-sso-login__button {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	justify-content: center;
}

/* ── Curated: one full-width ghost button per institution ─────────────────── */

/* !important for the same reason as `.bd-books-list` in components.css: Divi's
   `.et-l--body ul, .entry-content ul` at (0,1,1) adds bullets, a 1em indent and
   23px of bottom padding, and a single class at (0,1,0) loses to it. */
.bd-int-sso-login__list {
	margin: 0;
	padding: 0 !important;
	list-style: none !important;
}

.bd-int-sso-login__item {
	margin: 0 0 var(--bd-space-sm);
}

.bd-int-sso-login .bd-int-sso-login__item .bd-int-sso-login__button {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	text-align: left;
}

.bd-int-sso-login__fallback {
	margin: var(--bd-space) 0 0;
}

/* ── Directory: labelled select plus submit ───────────────────────────────── */

/* Bottom-aligned so the button lines up with the select, not with its label.
   The field's flex-grow outweighs the button's, so on one line the select takes
   the room; once the button wraps under it, it alone fills the row. */
.bd-int-sso-login__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--bd-space-sm);
}

.bd-int-sso-login__form .bd-int-sso-login__field {
	flex: 999 1 220px;
	min-width: 0;
	margin-bottom: 0;
}

.bd-int-sso-login__form .bd-int-sso-login__button {
	flex: 1 1 auto;
}

/* The same height as the `.bd-btn` beside it (44px in components.css, here
   spelled with tokens), so the two read as one control. */
.bd-int-sso-login__form .bd-int-sso-login__select {
	box-sizing: border-box;
	min-height: calc(var(--bd-space-xl) + var(--bd-space-xs));
	max-width: 100%;
}

/* ── layout="stacked" (1.5.0): the Accedi page's right-hand panel ──────────── */

/* Built to match the Divi Login form in the panel beside it: no top margin,
   the root and the form fill the column's height so the button sits on its
   bottom edge. Filling only works when the column above is itself a flex
   column, which is the Divi layout's job, not this sheet's. */
.bd-int-sso-login.bd-int-sso-login--stacked {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin-top: 0;
}

/* A column instead of the wrapping row. The 24px gap is the least room above
   the button; margin-top: auto on the button takes whatever the panel adds. */
.bd-int-sso-login--stacked .bd-int-sso-login__form {
	flex: 1 1 auto;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--bd-space-lg);
}

/* The row-mode flex values would turn into heights in a column. */
.bd-int-sso-login--stacked .bd-int-sso-login__form .bd-int-sso-login__field {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.bd-int-sso-login--stacked .bd-int-sso-login__form .bd-int-sso-login__button {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	width: 100%;
	margin-top: auto;
	justify-content: center;
}

/* The Login module's inputs: exactly 44px, 12px sides, 15px text, white, a
   1px --bd-border-strong boundary, --bd-radius. (0,3,0) beats the shared
   `.bd-form-field select` (0,1,1) and Divi's form selects. */
.bd-int-sso-login--stacked .bd-int-sso-login__form .bd-int-sso-login__select {
	box-sizing: border-box;
	width: 100%;
	height: var(--bd-btn-h);
	min-height: var(--bd-btn-h);
	margin: 0;
	padding: 0 var(--bd-space);
	border: 1px solid var(--bd-border-strong);
	border-radius: var(--bd-radius);
	background-color: var(--bd-white);
	color: var(--bd-text);
	font-size: var(--bd-fs-md);
	line-height: normal;
}

/* Navy ring as on the Login module's fields, 1px off the border; the shared
   field focus uses --bd-accent, which would make the two panels disagree. */
.bd-int-sso-login--stacked .bd-int-sso-login__form .bd-int-sso-login__select:focus {
	outline: 2px solid var(--bd-blue);
	outline-offset: 1px;
	border-color: var(--bd-blue);
}

/* ── Failure notice: [bd_int_sso_login_notice] ────────────────────────────────── */

/* --bd-text on --bd-danger-soft for the message (well above 4.5:1), the
   --bd-danger rule as the non-text cue (5.61:1 on the fill, above 3:1). The
   wording carries the state, so the colour is never the only signal. */
.bd-int-sso-notice {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 var(--bd-space-md);
	padding: var(--bd-space-sm) var(--bd-space);
	border-left: 4px solid var(--bd-danger);
	border-radius: var(--bd-radius);
	background: var(--bd-danger-soft);
	color: var(--bd-text);
}

.bd-int-sso-notice .bd-int-sso-notice__text {
	margin: 0;
	padding: 0;
	color: inherit;
	overflow-wrap: anywhere;
}

/* Report to the library office (1.3.0): layout only. The buttons are bd-core-shared
   `.bd-btn--sm .bd-btn--ghost` (navy on white, 15.50:1) and the details field
   is `.bd-input`, both sized and coloured by components.css. */
.bd-int-sso-notice__report {
	margin: var(--bd-space-sm) 0 0;
}

.bd-int-sso-notice .bd-int-sso-notice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bd-space-sm);
	margin: 0;
	padding: 0;
}

/* `.bd-btn` sets a display, which beats the UA's [hidden] rule: without this
   the copy button and the details field would show before the script runs. */
.bd-int-sso-notice [hidden] {
	display: none !important;
}

.bd-int-sso-notice .bd-int-sso-notice__details {
	display: block;
	width: 100%;
	margin: var(--bd-space-sm) 0 0;
	resize: vertical;
}

.bd-int-sso-notice .bd-int-sso-notice__status {
	margin: 0;
	padding: 0;
	color: inherit;
}

.bd-int-sso-notice .bd-int-sso-notice__status:not(:empty) {
	margin: var(--bd-space-sm) 0 0;
}

/* ── Report page: [bd_int_sso_report] (1.4.0) ───────────────────────────────────── */

/* Layout only: text keeps the theme's colours, the buttons are bd-core-shared
   `.bd-btn--primary`/`--ghost` and the details field `.bd-input`. */
.bd-int-sso-report {
	box-sizing: border-box;
	max-width: 100%;
}

.bd-int-sso-report .bd-int-sso-report__heading {
	margin: 0 0 var(--bd-space-md);
}

.bd-int-sso-report .bd-int-sso-report__flag,
.bd-int-sso-report .bd-int-sso-report__intro,
.bd-int-sso-report .bd-int-sso-report__no-address,
.bd-int-sso-report .bd-int-sso-report__back {
	margin: 0 0 var(--bd-space-md);
	overflow-wrap: anywhere;
}

.bd-int-sso-report .bd-int-sso-report__flag {
	font-weight: 600;
}

.bd-int-sso-report .bd-int-sso-report__label {
	display: block;
	margin: 0 0 var(--bd-space-xs);
	font-weight: 600;
}

.bd-int-sso-report .bd-int-sso-report__details {
	display: block;
	width: 100%;
	margin: 0 0 var(--bd-space-sm);
	resize: vertical;
}

.bd-int-sso-report .bd-int-sso-report__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bd-space-sm);
	margin: 0;
	padding: 0;
}

/* `.bd-btn` sets a display, which beats the UA's [hidden] rule. */
.bd-int-sso-report [hidden] {
	display: none !important;
}

.bd-int-sso-report .bd-int-sso-report__status {
	margin: 0 0 var(--bd-space-md);
	padding: 0;
}

.bd-int-sso-report .bd-int-sso-report__status:empty {
	margin: 0;
}