/*
 * Angrepstelleren nederst til høyre på royexplains.com.
 *
 * Fargene tas fra nettstedets egne variabler der de finnes, med egne
 * reserveverdier etter, slik at widgeten ser riktig ut også om Ekstra CSS
 * skulle endres. Mørk modus er standard her, akkurat som ellers på
 * nettstedet; body.light-mode snur paletten — det er konvensjonen
 * royexplains-darkmode.php setter.
 */

.royx-ang {
	position: fixed;
	right: 1rem;
	/* JavaScript setter --royx-ang-bunn ut fra hvor temaets «til toppen»-knapp
	   faktisk ligger. Finnes ingen slik knapp, blir det 1rem. */
	bottom: var(--royx-ang-bunn, 1rem);
	z-index: 9980;              /* under temaets meny, over innholdet */
	font-family: inherit;
	line-height: 1.45;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	max-width: calc(100vw - 2rem);
}

/* Klassen sier bare at en «til toppen»-knapp finnes; selve avstanden kommer
   fra --royx-ang-bunn, som er regnet ut fra knappens egen CSS. Den var før
   låst til 4.75rem — for lavt, knappen rekker opp til 93 px — og telleren
   la seg derfor oppå den. */

/* ----------------------------------------------- telleren i bunnteksten */

/* Standardplassen. Telleren henger i #colophon og følger siden som alt
   annet der — ingen fast posisjon, ingen z-index, ingenting som ligger
   oppe på innholdet. Hjørnevarianten over er reserven hvis bunnteksten
   skulle forsvinne. */
.royx-ang.royx-ang--bunn {
	position: relative;   /* anker for overlegget */
	z-index: auto;
	/* Bunnteksten sentrerer sitt eget innhold (.bottom-footer-info er en
	   flex med justify-content: center), så telleren skal sentreres også —
	   ellers står den i utakt med opphavsretten rett over. */
	align-items: center;
	max-width: 100%;
	margin: 1.4rem 0 0.2rem;
}

.royx-ang--bunn .royx-ang__panel {
	/*
	 * Panelet legger seg OVER merket, ikke under det.
	 *
	 * Grunnen er at bunnteksten star nederst pa siden: et panel i flyten
	 * matte vokse nedover, utenfor det leseren ser, og den som klikket fikk
	 * ingenting a se uten a rulle videre. Som overlegg dekker det
	 * bunnteksten over merket i stedet — den er lest ferdig — og ingenting
	 * i sideflyten flytter seg nar panelet apnes eller lukkes.
	 *
	 * bottom: 100% er merkets overkant. Flex-gap gjelder ikke absolutt
	 * plasserte barn, sa den halve rem-en legges til her.
	 */
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 9980;
	/*
	 * Taket settes av JavaScript ved hver apning: avstanden fra merket opp
	 * til vindustoppen. Reserveverdien gjelder bare det oyeblikket for
	 * skriptet har regnet, og for den som har slatt av JavaScript — da
	 * finnes ikke widgeten i det hele tatt.
	 */
	max-height: var(--royx-ang-tak, 60vh);
	overflow-y: auto;
	/* Na ligger det over noe igjen, og skal loftes fra det. */
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
}

/* Merket skal ikke sprette i bunnteksten slik det gjør i hjørnet. */
.royx-ang--bunn .royx-ang__btn:hover {
	transform: none;
}

/* ------------------------------------------------------------------ merket */

.royx-ang .royx-ang__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius, 10px);
	background: #1c2128;
	color: #e8eaed;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transition: transform 0.15s ease, border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: normal;
}

.royx-ang .royx-ang__btn:hover {
	transform: translateY(-1px);
	border-color: rgba(249, 115, 22, 0.55);
}

