/**
 * styles/forms.css
 *
 * SUP Journals Theme — the three pages that are a form: Search, Login and
 * Register.
 *
 * Measured from the Search, Login and Register frames. All three stand an
 * 840px column beside the native OJS sidebar, with the shared row of
 * layout.css carrying the 40px under the header and the 192px above the
 * footer. The fields themselves are the form component of components.css;
 * what lives here is how each page arranges them.
 *
 * Below the tablet breakpoint the columns the canvas fixes — the query
 * field's 730px, the 300px of Login, the 316px of Register — give way to
 * the width of the page, since the canvas draws these pages at 1920 only.
 */

/* ---------------------------------------------------------------
   Shared — the page head of a form

   The canvas gives these three pages 24px between the breadcrumbs and the
   title, where the pages with a module under them give 16.
   --------------------------------------------------------------- */
.sup-search .cmp_breadcrumbs,
.sup-login .cmp_breadcrumbs,
.sup-register .cmp_breadcrumbs { margin-bottom: var(--sup-space-24); }

/* ---------------------------------------------------------------
   Winning over the parent theme's form

   The parent theme styles the fields and buttons of a form by element
   inside .cmp_form — `.cmp_form input[type="text"]`, `.cmp_form .buttons
   button` — which outweighs a component class on its own. Each of the
   design's own values is therefore restated here at that depth, rather
   than with !important.
   --------------------------------------------------------------- */
.pkp_structure_page .cmp_form .sup-field__control {
	box-sizing: border-box;
	width: 100%;
	/* The parent theme caps a field at 20em; the canvas gives it the width
	   of the column it stands in. */
	max-width: 100%;
	padding: 0 var(--sup-space-12);
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-field);
	background-color: var(--sup-color-surface);
	border: var(--sup-field-stroke) solid var(--sup-color-field);
	border-radius: var(--sup-radius-field);
	box-shadow: none;
}

.pkp_structure_page .cmp_form select.sup-field__control {
	padding-right: var(--sup-select-padding-end);
}

.pkp_structure_page .cmp_form .sup-account__actions .sup-btn,
.pkp_structure_page .cmp_form .sup-account__actions a.sup-btn {
	min-height: 35px;
	/* The button's height is the 35px the canvas draws, whatever its line
	   and its stroke, so the two shapes end up the same size. */
	padding: 0 var(--sup-space-20);
	/* The parent theme spaces the buttons of a form itself; here the row's
	   own gap does it. */
	margin: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-semibold);
	border-radius: 0;
}

.pkp_structure_page .cmp_form .sup-account__actions .sup-btn--accent {
	background: var(--sup-color-accent);
	color: var(--sup-color-brand-contrast);
}

.pkp_structure_page .cmp_form .sup-account__actions .sup-btn--accent-outline {
	background: var(--sup-color-surface);
	border: var(--sup-border-width) solid var(--sup-color-accent-border);
	color: var(--sup-color-accent-text);
}

/* The parent theme caps the login form at 17em and floats the groups of
   fields of a form; both would undo the column the canvas draws. */
.pkp_structure_page .page_login .sup-account__form,
.pkp_structure_page .page_register .sup-account__form { max-width: 100%; }

.pkp_structure_page .cmp_form .sup-account__fields,
.pkp_structure_page .cmp_form .sup-account__body,
.pkp_structure_page .cmp_form .sup-account__consent,
.pkp_structure_page .cmp_form .sup-account__actions {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* The parent theme clears the floats of a row of buttons with a
   pseudo-element at each end. In this flex row they would count as items
   and take the width of a button. */
.pkp_structure_page .cmp_form .sup-account__actions::before,
.pkp_structure_page .cmp_form .sup-account__actions::after { content: none; }

/* The air the canvas leaves between the blocks of each page. */
.pkp_structure_page .sup-login .sup-account__actions { margin-top: var(--sup-space-64); }
.pkp_structure_page .sup-register .sup-account__consent { margin-top: var(--sup-space-38); }
.pkp_structure_page .sup-register .sup-account__actions { margin-top: var(--sup-space-38); }

/* Each field of a form is a block of its own; the parent theme's float and
   its half-width columns do not apply to this design. */
.pkp_structure_page .cmp_form .sup-field {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* The query field is sized by the parent theme through .page_search. */
.pkp_structure_page .page_search .sup-search__query {
	padding: 0 var(--sup-space-12);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
	border-radius: var(--sup-radius-field) 0 0 var(--sup-radius-field);
}

/* ---------------------------------------------------------------
   Search — the form

   The query field and its button are one bar 48px tall: the field takes
   the room the button leaves, and the two round only their outer corners,
   as the canvas draws them joined.
   --------------------------------------------------------------- */
.sup-search__form { margin: var(--sup-space-20) 0 0; }

.sup-search__bar { display: flex; align-items: stretch; }

.sup-search__query,
.pkp_structure_page .sup-search__query {
	min-height: 48px;
	font-size: var(--sup-text-body);
	border-radius: var(--sup-radius-field) 0 0 var(--sup-radius-field);
}

.sup-search__submit {
	flex: 0 0 auto;
	gap: var(--sup-space-6);
	min-height: 48px;
	padding: var(--sup-space-12) var(--sup-space-20);
	border-radius: 0 var(--sup-radius-field) var(--sup-radius-field) 0;
}

/* The filters' name is a label of the design system; the panel under it
   carries the frame, so the fieldset itself draws nothing. The parent
   theme rules and pads every fieldset and legend of a form by element, so
   each of these is stated one level deeper to outweigh it. */
.pkp_structure_page .sup-search__filters {
	margin: var(--sup-space-32) 0 0;
	padding: 0;
	border: 0;
}

/* The parent theme rules every legend inside a form's fieldset, which
   outweighs a class on its own; this names the element inside that same
   path so it wins on source order rather than on !important. */
.pkp_structure_page .cmp_form fieldset legend.sup-search__filters-label {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 var(--sup-space-8);
	padding: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-card);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
	text-transform: uppercase;
}

.pkp_structure_page .sup-search__panel {
	clear: both;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sup-space-32);
	box-sizing: border-box;
	padding: var(--sup-space-30);
	border: var(--sup-field-stroke) solid var(--sup-color-panel-border);
}

