/* room-list.css: the classroom technology room list (room-list.php + room-list.js).
   Scoped to <room-finder>, which sits outside the theme's prose wrapper, so nothing here leaks
   into the page and the theme's .prose rules don't reach in. Colors lean on the theme's own
   variables, with New City's values as fallbacks. */

room-finder {
	display: block;
	--rf-ink: rgb(var(--theme-heading-color, 39 37 31));
	--rf-text: rgb(var(--theme-text-color, 56 56 56));
	--rf-link: rgb(var(--theme-link-color, 144 59 65));
	--rf-muted: #525252;
	--rf-line: #d4d4d4;
	--rf-soft: #f5f5f4;
	--rf-gold: #ffdb00;
	color: var(--rf-text);
	font-size: 1rem;
	line-height: 1.5;
}
room-finder p { margin: 0 0 1rem; }
room-finder a { color: var(--rf-link); text-decoration: underline; text-underline-offset: .15em; }
room-finder :focus-visible { outline: 3px solid var(--rf-ink); outline-offset: 2px; }

/* Mockup banner, intro and the type definitions (static content in index.pcf). */
room-finder .rf-mockup { border-left: 4px solid var(--rf-gold); background: #fffbe0; padding: .9rem 1.1rem; margin: 0 0 1.5rem; }
room-finder .rf-mockup p { margin: 0; }
room-finder .rf-intro { max-width: 46rem; font-size: 1.125rem; margin: 0 0 2rem; }
room-finder .rf-types { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--rf-line); scroll-margin-top: 7rem; }
room-finder .rf-types h2 { color: var(--rf-ink); font-size: 1.5rem; line-height: 1.25; font-weight: 700; margin: 0 0 1rem; }
room-finder .rf-types dl { margin: 0; max-width: 52rem; }
room-finder .rf-types dt { font-weight: 700; color: var(--rf-ink); margin: 1.1rem 0 .2rem; scroll-margin-top: 7rem; }
room-finder .rf-types dd { margin: 0; }
room-finder .rf-missing {
	display: inline-block; font-size: .75rem; font-weight: 600; line-height: 1; color: #7f1d1d;
	background: #fee2e2; padding: .3rem .45rem; border-radius: .2rem;
}
room-finder .rf [hidden] { display: none !important; }
room-finder .rf-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

room-finder .rf h2 {
	color: var(--rf-ink); font-size: 1.5rem; line-height: 1.25; font-weight: 700; margin: 0 0 1rem;
}

/* Filters */
room-finder .rf-filters-wrap {
	background: var(--rf-soft);
	border-top: 4px solid var(--rf-gold);
	padding: 1.25rem 1.25rem 1.5rem;
	margin: 0 0 2.5rem;
}
room-finder .rf-grid {
	display: grid;
	gap: 1rem 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
room-finder .rf-field--search { grid-column: 1 / -1; max-width: 40rem; }
room-finder .rf-field label { display: block; font-weight: 600; color: var(--rf-ink); margin: 0 0 .3rem; }
room-finder .rf-field input,
room-finder .rf-field select {
	display: block; width: 100%; min-height: 2.75rem; box-sizing: border-box;
	padding: .5rem .75rem; margin: 0;
	font: inherit; color: var(--rf-ink); background-color: #fff;
	border: 1px solid #737373; border-radius: .25rem;
}
room-finder .rf-hint { font-size: .875rem; color: var(--rf-muted); margin: .3rem 0 0; }

room-finder .rf-features { border: 0; padding: 0; margin: 1.25rem 0 0; min-width: 0; }
room-finder .rf-features legend { font-weight: 600; color: var(--rf-ink); padding: 0; margin: 0 0 .5rem; }
room-finder .rf-features ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
room-finder .rf-features li { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 0; }
room-finder .rf-features input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--rf-ink); flex: none; }
room-finder .rf-features label { cursor: pointer; }

