/****** FILE: themes/gamry/css/pages/LiteratureDatabase.css *****/
/* Literature Database — a search tool over ~11,200 journal and book articles.

   Same palette and faces as css/pages/HubPage.css and ResourcesPage.css, because a reader gets
   here from the Resources hub and a third card/table style would read as a third site. What
   differs is the shape: this page is operated rather than read, so the form leads and the results
   are a real data table.

   Tested colour values from the landing-page handoff. #5f6b72 is the lightest muted grey that
   clears 4.5:1 on #fbfbfa at these sizes. Do not lighten it. */

.ld-page { max-width: 1040px; margin: 0 auto; padding: 8px 20px 48px; box-sizing: border-box; }

.rd-cp--hub .rd-cp-headmax { max-width: 1040px; margin-inline: auto; padding: 0 20px; box-sizing: border-box; }

/* ---- Head ---- */

.ld-page .ld-head { margin-bottom: 26px; }

.ld-page .ld-eyebrow {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	color: #003e69; margin: 0 0 10px;
}

.ld-page .ld-h1 {
	font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
	font-size: 31px; line-height: 1.13; letter-spacing: -0.015em;
	color: #17242b; margin: 0 0 8px;
}

.ld-page .ld-intro { font-size: 15.5px; line-height: 1.6; color: #37444c; max-width: 640px; }
.ld-page .ld-intro p { margin: 0 0 10px; color: #37444c; }
.ld-page .ld-intro p:last-child { margin-bottom: 0; }

/* ---- Search panel ----
   The form is the page's primary control, so it gets a surface of its own rather than sitting
   loose on the page ground. */

.ld-page .ld-search {
	background: #fff;
	border: 1px solid #e6eaec;
	border-radius: 11px;
	padding: 20px 22px 22px;
	margin-bottom: 30px;
}

.ld-page .ld-search-h,
.ld-page .ld-results-h {
	font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
	font-weight: 600; font-size: 19px; line-height: 1.2;
	color: #17242b; margin: 0 0 14px;
}

/* form.css lays every userform-style field out as a legacy TWO-COLUMN form: `div.field > label`
   is 30% wide, floated left and right-aligned, and `div.field > div` is 65% floated right. That
   shape leaves a wide, mostly empty label column beside a short input. Unwind it here — label
   above field, both full width — then let the FIELDSET pair the six fields two-up. The grid has
   to be on the fieldset, not on .field: putting it on .field pairs each label with its own input
   and reproduces the two-column look it was meant to replace. */
.ld-page .ld-search fieldset {
	border: 0; margin: 0; padding: 0; min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 2px 18px;
}
.ld-page .ld-search .field { margin: 0 0 12px; min-width: 0; }
.ld-page .ld-search .field:after { content: none; }
.ld-page .ld-search .field > div { width: 100%; float: none; min-height: 0; }

.ld-page .ld-search label {
	display: block;
	float: none;
	width: 100%;
	text-align: left !important;
	font-size: 12px; font-weight: 600; color: #37444c;
	margin: 0 0 4px;
	padding: 0;
	min-height: 0;
	line-height: 1.4;
}

/* The submit row spans the full width beneath the paired fields. */
.ld-page .ld-search .Actions { grid-column: 1 / -1; width: 100%; float: none; margin-top: 4px; }

.ld-page .ld-search input[type="text"],
.ld-page .ld-search input[type="number"],
.ld-page .ld-search select {
	width: 100%; max-width: 100%; box-sizing: border-box;
	background: #fbfbfa;
	border: 1px solid #cfd7db;
	border-radius: 8px;
	padding: 10px 12px;
	font-family: inherit; font-size: 14px; color: #17242b;
}
.ld-page .ld-search input:focus-visible,
.ld-page .ld-search select:focus-visible {
	outline: 3px solid #00567f; outline-offset: 1px;
}

.ld-page .ld-search input[type="submit"],
.ld-page .ld-search button[type="submit"] {
	background: #003e69; color: #fff; border: 0;
	font-family: inherit; font-weight: 600; font-size: 14px;
	padding: 11px 24px; border-radius: 8px; cursor: pointer;
}
.ld-page .ld-search input[type="submit"]:hover,
.ld-page .ld-search button[type="submit"]:hover { background: #00567f; }

/* ---- Results ---- */

.ld-page .ld-results-h { margin-bottom: 12px; }

/* Own scroll container: a long publication title must never push the page sideways. */
.ld-page .ld-tablewrap {
	overflow-x: auto;
	background: #fff;
	border: 1px solid #e6eaec;
	border-radius: 11px;
}

.ld-page .ld-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.ld-page .ld-table th {
	text-align: left;
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase;
	color: #5f6b72;
	padding: 13px 18px;
	border-bottom: 2px solid #003e69;
	white-space: nowrap;
}

.ld-page .ld-table td {
	padding: 13px 18px;
	border-bottom: 1px solid #eef1f2;
	vertical-align: top;
	color: #4b565d;
}
.ld-page .ld-table tr:last-child td { border-bottom: 0; }
.ld-page .ld-table tbody tr:hover { background: #fbfcfc; }

.ld-page .ld-pub {
	display: block;
	font-weight: 600; color: #003e69; text-decoration: none;
	line-height: 1.4;
}
.ld-page .ld-pub:hover { color: #00567f; text-decoration: underline; }
.ld-page .ld-pub:focus-visible { outline: 3px solid #003e69; outline-offset: 2px; }

.ld-page .ld-authors {
	display: block;
	margin-top: 3px;
	font-size: 13px; color: #5f6b72;
}

/* Dates line up in a column, so they get tabular figures. */
.ld-page .ld-date,
.ld-page .ld-date-col {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ld-page .ld-date { color: #5f6b72; font-size: 13.5px; }

/* ---- Pagination ---- */

.ld-page .ld-pagination {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 20px;
}

.ld-page .ld-pages {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 5px;
}

/* 36px targets: WCAG 2.2 target size (2.5.8) is 24px, and pagination numbers are the control
   most often mis-tapped on a phone, so they get more than the minimum rather than exactly it. */
.ld-page .ld-page-num,
.ld-page .ld-page-step {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; min-height: 36px;
	padding: 0 10px;
	border: 1px solid #e6eaec; border-radius: 8px;
	background: #fff;
	font-size: 13.5px; font-weight: 600; color: #003e69;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.ld-page .ld-page-num:hover,
.ld-page .ld-page-step:hover { border-color: #003e69; color: #00567f; }
.ld-page .ld-page-num:focus-visible,
.ld-page .ld-page-step:focus-visible { outline: 3px solid #003e69; outline-offset: 2px; }

.ld-page .ld-page-num--current {
	background: #003e69; border-color: #003e69; color: #fff;
}

.ld-page .ld-page-gap {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 24px; min-height: 36px; color: #5f6b72;
}

/* ---- Narrow ---- */

@media (max-width: 560px) {
	.ld-page .ld-h1 { font-size: 25px; }
	.ld-page .ld-search { padding: 16px 15px 18px; }
	.ld-page .ld-table th, .ld-page .ld-table td { padding: 11px 13px; }
	.ld-page .ld-page-step span { display: none; }
}