Template:Category/Experiment/styles.css

/* TemplateStyles for {{Category/Experiment}} — a documented miniscope
   preparation rendered as a masthead, a curation-provenance banner,
   and a stack of labelled spec blocks (Animal / Target / Indicator /
   Optical access / Imaging / Contact / Resources).

   Follows the same var() / fallback discipline as
   {{Category/Publication}}/styles.css: every color pulls a --labki-*
   token with a literal fallback, so a wiki can retheme the whole
   registry by overriding tokens in MediaWiki:Common.css without
   touching this file.

   Layout note: rows are a two-column grid (label / value) rather than
   a table, so a long coordinate string wraps under its own label
   instead of stretching the label column across the page. The grid
   collapses to a single column under 640px, where a 9em label column
   would leave too little room for the value.

   Border shorthands are written out in full rather than as
   border-color overrides — MediaWiki's TemplateStyles sanitizer
   rejects var() inside the level-4 border-color longhand, the same
   restriction documented in {{Category/Publication}}/styles.css.
*/

.experiment-page {
	margin: 0 0 1.5em 0;
}

/* ---------- Masthead ---------- */

.experiment-masthead {
	margin: 0 0 1em 0;
}

.experiment-title {
	font-size: 1.55rem;
	line-height: 1.25;
	font-weight: 600;
	margin: 0 0 0.3em 0;
	color: var(--labki-text, #2c2c2c);
	border-bottom: none;
	padding-bottom: 0;
}

.experiment-lead {
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--labki-text, #2c2c2c);
	font-style: italic;
	margin: 0.4em 0;
	padding: 0.2em 0 0.2em 1em;
	border-left: 3px solid var(--labki-accent, #2774AE);
}

.experiment-source {
	font-size: 0.9rem;
	color: var(--labki-text-muted, #5a6a7a);
	margin-top: 0.5em;
}

.experiment-source-label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	margin-right: 0.4em;
}

/* ---------- Curation provenance banner ----------
   Deliberately full-width and stated in words rather than reduced to
   a chip. The registry mixes curator-transcribed values with
   unreviewed community submissions, and a reader who cannot tell them
   apart at a glance will over-trust the weaker ones. The two
   lower-confidence states carry a warning tint; the two verified
   states carry the accent. */

.experiment-curation {
	margin: 0 0 1.25em 0;
	padding: 0.6em 0.9em;
	border-radius: 4px;
	font-size: 0.85rem;
	line-height: 1.5;
	background: var(--labki-bg-subtle, #f4f6f8);
	border-left: 4px solid var(--labki-border, #d8dde2);
}

.experiment-curation-status {
	display: block;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.75rem;
	margin-bottom: 0.25em;
}

.experiment-curation-gloss {
	color: var(--labki-text-muted, #5a6a7a);
}

.experiment-curation-verified {
	border-left: 4px solid var(--labki-accent, #2774AE);
}
.experiment-curation-verified .experiment-curation-status {
	color: var(--labki-accent, #2774AE);
}

.experiment-curation-author {
	border-left: 4px solid var(--labki-success, #1a7f4b);
}
.experiment-curation-author .experiment-curation-status {
	color: var(--labki-success, #1a7f4b);
}

.experiment-curation-community,
.experiment-curation-review {
	border-left: 4px solid var(--labki-warning, #b8860b);
}
.experiment-curation-community .experiment-curation-status,
.experiment-curation-review .experiment-curation-status {
	color: var(--labki-warning, #b8860b);
}

/* ---------- Spec blocks ---------- */

.experiment-block {
	margin: 0 0 1.1em 0;
	padding: 0 0 0.9em 0;
	border-bottom: 1px solid var(--labki-border, #d8dde2);
}

.experiment-block:last-of-type {
	border-bottom: none;
}

.experiment-block-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--labki-text-muted, #5a6a7a);
	font-weight: 600;
	margin-bottom: 0.5em;
}

.experiment-row {
	display: grid;
	grid-template-columns: 11em 1fr;
	gap: 0.4em 1em;
	padding: 0.2em 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.experiment-row-label {
	color: var(--labki-text-muted, #5a6a7a);
}

.experiment-row-value {
	color: var(--labki-text, #2c2c2c);
}

/* Fixed advance width for coordinates, titers, constructs, depths and
   frame rates — digits line up across rows, which makes a mistyped
   sign or a misplaced decimal visible. */
.experiment-row-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88rem;
}

/* The three fields people most often arrive at the registry to find. */
.experiment-row-emphasis {
	color: var(--labki-accent, #2774AE);
	font-weight: 500;
}

.experiment-region-chip,
.experiment-scope-chip {
	display: inline-block;
	padding: 1px 9px;
	margin: 0 0.3em 0.25em 0;
	border-radius: 999px;
	font-size: 0.85rem;
	background: var(--labki-bg-subtle, #f4f6f8);
	border: 1px solid var(--labki-accent, #2774AE);
}

.experiment-region-chip a,
.experiment-region-chip a:visited,
.experiment-scope-chip a,
.experiment-scope-chip a:visited {
	color: var(--labki-accent, #2774AE);
	text-decoration: none;
}

/* ---------- Known challenges ----------
   Given its own callout rather than a row because it is prose, and
   because it is the field least likely to exist anywhere else. */

.experiment-challenges {
	background: var(--labki-bg-subtle, #f4f6f8);
	border-left: 3px solid var(--labki-warning, #b8860b);
	padding: 0.75em 1em;
	margin: 0 0 1.1em 0;
	border-radius: 0 4px 4px 0;
}

.experiment-challenges-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--labki-warning, #b8860b);
	font-weight: 600;
	margin-bottom: 0.4em;
}

.experiment-challenges-body {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--labki-text, #2c2c2c);
}

/* ---------- Contact ---------- */

.experiment-block-contact {
	background: var(--labki-bg-subtle, #f4f6f8);
	padding: 0.8em 1em;
	border-radius: 4px;
	border-bottom: none;
}

/* ---------- Resources ---------- */

.experiment-resources {
	margin: 0 0 1em 0;
}

.experiment-resource-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.experiment-resource {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 3px;
	font-size: 0.85rem;
	border: 1px solid var(--labki-border, #d8dde2);
	background: var(--labki-bg, #ffffff);
}

.experiment-resource a,
.experiment-resource a:visited {
	color: var(--labki-accent, #2774AE);
	text-decoration: none;
}

.experiment-resource-protocol {
	border: 1px solid var(--labki-accent, #2774AE);
}

/* ---------- Notes ---------- */

.experiment-notes {
	margin: 0 0 1em 0;
}

.experiment-notes-body {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--labki-text, #2c2c2c);
}

/* ---------- Narrow viewports ----------
   An 11em label column leaves too little for the value on a phone, so
   rows stack and the label becomes a small caption above its value. */

@media screen and (max-width: 640px) {
	.experiment-row {
		grid-template-columns: 1fr;
		gap: 0.1em;
		padding: 0.35em 0;
	}

	.experiment-row-label {
		font-size: 0.78rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
}