/* Published After — dash — Published Before. The row takes the panel's
   full width: left to its content it would shrink and wrap. */
/* The parent theme floats the date range; a float would keep it at its
   content's width and ignore the row it is in. */
.pkp_structure_page .cmp_form .sup-search__range {
	float: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sup-space-10);
}

.sup-search__date { width: 272px; max-width: 100%; }

/* OJS draws a date as one fieldset: its legend, then a hidden label and a
   select for each of the year, the month and the day. The three sit on a
   row of their own under the legend, at the widths the canvas gives them,
   which is a grid — a legend cannot be a row of a flex line without
   floating, and a float does nothing inside one. */
.pkp_structure_page .cmp_form .sup-search__date fieldset {
	display: grid;
	grid-template-columns: 80px 130px 50px;
	align-items: center;
	gap: var(--sup-space-6);
	/* A fieldset lays its legend above its content box, outside the grid,
	   so the 6px under the label is the box's own padding. */
	padding-top: var(--sup-space-6);
	/* A fieldset is min-width: min-content by default, which would push it
	   past the 272px the canvas gives a date. */
	min-width: 0;
	width: 100%;
	margin: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	border: 0;
}

/* The parent theme clears its floats with a pseudo-element at each end of
   a fieldset; in a grid they would take two cells. */
.pkp_structure_page .cmp_form .sup-search__date fieldset::before,
.pkp_structure_page .cmp_form .sup-search__date fieldset::after { content: none; }

/* OJS names each date fieldset with a legend — the design's field label —
   and labels each select for a screen reader; the canvas shows the legend
   alone, so the three labels are read but not drawn. */
.pkp_structure_page .cmp_form .sup-search__date fieldset legend {
	display: block;
	float: none;
	grid-column: 1 / -1;
	width: auto;
	margin: 0;
	padding: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-regular);
	color: var(--sup-color-field);
}

.sup-search__date label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* The three selects of a date, at the widths the canvas gives them: the
   year, the month and the day. Each carries the component's own chevron,
   in the lighter of its two weights. */
.pkp_structure_page .sup-search__date select {
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	min-height: 31px;
	margin: 0;
	padding: 0 var(--sup-select-padding-end) 0 var(--sup-space-4);
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-field);
	background: var(--sup-color-surface) no-repeat right var(--sup-space-4) center / var(--sup-select-chevron) var(--sup-select-chevron) url('../images/select-chevron.svg');
	border: var(--sup-field-stroke) solid var(--sup-color-field);
	border-radius: var(--sup-radius-field);
	cursor: pointer;
}
.pkp_structure_page .sup-search__date select:focus-visible,
.pkp_structure_page .sup-search__date select:focus { outline: 2px solid var(--sup-color-field-focus); outline-offset: 0; }

.pkp_structure_page .sup-search__date select { flex: 0 0 auto; }
.pkp_structure_page .sup-search__date select[id$="Year"] { width: 80px; }
.pkp_structure_page .sup-search__date select[id$="Month"] { width: 130px; }
.pkp_structure_page .sup-search__date select[id$="Day"] { width: 50px; }

/* The dash between the two dates: a 32px rule, level with the selects. */
.sup-search__dash {
	align-self: flex-end;
	width: 32px;
	margin-bottom: var(--sup-space-14);
	border-top: var(--sup-border-width) solid var(--sup-color-panel-border);
}

