/* Directory of origins and apologetics websites — /apologetics-sites.

   Colours are inherited from the Berean theme wherever possible; the few
   defined here are the camp badges, which have to stay distinguishable in both
   light and dark mode and readable to someone who cannot separate red from
   green, so they differ in lightness as well as hue.

   The theme caps #content at 800px, which is right for prose and 250px too
   narrow for an eight-column table; it is widened below the same way
   /tools/popgen does it, scoped to this page so no other article is affected. */

body:has(#sd-table) #content { max-width: min(1180px, 100%); }

.sd-warn {
	border-left: 4px solid #b8860b;
	padding: .5em .9em;
	background: rgba(184, 134, 11, .08);
}

/* ---------- search panel ---------- */

.sd-search {
	border: 1px solid rgba(128, 128, 128, .35);
	border-radius: 6px;
	padding: 1em 1.1em 1.2em;
	margin: 1.2em 0 2em;
}

.sd-searchrow {
	display: flex;
	gap: .6em;
}

#sd-q {
	flex: 1 1 auto;
	min-width: 0;
	padding: .55em .7em;
	font-size: 1.05em;
	border: 1px solid rgba(128, 128, 128, .5);
	border-radius: 4px;
	background: inherit;
	color: inherit;
}

#sd-go {
	padding: .55em 1.4em;
	font-size: 1.05em;
	cursor: pointer;
	border: 1px solid rgba(128, 128, 128, .5);
	border-radius: 4px;
}

#sd-go[disabled] {
	opacity: .55;
	cursor: progress;
}

.sd-searchopts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4em;
	margin-top: .9em;
}

.sd-searchopts fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.sd-searchopts legend {
	padding: 0;
	font-weight: bold;
	font-size: .82em;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .7;
}

.sd-searchopts label {
	display: inline-block;
	margin: .25em .9em .25em 0;
	font-size: .92em;
	cursor: pointer;
	white-space: nowrap;
}

.sd-camps {
	flex: 1 1 22em;
}

/* ---------- search results ---------- */

.sd-results:empty {
	display: none;
}

.sd-loading,
.sd-hitcount {
	font-size: .9em;
	opacity: .75;
	margin: 1em 0 .4em;
}

.sd-error {
	border-left: 4px solid #b8860b;
	background: rgba(184, 134, 11, .08);
	padding: .7em 1em;
	margin-top: 1em;
}

.sd-error p {
	margin: 0 0 .4em;
}

.sd-retry {
	margin: .3em .5em .1em 0;
	padding: .3em .8em;
	cursor: pointer;
	border: 1px solid rgba(128, 128, 128, .5);
	border-radius: 4px;
}

.sd-hits {
	margin: 0;
	padding-left: 1.4em;
}

.sd-hits li {
	margin-bottom: 1.1em;
}

.sd-hit-title {
	font-size: 1.05em;
	font-weight: 600;
}

.sd-hit-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55em;
	font-size: .85em;
	opacity: .8;
	margin-top: .15em;
}

.sd-hit-snippet {
	margin: .35em 0 0;
	font-size: .95em;
}

/* ---------- camp badges ---------- */

.sd-camp {
	display: inline-block;
	padding: .08em .5em;
	border-radius: 3px;
	font-size: .8em;
	line-height: 1.6;
	white-space: nowrap;
	border: 1px solid;
}

.sd-camp-yec         { background: rgba(178, 58, 72, .13);  border-color: rgba(178, 58, 72, .5); }
.sd-camp-oec         { background: rgba(198, 118, 40, .13); border-color: rgba(198, 118, 40, .5); }
.sd-camp-ec          { background: rgba(150, 130, 40, .13); border-color: rgba(150, 130, 40, .5); }
.sd-camp-id          { background: rgba(120, 80, 165, .13); border-color: rgba(120, 80, 165, .5); }
.sd-camp-apologetics { background: rgba(60, 110, 175, .13); border-color: rgba(60, 110, 175, .5); }
.sd-camp-archaeology { background: rgba(60, 140, 130, .13); border-color: rgba(60, 140, 130, .5); }
.sd-camp-critic      { background: rgba(40, 130, 80, .13);  border-color: rgba(40, 130, 80, .5); }
.sd-camp-academic    { background: rgba(110, 110, 110, .13);border-color: rgba(110, 110, 110, .5); }
.sd-camp-other       { background: rgba(110, 110, 110, .08);border-color: rgba(110, 110, 110, .4); }

/* ---------- table ---------- */

.sd-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	margin: 1em 0 .5em;
}