room-finder .rf-actions { margin-top: 1.25rem; }
room-finder .rf-button {
	min-height: 2.75rem; padding: .5rem 1.25rem;
	font: inherit; font-weight: 600; color: var(--rf-ink);
	background: #fff; border: 2px solid var(--rf-ink); border-radius: .25rem; cursor: pointer;
}
room-finder .rf-button:hover { background: var(--rf-ink); color: #fff; }

/* Results */
room-finder .rf-results-h { margin-bottom: .25rem; }
room-finder .rf-status { font-weight: 600; color: var(--rf-ink); margin: 0; }
room-finder .rf-updated { font-size: .875rem; color: var(--rf-muted); margin: .15rem 0 1.25rem; }
room-finder .rf-empty { padding: 1.25rem; border: 1px dashed #737373; margin: 0 0 2rem; }
room-finder .rf-empty p { margin: 0 0 .75rem; }
room-finder .rf-error { padding: 1rem 1.25rem; border-left: 4px solid #b91c1c; background: #fef2f2; }

room-finder .rf-jump { margin: 0 0 2rem; }
room-finder .rf-jump summary { cursor: pointer; font-weight: 600; color: var(--rf-link); }
room-finder .rf-jump ul { list-style: none; margin: .75rem 0 0; padding: 0; columns: 14rem; column-gap: 1.5rem; }
room-finder .rf-jump li { margin: 0 0 .3rem; break-inside: avoid; }

room-finder .rf-building { margin: 0 0 2.75rem; scroll-margin-top: 7rem; }
room-finder .rf-building h3 {
	display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem;
	color: var(--rf-ink); font-size: 1.25rem; line-height: 1.3; font-weight: 700;
	margin: 0; padding: 0 0 .4rem; border-bottom: 3px solid var(--rf-ink);
}
room-finder .rf-code {
	font-size: .75rem; font-weight: 700; letter-spacing: .05em; line-height: 1;
	color: #fff; background: var(--rf-ink); padding: .3rem .45rem; border-radius: .2rem;
}
room-finder .rf-bcount { font-size: .875rem; color: var(--rf-muted); margin: .35rem 0 .25rem; }

room-finder .rf-scroll { overflow-x: auto; }
room-finder .rf-table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.4; margin: 0; }
room-finder .rf-table thead th {
	text-align: left; vertical-align: bottom; white-space: nowrap;
	font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rf-muted);
	padding: .5rem .75rem; border-bottom: 1px solid #a3a3a3;
}
room-finder .rf-table tbody th,
room-finder .rf-table td { text-align: left; vertical-align: top; padding: .65rem .75rem; border-bottom: 1px solid var(--rf-line); }
room-finder .rf-table tbody th { font-weight: 700; color: var(--rf-ink); white-space: nowrap; }
room-finder .rf-table .rf-num { text-align: right; font-variant-numeric: tabular-nums; }
room-finder .rf-table tbody tr:target { background: #fff8cc; box-shadow: inset 4px 0 0 var(--rf-gold); }
room-finder .rf-table tbody tr { scroll-margin-top: 7rem; }
room-finder .rf-roomname { display: block; font-weight: 400; font-size: .8125rem; color: var(--rf-muted); white-space: normal; }

/* Desktop: the same column widths in every building's table, so the columns line up down the page. */
@media (min-width: 64em) {
	room-finder .rf-table { table-layout: fixed; }
	room-finder .rf-table thead th:nth-child(1) { width: 11%; }
	room-finder .rf-table thead th:nth-child(2) { width: 13%; }
	room-finder .rf-table thead th:nth-child(3) { width: 15%; }
	room-finder .rf-table thead th:nth-child(4) { width: 9%; }
	room-finder .rf-table thead th:nth-child(5) { width: 7%; }
	room-finder .rf-table thead th:nth-child(6) { width: 13%; }
	room-finder .rf-table thead th:nth-child(7) { width: 32%; }
	room-finder .rf-table tbody th { white-space: normal; }
}

room-finder .rf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
room-finder .rf-chips li {
	margin: 0; padding: .15rem .55rem; font-size: .8125rem; line-height: 1.35; white-space: nowrap;
	color: var(--rf-ink); background: var(--rf-soft); border: 1px solid var(--rf-line); border-radius: 999px;
}
room-finder .rf-note { display: block; margin-top: .35rem; font-size: .875rem; color: var(--rf-muted); }
room-finder .rf-chips + .rf-note { margin-top: .4rem; }

/* Below 64em each room becomes a card (two across from 48em, one on phones) rather than a table
   that scrolls sideways. room-list.js puts the table roles back (Safari drops them once a table is
   no longer display: table), and the labels come from data-label. */
@media (max-width: 63.99em) {
	room-finder .rf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	room-finder .rf-table,
	room-finder .rf-table tbody,
	room-finder .rf-table tr,
	room-finder .rf-table tbody th,
	room-finder .rf-table td { display: block; }
	room-finder .rf-table tbody tr { border: 1px solid var(--rf-line); border-radius: .375rem; padding: .75rem .9rem; margin: .75rem 0 0; }
	room-finder .rf-table tbody th,
	room-finder .rf-table td { border: 0; padding: .15rem 0; text-align: left; }
	room-finder .rf-table tbody th { font-size: 1.0625rem; padding-bottom: .35rem; }
	room-finder .rf-table td[data-label]::before {
		content: attr(data-label) ": ";
		content: attr(data-label) ": " / "";
		font-weight: 600; color: var(--rf-ink);
	}
	room-finder .rf-table td[data-label="Features"]::before { content: none; }
	room-finder .rf-table td[data-label="Features"] { padding-top: .5rem; }
	room-finder .rf-table td:empty { display: none; }
	room-finder .rf-table .rf-num { text-align: left; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
	room-finder .rf-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
	room-finder .rf-table tbody tr { margin: 0; }
}

@media print {
	room-finder .rf-filters-wrap,
	room-finder .rf-jump,
	room-finder .rf-empty button { display: none !important; }
	room-finder .rf-building { break-inside: auto; }
	room-finder .rf-table tbody tr { break-inside: avoid; }
}