/* Who ruled when - page styles. Colours come from css/site.css. */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- the year: the page's headline ---------- */
.when { padding: 2rem 0 1.5rem; }
.when-lead {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	color: var(--soft-text);
	margin: 0;
}
.when-year { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.year-input {
	font-family: var(--font-heading);
	font-size: clamp(4rem, 15vw, 8rem);
	line-height: 1.05;
	color: var(--headers);
	background: transparent;
	border: 0;
	border-bottom: 4px solid transparent;
	width: 4.2ch;
	min-width: 1.2ch;
	padding: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}
.year-input::-webkit-outer-spin-button,
.year-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.year-input:hover { border-bottom-color: var(--line); }
.year-input:focus-visible { outline: none; border-bottom-color: var(--h1-line); }

.era {
	font-family: var(--font-heading);
	font-size: clamp(1.6rem, 5vw, 2.6rem);
	color: var(--soft-text);
	background: transparent;
	border: 0;
	padding: 0 0.25rem;
	cursor: pointer;
	align-self: flex-end;
	margin-bottom: 0.55em;
}
.era option { background: var(--note); color: var(--text); }
.step {
	font-family: var(--font-heading);
	font-size: 2rem;
	line-height: 1;
	width: 2.75rem; height: 2.75rem;
	border: 0;
	background: var(--panel);
	color: var(--text);
	box-shadow: 2px 2px 0 var(--outline);
	cursor: pointer;
}
.step:hover { color: var(--headers); }

.timeline { margin-top: 1rem; max-width: 46rem; }
.timeline input { width: 100%; accent-color: var(--accent); }
.timeline-ends { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--soft-text); }

.jumps { margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jumps button {
	font: inherit;
	font-size: 0.9rem;
	padding: 0.3rem 0.8rem;
	border: 0;
	background: var(--panel);
	color: var(--text);
	box-shadow: 2px 2px 0 var(--outline);
	cursor: pointer;
}
.jumps button:hover { color: var(--headers); }
.jumps button[aria-pressed="true"] { background: var(--dark-accent); color: var(--on-accent); }

.year-note { min-height: 1.5em; margin: 0.75rem 0 0; color: var(--headers); }

/* ---------- rulers ---------- */
.high { margin-top: 1rem; }
.realms {
	margin: 2.5rem 0 3rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 2.5rem 2rem;
}

.realm h2 { font-size: 1.6rem; margin: 0 0 0.75rem; }
.realm.demolduhr { grid-column: 1 / -1; }
@media (min-width: 62rem) { .realm.demolduhr { grid-column: span 2; } }
.seat-label { margin: 0 0 0.35rem; color: var(--soft-text); font-style: italic; }

.ruler {
	border-left: 6px solid var(--house, var(--line));
	padding: 0.15rem 0 0.15rem 1rem;
}
.ruler + .ruler { margin-top: 1.25rem; }
.ruler .office { margin: 0; color: var(--soft-text); font-style: italic; }
.ruler .name {
	font-family: var(--font-heading);
	font-weight: 500;
	color: var(--text);
	font-size: 1.75rem;
	line-height: 1.15;
	margin: 0.1rem 0 0.35rem;
}
.ruler .facts { margin: 0; padding: 0; list-style: none; }
.ruler .facts li { margin: 0.1rem 0; }
.ruler .facts .event { color: var(--headers); }
.fell { color: var(--headers); }

.high .ruler { padding: 1rem 1.25rem 1rem 1.4rem; border-left-width: 10px; background: var(--panel); box-shadow: 3px 3px 0 var(--outline); }
.high .office { font-size: 1.15rem; }
.high .name { font-size: clamp(2.2rem, 6vw, 3rem); color: var(--headers); }

.seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem 2rem; }
.realm .empty + .seats { margin-top: 1.25rem; }
.seats .ruler + .ruler { margin-top: 0; }

.empty {
	margin: 0;
	padding: 0.15rem 0 0.15rem 1rem;
	border-left: 6px dotted var(--line);
	color: var(--soft-text);
}

.fell-key { color: var(--headers); }