/* EO Course Browser — frame styling. Lives inside an iframe in WP, so
   no inheritance concerns; fully self-contained. Aesthetic loosely tracks
   the portal: system stack, JetBrains Mono for labels, restrained colors. */

:root {
	--base:      #FAFAFA;
	--surface:   #FFFFFF;
	--ink:       #1A1A1A;
	--muted:     #555555;
	--rule:      rgba(0, 0, 0, 0.10);
	--accent:    #008080;
	--accent-fg: #FFFFFF;
	--row-alt:   rgba(0, 0, 0, 0.025);
	--radius-sm: 4px;
	--radius:    6px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0; padding: 0;
	background: var(--base);
	color: var(--ink);
	font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body { padding: 24px 28px; }

/* --- Filter form --------------------------------------------------- */
#filters {
	display: flex; flex-wrap: wrap; align-items: end; gap: 16px;
	margin-bottom: 20px;
}
.filter { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.filter span {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--muted);
}
.filter select {
	padding: 8px 10px; font-size: 14px;
	background: var(--surface); color: var(--ink);
	border: 1px solid var(--rule); border-radius: var(--radius-sm);
	min-width: 220px;
}
button#submit, button.back {
	padding: 9px 18px; font-size: 14px; font-weight: 500;
	background: var(--accent); color: var(--accent-fg);
	border: none; border-radius: var(--radius-sm); cursor: pointer;
}
button#submit:hover, button.back:hover { filter: brightness(1.08); }
button.back {
	background: transparent; color: var(--accent);
	padding: 6px 0; margin-bottom: 16px; font-weight: 400;
}
button.back:hover { background: transparent; text-decoration: underline; }

/* --- Status / errors ----------------------------------------------- */
#status:empty { display: none; }
#status {
	padding: 12px 14px; margin-bottom: 16px;
	background: var(--surface); border: 1px solid var(--rule);
	border-radius: var(--radius-sm); color: var(--muted);
}
#status.error { color: #B00020; border-color: rgba(176, 0, 32, 0.25); }

/* --- Results table ------------------------------------------------- */
#results h2, #detail h2 {
	font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 900;
	font-size: 22px; margin: 0 0 16px;
}
table {
	width: 100%; border-collapse: collapse;
	background: var(--surface); border: 1px solid var(--rule);
	border-radius: var(--radius); overflow: hidden;
}
thead th {
	text-align: left; font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--muted);
	background: rgba(0, 0, 0, 0.03);
	padding: 10px 14px; border-bottom: 1px solid var(--rule);
}
thead th.num, td.num { text-align: center; }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: var(--row-alt); }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover td { background: rgba(0, 128, 128, 0.06); }
/* All anchors inside the table use the accent (teal in the Vandal theme); */
/* the course column gets weight 500 to read as the row's primary action. */
tbody td a { color: var(--accent); text-decoration: none; }
tbody td a:hover { text-decoration: underline; }
tbody td.course a { font-weight: 500; }

/* --- Detail view --------------------------------------------------- */
#detail dl {
	display: grid; grid-template-columns: max-content 1fr;
	gap: 10px 20px; margin: 0;
	background: var(--surface); border: 1px solid var(--rule);
	border-radius: var(--radius); padding: 18px 22px;
}
#detail dt {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--muted); padding-top: 4px;
}
#detail dd { margin: 0; }
#detail dd a { color: var(--accent); }
#detail dd p:first-child { margin-top: 0; }
#detail dd p:last-child  { margin-bottom: 0; }