.pkp_structure_page .sup-search__author { width: 260px; max-width: 100%; }
.sup-search__author .sup-field__control { min-height: 33px; }

/* ---------------------------------------------------------------
   Search — the results

   The same two ruled bars as the archive, with the article cards of the
   homepage between them, 32px from each.
   --------------------------------------------------------------- */
.sup-search__results {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-32);
	margin-top: var(--sup-space-20);
}

.sup-search__list,
.pkp_structure_page ul.sup-search__list,
.pkp_structure_page ul.search_results { margin: 0; padding: 0; list-style: none; }
.sup-search__item + .sup-search__item { margin-top: -1px; }
/* The parent theme spaces every article summary of a list; here the cards
   share their rules, as they do in a table of contents. */
.pkp_structure_page .sup-search__item > .sup-card { margin: 0; }

.sup-search__empty p,
.pkp_structure_page .sup-search__empty p {
	margin: 0;
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}

/* OJS writes its note about required fields with the asterisk marked up;
   it takes the same red as the asterisk of a field. */
.sup-page-head__lead .required,
.sup-page-head__lead abbr.required {
	color: var(--sup-color-required);
	text-decoration: none;
	border: 0;
}

/* ---------------------------------------------------------------
   Login and Register

   Both stand their form 32px under the page head, in the column width the
   canvas gives them, and close with a row of two buttons.
   --------------------------------------------------------------- */
.sup-account__form {
	margin: var(--sup-space-32) 0 0;
	max-width: 100%;
}

.sup-login .sup-account__form { width: var(--sup-col-login); }
.sup-register .sup-account__form { width: var(--sup-col-register); }

.sup-account__form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* A group of fields: Login's two, and each of Register's two sections. */
.sup-account__fields {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-18);
}

.sup-register .sup-account__fields { gap: var(--sup-space-16); }

/* Register names its two sections; Login's single group is unnamed, and
   its legend is read but not drawn. */
.sup-account__legend,
.pkp_structure_page .sup-account__legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--sup-space-12);
	padding: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-bold);
	color: var(--sup-color-field);
}

.sup-account__section { clear: both; }
.sup-account__section + .sup-account__section { margin-top: var(--sup-space-38); }

/* Login: the fields, then the checkbox 32px lower, then the buttons 64px
   under it. Register: the consent lines 38px under the fields, 26px apart,
   and the buttons 38px under those. */
.sup-login .sup-account__body {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-32);
}

.sup-account__consent {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-26);
}

/* Two buttons of equal width, 8px apart, filling the form's column. */
.sup-account__actions {
	display: flex;
	gap: var(--sup-space-8);
}

/* Both are 35px tall on these pages, where the section call to action is
   42: the height is the button's 16px line and the padding around it. */
.sup-account__actions .sup-btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: 35px;
	padding-block: var(--sup-space-10);
}

.sup-account__error { margin: 0 0 var(--sup-space-18); }

/* OJS writes the errors of a refused registration as a list of its own. */
.sup-account__form #formErrors,
.pkp_structure_page .sup-account__form #formErrors { margin: 0 0 var(--sup-space-18); }

.sup-account__message,
.pkp_structure_page .sup-account__message {
	margin: 0 0 var(--sup-space-18);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}

/* The reviewer interests field of Register, which a journal may or may not
   offer, keeps the same rhythm as the consent lines. */
.sup-account__interests { margin-top: var(--sup-space-16); }

/* ---------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.sup-login .sup-account__form,
	.sup-register .sup-account__form { width: 100%; }
}

@media (max-width: 767.98px) {
	.pkp_structure_page .sup-search__panel { padding: var(--sup-space-20); }
	.pkp_structure_page .sup-search__range { gap: var(--sup-space-16); }
	.pkp_structure_page .sup-search__author { width: 100%; }

	/* The dash reads as a join between two rows only while they sit side by
	   side; stacked, it goes. */
	.sup-search__dash { display: none; }
}

@media (max-width: 479.98px) {
	/* The bar stacks: the button keeps its height and takes the full width
	   under the field, and both round every corner. */
	.sup-search__bar { flex-direction: column; gap: var(--sup-space-8); }
	.sup-search__query,
	.pkp_structure_page .sup-search__query { border-radius: var(--sup-radius-field); }
	.sup-search__submit { border-radius: var(--sup-radius-field); }

	/* A date's three selects share the row rather than keeping the widths
	   the canvas gives them on a desktop. */
	.sup-search__date { width: 100%; }
	.pkp_structure_page .sup-search__date fieldset { flex-wrap: nowrap; }
	.pkp_structure_page .cmp_form .sup-search__date fieldset {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
	}
	.pkp_structure_page .sup-search__date select[id$="Year"],
	.pkp_structure_page .sup-search__date select[id$="Month"],
	.pkp_structure_page .sup-search__date select[id$="Day"] { width: auto; min-width: 0; }
}