#sd-filter {
	flex: 0 1 20em;
	padding: .4em .6em;
	border: 1px solid rgba(128, 128, 128, .5);
	border-radius: 4px;
	background: inherit;
	color: inherit;
}

.sd-shown {
	font-size: .88em;
	opacity: .7;
}

.sd-hidedead {
	font-size: .9em;
	cursor: pointer;
}

.sd-tablewrap {
	overflow-x: auto;
}

.sd-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .93em;
}

.sd-table th,
.sd-table td {
	text-align: left;
	padding: .42em .6em;
	border-bottom: 1px solid rgba(128, 128, 128, .22);
	vertical-align: top;
}

.sd-table thead th {
	position: sticky;
	top: 0;
	background: var(--background, #fff);
	border-bottom: 2px solid rgba(128, 128, 128, .5);
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.sd-table thead th::after {
	content: '';
	opacity: .45;
	padding-left: .35em;
}

.sd-table thead th[aria-sort='ascending']::after  { content: '\25B2'; }
.sd-table thead th[aria-sort='descending']::after { content: '\25BC'; }

.sd-table tbody tr.sd-clickable {
	cursor: pointer;
}

.sd-table tbody tr.sd-clickable:hover {
	background: rgba(128, 128, 128, .07);
}

.sd-table tbody tr.sd-open {
	background: rgba(128, 128, 128, .1);
}

.sd-site a {
	font-weight: 600;
}

.sd-domain {
	display: block;
	font-size: .82em;
	opacity: .6;
	font-weight: normal;
}

.sd-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Dates and one-word statuses must not wrap, or an eight-column table grows a
   third row of height for no information. */
.sd-table tbody td:nth-child(7),
.sd-status {
	white-space: nowrap;
}

/* A stated position is a link to the page that states it; an unstated one is
   deliberately faint, because "the site does not say" is a real finding and
   should not look like the same kind of claim as "the site says young". */
.sd-pos a {
	border-bottom: 1px dotted currentColor;
	text-decoration: none;
}

.sd-age-unstated,
.sd-pos:not(:has(a)) {
	opacity: .55;
}

.sd-status-dead,
.sd-status-unreachable {
	opacity: .6;
}

.sd-status-dead {
	text-decoration: line-through;
}

/* ---------- expanded detail ---------- */

.sd-detail td {
	background: rgba(128, 128, 128, .05);
	padding: .8em 1.2em 1em;
}

.sd-detail dl {
	display: grid;
	grid-template-columns: minmax(9em, 15em) 1fr;
	gap: .35em 1.2em;
	margin: 0;
	font-size: .95em;
}

.sd-detail dt {
	font-weight: 600;
	opacity: .8;
}

.sd-detail dd {
	margin: 0;
}

/* Everything the site did not say about itself — our own judgement — carries
   this marker, so a reader never has to guess which columns are quoted. */
.sd-ours {
	font-size: .8em;
	font-weight: normal;
	font-style: italic;
	opacity: .65;
	white-space: nowrap;
}

.sd-download {
	font-size: .9em;
	opacity: .8;
	margin-top: .7em;
}

@media (max-width: 700px) {
	.sd-table { font-size: .86em; }
	.sd-table th, .sd-table td { padding: .35em .4em; }
	.sd-detail dl { grid-template-columns: 1fr; gap: .1em; }
	.sd-detail dt { margin-top: .5em; }
}

/* ---------- camp chips ---------- */

/* At ninety sites the text box was enough. At a thousand the first thing anyone
   wants is one side of the argument at a time, so the camps are one click. */
.sd-campchips {
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
	margin: 1em 0 .3em;
}

.sd-campchips button {
	cursor: pointer;
	font-size: .85em;
	padding: .2em .7em;
	border-radius: 3px;
	border: 1px solid rgba(128, 128, 128, .45);
	background: transparent;
	color: inherit;
}

.sd-campchips button[aria-pressed='true'] {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	font-weight: 600;
}

.sd-chipcount {
	opacity: .6;
	font-size: .9em;
	margin-left: .15em;
}

/* The type chip sits with the camp chips but filters an independent axis, so
   it is separated rather than coloured like a camp. */
.sd-typechip {
	margin-right: .6em;
	border-style: dashed !important;
	font-weight: 600;
}

/* The "hide these" state of a type chip. Struck through as well as outlined,
   because "only journals" and "no journals" must not look alike at a glance. */
.sd-typechip.sd-chip-excluded {
	text-decoration: line-through;
	opacity: .75;
}

/* Set apart from the camp checkboxes: it removes rather than selects. */
.sd-exclude {
	margin-left: .3em;
	padding-left: .8em;
	border-left: 1px solid rgba(128, 128, 128, .4);
	opacity: .85;
}