.royx-ang .royx-ang__btn:focus-visible {
	outline: var(--royx-focus, 3px solid #f97316);
	outline-offset: 2px;
}

/* Pulsen. Den sier «dette er levende tall» uten å kreve en forklaring. */
.royx-ang__prikk {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #f97316;
	flex: none;
	animation: royx-ang-puls 2.6s ease-in-out infinite;
}

@keyframes royx-ang-puls {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

.royx-ang__tall {
	font-variant-numeric: tabular-nums;
	color: #f97316;
}

/* ------------------------------------------------------------------ panelet */

.royx-ang__panel {
	width: 20.5rem;
	max-width: calc(100vw - 2rem);
	padding: 0.95rem 1.05rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius, 12px);
	background: #1c2128;
	color: #e8eaed;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.42);
	font-size: 0.8125rem;

	/* Panelet vokser nedenfra og oppover. Uten et tak gar toppen ut av
	   vinduet — det skjedde med en gang: pa 860 piksler hoyde la toppen
	   pa -19px, sa overskriften var klippet bort. Taket er vinduet minus
	   merket og litt luft; blir det likevel for lite, far panelet rulle. */
	max-height: calc(100vh - 5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* Står telleren høyere for å gå klar av temaets knapp, er det tilsvarende
   mindre plass igjen over den. */
.royx-ang--viker .royx-ang__panel {
	max-height: calc(100vh - var(--royx-ang-bunn, 1rem) - 4rem);
}

.royx-ang__panel[hidden] {
	display: none;
}

.royx-ang__tittel {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.15rem 0.5rem;
	margin: 0 0 0.1rem;
	/* Lukkekrysset ligger absolutt plassert oppe til hoyre. Uten denne
	   luften havner klokkeslettet under det, og «kl. 09:01» leses «kl. 0». */
	padding-right: 1.3rem;
	font-family: var(--font-head, inherit);
	font-size: 0.9375rem;
	font-weight: 700;
	color: #fff;
}

.royx-ang__naar {
	font-size: 0.6875rem;
	font-weight: 400;
	color: #9aa3ae;
	white-space: nowrap;
}

.royx-ang__ingress {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	color: #9aa3ae;
}

/* Tallrutene */
/* Tre tall, ikke fire. I et 2x2-rutenett ville det tredje blitt staende
   alene med et tomt felt ved siden av, sa de ligger pa hver sin linje.
   Tallkolonnen har fast bredde og star hoyrestilt, slik at sifrene faller
   i flukt nedover — det er det som gjor en kolonne med tall lesbar. */
.royx-ang__rutenett {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.3rem;
	margin-bottom: 0.8rem;
}

.royx-ang__rute {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.42rem 0.6rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
}

.royx-ang__rute b {
	flex: none;
	min-width: 3.5rem;
	text-align: right;
	font-family: var(--font-head, inherit);
	font-size: 1.2rem;
	font-weight: 700;
	color: #f97316;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.royx-ang__rute span {
	font-size: 0.6875rem;
	color: #9aa3ae;
}

/* Lister */
.royx-ang__bolk {
	margin: 0 0 0.7rem;
}

.royx-ang__bolk h4 {
	margin: 0 0 0.3rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #f97316;
}

.royx-ang__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.royx-ang__liste li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.14rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.royx-ang__liste li:last-child {
	border-bottom: 0;
}

.royx-ang__liste code {
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
	font-size: 0.75rem;
	color: #e8eaed;
	background: none;
	padding: 0;
	overflow-wrap: anywhere;
}

.royx-ang__liste .royx-ang__c {
	color: #9aa3ae;
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* Strømmen av siste forsøk */
.royx-ang__strom li {
	display: grid;
	grid-template-columns: 2.9rem 1fr;
	gap: 0.5rem;
	align-items: baseline;
}

.royx-ang__strom time {
	color: #9aa3ae;
	font-variant-numeric: tabular-nums;
	font-size: 0.7rem;
}

.royx-ang__strom .royx-ang__hva {
	overflow-wrap: anywhere;
	color: #c8ccd2;
	font-size: 0.72rem;
}

.royx-ang__strom .royx-ang__hva code {
	font-size: 0.7rem;
	color: #f0a06a;
}

.royx-ang__fot {
	margin: 0.6rem 0 0;
	padding-top: 0.55rem;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-size: 0.6875rem;
	color: #868e99;
}

.royx-ang .royx-ang__lukk {
	position: absolute;
	top: 0.45rem;
	right: 0.5rem;
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	/* Alt dette maa staa. Temaet gir hver <button> fyllfarge, ramme,
	   polstring og egen skriftstoerrelse; nevner ikke denne regelen dem,
	   slaar temaets verdier gjennom, og krysset blir en svart klump. */
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	box-shadow: none;
	color: #9aa3ae;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
}

.royx-ang .royx-ang__lukk:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.royx-ang .royx-ang__lukk:focus-visible {
	outline: var(--royx-focus, 3px solid #f97316);
	outline-offset: 1px;
}

.royx-ang__panel {
	position: relative;
}

/* ------------------------------------------------------------------ lys modus */

body.light-mode .royx-ang .royx-ang__btn,
body.light-mode .royx-ang .royx-ang__panel {
	background: #fff;
	color: #1a1d23;
	border-color: rgba(0, 0, 0, 0.13);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

body.light-mode .royx-ang__tittel {
	color: #1a1d23;
}

body.light-mode .royx-ang__naar,
body.light-mode .royx-ang__ingress,
body.light-mode .royx-ang__rute span,
body.light-mode .royx-ang__liste .royx-ang__c,
body.light-mode .royx-ang__strom time,
body.light-mode .royx-ang__fot,
body.light-mode .royx-ang .royx-ang__lukk {
	color: #5c6470;
}

body.light-mode .royx-ang__rute {
	background: #f2f4f7;
}

body.light-mode .royx-ang__rute b,
body.light-mode .royx-ang__bolk h4,
body.light-mode .royx-ang__prikk,
body.light-mode .royx-ang__tall {
	color: #c2410c;
}

body.light-mode .royx-ang__prikk {
	background: #c2410c;
}

body.light-mode .royx-ang__liste code,
body.light-mode .royx-ang__strom .royx-ang__hva {
	color: #1a1d23;
}

body.light-mode .royx-ang__strom .royx-ang__hva code {
	color: #9a3412;
}

body.light-mode .royx-ang__liste li {
	border-bottom-color: rgba(0, 0, 0, 0.07);
}

body.light-mode .royx-ang__fot {
	border-top-color: rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------------------------ smalt */

@media (max-width: 480px) {
	.royx-ang {
		right: 0.75rem;
		/* Også her må variabelen få styre. Sto det en fast verdi, ville den
		   overstyre det JavaScript regner ut — mediaspørringen kommer sist i
		   fila og vinner på lik spesifisitet — og telleren ville stå der den
		   tilfeldigvis gikk klar, ikke der den er regnet ut til å gå klar. */
		bottom: var(--royx-ang-bunn, 0.75rem);
	}

	.royx-ang .royx-ang__btn {
		padding: 0.42rem 0.65rem;
		font-size: 0.75rem;
	}

	.royx-ang__panel {
		width: calc(100vw - 1.5rem);
		font-size: 0.78125rem;
	}
}

/* Under dette er det ikke plass til noe som ikke er artikkelen. */
/* Svært lave vinduer: her er det ikke plass til noe som helst i hjørnet.
   Grensen lå på 420px, men det rammet vanlig sidezoom — på en 768px skjerm
   er 175 % zoom nok til å komme under — og da forsvant telleren uten at noen
   skjønte hvorfor. 320px er ekte landskapstelefon. */
@media (max-height: 320px) {
	/* Gjelder bare telleren som står fast i hjørnet. Står den i bunnteksten,
	   er vinduets høyde uten betydning — den ligger i flyten og dekker
	   ingenting. */
	.royx-ang:not(.royx-ang--bunn) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.royx-ang__prikk {
		animation: none;
	}

	.royx-ang .royx-ang__btn {
		transition: none;
	}

	.royx-ang .royx-ang__btn:hover {
		transform: none;
	}
}

@media print {
	.royx-ang {
		display: none;
	}
}

/* Rullefeltet i lys modus. Uten denne arver panelet den lyse tommelen fra
   mørk modus, og da er den nesten usynlig mot hvit bakgrunn. */
body.light-mode .royx-ang .royx-ang__panel {
	scrollbar-color: rgba(0, 0, 0, 0.26) transparent;
}